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

Wizard: Replace VMware radios with checkboxes

Browse source 
This replaces previously used VMware radios with checkboxes, allowing the user to select both VMware vSphere targets at the same time.
This commit is contained in:
regexowl 2025-07-02 15:44:48 +02:00 • committed by Gianluca Zuccarelli
parent ea93498ef2
commit caa678ebeb
2 changed files with 107 additions and 177 deletions
Download patch file Download diff file Expand all files Collapse all files

204
src/Components/CreateImageWizard/steps/ImageOutput/components/TargetEnvironment.tsx
View file

@ -6,7 +6,6 @@ import {
Checkbox,
FormGroup,
Popover,
Radio,
Content,
CardHeader,
Gallery,
@ -98,9 +97,6 @@ const TargetEnvironment = () => {
// TODO: Handle isFetching state (add skeletons)
// TODO: Handle isError state (very unlikely...)
const hasVsphere =
environments.includes('vsphere') || environments.includes('vsphere-ova');
const dispatch = useAppDispatch();
const prefetchSources = provisioningApi.usePrefetch('getSourceList');
const prefetchActivationKeys = rhsmApi.usePrefetch('listActivationKeys');
@ -201,131 +197,93 @@ const TargetEnvironment = () => {
</Gallery>
</FormGroup>
)}
{supportedEnvironments?.includes('vsphere') && (
<>
<FormGroup
label={<small>Private cloud</small>}
className="pf-v6-u-mt-sm"
>
{(supportedEnvironments?.includes('vsphere') ||
supportedEnvironments?.includes('vsphere-ova')) && (
<FormGroup
label={<small>Private cloud</small>}
className="pf-v6-u-mt-sm"
>
{supportedEnvironments?.includes('vsphere-ova') && (
<Checkbox
label="VMware vSphere"
isChecked={hasVsphere}
onChange={() => {
if (!hasVsphere) {
dispatch(addImageType('vsphere-ova'));
} else {
if (environments.includes('vsphere')) {
dispatch(removeImageType('vsphere'));
}
if (environments.includes('vsphere-ova')) {
dispatch(removeImageType('vsphere-ova'));
}
}
}}
aria-label="VMware checkbox"
id="checkbox-vmware"
name="VMware"
data-testid="checkbox-vmware"
body={
name="vsphere-checkbox-ova"
aria-label="VMware vSphere checkbox OVA"
id="vsphere-checkbox-ova"
data-testid="checkbox-vsphere-ova"
label={
<>
{supportedEnvironments?.includes('vsphere-ova') && (
<Radio
name="vsphere-radio"
aria-label="VMware vSphere radio button OVA"
id="vsphere-radio-ova"
data-testid="radio-vsphere-ova"
label={
<>
Open virtualization format (.ova)
<Popover
maxWidth="30rem"
position="right"
bodyContent={
<Content>
<Content>
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.
</Content>
</Content>
}
>
<Button
icon={<HelpIcon />}
className="pf-v6-u-pl-sm pf-v6-u-pt-0 pf-v6-u-pb-0"
variant="plain"
aria-label="About OVA file"
isInline
/>
</Popover>
</>
}
onChange={() => {
handleToggleEnvironment('vsphere-ova');
handleToggleEnvironment('vsphere');
}}
isChecked={environments.includes('vsphere-ova')}
isDisabled={
!(
environments.includes('vsphere') ||
environments.includes('vsphere-ova')
)
}
VMware vSphere - Open virtualization format (.ova)
<Popover
maxWidth="30rem"
position="right"
bodyContent={
<Content>
<Content>
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.
</Content>
</Content>
}
>
<Button
icon={<HelpIcon />}
className="pf-v6-u-pl-sm pf-v6-u-pt-0 pf-v6-u-pb-0"
variant="plain"
aria-label="About OVA file"
isInline
/>
)}
<Radio
className="pf-v6-u-mt-sm"
name="vsphere-radio"
aria-label="VMware vSphere radio button VMDK"
id="vsphere-radio-vmdk"
data-testid="radio-vsphere-vmdk"
label={
<>
Virtual disk (.vmdk)
<Popover
maxWidth="30rem"
position="right"
bodyContent={
<Content>
<Content>
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.
</Content>
</Content>
}
>
<Button
icon={<HelpIcon />}
className="pf-v6-u-pl-sm pf-v6-u-pt-0 pf-v6-u-pb-0"
variant="plain"
aria-label="About VMDK file"
isInline
/>
</Popover>
</>
}
onChange={() => {
handleToggleEnvironment('vsphere-ova');
handleToggleEnvironment('vsphere');
}}
isChecked={environments.includes('vsphere')}
isDisabled={
!(
environments.includes('vsphere') ||
environments.includes('vsphere-ova')
)
}
/>
</Popover>
</>
}
onChange={() => {
handleToggleEnvironment('vsphere-ova');
}}
isChecked={environments.includes('vsphere-ova')}
/>
</FormGroup>
</>
)}
{supportedEnvironments?.includes('vsphere') && (
<Checkbox
className="pf-v6-u-mt-sm"
name="vsphere-checkbox-vmdk"
aria-label="VMware vSphere checkbox VMDK"
id="vsphere-checkbox-vmdk"
data-testid="checkbox-vsphere-vmdk"
label={
<>
VMware vSphere - Virtual disk (.vmdk)
<Popover
maxWidth="30rem"
position="right"
bodyContent={
<Content>
<Content>
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.
</Content>
</Content>
}
>
<Button
icon={<HelpIcon />}
className="pf-v6-u-pl-sm pf-v6-u-pt-0 pf-v6-u-pb-0"
variant="plain"
aria-label="About VMDK file"
isInline
/>
</Popover>
</>
}
onChange={() => {
handleToggleEnvironment('vsphere');
}}
isChecked={environments.includes('vsphere')}
/>
)}
</FormGroup>
)}
<FormGroup label={<small>Other</small>}>
{supportedEnvironments?.includes('guest-image') && (

80
src/test/Components/CreateImageWizard/steps/ImageOutput/ImageOutput.test.tsx
View file

@ -122,12 +122,6 @@ const verifyNameInReviewStep = async (name: string) => {
expect(definition).toHaveTextContent(name);
};
const selectVMwareTarget = async () => {
const user = userEvent.setup();
const vmwareImageCheckBox = await screen.findByTestId('checkbox-vmware');
await waitFor(() => user.click(vmwareImageCheckBox));
};
const handleRegistration = async () => {
await clickNext(); // Registration
await clickRegisterLater();
@ -265,44 +259,6 @@ describe('Step Image output', () => {
);
});
test('VMware checkbox select and unselect works', async () => {
await renderCreateMode();
await selectRhel9();
await selectVMwareTarget();
let vmwareCheckbox = await screen.findByTestId('checkbox-vmware');
let ovaFileRadio = await screen.findByTestId('radio-vsphere-ova');
let vmdkFileRadio = await screen.findByTestId('radio-vsphere-vmdk');
expect(await screen.findByTestId('checkbox-vmware')).toBeChecked();
expect(ovaFileRadio).toBeChecked();
expect(vmdkFileRadio).not.toBeChecked();
// switch to VMDK
user.click(vmdkFileRadio);
// refresh values
vmwareCheckbox = await screen.findByTestId('checkbox-vmware');
ovaFileRadio = await screen.findByTestId('radio-vsphere-ova');
vmdkFileRadio = await screen.findByTestId('radio-vsphere-vmdk');
expect(vmwareCheckbox).toBeChecked();
expect(ovaFileRadio).not.toBeChecked();
expect(vmdkFileRadio).toBeChecked();
// unselect VMware
user.click(vmwareCheckbox);
// refresh values
vmwareCheckbox = await screen.findByTestId('checkbox-vmware');
ovaFileRadio = await screen.findByTestId('radio-vsphere-ova');
vmdkFileRadio = await screen.findByTestId('radio-vsphere-vmdk');
expect(vmwareCheckbox).not.toBeChecked();
expect(ovaFileRadio).not.toBeChecked();
expect(vmdkFileRadio).not.toBeChecked();
});
test('revisit step button on Review works', async () => {
await renderCreateMode();
await selectGuestImageTarget();
@ -411,8 +367,10 @@ describe('Check that the target filtering is in accordance to mock content', ()
await screen.findByTestId('upload-oci');
await screen.findByTestId('checkbox-guest-image');
await screen.findByTestId('checkbox-image-installer');
await screen.findByText(/vmware vsphere/i);
await screen.findByText(/open virtualization format \(\.ova\)/i);
await screen.findByText(
/VMware vSphere - Open virtualization format \(\.ova\)/
);
await screen.findByText(/VMware vSphere - Virtual disk \(\.vmdk\)/);
expect(
screen.queryByText(/wsl - windows subsystem for linux \(\.tar\.gz\)/i)
).not.toBeInTheDocument();
@ -448,8 +406,10 @@ describe('Check that the target filtering is in accordance to mock content', ()
await screen.findByTestId('upload-oci');
await screen.findByTestId('checkbox-guest-image');
await screen.findByTestId('checkbox-image-installer');
await screen.findByText(/vmware vsphere/i);
await screen.findByText(/open virtualization format \(\.ova\)/i);
await screen.findByText(
/VMware vSphere - Open virtualization format \(\.ova\)/
);
await screen.findByText(/VMware vSphere - Virtual disk \(\.vmdk\)/);
await screen.findByText(/wsl - windows subsystem for linux \(\.tar\.gz\)/i);
});
@ -484,9 +444,13 @@ describe('Check that the target filtering is in accordance to mock content', ()
expect(screen.queryByTestId('upload-oci')).not.toBeInTheDocument();
await screen.findByTestId('checkbox-guest-image');
await screen.findByTestId('checkbox-image-installer');
expect(screen.queryByText(/vmware vsphere/i)).not.toBeInTheDocument();
expect(
screen.queryByText(/open virtualization format \(\.ova\)/i)
screen.queryByText(
/VMware vSphere - Open virtualization format \(\.ova\)/
)
).not.toBeInTheDocument();
expect(
screen.queryByText(/VMware vSphere - Virtual disk \(\.vmdk\)/)
).not.toBeInTheDocument();
expect(
screen.queryByText(/wsl - windows subsystem for linux \(\.tar\.gz\)/i)
@ -525,9 +489,13 @@ describe('Check that the target filtering is in accordance to mock content', ()
expect(screen.queryByTestId('upload-oci')).not.toBeInTheDocument();
await screen.findByTestId('checkbox-guest-image');
await screen.findByTestId('checkbox-image-installer');
expect(screen.queryByText(/vmware vsphere/i)).not.toBeInTheDocument();
expect(
screen.queryByText(/open virtualization format \(\.ova\)/i)
screen.queryByText(
/VMware vSphere - Open virtualization format \(\.ova\)/
)
).not.toBeInTheDocument();
expect(
screen.queryByText(/VMware vSphere - Virtual disk \(\.vmdk\)/)
).not.toBeInTheDocument();
expect(
screen.queryByText(/wsl - windows subsystem for linux \(\.tar\.gz\)/i)
@ -564,9 +532,13 @@ describe('Check that the target filtering is in accordance to mock content', ()
expect(screen.queryByTestId('upload-oci')).not.toBeInTheDocument();
await screen.findByTestId('checkbox-guest-image');
await screen.findByTestId('checkbox-image-installer');
expect(screen.queryByText(/vmware vsphere/i)).not.toBeInTheDocument();
expect(
screen.queryByText(/open virtualization format \(\.ova\)/i)
screen.queryByText(
/VMware vSphere - Open virtualization format \(\.ova\)/
)
).not.toBeInTheDocument();
expect(
screen.queryByText(/VMware vSphere - Virtual disk \(\.vmdk\)/)
).not.toBeInTheDocument();
expect(
screen.queryByText(/wsl - windows subsystem for linux \(\.tar\.gz\)/i)