diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/overview/migrate_system_indices/migrate_system_indices.test.tsx b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/overview/migrate_system_indices/migrate_system_indices.test.tsx
index ae3e184f9c96b..eee988e2ebb13 100644
--- a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/overview/migrate_system_indices/migrate_system_indices.test.tsx
+++ b/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
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/overview/migrate_system_indices/migrate_system_indices.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/overview/migrate_system_indices/migrate_system_indices.tsx
index 47ca25bda31ac..3d2599e26bde2 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/overview/migrate_system_indices/migrate_system_indices.tsx
+++ b/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 }) => (
+
+ {i18n.translate('xpack.upgradeAssistant.overview.systemIndices.confirmModal.description', {
+ defaultMessage: 'Migrating system indices may lead to downtime while they are reindexed.',
+ })}
+
+);
+
const MigrateSystemIndicesStep: FunctionComponent = ({ 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 = ({ setIsComplete }) =
>
)}
+ {isModalVisible && }
+
{isMigrating ? i18nTexts.inProgressButtonLabel : i18nTexts.startButtonLabel}