From c4d411efa44d7bc1332bf30001b8ccc10cd3d91a Mon Sep 17 00:00:00 2001 From: lucasgarfield Date: Fri, 20 Oct 2023 09:34:24 +0200 Subject: [PATCH] Wizard: Improve in-page wizard cosmetically This commit: 1. Removes the header from the Data Driven Forms wizard 2. Adds padding around the in-page wizard so it is visually consistent with the images table 3. Refactors the images table header into a re-usable component that is now used in both the images table and the wizard 4. Allows the repositories table to fill the available vertical space in the wizard 5. Adjusts the package dual list selectors so that they fill the available horizontal space in the wizard --- .../CreateImageWizard/CreateImageWizard.js | 134 +++++++++--------- .../CreateImageWizard/CreateImageWizard.scss | 19 +-- .../formComponents/Repositories.js | 2 +- src/Components/LandingPage/LandingPage.scss | 10 +- src/Components/LandingPage/LandingPage.tsx | 67 +-------- .../sharedComponents/ImageBuilderHeader.scss | 7 + .../sharedComponents/ImageBuilderHeader.tsx | 78 ++++++++++ .../CreateImageWizard.azure.test.js | 6 +- .../CreateImageWizard.test.js | 20 +-- 9 files changed, 169 insertions(+), 174 deletions(-) create mode 100644 src/Components/sharedComponents/ImageBuilderHeader.scss create mode 100644 src/Components/sharedComponents/ImageBuilderHeader.tsx diff --git a/src/Components/CreateImageWizard/CreateImageWizard.js b/src/Components/CreateImageWizard/CreateImageWizard.js index e58fd77b..8991ec10 100644 --- a/src/Components/CreateImageWizard/CreateImageWizard.js +++ b/src/Components/CreateImageWizard/CreateImageWizard.js @@ -34,7 +34,7 @@ import { import isRhel from '../../Utilities/isRhel'; import { resolveRelPath } from '../../Utilities/path'; import { useGetEnvironment } from '../../Utilities/useGetEnvironment'; -import DocumentationButton from '../sharedComponents/DocumentationButton'; +import { ImageBuilderHeader } from '../sharedComponents/ImageBuilderHeader'; const handleKeyDown = (e, handleClose) => { if (e.key === 'Escape') { @@ -597,75 +597,73 @@ const CreateImageWizard = () => { const currentDate = new Date(); return ( - { - setIsSaving(true); - const requests = onSave(values); - await Promise.allSettled( - requests.map((composeRequest) => composeImage({ composeRequest })) - ); - navigate(resolveRelPath('')); - }} - defaultArch="x86_64" - customValidatorMapper={{ - fileSystemConfigurationValidator, - targetEnvironmentValidator, - }} - schema={{ - fields: [ - { - component: componentTypes.WIZARD, - name: 'image-builder-wizard', - className: 'imageBuilder', - isDynamic: true, - inModal: false, - onKeyDown: (e) => { - handleKeyDown(e, handleClose); - }, - buttonLabels: { - submit: 'Create image', - }, - showTitles: true, - title: 'Image Builder', - crossroads: [ - 'target-environment', - 'release', - 'payload-repositories', - ], - description: ( - <> - Image builder allows you to create a custom image and push it to - target environments. - - ), - // order in this array does not reflect order in wizard nav, this order is managed inside - // of each step by `nextStep` property! + <> + +
+ { + setIsSaving(true); + const requests = onSave(values); + await Promise.allSettled( + requests.map((composeRequest) => composeImage({ composeRequest })) + ); + navigate(resolveRelPath('')); + }} + defaultArch="x86_64" + customValidatorMapper={{ + fileSystemConfigurationValidator, + targetEnvironmentValidator, + }} + schema={{ fields: [ - imageOutput, - awsTarget, - googleCloudTarget, - msAzureTarget, - registration, - packages, - packagesContentSources, - repositories, - fileSystemConfiguration, - imageName, - review, - oscap, + { + component: componentTypes.WIZARD, + name: 'image-builder-wizard', + className: 'imageBuilder', + isDynamic: true, + inModal: false, + onKeyDown: (e) => { + handleKeyDown(e, handleClose); + }, + buttonLabels: { + submit: 'Create image', + }, + showTitles: true, + crossroads: [ + 'target-environment', + 'release', + 'payload-repositories', + ], + // order in this array does not reflect order in wizard nav, this order is managed inside + // of each step by `nextStep` property! + fields: [ + imageOutput, + awsTarget, + googleCloudTarget, + msAzureTarget, + registration, + packages, + packagesContentSources, + repositories, + fileSystemConfiguration, + imageName, + review, + oscap, + ], + initialState: { + activeStep: initialStep || 'image-output', // name of the active step + activeStepIndex: stepHistory.length, // active index + maxStepIndex: stepHistory.length, // max achieved index + prevSteps: stepHistory, // array with names of previously visited steps + }, + }, ], - initialState: { - activeStep: initialStep || 'image-output', // name of the active step - activeStepIndex: stepHistory.length, // active index - maxStepIndex: stepHistory.length, // max achieved index - prevSteps: stepHistory, // array with names of previously visited steps - }, - }, - ], - }} - initialValues={initialState} - /> + }} + initialValues={initialState} + /> +
+ ); }; diff --git a/src/Components/CreateImageWizard/CreateImageWizard.scss b/src/Components/CreateImageWizard/CreateImageWizard.scss index 55a63b97..1b86edb0 100644 --- a/src/Components/CreateImageWizard/CreateImageWizard.scss +++ b/src/Components/CreateImageWizard/CreateImageWizard.scss @@ -10,7 +10,7 @@ .pf-c-dual-list-selector { --pf-c-dual-list-selector__menu--MinHeight: 18rem; - --pf-c-dual-list-selector__menu--MaxHeight: 18rem; + --pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max: 100vw; } .pf-c-form { @@ -59,20 +59,3 @@ ul.pf-m-plain { padding-left: 0; margin-left: 0; } - -// [2023-09] Wizard height should not be limited see -// https://github.com/data-driven-forms/react-forms/issues/1402 -// TODO remove me after DDF is not used anymore -.pf-c-wizard__main { - overflow-x: unset; - overflow-y: unset; -} -// TODO remove me after DDF is not used anymore -.pf-c-wizard__footer { - z-index: unset; -} -// [2023-10] Wizard closing cross shouldn't get displayed -// TODO remove me after DDF is not used anymore -.pf-c-wizard__header .pf-c-button.pf-m-plain { - display: none; -} diff --git a/src/Components/CreateImageWizard/formComponents/Repositories.js b/src/Components/CreateImageWizard/formComponents/Repositories.js index 95422bce..4955eff6 100644 --- a/src/Components/CreateImageWizard/formComponents/Repositories.js +++ b/src/Components/CreateImageWizard/formComponents/Repositories.js @@ -399,7 +399,7 @@ const Repositories = (props) => { - + { const { pathname } = useLocation(); @@ -61,65 +56,7 @@ export const LandingPage = () => { ); return ( <> - {/*@ts-ignore*/} - - - - - Image builder is a tool for creating deployment-ready customized - system images: installation disks, virtual machines, cloud - vendor-specific images, and others. By using image builder, you - can make these images faster than manual procedures because it - eliminates the specific configurations required for each output - type. - - - - - - - - - } - > - - - - + {edgeParityFlag ? ( { + return ( + <> + {/*@ts-ignore*/} + + + + + Image builder is a tool for creating deployment-ready customized + system images: installation disks, virtual machines, cloud + vendor-specific images, and others. By using image builder, you + can make these images faster than manual procedures because it + eliminates the specific configurations required for each output + type. + + + + + + + + + } + > + + + + + + ); +}; diff --git a/src/test/Components/CreateImageWizard/CreateImageWizard.azure.test.js b/src/test/Components/CreateImageWizard/CreateImageWizard.azure.test.js index 0acb0025..f3bf08ea 100644 --- a/src/test/Components/CreateImageWizard/CreateImageWizard.azure.test.js +++ b/src/test/Components/CreateImageWizard/CreateImageWizard.azure.test.js @@ -85,9 +85,9 @@ describe('Step Upload to Azure', () => { await clickNext(); - expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent( - 'Target environment - Microsoft Azure' - ); + await screen.findByRole('heading', { + name: 'Target environment - Microsoft Azure', + }); }; test('clicking Next loads Registration', async () => { diff --git a/src/test/Components/CreateImageWizard/CreateImageWizard.test.js b/src/test/Components/CreateImageWizard/CreateImageWizard.test.js index a2fcafb1..b866aba1 100644 --- a/src/test/Components/CreateImageWizard/CreateImageWizard.test.js +++ b/src/test/Components/CreateImageWizard/CreateImageWizard.test.js @@ -143,9 +143,7 @@ describe('Step Image output', () => { // select aws as upload destination await user.click(await screen.findByTestId('upload-aws')); - expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent( - 'Image output' - ); + await screen.findByRole('heading', { name: 'Image output' }); }; test('clicking Next loads Upload to AWS', async () => { @@ -282,9 +280,9 @@ describe('Step Upload to AWS', () => { await clickNext(); - expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent( - 'Target environment - Amazon Web Services' - ); + await screen.findByRole('heading', { + name: 'Target environment - Amazon Web Services', + }); }; test('clicking Next loads Registration', async () => { @@ -450,9 +448,9 @@ describe('Step Upload to Google', () => { await clickNext(); - expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent( - 'Target environment - Google Cloud Platform' - ); + await screen.findByRole('heading', { + name: 'Target environment - Google Cloud Platform', + }); }; test('clicking Next loads Registration', async () => { @@ -549,7 +547,9 @@ describe('Step Registration', () => { await clickNext(); - screen.getByRole('heading', { name: /file system configuration/i }); + await screen.findByRole('heading', { + name: 'File system configuration', + }); }); test('clicking Back loads Upload to AWS', async () => {