From caa678ebebc7726b502e61d6847f9fc5fbf7d413 Mon Sep 17 00:00:00 2001
From: regexowl <ksimicko@redhat.com>
Date: Wed, 2 Jul 2025 15:44:48 +0200
Subject: [PATCH] Wizard: Replace VMware radios with checkboxes

This replaces previously used VMware radios with checkboxes, allowing the user to select both VMware vSphere targets at the same time.
---
 .../components/TargetEnvironment.tsx          | 204 +++++++-----------
 .../steps/ImageOutput/ImageOutput.test.tsx    |  80 +++----
 2 files changed, 107 insertions(+), 177 deletions(-)

diff --git a/src/Components/CreateImageWizard/steps/ImageOutput/components/TargetEnvironment.tsx b/src/Components/CreateImageWizard/steps/ImageOutput/components/TargetEnvironment.tsx
index 0200c55c..2e53b517 100644
--- a/src/Components/CreateImageWizard/steps/ImageOutput/components/TargetEnvironment.tsx
+++ b/src/Components/CreateImageWizard/steps/ImageOutput/components/TargetEnvironment.tsx
@@ -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') && (
diff --git a/src/test/Components/CreateImageWizard/steps/ImageOutput/ImageOutput.test.tsx b/src/test/Components/CreateImageWizard/steps/ImageOutput/ImageOutput.test.tsx
index 2d3d69dd..a1a71355 100644
--- a/src/test/Components/CreateImageWizard/steps/ImageOutput/ImageOutput.test.tsx
+++ b/src/test/Components/CreateImageWizard/steps/ImageOutput/ImageOutput.test.tsx
@@ -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)