particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Wizard: Move VMware radios into VMware checkbox

Browse source 
This moves the VMware radios into the body of VMware checkbox, following PatternFly's pattern of parent and child checkboxes / form elements: https://www.patternfly.org/components/forms/checkbox#controlled
This commit is contained in:
regexowl 2024-10-07 14:28:05 +02:00 • committed by Lucas Garfield
parent 555116122f
commit 10f2669827
1 changed files with 93 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

186
src/Components/CreateImageWizard/steps/ImageOutput/TargetEnvironment.tsx
View file

@ -203,103 +203,103 @@ const TargetEnvironment = () => {
id="checkbox-vmware"
name="VMware"
data-testid="checkbox-vmware"
/>
</FormGroup>
<FormGroup
className="pf-u-mt-sm pf-u-mb-sm pf-u-ml-xl"
data-testid="target-private-vsphere-radio"
>
{supportedEnvironments?.includes('vsphere-ova') && (
<Radio
name="vsphere-radio"
aria-label="VMware vSphere radio button OVA"
id="vsphere-radio-ova"
label={
<>
Open virtualization format (.ova)
<Popover
maxWidth="30rem"
position="right"
bodyContent={
<TextContent>
<Text>
An OVA file is a virtual appliance used by
virtualization platforms such as VMware vSphere. It
is a package that contains files used to describe a
virtual machine, which includes a VMDK image, OVF
descriptor file and a manifest file.
</Text>
</TextContent>
}
>
<Button
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
variant="plain"
aria-label="About OVA file"
isInline
>
<HelpIcon />
</Button>
</Popover>
</>
}
onChange={() => {
handleToggleEnvironment('vsphere-ova');
handleToggleEnvironment('vsphere');
}}
isChecked={environments.includes('vsphere-ova')}
isDisabled={
!(
environments.includes('vsphere') ||
environments.includes('vsphere-ova')
)
}
/>
)}
<Radio
className="pf-u-mt-sm"
name="vsphere-radio"
aria-label="VMware vSphere radio button VMDK"
id="vsphere-radio-vmdk"
label={
body={
<>
Virtual disk (.vmdk)
<Popover
maxWidth="30rem"
position="right"
bodyContent={
<TextContent>
<Text>
A VMDK file is a virtual disk that stores the contents
of a virtual machine. This disk has to be imported
into vSphere using govc import.vmdk, use the OVA
version when using the vSphere UI.
</Text>
</TextContent>
{supportedEnvironments?.includes('vsphere-ova') && (
<Radio
name="vsphere-radio"
aria-label="VMware vSphere radio button OVA"
id="vsphere-radio-ova"
label={
<>
Open virtualization format (.ova)
<Popover
maxWidth="30rem"
position="right"
bodyContent={
<TextContent>
<Text>
An OVA file is a virtual appliance used by
virtualization platforms such as VMware
vSphere. It is a package that contains files
used to describe a virtual machine, which
includes a VMDK image, OVF descriptor file and
a manifest file.
</Text>
</TextContent>
}
>
<Button
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
variant="plain"
aria-label="About OVA file"
isInline
>
<HelpIcon />
</Button>
</Popover>
</>
}
onChange={() => {
handleToggleEnvironment('vsphere-ova');
handleToggleEnvironment('vsphere');
}}
isChecked={environments.includes('vsphere-ova')}
isDisabled={
!(
environments.includes('vsphere') ||
environments.includes('vsphere-ova')
)
}
/>
)}
<Radio
className="pf-u-mt-sm"
name="vsphere-radio"
aria-label="VMware vSphere radio button VMDK"
id="vsphere-radio-vmdk"
label={
<>
Virtual disk (.vmdk)
<Popover
maxWidth="30rem"
position="right"
bodyContent={
<TextContent>
<Text>
A VMDK file is a virtual disk that stores the
contents of a virtual machine. This disk has to
be imported into vSphere using govc import.vmdk,
use the OVA version when using the vSphere UI.
</Text>
</TextContent>
}
>
<Button
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
variant="plain"
aria-label="About VMDK file"
isInline
>
<HelpIcon />
</Button>
</Popover>
</>
}
>
<Button
className="pf-u-pl-sm pf-u-pt-0 pf-u-pb-0"
variant="plain"
aria-label="About VMDK file"
isInline
>
<HelpIcon />
</Button>
</Popover>
onChange={() => {
handleToggleEnvironment('vsphere-ova');
handleToggleEnvironment('vsphere');
}}
isChecked={environments.includes('vsphere')}
isDisabled={
!(
environments.includes('vsphere') ||
environments.includes('vsphere-ova')
)
}
/>
</>
}
onChange={() => {
handleToggleEnvironment('vsphere-ova');
handleToggleEnvironment('vsphere');
}}
isChecked={environments.includes('vsphere')}
isDisabled={
!(
environments.includes('vsphere') ||
environments.includes('vsphere-ova')
)
}
/>
</FormGroup>
</>