[EPM] Update UI to handle package versions and updates (elastic#64689) (elastic#64819)

* link to installed version of detail page

* add latestVersion property to EPM get package endpoint

* add updates available notices

* add update package button

* handle various states and send installedVersion from package endpoint

* fix type errors

* fix install error because not returning promises

* track version in state

* handle unsuccessful update attempt

* remove unused variable

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Author: neptunian

x-pack/plugins/ingest_manager/common/services/package_to_config.test.ts

@@ -11,6 +11,7 @@ describe('Ingest Manager - packageToConfig', () => {
     name: 'mock-package',
     title: 'Mock package',
     version: '0.0.0',
+    latestVersion: '0.0.0',
     description: 'description',
     type: 'mock',
     categories: [],

x-pack/plugins/ingest_manager/common/types/models/epm.ts

@@ -204,6 +204,8 @@ export interface RegistryVarsEntry {
 // internal until we need them
 interface PackageAdditions {
   title: string;
+  latestVersion: string;
+  installedVersion?: string;
   assets: AssetsGroupedByServiceByType;
 }
 

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/icons.tsx

@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { EuiIcon } from '@elastic/eui';
+import React from 'react';
+import styled from 'styled-components';
+
+export const StyledAlert = styled(EuiIcon)`
+  color: ${props => props.theme.eui.euiColorWarning};
+  padding: 0 5px;
+`;
+
+export const UpdateIcon = () => <StyledAlert type="alert" size="l" />;

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/components/package_card.tsx

@@ -30,9 +30,15 @@ export function PackageCard({
   showInstalledBadge,
   status,
   icons,
+  ...restProps
 }: PackageCardProps) {
   const { toDetailView } = useLinks();
-  const url = toDetailView({ name, version });
+  let urlVersion = version;
+  // if this is an installed package, link to the version installed
+  if ('savedObject' in restProps) {
+    urlVersion = restProps.savedObject.attributes.version || version;
+  }
+  const url = toDetailView({ name, version: urlVersion });
 
   return (
     <Card

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/hooks/use_package_install.tsx

@@ -11,6 +11,7 @@ import { NotificationsStart } from 'src/core/public';
 import { toMountPoint } from '../../../../../../../../../src/plugins/kibana_react/public';
 import { PackageInfo } from '../../../types';
 import { sendInstallPackage, sendRemovePackage } from '../../../hooks';
+import { useLinks } from '.';
 import { InstallStatus } from '../../../types';
 
 interface PackagesInstall {
@@ -19,31 +20,55 @@ interface PackagesInstall {
 
 interface PackageInstallItem {
   status: InstallStatus;
+  version: string | null;
 }
 
-type InstallPackageProps = Pick<PackageInfo, 'name' | 'version' | 'title'>;
+type InstallPackageProps = Pick<PackageInfo, 'name' | 'version' | 'title'> & {
+  fromUpdate?: boolean;
+};
+type SetPackageInstallStatusProps = Pick<PackageInfo, 'name'> & PackageInstallItem;
 
 function usePackageInstall({ notifications }: { notifications: NotificationsStart }) {
+  const { toDetailView } = useLinks();
   const [packages, setPackage] = useState<PackagesInstall>({});
 
   const setPackageInstallStatus = useCallback(
-    ({ name, status }: { name: PackageInfo['name']; status: InstallStatus }) => {
+    ({ name, status, version }: SetPackageInstallStatusProps) => {
+      const packageProps: PackageInstallItem = {
+        status,
+        version,
+      };
       setPackage((prev: PackagesInstall) => ({
         ...prev,
-        [name]: { status },
+        [name]: packageProps,
       }));
     },
     []
   );
 
+  const getPackageInstallStatus = useCallback(
+    (pkg: string): PackageInstallItem => {
+      return packages[pkg];
+    },
+    [packages]
+  );
+
   const installPackage = useCallback(
-    async ({ name, version, title }: InstallPackageProps) => {
-      setPackageInstallStatus({ name, status: InstallStatus.installing });
+    async ({ name, version, title, fromUpdate = false }: InstallPackageProps) => {
+      const currStatus = getPackageInstallStatus(name);
+      const newStatus = { ...currStatus, name, status: InstallStatus.installing };
+      setPackageInstallStatus(newStatus);
       const pkgkey = `${name}-${version}`;
 
       const res = await sendInstallPackage(pkgkey);
       if (res.error) {
-        setPackageInstallStatus({ name, status: InstallStatus.notInstalled });
+        if (fromUpdate) {
+          // if there is an error during update, set it back to the previous version
+          // as handling of bad update is not implemented yet
+          setPackageInstallStatus({ ...currStatus, name });
+        } else {
+          setPackageInstallStatus({ name, status: InstallStatus.notInstalled, version });
+        }
         notifications.toasts.addWarning({
           title: toMountPoint(
             <FormattedMessage
@@ -61,8 +86,15 @@ function usePackageInstall({ notifications }: { notifications: NotificationsStar
           iconType: 'alert',
         });
       } else {
-        setPackageInstallStatus({ name, status: InstallStatus.installed });
-
+        setPackageInstallStatus({ name, status: InstallStatus.installed, version });
+        if (fromUpdate) {
+          const settingsUrl = toDetailView({
+            name,
+            version,
+            panel: 'settings',
+          });
+          window.location.href = settingsUrl;
+        }
         notifications.toasts.addSuccess({
           title: toMountPoint(
             <FormattedMessage
@@ -81,24 +113,17 @@ function usePackageInstall({ notifications }: { notifications: NotificationsStar
         });
       }
     },
-    [notifications.toasts, setPackageInstallStatus]
-  );
-
-  const getPackageInstallStatus = useCallback(
-    (pkg: string): InstallStatus => {
-      return packages[pkg].status;
-    },
-    [packages]
+    [getPackageInstallStatus, notifications.toasts, setPackageInstallStatus, toDetailView]
   );
 
   const uninstallPackage = useCallback(
     async ({ name, version, title }: Pick<PackageInfo, 'name' | 'version' | 'title'>) => {
-      setPackageInstallStatus({ name, status: InstallStatus.uninstalling });
+      setPackageInstallStatus({ name, status: InstallStatus.uninstalling, version });
       const pkgkey = `${name}-${version}`;
 
       const res = await sendRemovePackage(pkgkey);
       if (res.error) {
-        setPackageInstallStatus({ name, status: InstallStatus.installed });
+        setPackageInstallStatus({ name, status: InstallStatus.installed, version });
         notifications.toasts.addWarning({
           title: toMountPoint(
             <FormattedMessage
@@ -116,7 +141,7 @@ function usePackageInstall({ notifications }: { notifications: NotificationsStar
           iconType: 'alert',
         });
       } else {
-        setPackageInstallStatus({ name, status: InstallStatus.notInstalled });
+        setPackageInstallStatus({ name, status: InstallStatus.notInstalled, version: null });
 
         notifications.toasts.addSuccess({
           title: toMountPoint(

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/detail/content.tsx

@@ -50,7 +50,7 @@ export function Content(props: ContentProps) {
 
 type ContentPanelProps = PackageInfo & Pick<DetailParams, 'panel'>;
 export function ContentPanel(props: ContentPanelProps) {
-  const { panel, name, version, assets, title, removable } = props;
+  const { panel, name, version, assets, title, removable, latestVersion } = props;
   switch (panel) {
     case 'settings':
       return (
@@ -60,6 +60,7 @@ export function ContentPanel(props: ContentPanelProps) {
           assets={assets}
           title={title}
           removable={removable}
+          latestVersion={latestVersion}
         />
       );
     case 'data-sources':

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/detail/data_sources_panel.tsx

@@ -20,7 +20,7 @@ export const DataSourcesPanel = ({ name, version }: DataSourcesPanelProps) => {
   const packageInstallStatus = getPackageInstallStatus(name);
   // if they arrive at this page and the package is not installed, send them to overview
   // this happens if they arrive with a direct url or they uninstall while on this tab
-  if (packageInstallStatus !== InstallStatus.installed)
+  if (packageInstallStatus.status !== InstallStatus.installed)
     return (
       <Redirect
         to={toDetailView({

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/detail/header.tsx

@@ -13,9 +13,9 @@ import { EPM_PATH } from '../../../../constants';
 import { useCapabilities, useLink } from '../../../../hooks';
 import { IconPanel } from '../../components/icon_panel';
 import { NavButtonBack } from '../../components/nav_button_back';
-import { Version } from '../../components/version';
 import { useLinks } from '../../hooks';
 import { CenterColumn, LeftColumn, RightColumn } from './layout';
+import { UpdateIcon } from '../../components/icons';
 
 const FullWidthNavRow = styled(EuiPage)`
   /* no left padding so link is against column left edge  */
@@ -26,19 +26,14 @@ const Text = styled.span`
   margin-right: ${props => props.theme.eui.euiSizeM};
 `;
 
-const StyledVersion = styled(Version)`
-  font-size: ${props => props.theme.eui.euiFontSizeS};
-  color: ${props => props.theme.eui.euiColorDarkShade};
-`;
-
 type HeaderProps = PackageInfo & { iconType?: IconType };
 
 export function Header(props: HeaderProps) {
-  const { iconType, name, title, version } = props;
+  const { iconType, name, title, version, installedVersion, latestVersion } = props;
   const hasWriteCapabilites = useCapabilities().write;
   const { toListView } = useLinks();
   const ADD_DATASOURCE_URI = useLink(`${EPM_PATH}/${name}-${version}/add-datasource`);
-
+  const updateAvailable = installedVersion && installedVersion < latestVersion ? true : false;
   return (
     <Fragment>
       <FullWidthNavRow>
@@ -59,7 +54,11 @@ export function Header(props: HeaderProps) {
           <EuiTitle size="l">
             <h1>
               <Text>{title}</Text>
-              <StyledVersion version={version} />
+              <EuiTitle size="xs">
+                <span>
+                  {version} {updateAvailable && <UpdateIcon />}
+                </span>
+              </EuiTitle>
             </h1>
           </EuiTitle>
         </CenterColumn>

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/detail/index.tsx

@@ -32,11 +32,12 @@ export function Detail() {
       const packageInfo = response.data?.response;
       const title = packageInfo?.title;
       const name = packageInfo?.name;
+      const installedVersion = packageInfo?.installedVersion;
       const status: InstallStatus = packageInfo?.status as any;
 
       // track install status state
       if (name) {
-        setPackageInstallStatus({ name, status });
+        setPackageInstallStatus({ name, status, version: installedVersion || null });
       }
       if (packageInfo) {
         setInfo({ ...packageInfo, title: title || '' });
@@ -64,7 +65,6 @@ type LayoutProps = PackageInfo & Pick<DetailParams, 'panel'> & Pick<EuiPageProps
 export function DetailLayout(props: LayoutProps) {
   const { name: packageName, version, icons, restrictWidth } = props;
   const iconType = usePackageIconType({ packageName, version, icons });
-
   return (
     <Fragment>
       <FullWidthHeader>

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/detail/installation_button.tsx

@@ -13,19 +13,21 @@ import { ConfirmPackageUninstall } from './confirm_package_uninstall';
 import { ConfirmPackageInstall } from './confirm_package_install';
 
 type InstallationButtonProps = Pick<PackageInfo, 'assets' | 'name' | 'title' | 'version'> & {
-  disabled: boolean;
+  disabled?: boolean;
+  isUpdate?: boolean;
 };
 export function InstallationButton(props: InstallationButtonProps) {
-  const { assets, name, title, version, disabled = true } = props;
+  const { assets, name, title, version, disabled = true, isUpdate = false } = props;
   const hasWriteCapabilites = useCapabilities().write;
   const installPackage = useInstallPackage();
   const uninstallPackage = useUninstallPackage();
   const getPackageInstallStatus = useGetPackageInstallStatus();
-  const installationStatus = getPackageInstallStatus(name);
+  const { status: installationStatus } = getPackageInstallStatus(name);
 
   const isInstalling = installationStatus === InstallStatus.installing;
   const isRemoving = installationStatus === InstallStatus.uninstalling;
   const isInstalled = installationStatus === InstallStatus.installed;
+  const showUninstallButton = isInstalled || isRemoving;
   const [isModalVisible, setModalVisible] = useState<boolean>(false);
   const toggleModal = useCallback(() => {
     setModalVisible(!isModalVisible);
@@ -36,6 +38,10 @@ export function InstallationButton(props: InstallationButtonProps) {
     toggleModal();
   }, [installPackage, name, title, toggleModal, version]);
 
+  const handleClickUpdate = useCallback(() => {
+    installPackage({ name, version, title, fromUpdate: true });
+  }, [installPackage, name, title, version]);
+
   const handleClickUninstall = useCallback(() => {
     uninstallPackage({ name, version, title });
     toggleModal();
@@ -78,6 +84,15 @@ export function InstallationButton(props: InstallationButtonProps) {
     </EuiButton>
   );
 
+  const updateButton = (
+    <EuiButton iconType={'refresh'} isLoading={isInstalling} onClick={handleClickUpdate}>
+      <FormattedMessage
+        id="xpack.ingestManager.integrations.updatePackage.updatePackageButtonLabel"
+        defaultMessage="Update to latest version"
+      />
+    </EuiButton>
+  );
+
   const uninstallButton = (
     <EuiButton
       iconType={'trash'}
@@ -129,7 +144,7 @@ export function InstallationButton(props: InstallationButtonProps) {
 
   return hasWriteCapabilites ? (
     <Fragment>
-      {isInstalled || isRemoving ? uninstallButton : installButton}
+      {isUpdate ? updateButton : showUninstallButton ? uninstallButton : installButton}
       {isModalVisible && (isInstalled ? uninstallModal : installModal)}
     </Fragment>
   ) : null;