CreateImageWizard: Add support for vsphere-ova imagetype

The OVA type is also the default when checking VMWare now.

src/Components/CreateImageWizard/CreateImageWizard.js

@@ -204,6 +204,25 @@ const onSave = (values) => {
     requests.push(request);
   }
 
+  if (values['target-environment']?.['vsphere-ova']) {
+    const request = {
+      distribution: values.release,
+      image_name: values?.['image-name'],
+      image_requests: [
+        {
+          architecture: 'x86_64',
+          image_type: 'vsphere-ova',
+          upload_request: {
+            type: 'aws.s3',
+            options: {},
+          },
+        },
+      ],
+      customizations,
+    };
+    requests.push(request);
+  }
+
   if (values['target-environment']?.['guest-image']) {
     const request = {
       distribution: values.release,

src/Components/CreateImageWizard/formComponents/ReviewStep.js

@@ -86,7 +86,13 @@ const ReviewStep = () => {
         )}
         {getState()?.values?.['target-environment']?.vsphere && (
           <TextContent>
-            <Text component={TextVariants.h3}>VMWare (.vmdk)</Text>
+            <Text component={TextVariants.h3}>VMWare vSphere (.vmdk)</Text>
+            <TargetEnvOtherList />
+          </TextContent>
+        )}
+        {getState()?.values?.['target-environment']?.['vsphere-ova'] && (
+          <TextContent>
+            <Text component={TextVariants.h3}>VMWare vSphere (.ova)</Text>
             <TargetEnvOtherList />
           </TextContent>
         )}

src/Components/CreateImageWizard/formComponents/TargetEnvironment.js

@@ -5,10 +5,14 @@ import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
 import {
   Checkbox,
   FormGroup,
+  Popover,
+  Radio,
   Text,
+  TextContent,
   TextVariants,
   Tile,
 } from '@patternfly/react-core';
+import { HelpIcon } from '@patternfly/react-icons';
 import PropTypes from 'prop-types';
 
 import { usePrefetch } from '../../../store/apiSlice';
@@ -20,6 +24,7 @@ const TargetEnvironment = ({ label, isRequired, ...props }) => {
     aws: false,
     azure: false,
     gcp: false,
+    'vsphere-ova': false,
     vsphere: false,
     'guest-image': false,
     'image-installer': false,
@@ -32,129 +37,204 @@ const TargetEnvironment = ({ label, isRequired, ...props }) => {
     }
   }, []);
 
-  const handleSetEnvironment = (env) =>
+  const handleSetEnvironment = (env, checked) =>
     setEnvironment((prevEnv) => {
       const newEnv = {
         ...prevEnv,
-        [env]: !prevEnv[env],
+        [env]: checked,
       };
       change(input.name, newEnv);
       return newEnv;
     });
 
