[UA] Add migrate system indices CTA to flyout

x-pack/platform/plugins/private/upgrade_assistant/__jest__/client_integration/overview/migrate_system_indices/flyout.test.ts

@@ -40,6 +40,60 @@ describe('Overview - Migrate system indices - Flyout', () => {
     expect(tableCellsValues).toMatchSnapshot();
   });
 
+  test('can trigger the migration', async () => {
+    const { exists, find, component } = testBed;
+
+    // Expect the migration button to be present
+    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('disables migrate button when migrating', async () => {
+    httpRequestsMockHelpers.setLoadSystemIndicesMigrationStatus({
+      migration_status: 'IN_PROGRESS',
+    });
+
+    testBed = await setupOverviewPage(httpSetup);
+
+    const { find, component } = testBed;
+
+    component.update();
+
+    expect(find('startSystemIndicesMigrationButton').props().disabled).toBe(true);
+  });
+
+  test('hides the start migration button when finished', async () => {
+    httpRequestsMockHelpers.setLoadSystemIndicesMigrationStatus({
+      migration_status: 'NO_MIGRATION_NEEDED',
+    });
+
+    testBed = await setupOverviewPage(httpSetup);
+
+    const { exists, component } = testBed;
+
+    component.update();
+
+    expect(exists('startSystemIndicesMigrationButton')).toBe(false);
+  });
+
   test('shows migration errors inline within the table row', async () => {
     httpRequestsMockHelpers.setLoadSystemIndicesMigrationStatus(systemIndicesMigrationErrorStatus);
 

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

@@ -26,17 +26,23 @@ import {
   EuiDescriptionList,
   EuiScreenReaderOnly,
   EuiBasicTableColumn,
+  EuiCallOut,
 } from '@elastic/eui';
 
 import {
   SystemIndicesMigrationStatus,
   SystemIndicesMigrationFeature,
   MIGRATION_STATUS,
 } from '../../../../../common/types';
+import { MigrateSystemIndicesButton } from './migrate_button';
 
 export interface SystemIndicesFlyoutProps {
   closeFlyout: () => void;
   data: SystemIndicesMigrationStatus;
+  beginSystemIndicesMigration: () => void;
+  isInitialRequest: boolean;
+  isLoading: boolean;
+  migrationStatus?: MIGRATION_STATUS;
 }
 
 const i18nTexts = {
@@ -98,6 +104,12 @@ const i18nTexts = {
       defaultMessage: 'Unknown error',
     }
   ),
+  migrationNotNeeded: i18n.translate(
+    'xpack.upgradeAssistant.overview.systemIndices.migrationNotNeeded',
+    {
+      defaultMessage: 'Systems indices migration not needed',
+    }
+  ),
 };
 
 const getFailedIndices = (feature: SystemIndicesMigrationFeature) => {
@@ -166,7 +178,14 @@ const renderMigrationStatus = (status: MIGRATION_STATUS) => {
   return null;
 };
 
-export const SystemIndicesFlyout = ({ closeFlyout, data }: SystemIndicesFlyoutProps) => {
+export const SystemIndicesFlyout = ({
+  closeFlyout,
+  data,
+  beginSystemIndicesMigration,
+  isInitialRequest,
+  isLoading,
+  migrationStatus,
+}: SystemIndicesFlyoutProps) => {
   const [expandedRows, setExpandedRows] = useState<Record<string, ReactNode>>({});
 
   const toggleRow = (feature: SystemIndicesMigrationFeature) => {
@@ -235,19 +254,32 @@ export const SystemIndicesFlyout = ({ closeFlyout, data }: SystemIndicesFlyoutPr
         </EuiTitle>
       </EuiFlyoutHeader>
       <EuiFlyoutBody data-test-subj="flyoutDetails">
-        <EuiText>
-          <p>{i18nTexts.flyoutDescription}</p>
-        </EuiText>
-        <EuiSpacer size="l" />
-        <EuiInMemoryTable<SystemIndicesMigrationFeature>
-          data-test-subj="featuresTable"
-          itemId="feature_name"
-          items={data.features}
-          columns={columns}
-          itemIdToExpandedRowMap={expandedRows}
-          pagination={true}
-          sorting={true}
-        />
+        {migrationStatus === 'NO_MIGRATION_NEEDED' && (
+          <EuiCallOut
+            title={i18nTexts.migrationNotNeeded}
+            iconType="cheer"
+            color="success"
+            data-test-subj="noMigrationNeededCallout"
+          />
+        )}
+
+        {migrationStatus !== 'NO_MIGRATION_NEEDED' && (
+          <>
+            <EuiText>
+              <p>{i18nTexts.flyoutDescription}</p>
+            </EuiText>
+            <EuiSpacer size="l" />
+            <EuiInMemoryTable<SystemIndicesMigrationFeature>
+              data-test-subj="featuresTable"
+              itemId="feature_name"
+              items={data.features}
+              columns={columns}
+              itemIdToExpandedRowMap={expandedRows}
+              pagination={true}
+              sorting={true}
+            />
+          </>
+        )}
       </EuiFlyoutBody>
       <EuiFlyoutFooter>
         <EuiFlexGroup justifyContent="spaceBetween">
@@ -256,6 +288,18 @@ export const SystemIndicesFlyout = ({ closeFlyout, data }: SystemIndicesFlyoutPr
               {i18nTexts.closeButtonLabel}
             </EuiButtonEmpty>
           </EuiFlexItem>
+
+          {migrationStatus !== 'NO_MIGRATION_NEEDED' && (
+            <EuiFlexItem grow={false}>
+              <MigrateSystemIndicesButton
+                buttonProps={{ fill: true }}
+                beginSystemIndicesMigration={beginSystemIndicesMigration}
+                isInitialRequest={isInitialRequest}
+                isLoading={isLoading}
+                isMigrating={migrationStatus === 'IN_PROGRESS'}
+              />
+            </EuiFlexItem>
+          )}
         </EuiFlexGroup>
       </EuiFlyoutFooter>
     </>

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

@@ -0,0 +1,99 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useState } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiButton, EuiConfirmModal, EuiButtonProps } from '@elastic/eui';
+
+const i18nTexts = {
+  inProgressButtonLabel: i18n.translate(
+    'xpack.upgradeAssistant.overview.systemIndices.inProgressButtonLabel',
+    {
+      defaultMessage: 'Migration in progress',
+    }
+  ),
+  startButtonLabel: i18n.translate(
+    'xpack.upgradeAssistant.overview.systemIndices.startButtonLabel',
+    {
+      defaultMessage: 'Migrate indices',
+    }
+  ),
+  modalTitle: i18n.translate('xpack.upgradeAssistant.overview.systemIndices.confirmModal.title', {
+    defaultMessage: 'Migrate Indices',
+  }),
+  modalButtonCancel: i18n.translate(
+    'xpack.upgradeAssistant.overview.systemIndices.confirmModal.cancelButton.label',
+    {
+      defaultMessage: 'Cancel',
+    }
+  ),
+  modalButtonConfirm: i18n.translate(
+    'xpack.upgradeAssistant.overview.systemIndices.confirmModal.confirmButton.label',
+    {
+      defaultMessage: 'Confirm',
+    }
+  ),
+  modalButtonDescription: i18n.translate(
+    'xpack.upgradeAssistant.overview.systemIndices.confirmModal.description',
+    {
+      defaultMessage: 'Migrating system indices may lead to downtime while they are reindexed.',
+    }
+  ),
+};
+
+interface MigrateButtonProps {
+  buttonProps?: EuiButtonProps;
+  beginSystemIndicesMigration: () => void;
+  isInitialRequest: boolean;
+  isLoading: boolean;
+  isMigrating: boolean;
+}
+
+export const MigrateSystemIndicesButton = ({
+  buttonProps,
+  beginSystemIndicesMigration,
+  isInitialRequest,
+  isLoading,
+  isMigrating,
+}: MigrateButtonProps) => {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  const isButtonDisabled = isInitialRequest && isLoading;
+
+  const handleConfirmMigration = () => {
+    beginSystemIndicesMigration();
+    setIsModalVisible(false);
+  };
+
+  return (
+    <>
+      <EuiButton
+        {...buttonProps}
+        isLoading={isMigrating}
+        isDisabled={isButtonDisabled}
+        onClick={() => setIsModalVisible(true)}
+        data-test-subj="startSystemIndicesMigrationButton"
+      >
+        {isMigrating ? i18nTexts.inProgressButtonLabel : i18nTexts.startButtonLabel}
+      </EuiButton>
+
+      {isModalVisible && (
+        <EuiConfirmModal
+          title={i18nTexts.modalTitle}
+          onCancel={() => setIsModalVisible(false)}
+          onConfirm={handleConfirmMigration}
+          cancelButtonText={i18nTexts.modalButtonCancel}
+          confirmButtonText={i18nTexts.modalButtonConfirm}
+          defaultFocusedButton="confirm"
+          data-test-subj="migrationConfirmModal"
+        >
+          {i18nTexts.modalButtonDescription}
+        </EuiConfirmModal>
+      )}
+    </>
+  );
+};