[Upgrade Assistant] Add confirmation modal before migrating system indices (#200117)

x-pack/plugins/upgrade_assistant/__jest__/client_integration/overview/migrate_system_indices/migrate_system_indices.test.tsx

@@ -107,6 +107,38 @@ describe('Overview - Migrate system indices', () => {
       expect(exists('viewSystemIndicesStateButton')).toBe(true);
     });
 
+    test('handles confirmModal submission', async () => {
+      httpRequestsMockHelpers.setLoadSystemIndicesMigrationStatus({
+        migration_status: 'MIGRATION_NEEDED',
+      });
+
+      testBed = await setupOverviewPage(httpSetup);
+
+      const { exists, component, find } = testBed;
+
+      component.update();
+
+      expect(exists('startSystemIndicesMigrationButton')).toBe(true);
+      await act(async () => {
+        find('startSystemIndicesMigrationButton').simulate('click');
+      });
+      component.update();
+
+      expect(exists('migrationConfirmModal')).toBe(true);
+
+      const modal = document.body.querySelector('[data-test-subj="migrationConfirmModal"]');
+      const confirmButton: HTMLButtonElement | null = modal!.querySelector(
+        '[data-test-subj="confirmModalConfirmButton"]'
+      );
+
+      await act(async () => {
+        confirmButton!.click();
+      });
+      component.update();
+
+      expect(exists('migrationConfirmModal')).toBe(false);
+    });
+
     test('Handles errors when migrating', async () => {
       httpRequestsMockHelpers.setLoadSystemIndicesMigrationStatus({
         migration_status: 'MIGRATION_NEEDED',
@@ -126,6 +158,16 @@ describe('Overview - Migrate system indices', () => {
 
       component.update();
 
+      const modal = document.body.querySelector('[data-test-subj="migrationConfirmModal"]');
+      const confirmButton: HTMLButtonElement | null = modal!.querySelector(
+        '[data-test-subj="confirmModalConfirmButton"]'
+      );
+
+      await act(async () => {
+        confirmButton!.click();
+      });
+      component.update();
+
       // Error is displayed
       expect(exists('startSystemIndicesMigrationCalloutError')).toBe(true);
       // CTA is enabled

x-pack/plugins/upgrade_assistant/public/application/components/overview/migrate_system_indices/migrate_system_indices.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { FunctionComponent, useEffect } from 'react';
+import React, { FunctionComponent, useEffect, useState } from 'react';
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -20,6 +20,7 @@ import {
   EuiFlexItem,
   EuiCode,
   EuiLink,
+  EuiConfirmModal,
 } from '@elastic/eui';
 import type { EuiStepProps } from '@elastic/eui/src/components/steps/step';
 
@@ -123,10 +124,55 @@ const i18nTexts = {
   },
 };
 
+const ConfirmModal: React.FC<{
+  onCancel: () => void;
+  onConfirm: () => void;
+}> = ({ onCancel, onConfirm }) => (
+  <EuiConfirmModal
+    title={i18n.translate('xpack.upgradeAssistant.overview.systemIndices.confirmModal.title', {
+      defaultMessage: 'Migrate Indices',
+    })}
+    onCancel={onCancel}
+    onConfirm={onConfirm}
+    cancelButtonText={i18n.translate(
+      'xpack.upgradeAssistant.overview.systemIndices.confirmModal.cancelButton.label',
+      {
+        defaultMessage: 'Cancel',
+      }
+    )}
+    confirmButtonText={i18n.translate(
+      'xpack.upgradeAssistant.overview.systemIndices.confirmModal.confirmButton.label',
+      {
+        defaultMessage: 'Confirm',
+      }
+    )}
+    defaultFocusedButton="confirm"
+    data-test-subj="migrationConfirmModal"
+  >
+    {i18n.translate('xpack.upgradeAssistant.overview.systemIndices.confirmModal.description', {
+      defaultMessage: 'Migrating system indices may lead to downtime while they are reindexed.',
+    })}
+  </EuiConfirmModal>
+);
+
 const MigrateSystemIndicesStep: FunctionComponent<Props> = ({ setIsComplete }) => {
   const { beginSystemIndicesMigration, startMigrationStatus, migrationStatus, setShowFlyout } =
     useMigrateSystemIndices();
 
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  const openMigrationModal = () => {
+    setIsModalVisible(true);
+  };
+  const onCancel = () => {
+    setIsModalVisible(false);
+  };
+
+  const confirmMigrationAction = () => {
+    beginSystemIndicesMigration();
+    setIsModalVisible(false);
+  };
+
   useEffect(() => {
     setIsComplete(migrationStatus.data?.migration_status === 'NO_MIGRATION_NEEDED');
     // Depending upon setIsComplete would create an infinite loop.
@@ -206,12 +252,14 @@ const MigrateSystemIndicesStep: FunctionComponent<Props> = ({ setIsComplete }) =
         </>
       )}
 
+      {isModalVisible && <ConfirmModal onCancel={onCancel} onConfirm={confirmMigrationAction} />}
+
       <EuiFlexGroup alignItems="center" gutterSize="s">
         <EuiFlexItem grow={false}>
           <EuiButton
             isLoading={isMigrating}
             isDisabled={isButtonDisabled}
-            onClick={beginSystemIndicesMigration}
+            onClick={openMigrationModal}
             data-test-subj="startSystemIndicesMigrationButton"
           >
             {isMigrating ? i18nTexts.inProgressButtonLabel : i18nTexts.startButtonLabel}