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}