From 16970486a773a25081372be46b97381f06b5e4a7 Mon Sep 17 00:00:00 2001 From: regexowl Date: Wed, 8 May 2024 12:10:35 +0200 Subject: [PATCH 1/5] V2Wizard: Add blueprint name and description to the Review step --- .../CreateImageWizardV2/steps/Review/index.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/Components/CreateImageWizardV2/steps/Review/index.tsx b/src/Components/CreateImageWizardV2/steps/Review/index.tsx index 56b977a01..f70ce01f5 100644 --- a/src/Components/CreateImageWizardV2/steps/Review/index.tsx +++ b/src/Components/CreateImageWizardV2/steps/Review/index.tsx @@ -1,19 +1,29 @@ import React from 'react'; -import { Form, Title } from '@patternfly/react-core'; +import { Form, Text, Title } from '@patternfly/react-core'; import Review from './ReviewStep'; +import { useAppSelector } from '../../../../store/hooks'; +import { + selectBlueprintDescription, + selectBlueprintName, +} from '../../../../store/wizardSlice'; + const ReviewStep = ({ snapshottingEnabled, }: { snapshottingEnabled: boolean; }) => { + const blueprintName = useAppSelector(selectBlueprintName); + const blueprintDescription = useAppSelector(selectBlueprintDescription); + return (
- Review + Review {blueprintName} blueprint + {blueprintDescription && {blueprintDescription}} {/* Intentional prop drilling for simplicity - To be removed */} From 62a266dae521de74a2f817aea829a0aa342b4e84 Mon Sep 17 00:00:00 2001 From: regexowl Date: Wed, 8 May 2024 13:06:57 +0200 Subject: [PATCH 2/5] V2Wizard: Make expandables open and add Revisit button This makes all expandables be open by default and adds a Revisit button to each of the expandable headers. --- .../steps/Review/ReviewStep.tsx | 125 +++++++++++++++--- 1 file changed, 109 insertions(+), 16 deletions(-) diff --git a/src/Components/CreateImageWizardV2/steps/Review/ReviewStep.tsx b/src/Components/CreateImageWizardV2/steps/Review/ReviewStep.tsx index 28dc72a6f..e937c3234 100644 --- a/src/Components/CreateImageWizardV2/steps/Review/ReviewStep.tsx +++ b/src/Components/CreateImageWizardV2/steps/Review/ReviewStep.tsx @@ -1,11 +1,14 @@ import React, { useState } from 'react'; import { + Button, ExpandableSection, Text, TextContent, TextVariants, + useWizardContext, } from '@patternfly/react-core'; +import { ArrowRightIcon } from '@patternfly/react-icons'; import { ContentList, @@ -36,6 +39,8 @@ import { import useBetaFlag from '../../../../Utilities/useBetaFlag'; const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => { + const { goToStepById } = useWizardContext(); + const blueprintName = useAppSelector(selectBlueprintName); const blueprintDescription = useAppSelector(selectBlueprintDescription); const distribution = useAppSelector(selectDistribution); @@ -43,14 +48,14 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => { const oscapProfile = useAppSelector(selectProfile); const registrationType = useAppSelector(selectRegistrationType); - const [isExpandedImageOutput, setIsExpandedImageOutput] = useState(false); - const [isExpandedTargetEnvs, setIsExpandedTargetEnvs] = useState(false); - const [isExpandedFSC, setIsExpandedFSC] = useState(false); - const [isExpandedContent, setIsExpandedContent] = useState(false); - const [isExpandedRegistration, setIsExpandedRegistration] = useState(false); - const [isExpandedImageDetail, setIsExpandedImageDetail] = useState(false); - const [isExpandedOscapDetail, setIsExpandedOscapDetail] = useState(false); - const [isExpandableFirstBoot, setIsExpandedFirstBoot] = useState(false); + const [isExpandedImageOutput, setIsExpandedImageOutput] = useState(true); + const [isExpandedTargetEnvs, setIsExpandedTargetEnvs] = useState(true); + const [isExpandedFSC, setIsExpandedFSC] = useState(true); + const [isExpandedContent, setIsExpandedContent] = useState(true); + const [isExpandedRegistration, setIsExpandedRegistration] = useState(true); + const [isExpandedImageDetail, setIsExpandedImageDetail] = useState(true); + const [isExpandedOscapDetail, setIsExpandedOscapDetail] = useState(true); + const [isExpandableFirstBoot, setIsExpandedFirstBoot] = useState(true); const onToggleImageOutput = (isExpandedImageOutput: boolean) => setIsExpandedImageOutput(isExpandedImageOutput); @@ -69,11 +74,43 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => { const onToggleFirstBoot = (isExpandableFirstBoot: boolean) => setIsExpandedFirstBoot(isExpandableFirstBoot); + type RevisitStepButtonProps = { + ariaLabel: string; + stepId: string; + }; + + const RevisitStepButton = ({ ariaLabel, stepId }: RevisitStepButtonProps) => { + return ( + + ); + }; + + const revisitStep = (stepId: string) => { + goToStepById(stepId); + }; + const isFirstBootEnabled = useBetaFlag('image-builder.firstboot.enabled'); return ( <> + Image output{' '} + + + } onToggle={(_event, isExpandedImageOutput) => onToggleImageOutput(isExpandedImageOutput) } @@ -84,7 +121,15 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => { + Target environments{' '} + + + } onToggle={(_event, isExpandedTargetEnvs) => onToggleTargetEnvs(isExpandedTargetEnvs) } @@ -135,7 +180,15 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => { {isRhel(distribution) && ( + Registration{' '} + + + } onToggle={(_event, isExpandedRegistration) => onToggleRegistration(isExpandedRegistration) } @@ -149,7 +202,15 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => { )} {oscapProfile && ( + OpenSCAP{' '} + + + } onToggle={(_event, isExpandedOscapDetail) => onToggleOscapDetails(isExpandedOscapDetail) } @@ -161,7 +222,15 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => { )} + File system configuration{' '} + + + } onToggle={(_event, isExpandedFSC) => onToggleFSC(isExpandedFSC)} isExpanded={isExpandedFSC} isIndented @@ -170,7 +239,15 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => { + Content{' '} + + + } onToggle={(_event, isExpandedContent) => onToggleContent(isExpandedContent) } @@ -183,7 +260,15 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => { {isFirstBootEnabled && ( + First boot{' '} + + + } onToggle={(_event, isExpandableFirstBoot) => onToggleFirstBoot(isExpandableFirstBoot) } @@ -196,7 +281,15 @@ const Review = ({ snapshottingEnabled }: { snapshottingEnabled: boolean }) => { )} {(blueprintName || blueprintDescription) && ( + Image details{' '} + + + } onToggle={(_event, isExpandedImageDetail) => onToggleImageDetail(isExpandedImageDetail) } From a0e474e3446f5a77ac7ddc3735ff818bcf888863 Mon Sep 17 00:00:00 2001 From: regexowl Date: Wed, 8 May 2024 13:46:08 +0200 Subject: [PATCH 3/5] V2Wizard: Add modal for Save and build images When the button "Create blueprint" is clicked for the first time, a modal about "Save and build" functionality is opened. --- .../steps/Review/Footer/CreateDropdown.tsx | 86 ++++++++++++++----- 1 file changed, 65 insertions(+), 21 deletions(-) diff --git a/src/Components/CreateImageWizardV2/steps/Review/Footer/CreateDropdown.tsx b/src/Components/CreateImageWizardV2/steps/Review/Footer/CreateDropdown.tsx index ebf75604b..801858b78 100644 --- a/src/Components/CreateImageWizardV2/steps/Review/Footer/CreateDropdown.tsx +++ b/src/Components/CreateImageWizardV2/steps/Review/Footer/CreateDropdown.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { DropdownList, @@ -7,6 +7,8 @@ import { Spinner, Flex, FlexItem, + Modal, + Button, } from '@patternfly/react-core'; import { @@ -63,31 +65,73 @@ export const CreateSaveButton = ({ const [createBlueprint, { isLoading }] = useCreateBlueprintMutation({ fixedCacheKey: 'createBlueprintKey', }); + const [showModal, setShowModal] = useState(false); + const wasModalSeen = window.localStorage.getItem( + 'imageBuilder.saveAndBuildModalSeen' + ); + + const SaveAndBuildImagesModal = () => { + const handleClose = () => { + setShowModal(false); + }; + + return ( + + Close + , + ]} + > + Building blueprints and images doesn’t need to be a two step process. To + build images simultaneously, use the dropdown arrow to the right side of + this button. + + ); + }; + + const onClick = () => { + if (!wasModalSeen) { + setShowModal(true); + window.localStorage.setItem('imageBuilder.saveAndBuildModalSeen', 'true'); + } else { + onSave(); + } + }; + const onSave = async () => { const requestBody = await getBlueprintPayload(); setIsOpen(false); requestBody && createBlueprint({ createBlueprintRequest: requestBody }); }; + return ( - - - {isLoading && ( - - - - )} - Create blueprint - - + <> + {showModal && } + + + {isLoading && ( + + + + )} + Create blueprint + + + ); }; From 42fd62b3c9de2a16caad5d46f54bfcee87074f4c Mon Sep 17 00:00:00 2001 From: regexowl Date: Wed, 8 May 2024 15:12:12 +0200 Subject: [PATCH 4/5] V2Wizard: Remove line breaks on Review step When all the expandables are open by default the extra line breaks looked a bit weird so this removes them. --- .../steps/Oscap/OscapProfileInformation.tsx | 1 - .../steps/Review/ReviewStepTextLists.tsx | 14 -------------- 2 files changed, 15 deletions(-) diff --git a/src/Components/CreateImageWizardV2/steps/Oscap/OscapProfileInformation.tsx b/src/Components/CreateImageWizardV2/steps/Oscap/OscapProfileInformation.tsx index 10536fd84..d8e9aa6c5 100644 --- a/src/Components/CreateImageWizardV2/steps/Oscap/OscapProfileInformation.tsx +++ b/src/Components/CreateImageWizardV2/steps/Oscap/OscapProfileInformation.tsx @@ -53,7 +53,6 @@ export const OscapProfileInformation = (): JSX.Element => { {isSuccessOscapProfileInfo && ( <> -
{ {arch} -
); }; @@ -173,7 +172,6 @@ export const FSCList = () => { )} -
); }; @@ -255,7 +253,6 @@ export const TargetEnvAWSList = () => { us-east-1 -
); }; @@ -314,7 +311,6 @@ export const TargetEnvGCPList = () => { )} -
); }; @@ -380,7 +376,6 @@ export const TargetEnvAzureList = () => { {azureResourceGroup} -
); }; @@ -398,10 +393,8 @@ export const TargetEnvOciList = () => { The URL for the built image will be ready to copy -
-
); }; @@ -420,7 +413,6 @@ export const TargetEnvOtherList = () => { Built image will be available for download -
); }; @@ -605,7 +597,6 @@ export const ContentList = ({ -
{duplicatePackages.length > 0 && ( )} - -
); }; @@ -637,7 +626,6 @@ export const RegisterLaterList = () => { Register the system later -
); }; @@ -696,7 +684,6 @@ export const RegisterNowList = () => { -
{isError && ( { )} -
); }; From eacdf93410d6a7eb5f02a4ab449bf7de280edf51 Mon Sep 17 00:00:00 2001 From: regexowl Date: Wed, 8 May 2024 17:23:59 +0200 Subject: [PATCH 5/5] test: Update tests after adding SaveAndBuild modal This updates tests with a `openAndDismissSaveAndBuildModal` function that handles closing the SaveAndBuild modal after clicking on Create blueprint for the first time. --- .../steps/Review/Footer/CreateDropdown.tsx | 7 ++++++- .../CreateImageWizardV2/CreateImageWizard.test.tsx | 14 ++++++++++---- .../steps/Details/Details.test.tsx | 4 ++++ .../FileSystemConfiguration.test.tsx | 4 ++++ .../steps/FirstBoot/Firstboot.test.tsx | 4 ++++ .../steps/ImageOutput/TargetEnvironment.test.tsx | 12 ++++++------ .../CreateImageWizardV2/steps/Oscap/Oscap.test.tsx | 4 ++++ .../steps/Packages/Packages.test.tsx | 4 ++++ .../steps/Registration/Registration.test.tsx | 4 ++++ .../steps/Repositories/Repositories.test.tsx | 4 ++++ .../steps/Snapshot/Snapshot.test.tsx | 11 ++++++----- .../steps/TargetEnvironment/Aws/AwsTarget.test.tsx | 4 ++++ .../TargetEnvironment/Azure/AzureTarget.test.tsx | 4 ++++ .../steps/TargetEnvironment/GCPTarget.test.tsx | 4 ++++ .../TargetEnvironment/TargetEnvironment.test.tsx | 4 ++++ .../CreateImageWizardV2/wizardTestUtils.tsx | 11 +++++++++++ 16 files changed, 83 insertions(+), 16 deletions(-) diff --git a/src/Components/CreateImageWizardV2/steps/Review/Footer/CreateDropdown.tsx b/src/Components/CreateImageWizardV2/steps/Review/Footer/CreateDropdown.tsx index 801858b78..0a3f9e7cc 100644 --- a/src/Components/CreateImageWizardV2/steps/Review/Footer/CreateDropdown.tsx +++ b/src/Components/CreateImageWizardV2/steps/Review/Footer/CreateDropdown.tsx @@ -82,7 +82,12 @@ export const CreateSaveButton = ({ onClose={handleClose} width="50%" actions={[ - , ]} diff --git a/src/test/Components/CreateImageWizardV2/CreateImageWizard.test.tsx b/src/test/Components/CreateImageWizardV2/CreateImageWizard.test.tsx index 557c5267b..9dd8d1d88 100644 --- a/src/test/Components/CreateImageWizardV2/CreateImageWizard.test.tsx +++ b/src/test/Components/CreateImageWizardV2/CreateImageWizard.test.tsx @@ -12,7 +12,10 @@ import { import userEvent from '@testing-library/user-event'; import { rest } from 'msw'; -import { enterBlueprintName } from './wizardTestUtils'; +import { + enterBlueprintName, + openAndDismissSaveAndBuildModal, +} from './wizardTestUtils'; import CreateImageWizard from '../../../Components/CreateImageWizardV2/CreateImageWizard'; import ShareImageModal from '../../../Components/ShareImageModal/ShareImageModal'; @@ -421,6 +424,9 @@ describe('Step Upload to AWS', () => { await clickNext(); await enterBlueprintName(); await clickNext(); + // informational modal pops up in the first test only as it's tied + // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage + await openAndDismissSaveAndBuildModal(); await user.click( await screen.findByRole('button', { name: /Create blueprint/ }) @@ -1084,9 +1090,9 @@ describe('Step Review', () => { test('has Registration expandable section for rhel', async () => { await setUp(); const targetExpandable = screen.getByText(/target environments/i); - const registrationExpandable = screen.getByRole('button', { - name: /registration/i, - }); + const registrationExpandable = screen.getByTestId( + 'registration-expandable' + ); const contentExpandable = await screen.findByTestId('content-expandable'); const fscExpandable = screen.getByTestId( diff --git a/src/test/Components/CreateImageWizardV2/steps/Details/Details.test.tsx b/src/test/Components/CreateImageWizardV2/steps/Details/Details.test.tsx index e12446d1c..5338f8870 100644 --- a/src/test/Components/CreateImageWizardV2/steps/Details/Details.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/Details/Details.test.tsx @@ -10,6 +10,7 @@ import { enterBlueprintName, goToRegistrationStep, interceptBlueprintRequest, + openAndDismissSaveAndBuildModal, renderCreateMode, } from '../../wizardTestUtils'; @@ -87,6 +88,9 @@ describe('registration request generated correctly', () => { await goToDetailsStep(); await enterBlueprintName(); await goToReviewStep(); + // informational modal pops up in the first test only as it's tied + // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage + await openAndDismissSaveAndBuildModal(); const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT); const expectedRequest = { ...blueprintRequest }; diff --git a/src/test/Components/CreateImageWizardV2/steps/FileSystemConfiguration/FileSystemConfiguration.test.tsx b/src/test/Components/CreateImageWizardV2/steps/FileSystemConfiguration/FileSystemConfiguration.test.tsx index 1e259ec9e..c4b24d27e 100644 --- a/src/test/Components/CreateImageWizardV2/steps/FileSystemConfiguration/FileSystemConfiguration.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/FileSystemConfiguration/FileSystemConfiguration.test.tsx @@ -13,6 +13,7 @@ import { clickRegisterLater, enterBlueprintName, interceptBlueprintRequest, + openAndDismissSaveAndBuildModal, renderCreateMode, } from '../../wizardTestUtils'; @@ -114,6 +115,9 @@ describe('file system configuration request generated correctly', () => { await goToFileSystemConfigurationStep(); await clickManuallyConfigurePartitions(); await goToReviewStep(); + // informational modal pops up in the first test only as it's tied + // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage + await openAndDismissSaveAndBuildModal(); const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT); const expectedRequest = { diff --git a/src/test/Components/CreateImageWizardV2/steps/FirstBoot/Firstboot.test.tsx b/src/test/Components/CreateImageWizardV2/steps/FirstBoot/Firstboot.test.tsx index bc3bc9fbc..8abbb4ead 100644 --- a/src/test/Components/CreateImageWizardV2/steps/FirstBoot/Firstboot.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/FirstBoot/Firstboot.test.tsx @@ -13,6 +13,7 @@ import { clickRegisterLater, enterBlueprintName, interceptBlueprintRequest, + openAndDismissSaveAndBuildModal, renderCreateMode, } from '../../wizardTestUtils'; @@ -110,6 +111,9 @@ describe('First Boot step', () => { await openCodeEditor(); await uploadFile(); await goToReviewStep(); + // informational modal pops up in the first test only as it's tied + // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage + await openAndDismissSaveAndBuildModal(); const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT); const expectedRequest = { diff --git a/src/test/Components/CreateImageWizardV2/steps/ImageOutput/TargetEnvironment.test.tsx b/src/test/Components/CreateImageWizardV2/steps/ImageOutput/TargetEnvironment.test.tsx index 7eab7189d..78bc7e366 100644 --- a/src/test/Components/CreateImageWizardV2/steps/ImageOutput/TargetEnvironment.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/ImageOutput/TargetEnvironment.test.tsx @@ -332,9 +332,9 @@ describe('set target using query parameter', () => { test('image-installer (query parameter provided)', async () => { await renderCreateMode({ target: 'iso' }); await clickToReview(); - const targetExpandable = await screen.findByRole('button', { - name: /Target environments/, - }); + const targetExpandable = await screen.findByTestId( + 'target-environments-expandable' + ); await userEvent.click(targetExpandable); await screen.findByText('Bare metal - Installer (.iso)'); }); @@ -342,9 +342,9 @@ describe('set target using query parameter', () => { test('guest-installer (query parameter provided)', async () => { await renderCreateMode({ target: 'qcow2' }); await clickToReview(); - const targetExpandable = await screen.findByRole('button', { - name: /Target environments/, - }); + const targetExpandable = await screen.findByTestId( + 'target-environments-expandable' + ); await userEvent.click(targetExpandable); await screen.findByText('Virtualization - Guest image (.qcow2)'); }); diff --git a/src/test/Components/CreateImageWizardV2/steps/Oscap/Oscap.test.tsx b/src/test/Components/CreateImageWizardV2/steps/Oscap/Oscap.test.tsx index 0ca583a40..93ef788bb 100644 --- a/src/test/Components/CreateImageWizardV2/steps/Oscap/Oscap.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/Oscap/Oscap.test.tsx @@ -14,6 +14,7 @@ import { enterBlueprintName, interceptBlueprintRequest, interceptEditBlueprintRequest, + openAndDismissSaveAndBuildModal, renderCreateMode, renderEditMode, } from '../../wizardTestUtils'; @@ -123,6 +124,9 @@ describe('oscap', () => { await goToOscapStep(); await selectProfile(); await goToReviewStep(); + // informational modal pops up in the first test only as it's tied + // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage + await openAndDismissSaveAndBuildModal(); const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT); diff --git a/src/test/Components/CreateImageWizardV2/steps/Packages/Packages.test.tsx b/src/test/Components/CreateImageWizardV2/steps/Packages/Packages.test.tsx index cd0e10aea..16fcf79d6 100644 --- a/src/test/Components/CreateImageWizardV2/steps/Packages/Packages.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/Packages/Packages.test.tsx @@ -9,6 +9,7 @@ import { clickRegisterLater, enterBlueprintName, interceptBlueprintRequest, + openAndDismissSaveAndBuildModal, renderCreateMode, } from '../../wizardTestUtils'; @@ -108,6 +109,9 @@ describe('packages request generated correctly', () => { await searchForPackage(); await selectFirstPackage(); await goToReviewStep(); + // informational modal pops up in the first test only as it's tied + // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage + await openAndDismissSaveAndBuildModal(); const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT); const expectedRequest: CreateBlueprintRequest = { diff --git a/src/test/Components/CreateImageWizardV2/steps/Registration/Registration.test.tsx b/src/test/Components/CreateImageWizardV2/steps/Registration/Registration.test.tsx index 157579c32..aa30743ae 100644 --- a/src/test/Components/CreateImageWizardV2/steps/Registration/Registration.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/Registration/Registration.test.tsx @@ -13,6 +13,7 @@ import { interceptBlueprintRequest, goToRegistrationStep, clickRegisterLater, + openAndDismissSaveAndBuildModal, } from '../../wizardTestUtils'; jest.mock('@redhat-cloud-services/frontend-components/useChrome', () => ({ @@ -99,6 +100,9 @@ describe('registration request generated correctly', () => { await goToRegistrationStep(); await selectActivationKey(); await goToReviewStep(); + // informational modal pops up in the first test only as it's tied + // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage + await openAndDismissSaveAndBuildModal(); const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT); const expectedSubscription = { diff --git a/src/test/Components/CreateImageWizardV2/steps/Repositories/Repositories.test.tsx b/src/test/Components/CreateImageWizardV2/steps/Repositories/Repositories.test.tsx index 28bc64442..69174368a 100644 --- a/src/test/Components/CreateImageWizardV2/steps/Repositories/Repositories.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/Repositories/Repositories.test.tsx @@ -13,6 +13,7 @@ import { clickRegisterLater, enterBlueprintName, interceptBlueprintRequest, + openAndDismissSaveAndBuildModal, renderCreateMode, } from '../../wizardTestUtils'; @@ -99,6 +100,9 @@ describe('repositories request generated correctly', () => { await goToRepositoriesStep(); await selectFirstRepository(); await goToReviewStep(); + // informational modal pops up in the first test only as it's tied + // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage + await openAndDismissSaveAndBuildModal(); const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT); const expectedRequest: CreateBlueprintRequest = { diff --git a/src/test/Components/CreateImageWizardV2/steps/Snapshot/Snapshot.test.tsx b/src/test/Components/CreateImageWizardV2/steps/Snapshot/Snapshot.test.tsx index 8a53c04f5..2776d73e0 100644 --- a/src/test/Components/CreateImageWizardV2/steps/Snapshot/Snapshot.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/Snapshot/Snapshot.test.tsx @@ -13,6 +13,7 @@ import { clickRegisterLater, enterBlueprintName, interceptBlueprintRequest, + openAndDismissSaveAndBuildModal, renderCreateMode, } from '../../wizardTestUtils'; @@ -76,11 +77,7 @@ const updateDatePickerWithValue = async (date: string) => { }; const clickContentDropdown = async () => { - await userEvent.click( - ( - await screen.findAllByRole('button', { name: /Content/i }) - )[1] - ); + await userEvent.click(await screen.findByTestId('content-expandable')); }; const getSnapshotMethodElement = async () => @@ -127,6 +124,10 @@ describe('repository snapshot tab - ', () => { // Check that the button is clickable (has 1 repo selected) expect(snapshotMethodElement).toHaveAttribute('aria-disabled', 'false'); + // informational modal pops up in the first test only as it's tied + // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage + await openAndDismissSaveAndBuildModal(); + // Check the date was passed correctly to the blueprint const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT); blueprintRequest.image_requests[0].snapshot_date = '2024-04-22'; diff --git a/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/Aws/AwsTarget.test.tsx b/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/Aws/AwsTarget.test.tsx index 8f4612d22..0e1c0755a 100644 --- a/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/Aws/AwsTarget.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/Aws/AwsTarget.test.tsx @@ -12,6 +12,7 @@ import { clickRegisterLater, enterBlueprintName, interceptBlueprintRequest, + openAndDismissSaveAndBuildModal, renderCreateMode, } from '../../../wizardTestUtils'; @@ -101,6 +102,9 @@ describe('aws image type request generated correctly', () => { await goToAwsStep(); await selectSource(); await goToReview(); + // informational modal pops up in the first test only as it's tied + // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage + await openAndDismissSaveAndBuildModal(); const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT); const expectedImageRequest: ImageRequest = { diff --git a/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/Azure/AzureTarget.test.tsx b/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/Azure/AzureTarget.test.tsx index af6967740..895e9a155 100644 --- a/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/Azure/AzureTarget.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/Azure/AzureTarget.test.tsx @@ -12,6 +12,7 @@ import { clickRegisterLater, enterBlueprintName, interceptBlueprintRequest, + openAndDismissSaveAndBuildModal, renderCreateMode, } from '../../../wizardTestUtils'; @@ -128,6 +129,9 @@ describe('azure image type request generated correctly', () => { await selectSource(); await selectResourceGroup(); await goToReview(); + // informational modal pops up in the first test only as it's tied + // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage + await openAndDismissSaveAndBuildModal(); const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT); const expectedImageRequest: ImageRequest = { diff --git a/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/GCPTarget.test.tsx b/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/GCPTarget.test.tsx index b553e0a10..86ad566aa 100644 --- a/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/GCPTarget.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/GCPTarget.test.tsx @@ -15,6 +15,7 @@ import { enterBlueprintName, imageRequest, interceptBlueprintRequest, + openAndDismissSaveAndBuildModal, renderCreateMode, } from '../../wizardTestUtils'; @@ -97,6 +98,9 @@ describe('gcp image type request generated correctly', () => { await clickGCPTarget(); await selectGoogleAccount('google-account'); await goToReview(); + // informational modal pops up in the first test only as it's tied + // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage + await openAndDismissSaveAndBuildModal(); const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT); const expectedImageRequest = createGCPCloudImage('gcp', { diff --git a/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/TargetEnvironment.test.tsx b/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/TargetEnvironment.test.tsx index cb1f80ce7..1044142f5 100644 --- a/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/TargetEnvironment.test.tsx +++ b/src/test/Components/CreateImageWizardV2/steps/TargetEnvironment/TargetEnvironment.test.tsx @@ -22,6 +22,7 @@ import { goToRegistrationStep, imageRequest, interceptBlueprintRequest, + openAndDismissSaveAndBuildModal, renderCreateMode, } from '../../wizardTestUtils'; @@ -134,6 +135,9 @@ describe('distribution request generated correctly', () => { await renderCreateMode(); await selectRhel8(); await goToReviewStep(); + // informational modal pops up in the first test only as it's tied + // to a 'imageBuilder.saveAndBuildModalSeen' variable in localStorage + await openAndDismissSaveAndBuildModal(); const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT); const expectedRequest: CreateBlueprintRequest = { diff --git a/src/test/Components/CreateImageWizardV2/wizardTestUtils.tsx b/src/test/Components/CreateImageWizardV2/wizardTestUtils.tsx index bb033557d..cdc8bac32 100644 --- a/src/test/Components/CreateImageWizardV2/wizardTestUtils.tsx +++ b/src/test/Components/CreateImageWizardV2/wizardTestUtils.tsx @@ -108,6 +108,17 @@ export const enterBlueprintName = async (name: string = 'Red Velvet') => { await userEvent.type(blueprintName, name); }; +export const openAndDismissSaveAndBuildModal = async () => { + await userEvent.click( + await screen.findByRole('button', { + name: 'Create blueprint', + }) + ); + await userEvent.click( + await screen.findByTestId('close-button-saveandbuild-modal') + ); +}; + export const interceptBlueprintRequest = async (requestPathname: string) => { const receivedRequestPromise = spyOnRequest(requestPathname, 'POST');