update modal text and rename to uninstall

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

@@ -7,7 +7,7 @@ export { useLinks } from './use_links';
 export { useLocalSearch, searchIdField } from './use_local_search';
 export {
   PackageInstallProvider,
-  useDeletePackage,
+  useUninstallPackage,
   useGetPackageInstallStatus,
   useInstallPackage,
   useSetPackageInstallStatus,

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

@@ -6,8 +6,8 @@
 
 import createContainer from 'constate';
 import React, { useCallback, useState } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { NotificationsStart } from 'src/core/public';
-import { useLinks } from '.';
 import { toMountPoint } from '../../../../../../../../../src/plugins/kibana_react/public';
 import { PackageInfo } from '../../../types';
 import { sendInstallPackage, sendRemovePackage } from '../../../hooks';
@@ -25,7 +25,6 @@ type InstallPackageProps = Pick<PackageInfo, 'name' | 'version' | 'title'>;
 
 function usePackageInstall({ notifications }: { notifications: NotificationsStart }) {
   const [packages, setPackage] = useState<PackagesInstall>({});
-  const { toDetailView } = useLinks();
 
   const setPackageInstallStatus = useCallback(
     ({ name, status }: { name: PackageInfo['name']; status: InstallStatus }) => {
@@ -46,18 +45,39 @@ function usePackageInstall({ notifications }: { notifications: NotificationsStar
       if (res.error) {
         setPackageInstallStatus({ name, status: InstallStatus.notInstalled });
         notifications.toasts.addWarning({
-          title: `Failed to install ${title} package`,
-          text:
-            'Something went wrong while trying to install this package. Please try again later.',
+          title: toMountPoint(
+            <FormattedMessage
+              id="xpack.ingestManager.integrations.packageInstallErrorTitle"
+              defaultMessage="Failed to install {title} package"
+              values={{ title }}
+            />
+          ),
+          text: toMountPoint(
+            <FormattedMessage
+              id="xpack.ingestManager.integrations.packageInstallErrorDescription"
+              defaultMessage="Something went wrong while trying to install this package. Please try again later."
+            />
+          ),
           iconType: 'alert',
         });
       } else {
         setPackageInstallStatus({ name, status: InstallStatus.installed });
-        const SuccessMsg = <p>Successfully installed {name}</p>;
 
         notifications.toasts.addSuccess({
-          title: `Installed ${title} package`,
-          text: toMountPoint(SuccessMsg),
+          title: toMountPoint(
+            <FormattedMessage
+              id="xpack.ingestManager.integrations.packageInstallSuccessTitle"
+              defaultMessage="Installed {title}"
+              values={{ title }}
+            />
+          ),
+          text: toMountPoint(
+            <FormattedMessage
+              id="xpack.ingestManager.integrations.packageInstallSuccessDescription"
+              defaultMessage="Successfully installed {title}"
+              values={{ title }}
+            />
+          ),
         });
       }
     },
@@ -71,7 +91,7 @@ function usePackageInstall({ notifications }: { notifications: NotificationsStar
     [packages]
   );
 
-  const deletePackage = useCallback(
+  const uninstallPackage = useCallback(
     async ({ name, version, title }: Pick<PackageInfo, 'name' | 'version' | 'title'>) => {
       setPackageInstallStatus({ name, status: InstallStatus.uninstalling });
       const pkgkey = `${name}-${version}`;
@@ -80,17 +100,39 @@ function usePackageInstall({ notifications }: { notifications: NotificationsStar
       if (res.error) {
         setPackageInstallStatus({ name, status: InstallStatus.installed });
         notifications.toasts.addWarning({
-          title: `Failed to delete ${title} package`,
-          text: 'Something went wrong while trying to delete this package. Please try again later.',
+          title: toMountPoint(
+            <FormattedMessage
+              id="xpack.ingestManager.integrations.packageUninstallErrorTitle"
+              defaultMessage="Failed to uninstall {title} package"
+              values={{ title }}
+            />
+          ),
+          text: toMountPoint(
+            <FormattedMessage
+              id="xpack.ingestManager.integrations.packageUninstallErrorDescription"
+              defaultMessage="Something went wrong while trying to uninstall this package. Please try again later."
+            />
+          ),
           iconType: 'alert',
         });
       } else {
         setPackageInstallStatus({ name, status: InstallStatus.notInstalled });
-        const SuccessMsg = <p>Successfully deleted {title}</p>;
 
         notifications.toasts.addSuccess({
-          title: `Deleted ${title} package`,
-          text: toMountPoint(SuccessMsg),
+          title: toMountPoint(
+            <FormattedMessage
+              id="xpack.ingestManager.integrations.packageUninstallSuccessTitle"
+              defaultMessage="Uninstalled {title}"
+              values={{ title }}
+            />
+          ),
+          text: toMountPoint(
+            <FormattedMessage
+              id="xpack.ingestManager.integrations.packageUninstallSuccessDescription"
+              defaultMessage="Successfully uninstalled {title}"
+              values={{ title }}
+            />
+          ),
         });
       }
     },
@@ -102,7 +144,7 @@ function usePackageInstall({ notifications }: { notifications: NotificationsStar
     installPackage,
     setPackageInstallStatus,
     getPackageInstallStatus,
-    deletePackage,
+    uninstallPackage,
   };
 }
 
@@ -111,11 +153,11 @@ export const [
   useInstallPackage,
   useSetPackageInstallStatus,
   useGetPackageInstallStatus,
-  useDeletePackage,
+  useUninstallPackage,
 ] = createContainer(
   usePackageInstall,
   value => value.installPackage,
   value => value.setPackageInstallStatus,
   value => value.getPackageInstallStatus,
-  value => value.deletePackage
+  value => value.uninstallPackage
 );

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

@@ -5,6 +5,7 @@
  */
 import { EuiCallOut, EuiConfirmModal, EuiOverlayMask, EuiSpacer } from '@elastic/eui';
 import React from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 interface ConfirmPackageInstallProps {
   onCancel: () => void;
@@ -17,18 +18,46 @@ export const ConfirmPackageInstall = (props: ConfirmPackageInstallProps) => {
   return (
     <EuiOverlayMask>
       <EuiConfirmModal
-        title={`Install ${packageName}?`}
+        title={
+          <FormattedMessage
+            id="xpack.ingestManager.integrations.settings.confirmInstallModal.installTitle"
+            defaultMessage="Install {packageName}"
+            values={{ packageName }}
+          />
+        }
         onCancel={onCancel}
         onConfirm={onConfirm}
-        cancelButtonText="Cancel"
-        confirmButtonText="Install package"
+        cancelButtonText={
+          <FormattedMessage
+            id="xpack.ingestManager.integrations.settings.confirmInstallModal.cancelButtonLabel"
+            defaultMessage="Cancel"
+          />
+        }
+        confirmButtonText={
+          <FormattedMessage
+            id="xpack.ingestManager.integrations.settings.confirmInstallModal.installButtonLabel"
+            defaultMessage="Install {packageName}"
+            values={{ packageName }}
+          />
+        }
         defaultFocusedButton="confirm"
       >
-        <EuiCallOut title={`This package will install ${numOfAssets} assets.`} />
+        <EuiCallOut
+          iconType="iInCircle"
+          title={
+            <FormattedMessage
+              id="xpack.ingestManager.integrations.settings.confirmInstallModal.installCalloutTitle"
+              defaultMessage="This action will install {numOfAssets} assets"
+              values={{ numOfAssets }}
+            />
+          }
+        />
         <EuiSpacer size="l" />
         <p>
-          and will only be accessible to users who have permission to view this Space. Elasticsearch
-          assets are installed globally and will be accessible to all Kibana users.
+          <FormattedMessage
+            id="xpack.ingestManager.integrations.settings.confirmInstallModal.installDescription"
+            defaultMessage="Kibana assets will be installed in the current Space (Default) and will only be accessible to users who have permission to view this Space. Elasticsearch assets are installed globally and will be accessible to all Kibana users."
+          />
         </p>
       </EuiConfirmModal>
     </EuiOverlayMask>

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

@@ -0,0 +1,73 @@
+/*
+ * 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 { EuiCallOut, EuiConfirmModal, EuiOverlayMask, EuiSpacer } from '@elastic/eui';
+import React from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+interface ConfirmPackageUninstallProps {
+  onCancel: () => void;
+  onConfirm: () => void;
+  packageName: string;
+  numOfAssets: number;
+}
+export const ConfirmPackageUninstall = (props: ConfirmPackageUninstallProps) => {
+  const { onCancel, onConfirm, packageName, numOfAssets } = props;
+  return (
+    <EuiOverlayMask>
+      <EuiConfirmModal
+        title={
+          <FormattedMessage
+            id="xpack.ingestManager.integrations.settings.confirmUninstallModal.uninstallTitle"
+            defaultMessage="Uninstall {packageName}"
+            values={{ packageName }}
+          />
+        }
+        onCancel={onCancel}
+        onConfirm={onConfirm}
+        cancelButtonText={
+          <FormattedMessage
+            id="xpack.ingestManager.integrations.settings.confirmUninstallModal.cancelButtonLabel"
+            defaultMessage="Cancel"
+          />
+        }
+        confirmButtonText={
+          <FormattedMessage
+            id="xpack.ingestManager.integrations.settings.confirmUninstallModal.uninstallButtonLabel"
+            defaultMessage="Uninstall {packageName}"
+            values={{ packageName }}
+          />
+        }
+        defaultFocusedButton="confirm"
+        buttonColor="danger"
+      >
+        <EuiCallOut
+          color="danger"
+          title={
+            <FormattedMessage
+              id="xpack.ingestManager.integrations.settings.confirmUninstallModal.uninstallCallout.title"
+              defaultMessage="This action will remove {numOfAssets} assets"
+              values={{ numOfAssets }}
+            />
+          }
+        >
+          <p>
+            <FormattedMessage
+              id="xpack.ingestManager.integrations.settings.confirmUninstallModal.uninstallCallout.description"
+              defaultMessage="Kibana and Elasticsearch assets that were created by this Integration will be removed. Agents configurations and any data sent by your agents will not be effected."
+            />
+          </p>
+        </EuiCallOut>
+        <EuiSpacer size="l" />
+        <p>
+          <FormattedMessage
+            id="xpack.ingestManager.integrations.settings.confirmUninstallModal.uninstallDescription"
+            defaultMessage="This action cannot be undone. Are you sure you wish to continue?"
+          />
+        </p>
+      </EuiConfirmModal>
+    </EuiOverlayMask>
+  );
+};

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

@@ -8,8 +8,8 @@ import React, { Fragment, useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { PackageInfo, InstallStatus } from '../../../../types';
 import { useCapabilities } from '../../../../hooks';
-import { useDeletePackage, useGetPackageInstallStatus, useInstallPackage } from '../../hooks';
-import { ConfirmPackageDelete } from './confirm_package_delete';
+import { useUninstallPackage, useGetPackageInstallStatus, useInstallPackage } from '../../hooks';
+import { ConfirmPackageUninstall } from './confirm_package_uninstall';
 import { ConfirmPackageInstall } from './confirm_package_install';
 
 type InstallationButtonProps = Pick<PackageInfo, 'assets' | 'name' | 'title' | 'version'> & {
@@ -19,7 +19,7 @@ export function InstallationButton(props: InstallationButtonProps) {
   const { assets, name, title, version, disabled = true } = props;
   const hasWriteCapabilites = useCapabilities().write;
   const installPackage = useInstallPackage();
-  const deletePackage = useDeletePackage();
+  const uninstallPackage = useUninstallPackage();
   const getPackageInstallStatus = useGetPackageInstallStatus();
   const installationStatus = getPackageInstallStatus(name);
 
@@ -36,10 +36,10 @@ export function InstallationButton(props: InstallationButtonProps) {
     toggleModal();
   }, [installPackage, name, title, toggleModal, version]);
 
-  const handleClickDelete = useCallback(() => {
-    deletePackage({ name, version, title });
+  const handleClickUninstall = useCallback(() => {
+    uninstallPackage({ name, version, title });
     toggleModal();
-  }, [deletePackage, name, title, toggleModal, version]);
+  }, [uninstallPackage, name, title, toggleModal, version]);
 
   // counts the number of assets in the package
   const numOfAssets = useMemo(
@@ -107,14 +107,14 @@ export function InstallationButton(props: InstallationButtonProps) {
   );
 
   const uninstallModal = (
-    <ConfirmPackageDelete
+    <ConfirmPackageUninstall
       // this is number of which would be installed
       // deleted includes ingest-pipelines etc so could be larger
       // not sure how to do this at the moment so using same value
       numOfAssets={numOfAssets}
       packageName={title}
       onCancel={toggleModal}
-      onConfirm={handleClickDelete}
+      onConfirm={handleClickUninstall}
     />
   );