Skip to content

Wizard: Update target list to improve visual hierarchy (HMS-10463) #4267

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kingsleyzissou merged 1 commit into from
Apr 2, 2026
+73 −71
Merged

Wizard: Update target list to improve visual hierarchy (HMS-10463) #4267

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 73 additions & 71 deletions src/Components/CreateImageWizard/steps/ImageOutput/components/TargetEnvironment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,10 +173,74 @@ const TargetEnvironment = () => {
<FormGroup
isRequired={true}
role='group'
label='Target environments'
label={<span className='pf-v6-u-font-size-md'>Target environments</span>}
fieldId='target-environments'
>
<Content component='p'>Select target items for this image.</Content>
<Content component='p'>
Select one or more target environments for this image.
</Content>

{publicClouds.length > 0 && (
<FormGroup
label='Public cloud'
className='pf-v6-u-mt-md'
role='group'
aria-label='Public cloud'
fieldId='public-cloud-group'
>
{publicClouds.includes('aws') && (
<Checkbox
className='pf-v6-u-mb-sm pf-v6-u-ml-lg'
id='checkbox-aws'
name='Amazon Web Services'
label='Amazon Web Services'
aria-label='Amazon Web Services checkbox'
isChecked={environments.includes('aws')}
isDisabled={isOnlyNetworkInstallerSelected}
onChange={() => handleToggleEnvironment('aws')}
body={environments.includes('aws') ? <Aws /> : undefined}
/>
)}
{publicClouds.includes('gcp') && (
<Checkbox
className='pf-v6-u-mb-sm pf-v6-u-ml-lg'
id='checkbox-gcp'
name='Google Cloud Platform'
label='Google Cloud Platform'
aria-label='Google Cloud checkbox'
isChecked={environments.includes('gcp')}
isDisabled={isOnlyNetworkInstallerSelected}
onChange={() => handleToggleEnvironment('gcp')}
body={environments.includes('gcp') ? <Gcp /> : undefined}
/>
)}
{publicClouds.includes('azure') && (
<Checkbox
className='pf-v6-u-mb-sm pf-v6-u-ml-lg'
id='checkbox-azure'
name='Microsoft Azure'
label='Microsoft Azure'
aria-label='Microsoft Azure checkbox'
isChecked={environments.includes('azure')}
isDisabled={isOnlyNetworkInstallerSelected}
onChange={() => handleToggleEnvironment('azure')}
body={environments.includes('azure') ? <Azure /> : undefined}
/>
)}
{publicClouds.includes('oci') && (
<Checkbox
className='pf-v6-u-mb-sm pf-v6-u-ml-lg'
id='checkbox-oci'
name='Oracle Cloud Infrastructure'
label='Oracle Cloud Infrastructure'
aria-label='Oracle Cloud Infrastructure checkbox'
isChecked={environments.includes('oci')}
isDisabled={isOnlyNetworkInstallerSelected}
onChange={() => handleToggleEnvironment('oci')}
/>
)}
</FormGroup>
)}

{privateClouds.length > 0 && (
<FormGroup
Expand All @@ -188,7 +252,7 @@ const TargetEnvironment = () => {
>
{privateClouds.includes('vsphere-ova') && (
<Checkbox
className='pf-v6-u-mb-sm'
className='pf-v6-u-mb-sm pf-v6-u-ml-lg'
id='vsphere-checkbox-ova'
isLabelWrapped
name='vsphere-checkbox-ova'
Expand All @@ -215,7 +279,7 @@ const TargetEnvironment = () => {
)}
{privateClouds.includes('vsphere') && (
<Checkbox
className='pf-v6-u-mb-sm'
className='pf-v6-u-mb-sm pf-v6-u-ml-lg'
id='vsphere-checkbox-vmdk'
isLabelWrapped
name='vsphere-checkbox-vmdk'
Expand All @@ -242,68 +306,6 @@ const TargetEnvironment = () => {
</FormGroup>
)}

{publicClouds.length > 0 && (
<FormGroup
label='Public cloud'
className='pf-v6-u-mt-md'
role='group'
aria-label='Public cloud'
fieldId='public-cloud-group'
>
{publicClouds.includes('aws') && (
<Checkbox
className='pf-v6-u-mb-sm'
id='checkbox-aws'
name='Amazon Web Services'
label='Amazon Web Services'
aria-label='Amazon Web Services checkbox'
isChecked={environments.includes('aws')}
isDisabled={isOnlyNetworkInstallerSelected}
onChange={() => handleToggleEnvironment('aws')}
body={environments.includes('aws') ? <Aws /> : undefined}
/>
)}
{publicClouds.includes('gcp') && (
<Checkbox
className='pf-v6-u-mb-sm'
id='checkbox-gcp'
name='Google Cloud Platform'
label='Google Cloud Platform'
aria-label='Google Cloud checkbox'
isChecked={environments.includes('gcp')}
isDisabled={isOnlyNetworkInstallerSelected}
onChange={() => handleToggleEnvironment('gcp')}
body={environments.includes('gcp') ? <Gcp /> : undefined}
/>
)}
{publicClouds.includes('azure') && (
<Checkbox
className='pf-v6-u-mb-sm'
id='checkbox-azure'
name='Microsoft Azure'
label='Microsoft Azure'
aria-label='Microsoft Azure checkbox'
isChecked={environments.includes('azure')}
isDisabled={isOnlyNetworkInstallerSelected}
onChange={() => handleToggleEnvironment('azure')}
body={environments.includes('azure') ? <Azure /> : undefined}
/>
)}
{publicClouds.includes('oci') && (
<Checkbox
className='pf-v6-u-mb-sm'
id='checkbox-oci'
name='Oracle Cloud Infrastructure'
label='Oracle Cloud Infrastructure'
aria-label='Oracle Cloud Infrastructure checkbox'
isChecked={environments.includes('oci')}
isDisabled={isOnlyNetworkInstallerSelected}
onChange={() => handleToggleEnvironment('oci')}
/>
)}
</FormGroup>
)}

<FormGroup
label={
privateClouds.length > 0 || publicClouds.length > 0
Expand All @@ -317,7 +319,7 @@ const TargetEnvironment = () => {
>
{miscFormats.includes('guest-image') && (
<Checkbox
className='pf-v6-u-mb-sm'
className='pf-v6-u-mb-sm pf-v6-u-ml-lg'
id='checkbox-guest-image'
isLabelWrapped
name='Virtualization guest image'
Expand All @@ -341,7 +343,7 @@ const TargetEnvironment = () => {
)}
{miscFormats.includes('image-installer') && (
<Checkbox
className='pf-v6-u-mb-sm'
className='pf-v6-u-mb-sm pf-v6-u-ml-lg'
id='checkbox-image-installer'
isLabelWrapped
name='Bare metal installer'
Expand All @@ -365,7 +367,7 @@ const TargetEnvironment = () => {
)}
{miscFormats.includes('network-installer') && (
<Checkbox
className='pf-v6-u-mb-sm'
className='pf-v6-u-mb-sm pf-v6-u-ml-lg'
id='checkbox-network-installer'
isLabelWrapped
name='Network - Installer'
Expand All @@ -388,7 +390,7 @@ const TargetEnvironment = () => {
)}
{miscFormats.includes('pxe-tar-xz') && (
<Checkbox
className='pf-v6-u-mb-sm'
className='pf-v6-u-mb-sm pf-v6-u-ml-lg'
id='checkbox-pxe-boot'
isLabelWrapped
name='PXE boot image'
Expand All @@ -410,7 +412,7 @@ const TargetEnvironment = () => {
)}
{miscFormats.includes('wsl') && (
<Checkbox
className='pf-v6-u-mb-sm'
className='pf-v6-u-mb-sm pf-v6-u-ml-lg'
id='checkbox-wsl'
isLabelWrapped
name='WSL'
Expand Down
Loading