Skip to content

Commit 3b350e3

Browse files
regexowlkingsleyzissou
regexowl
authored and
kingsleyzissou
committed
Wizard: Update target list to improve visual hierarchy
This updates the list of targets on the Image Output step to make it clearer that the Target environments section included public and private cloud, and misc formats altogether.
1 parent 5257d0f commit 3b350e3

File tree

1 file changed

+73
-71
lines changed

1 file changed

+73
-71
lines changed

‎src/Components/CreateImageWizard/steps/ImageOutput/components/TargetEnvironment.tsx‎

Lines changed: 73 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -173,10 +173,74 @@ const TargetEnvironment = () => {
173173
<FormGroup
174174
isRequired={true}
175175
role='group'
176-
label='Target environments'
176+
label={<span className='pf-v6-u-font-size-md'>Target environments</span>}
177177
fieldId='target-environments'
178178
>
179-
<Content component='p'>Select target items for this image.</Content>
179+
<Content component='p'>
180+
Select one or more target environments for this image.
181+
</Content>
182+
183+
{publicClouds.length > 0 && (
184+
<FormGroup
185+
label='Public cloud'
186+
className='pf-v6-u-mt-md'
187+
role='group'
188+
aria-label='Public cloud'
189+
fieldId='public-cloud-group'
190+
>
191+
{publicClouds.includes('aws') && (
192+
<Checkbox
193+
className='pf-v6-u-mb-sm pf-v6-u-ml-lg'
194+
id='checkbox-aws'
195+
name='Amazon Web Services'
196+
label='Amazon Web Services'
197+
aria-label='Amazon Web Services checkbox'
198+
isChecked={environments.includes('aws')}
199+
isDisabled={isOnlyNetworkInstallerSelected}
200+
onChange={() => handleToggleEnvironment('aws')}
201+
body={environments.includes('aws') ? <Aws /> : undefined}
202+
/>
203+
)}
204+
{publicClouds.includes('gcp') && (
205+
<Checkbox
206+
className='pf-v6-u-mb-sm pf-v6-u-ml-lg'
207+
id='checkbox-gcp'
208+
name='Google Cloud Platform'
209+
label='Google Cloud Platform'
210+
aria-label='Google Cloud checkbox'
211+
isChecked={environments.includes('gcp')}
212+
isDisabled={isOnlyNetworkInstallerSelected}
213+
onChange={() => handleToggleEnvironment('gcp')}
214+
body={environments.includes('gcp') ? <Gcp /> : undefined}
215+
/>
216+
)}
217+
{publicClouds.includes('azure') && (
218+
<Checkbox
219+
className='pf-v6-u-mb-sm pf-v6-u-ml-lg'
220+
id='checkbox-azure'
221+
name='Microsoft Azure'
222+
label='Microsoft Azure'
223+
aria-label='Microsoft Azure checkbox'
224+
isChecked={environments.includes('azure')}
225+
isDisabled={isOnlyNetworkInstallerSelected}
226+
onChange={() => handleToggleEnvironment('azure')}
227+
body={environments.includes('azure') ? <Azure /> : undefined}
228+
/>
229+
)}
230+
{publicClouds.includes('oci') && (
231+
<Checkbox
232+
className='pf-v6-u-mb-sm pf-v6-u-ml-lg'
233+
id='checkbox-oci'
234+
name='Oracle Cloud Infrastructure'
235+
label='Oracle Cloud Infrastructure'
236+
aria-label='Oracle Cloud Infrastructure checkbox'
237+
isChecked={environments.includes('oci')}
238+
isDisabled={isOnlyNetworkInstallerSelected}
239+
onChange={() => handleToggleEnvironment('oci')}
240+
/>
241+
)}
242+
</FormGroup>
243+
)}
180244

181245
{privateClouds.length > 0 && (
182246
<FormGroup
@@ -188,7 +252,7 @@ const TargetEnvironment = () => {
188252
>
189253
{privateClouds.includes('vsphere-ova') && (
190254
<Checkbox
191-
className='pf-v6-u-mb-sm'
255+
className='pf-v6-u-mb-sm pf-v6-u-ml-lg'
192256
id='vsphere-checkbox-ova'
193257
isLabelWrapped
194258
name='vsphere-checkbox-ova'
@@ -215,7 +279,7 @@ const TargetEnvironment = () => {
215279
)}
216280
{privateClouds.includes('vsphere') && (
217281
<Checkbox
218-
className='pf-v6-u-mb-sm'
282+
className='pf-v6-u-mb-sm pf-v6-u-ml-lg'
219283
id='vsphere-checkbox-vmdk'
220284
isLabelWrapped
221285
name='vsphere-checkbox-vmdk'
@@ -242,68 +306,6 @@ const TargetEnvironment = () => {
242306
</FormGroup>
243307
)}
244308

245-
{publicClouds.length > 0 && (
246-
<FormGroup
247-
label='Public cloud'
248-
className='pf-v6-u-mt-md'
249-
role='group'
250-
aria-label='Public cloud'
251-
fieldId='public-cloud-group'
252-
>
253-
{publicClouds.includes('aws') && (
254-
<Checkbox
255-
className='pf-v6-u-mb-sm'
256-
id='checkbox-aws'
257-
name='Amazon Web Services'
258-
label='Amazon Web Services'
259-
aria-label='Amazon Web Services checkbox'
260-
isChecked={environments.includes('aws')}
261-
isDisabled={isOnlyNetworkInstallerSelected}
262-
onChange={() => handleToggleEnvironment('aws')}
263-
body={environments.includes('aws') ? <Aws /> : undefined}
264-
/>
265-
)}
266-
{publicClouds.includes('gcp') && (
267-
<Checkbox
268-
className='pf-v6-u-mb-sm'
269-
id='checkbox-gcp'
270-
name='Google Cloud Platform'
271-
label='Google Cloud Platform'
272-
aria-label='Google Cloud checkbox'
273-
isChecked={environments.includes('gcp')}
274-
isDisabled={isOnlyNetworkInstallerSelected}
275-
onChange={() => handleToggleEnvironment('gcp')}
276-
body={environments.includes('gcp') ? <Gcp /> : undefined}
277-
/>
278-
)}
279-
{publicClouds.includes('azure') && (
280-
<Checkbox
281-
className='pf-v6-u-mb-sm'
282-
id='checkbox-azure'
283-
name='Microsoft Azure'
284-
label='Microsoft Azure'
285-
aria-label='Microsoft Azure checkbox'
286-
isChecked={environments.includes('azure')}
287-
isDisabled={isOnlyNetworkInstallerSelected}
288-
onChange={() => handleToggleEnvironment('azure')}
289-
body={environments.includes('azure') ? <Azure /> : undefined}
290-
/>
291-
)}
292-
{publicClouds.includes('oci') && (
293-
<Checkbox
294-
className='pf-v6-u-mb-sm'
295-
id='checkbox-oci'
296-
name='Oracle Cloud Infrastructure'
297-
label='Oracle Cloud Infrastructure'
298-
aria-label='Oracle Cloud Infrastructure checkbox'
299-
isChecked={environments.includes('oci')}
300-
isDisabled={isOnlyNetworkInstallerSelected}
301-
onChange={() => handleToggleEnvironment('oci')}
302-
/>
303-
)}
304-
</FormGroup>
305-
)}
306-
307309
<FormGroup
308310
label={
309311
privateClouds.length > 0 || publicClouds.length > 0
@@ -317,7 +319,7 @@ const TargetEnvironment = () => {
317319
>
318320
{miscFormats.includes('guest-image') && (
319321
<Checkbox
320-
className='pf-v6-u-mb-sm'
322+
className='pf-v6-u-mb-sm pf-v6-u-ml-lg'
321323
id='checkbox-guest-image'
322324
isLabelWrapped
323325
name='Virtualization guest image'
@@ -341,7 +343,7 @@ const TargetEnvironment = () => {
341343
)}
342344
{miscFormats.includes('image-installer') && (
343345
<Checkbox
344-
className='pf-v6-u-mb-sm'
346+
className='pf-v6-u-mb-sm pf-v6-u-ml-lg'
345347
id='checkbox-image-installer'
346348
isLabelWrapped
347349
name='Bare metal installer'
@@ -365,7 +367,7 @@ const TargetEnvironment = () => {
365367
)}
366368
{miscFormats.includes('network-installer') && (
367369
<Checkbox
368-
className='pf-v6-u-mb-sm'
370+
className='pf-v6-u-mb-sm pf-v6-u-ml-lg'
369371
id='checkbox-network-installer'
370372
isLabelWrapped
371373
name='Network - Installer'
@@ -388,7 +390,7 @@ const TargetEnvironment = () => {
388390
)}
389391
{miscFormats.includes('pxe-tar-xz') && (
390392
<Checkbox
391-
className='pf-v6-u-mb-sm'
393+
className='pf-v6-u-mb-sm pf-v6-u-ml-lg'
392394
id='checkbox-pxe-boot'
393395
isLabelWrapped
394396
name='PXE boot image'
@@ -410,7 +412,7 @@ const TargetEnvironment = () => {
410412
)}
411413
{miscFormats.includes('wsl') && (
412414
<Checkbox
413-
className='pf-v6-u-mb-sm'
415+
className='pf-v6-u-mb-sm pf-v6-u-ml-lg'
414416
id='checkbox-wsl'
415417
isLabelWrapped
416418
name='WSL'

0 commit comments

Comments
 (0)