From cfa9f9224998a677435233ea121958fb26a7c16d Mon Sep 17 00:00:00 2001 From: regexowl Date: Fri, 25 Jul 2025 13:19:35 +0200 Subject: [PATCH 1/2] Wizard: Spread registration options This moves registration options outside of the "Show additional connection options" expandable, making them always visible. --- .../CreateImageWizard/CreateImageWizard.scss | 4 + .../Registration/components/Registration.tsx | 102 ++++++++---------- .../steps/Registration/Registration.test.tsx | 8 -- 3 files changed, 46 insertions(+), 68 deletions(-) diff --git a/src/Components/CreateImageWizard/CreateImageWizard.scss b/src/Components/CreateImageWizard/CreateImageWizard.scss index 8767d79a..5ba89da2 100644 --- a/src/Components/CreateImageWizard/CreateImageWizard.scss +++ b/src/Components/CreateImageWizard/CreateImageWizard.scss @@ -17,6 +17,10 @@ --pf-c-form__group-label--PaddingBottom: var(--pf-v6-global--spacer--xs); } +.pf-v6-c-radio__body { // remove margin from radio button body block + margin: 0; +} + .provider-icon { width: 3.5em; height: 3.5em; diff --git a/src/Components/CreateImageWizard/steps/Registration/components/Registration.tsx b/src/Components/CreateImageWizard/steps/Registration/components/Registration.tsx index 9d8f0d0b..0f292d00 100644 --- a/src/Components/CreateImageWizard/steps/Registration/components/Registration.tsx +++ b/src/Components/CreateImageWizard/steps/Registration/components/Registration.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import { Button, @@ -99,10 +99,6 @@ const Registration = () => { const dispatch = useAppDispatch(); const registrationType = useAppSelector(selectRegistrationType); - const [showOptions, setShowOptions] = useState( - registrationType === 'register-later', - ); - const isSatelliteRegistrationEnabled = useFlag( 'image-builder.satellite.enabled', ); @@ -124,63 +120,51 @@ const Registration = () => { id='register-system-now' name='register-system-now' autoFocus - description={ - - } + className='pf-v6-u-pb-sm' body={ - showOptions && ( - - Enable predictive analytics and management capabilities - - + + Enable predictive analytics and management capabilities + + + } + isChecked={ + registrationType === 'register-now-insights' || + registrationType === 'register-now-rhc' + } + onChange={(_event, checked) => { + if (checked) { + dispatch(changeRegistrationType('register-now-insights')); + } else { + dispatch(changeRegistrationType('register-now')); } - isChecked={ - registrationType === 'register-now-insights' || - registrationType === 'register-now-rhc' - } - onChange={(_event, checked) => { - if (checked) { - dispatch(changeRegistrationType('register-now-insights')); - } else { - dispatch(changeRegistrationType('register-now')); + }} + id='register-system-now-insights' + name='register-system-insights' + className='pf-v6-u-pt-0' + body={ + + Enable remote remediations and system management with + automation + + } - }} - id='register-system-now-insights' - name='register-system-insights' - body={ - - Enable remote remediations and system management with - automation - - + isChecked={registrationType === 'register-now-rhc'} + onChange={(_event, checked) => { + if (checked) { + dispatch(changeRegistrationType('register-now-rhc')); + } else { + dispatch(changeRegistrationType('register-now-insights')); } - isChecked={registrationType === 'register-now-rhc'} - onChange={(_event, checked) => { - if (checked) { - dispatch(changeRegistrationType('register-now-rhc')); - } else { - dispatch(changeRegistrationType('register-now-insights')); - } - }} - id='register-system-now-rhc' - name='register-system-rhc' - /> - } - /> - ) + }} + id='register-system-now-rhc' + name='register-system-rhc' + /> + } + /> } /> { isChecked={registrationType === 'register-later'} onChange={() => { dispatch(changeRegistrationType('register-later')); - setShowOptions(false); }} id='register-later' name='register-later' @@ -199,7 +182,6 @@ const Registration = () => { isChecked={registrationType === 'register-satellite'} onChange={() => { dispatch(changeRegistrationType('register-satellite')); - setShowOptions(false); }} id='register-satellite' name='register-satellite' diff --git a/src/test/Components/CreateImageWizard/steps/Registration/Registration.test.tsx b/src/test/Components/CreateImageWizard/steps/Registration/Registration.test.tsx index 2ea71b77..6b60e5c2 100644 --- a/src/test/Components/CreateImageWizard/steps/Registration/Registration.test.tsx +++ b/src/test/Components/CreateImageWizard/steps/Registration/Registration.test.tsx @@ -57,12 +57,6 @@ Object.defineProperty(window, 'localStorage', { // Initiliaze the router const router: RemixRouter | undefined = undefined; -const clickShowAdditionalConnectionOptions = async () => { - const user = userEvent.setup(); - const link = await screen.findByText('Show additional connection options'); - await waitFor(() => user.click(link)); -}; - const deselectEnableRemoteRemediations = async () => { const user = userEvent.setup(); const checkBox = await screen.findByRole('checkbox', { @@ -300,7 +294,6 @@ describe('Registration request generated correctly', () => { test('register + insights', async () => { await renderCreateMode(); await goToRegistrationStep(); - await clickShowAdditionalConnectionOptions(); await deselectEnableRemoteRemediations(); await goToReviewStep(); const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT); @@ -324,7 +317,6 @@ describe('Registration request generated correctly', () => { test('register now', async () => { await renderCreateMode(); await goToRegistrationStep(); - await clickShowAdditionalConnectionOptions(); await deselectPredictiveAnalytics(); await goToReviewStep(); // informational modal pops up in the first test only as it's tied From bd3b87fa52c3f258698bbbd297e41de7ac4d9b42 Mon Sep 17 00:00:00 2001 From: regexowl Date: Fri, 25 Jul 2025 13:20:58 +0200 Subject: [PATCH 2/2] Wizard: Update step description and ID clipboard copy This adds back the step description and updates the organization ID clipboard copy based on recent mocks. --- .../CreateImageWizard/steps/Registration/index.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/Components/CreateImageWizard/steps/Registration/index.tsx b/src/Components/CreateImageWizard/steps/Registration/index.tsx index bd96d505..5c973f13 100644 --- a/src/Components/CreateImageWizard/steps/Registration/index.tsx +++ b/src/Components/CreateImageWizard/steps/Registration/index.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'; import { ClipboardCopy, + Content, Form, FormGroup, FormHelperText, @@ -44,11 +45,15 @@ const RegistrationStep = () => { Register systems using this image + + Configure registration settings for systems that will use this image. + {orgId || ''}