-  const handleKeyDown = (e, env) => {
+  const handleKeyDown = (e, env, checked) => {
     if (e.key === ' ') {
-      handleSetEnvironment(env);
+      handleSetEnvironment(env, checked);
     }
   };
 
   return (
-    <>
+    <FormGroup
+      isRequired={isRequired}
+      label={label}
+      data-testid="target-select"
+    >
       <FormGroup
-        isRequired={isRequired}
+        label={<Text component={TextVariants.small}>Public cloud</Text>}
-        label={label}
+        data-testid="target-public"
-        data-testid="target-select"
       >
-        <FormGroup
+        <div className="tiles">
-          label={<Text component={TextVariants.small}>Public cloud</Text>}
+          <Tile
-          data-testid="target-public"
+            className="tile pf-u-mr-sm"
-        >
+            data-testid="upload-aws"
-          <div className="tiles">
+            title="Amazon Web Services"
-            <Tile
+            icon={
-              className="tile pf-u-mr-sm"
+              <img
-              data-testid="upload-aws"
+                className="provider-icon"
-              title="Amazon Web Services"
+                src={'/apps/frontend-assets/partners-icons/aws.svg'}
-              icon={
+              />
-                <img
+            }
-                  className="provider-icon"
+            onClick={() => handleSetEnvironment('aws', !environment.aws)}
-                  src={'/apps/frontend-assets/partners-icons/aws.svg'}
+            onKeyDown={(e) => handleKeyDown(e, 'aws', !environment.aws)}
-                />
+            onMouseEnter={() => prefetchSources('aws')}
-              }
+            isSelected={environment.aws}
-              onClick={() => handleSetEnvironment('aws')}
+            isStacked
-              onKeyDown={(e) => handleKeyDown(e, 'aws')}
+            isDisplayLarge
-              onMouseEnter={() => prefetchSources('aws')}
-              isSelected={environment.aws}
-              isStacked
-              isDisplayLarge
-            />
-            <Tile
-              className="tile pf-u-mr-sm"
-              data-testid="upload-google"
-              title="Google Cloud Platform"
-              icon={
-                <img
-                  className="provider-icon"
-                  src={
-                    '/apps/frontend-assets/partners-icons/google-cloud-short.svg'
-                  }
-                />
-              }
-              onClick={() => handleSetEnvironment('gcp')}
-              isSelected={environment.gcp}
-              onKeyDown={(e) => handleKeyDown(e, 'gcp')}
-              isStacked
-              isDisplayLarge
-            />
-            <Tile
-              className="tile pf-u-mr-sm"
-              data-testid="upload-azure"
-              title="Microsoft Azure"
-              icon={
-                <img
-                  className="provider-icon"
-                  src={
-                    '/apps/frontend-assets/partners-icons/microsoft-azure-short.svg'
-                  }
-                />
-              }
-              onClick={() => handleSetEnvironment('azure')}
-              onKeyDown={(e) => handleKeyDown(e, 'azure')}
-              onMouseEnter={() => prefetchSources('azure')}
-              isSelected={environment.azure}
-              isStacked
-              isDisplayLarge
-            />
-          </div>
-        </FormGroup>
-        <FormGroup
-          label={<Text component={TextVariants.small}>Private cloud</Text>}
-          data-testid="target-private"
-        >
-          <Checkbox
-            label="VMWare (.vmdk)"
-            isChecked={environment.vsphere}
-            onChange={() => handleSetEnvironment('vsphere')}
-            aria-label="VMWare checkbox"
-            id="checkbox-vmware"
-            name="VMWare"
-            data-testid="checkbox-vmware"
           />
-        </FormGroup>
+          <Tile
-        <FormGroup
+            className="tile pf-u-mr-sm"
-          label={<Text component={TextVariants.small}>Other</Text>}
+            data-testid="upload-google"
-          data-testid="target-other"
+            title="Google Cloud Platform"
-        >
+            icon={
-          <Checkbox
+              <img
-            label="Virtualization - Guest image (.qcow2)"
+                className="provider-icon"
-            isChecked={environment['guest-image']}
+                src={
-            onChange={() => handleSetEnvironment('guest-image')}
+                  '/apps/frontend-assets/partners-icons/google-cloud-short.svg'
-            aria-label="Virtualization guest image checkbox"
+                }
-            id="checkbox-guest-image"
+              />
-            name="Virtualization guest image"
+            }
-            data-testid="checkbox-guest-image"
+            onClick={() => handleSetEnvironment('gcp', !environment.gcp)}
+            isSelected={environment.gcp}
+            onKeyDown={(e) => handleKeyDown(e, 'gcp', !environment.gcp)}
+            isStacked
+            isDisplayLarge
           />
-          <Checkbox
+          <Tile
-            label="Bare metal - Installer (.iso)"
+            className="tile pf-u-mr-sm"
-            isChecked={environment['image-installer']}
+            data-testid="upload-azure"
-            onChange={() => handleSetEnvironment('image-installer')}
+            title="Microsoft Azure"
-            aria-label="Bare metal installer checkbox"
+            icon={
-            id="checkbox-image-installer"
+              <img
-            name="Bare metal installer"
+                className="provider-icon"
-            data-testid="checkbox-image-installer"
+                src={
+                  '/apps/frontend-assets/partners-icons/microsoft-azure-short.svg'
+                }
+              />
+            }
+            onClick={() => handleSetEnvironment('azure', !environment.azure)}
+            onKeyDown={(e) => handleKeyDown(e, 'azure', !environment.azure)}
+            onMouseEnter={() => prefetchSources('azure')}
+            isSelected={environment.azure}
+            isStacked
+            isDisplayLarge
           />
-        </FormGroup>
+        </div>
       </FormGroup>
-    </>
+      <FormGroup
+        label={<Text component={TextVariants.small}>Private cloud</Text>}
+        className="pf-u-mt-sm"
+        data-testid="target-private"
+      >
+        <Checkbox
+          label="VMWare vSphere"
+          isChecked={environment.vsphere || environment['vsphere-ova']}
+          onChange={(checked) => {
+            handleSetEnvironment('vsphere-ova', checked);
+            handleSetEnvironment('vsphere', false);
+          }}
+          aria-label="VMWare checkbox"
+          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"
+      >
+        <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>
+                }
+              >
+                <HelpIcon className="pf-u-ml-sm" />
+              </Popover>
+            </>
+          }
+          onChange={(checked) => {
+            handleSetEnvironment('vsphere-ova', checked);
+            handleSetEnvironment('vsphere', !checked);
+          }}
+          isChecked={environment['vsphere-ova']}
+          isDisabled={!(environment.vsphere || environment['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>
+                }
+              >
+                <HelpIcon className="pf-u-ml-sm" />
+              </Popover>
+            </>
+          }
+          onChange={(checked) => {
+            handleSetEnvironment('vsphere-ova', !checked);
+            handleSetEnvironment('vsphere', checked);
+          }}
+          isChecked={environment.vsphere}
+          isDisabled={!(environment.vsphere || environment['vsphere-ova'])}
+        />
+      </FormGroup>
+      <FormGroup
+        label={<Text component={TextVariants.small}>Other</Text>}
+        data-testid="target-other"
+      >
+        <Checkbox
+          label="Virtualization - Guest image (.qcow2)"
+          isChecked={environment['guest-image']}
+          onChange={(checked) => handleSetEnvironment('guest-image', checked)}
+          aria-label="Virtualization guest image checkbox"
+          id="checkbox-guest-image"
+          name="Virtualization guest image"
+          data-testid="checkbox-guest-image"
+        />
+        <Checkbox
+          label="Bare metal - Installer (.iso)"
+          isChecked={environment['image-installer']}
+          onChange={(checked) =>
+            handleSetEnvironment('image-installer', checked)
+          }
+          aria-label="Bare metal installer checkbox"
+          id="checkbox-image-installer"
+          name="Bare metal installer"
+          data-testid="checkbox-image-installer"
+        />
+      </FormGroup>
+    </FormGroup>
   );
 };
 

src/Components/ImagesTable/ImageLinkDirect.js

@@ -36,6 +36,7 @@ const ImageLinkDirect = ({ imageId, isExpired, isInClonesTable }) => {
 
   const fileExtensions = {
     vsphere: '.vmdk',
+    'vsphere-ova': '.ova',
     'guest-image': '.qcow2',
     'image-installer': '.iso',
   };

src/Components/ImagesTable/Target.js

@@ -12,7 +12,8 @@ const Target = ({ composeId }) => {
     aws: 'Amazon Web Services',
     azure: 'Microsoft Azure',
     gcp: 'Google Cloud Platform',
-    vsphere: 'VMWare',
+    vsphere: 'VMWare vSphere',
+    'vsphere-ova': 'VMWare vSphere',
     'guest-image': 'Virtualization - Guest image',
     'image-installer': 'Bare metal - Installer',
   };

src/test/Components/CreateImageWizard/CreateImageWizard.beta.test.js

@@ -750,7 +750,7 @@ describe('Click through all steps', () => {
     targetEnvironmentsExpandable.click();
     await screen.findAllByText('AWS');
     await screen.findAllByText('GCP');
-    await screen.findByText('VMWare (.vmdk)');
+    await screen.findByText('VMWare vSphere (.ova)');
     await screen.findByText('Virtualization - Guest image (.qcow2)');
     await screen.findByText('Bare metal - Installer (.iso)');
 
@@ -849,14 +849,14 @@ describe('Click through all steps', () => {
             customizations: customizations,
           });
           id = 'edbae1c2-62bc-42c1-ae0c-3110ab718f58';
-        } else if (body.image_requests[0].image_type === 'vsphere') {
+        } else if (body.image_requests[0].image_type === 'vsphere-ova') {
           expect(body).toEqual({
             distribution: RHEL_8,
             image_name: 'MyImageName',
             image_requests: [
               {
                 architecture: 'x86_64',
-                image_type: 'vsphere',
+                image_type: 'vsphere-ova',
                 upload_request: {
                   type: 'aws.s3',
                   options: {},

src/test/Components/CreateImageWizard/CreateImageWizard.test.js

@@ -1396,7 +1396,7 @@ describe('Click through all steps', () => {
     targetEnvironmentsExpandable.click();
     await screen.findAllByText('AWS');
     await screen.findAllByText('GCP');
-    await screen.findByText('VMWare (.vmdk)');
+    await screen.findByText('VMWare vSphere (.ova)');
     await screen.findByText('Virtualization - Guest image (.qcow2)');
     await screen.findByText('Bare metal - Installer (.iso)');
 
@@ -1566,14 +1566,14 @@ describe('Click through all steps', () => {
             },
           });
           id = 'edbae1c2-62bc-42c1-ae0c-3110ab718f58';
-        } else if (body.image_requests[0].image_type === 'vsphere') {
+        } else if (body.image_requests[0].image_type === 'vsphere-ova') {
           expect(body).toEqual({
             distribution: RHEL_8,
             image_name: 'MyImageName',
             image_requests: [
               {
                 architecture: 'x86_64',
-                image_type: 'vsphere',
+                image_type: 'vsphere-ova',
                 upload_request: {
                   type: 'aws.s3',
                   options: {},