Add appliance management UI input for OVA providers

Add checkbox field to enable appliance management when creating OVA
providers and in the provider details page. This setting controls
whether users can upload OVA files directly to the provider.

Changes:
- Add checkbox in create provider form for OVA type
- Add details item with edit capability in OVA provider details page
- Add E2E test verification for appliance management setting

Resolves: MTV-4481
Signed-off-by: Aviv Turgeman <[email protected]>

Author: avivtur

Claude.md

@@ -34,16 +34,24 @@ This is an **OpenShift Console dynamic plugin** for [Forklift](https://github.co
    }
    ```
 
-2. **Use inline type imports**:
-   ```typescript
-   // ✅ Good
-   import { type FC, useState } from 'react';
-   import { type UserProps } from './types';
-
-   // ❌ Bad
-   import type { FC } from 'react';
-   import { useState } from 'react';
-   ```
+2. **Type imports**:
+   - If **all** imports from a module are types, use `import type`:
+     ```typescript
+     // ✅ Good - all imports are types
+     import type { FC, ReactNode } from 'react';
+     import type { UserProps } from './types';
+     ```
+   - If **some** imports are types and some are values, use inline `type` keyword:
+     ```typescript
+     // ✅ Good - mixed types and values
+     import { type FC, useState, type ReactNode } from 'react';
+     ```
+   - Never separate type and value imports from the same module:
+     ```typescript
+     // ❌ Bad - separate imports from same module
+     import type { FC } from 'react';
+     import { useState } from 'react';
+     ```
 
 3. **Strict null checks are enabled** - always handle nullable values properly.
 

locales/en/plugin__forklift-console-plugin.json

@@ -152,6 +152,7 @@
   "Ansible playbook. If you specify a playbook, the image must be hook-runner.": "Ansible playbook. If you specify a playbook, the image must be hook-runner.",
   "Any underscore (_) is changed to a dash (-).": "Any underscore (_) is changed to a dash (-).",
   "API endpoint URL": "API endpoint URL",
+  "Appliance management": "Appliance management",
   "Application credential ID": "Application credential ID",
   "Application credential ID:": "Application credential ID:",
   "Application credential name": "Application credential name",
@@ -363,6 +364,7 @@
   "Edit {{hookTypeLowercase}} migration hook": "Edit {{hookTypeLowercase}} migration hook",
   "Edit affinity rule": "Edit affinity rule",
   "Edit Ansible hook configuration for your migration plan. Hooks are applied to all virtual machines in the plan.": "Edit Ansible hook configuration for your migration plan. Hooks are applied to all virtual machines in the plan.",
+  "Edit appliance management": "Edit appliance management",
   "Edit cutover": "Edit cutover",
   "Edit default transfer network": "Edit default transfer network",
   "Edit description": "Edit description",
@@ -392,6 +394,7 @@
   "Edit volume name template": "Edit volume name template",
   "Empty": "Empty",
   "Enable {{hookTypeLowercase}} migration hook": "Enable {{hookTypeLowercase}} migration hook",
+  "Enable appliance management for local OVA file uploads": "Enable appliance management for local OVA file uploads",
   "Enabled": "Enabled",
   "Enables hardware-assisted copying by instructing the vSphere ESXi host to transfer data directly on the storage backend using technologies like XCOPY and VAAI.": "Enables hardware-assisted copying by instructing the vSphere ESXi host to transfer data directly on the storage backend using technologies like XCOPY and VAAI.",
   "Endpoint": "Endpoint",
@@ -1228,7 +1231,6 @@
   "Upload a VDDK archive to generate the image URL": "Upload a VDDK archive to generate the image URL",
   "Upload an OVA file which will be added to provider's virtual machines. The uploaded file name extension should be .ova": "Upload an OVA file which will be added to provider's virtual machines. The uploaded file name extension should be .ova",
   "Upload local OVA file": "Upload local OVA file",
-  "Upload local OVA files": "Upload local OVA files",
   "Uploading...": "Uploading...",
   "Uppercase letters are switched to lowercase letters.": "Uppercase letters are switched to lowercase letters.",
   "URL": "URL",
@@ -1345,6 +1347,7 @@
   "Weight must be a number between 1-100": "Weight must be a number between 1-100",
   "Welcome": "Welcome",
   "What type of provider do you want to create?": "What type of provider do you want to create?",
+  "When enabled, allows uploading OVA files directly to the provider instead of using NFS shared directory only.": "When enabled, allows uploading OVA files directly to the provider instead of using NFS shared directory only.",
   "When the URL field is left empty, the local OpenShift cluster is used.": "When the URL field is left empty, the local OpenShift cluster is used.",
   "When the VM will migrate during a warm migration. VMs included in the migration plan will be shut down when the cutover starts.": "When the VM will migrate during a warm migration. VMs included in the migration plan will be shut down when the cutover starts.",
   "When you migrate from OpenStack, or when you run a cold migration from Red Hat Virtualization to the Red Hat OpenShift cluster that MTV is deployed on, the migration allocates persistent volumes without CDI. In these cases, you might need to adjust the file system overhead.": "When you migrate from OpenStack, or when you run a cold migration from Red Hat Virtualization to the Red Hat OpenShift cluster that MTV is deployed on, the migration allocates persistent volumes without CDI. In these cases, you might need to adjust the file system overhead.",

src/components/DetailItems/DetailItem.tsx

@@ -66,11 +66,13 @@ const DescriptionTitleWithHelp: FC<{
 
             {!isEmpty(crumbs) && (
               <FlexItem>
-                <Breadcrumb>
-                  {crumbs?.map((crumb) => (
-                    <BreadcrumbItem key={crumb}>{crumb}</BreadcrumbItem>
-                  ))}
-                </Breadcrumb>
+                <Flex direction={{ default: 'row' }} flexWrap={{ default: 'nowrap' }}>
+                  <Breadcrumb>
+                    {crumbs?.map((crumb) => (
+                      <BreadcrumbItem key={crumb}>{crumb}</BreadcrumbItem>
+                    ))}
+                  </Breadcrumb>
+                </Flex>
               </FlexItem>
             )}
           </Flex>

src/components/OvaFileUploader/OvaFileUploader.tsx

@@ -28,9 +28,7 @@ const OvaFileUploader: FC<OvaFileUploaderProps> = ({ provider }) => {
   const [response, setResponse] = useState<UploadOvaResponse | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [uploading, setUploading] = useState(false);
-  const [validation, setValidation] = useState<OvaValidationVariant>(
-    OvaValidationVariant.Indeterminate,
-  );
+  const [validation, setValidation] = useState<OvaValidationVariant>(OvaValidationVariant.Default);
 
   const handleUpload = async () => {
     if (!file) return;
@@ -68,7 +66,7 @@ const OvaFileUploader: FC<OvaFileUploaderProps> = ({ provider }) => {
           onClearClick={() => {
             setFile(undefined);
             setFilename('');
-            setValidation(OvaValidationVariant.Indeterminate);
+            setValidation(OvaValidationVariant.Default);
             setResponse(null);
             setError(null);
           }}

src/providers/create/ProviderTypeFields.tsx

@@ -15,6 +15,7 @@ import ServiceAccountTokenField from './fields/openshift/ServiceAccountTokenFiel
 import OpenStackAuthenticationTypeField from './fields/openstack/OpenStackAuthenticationTypeField';
 import OpenStackUrlField from './fields/openstack/OpenStackUrlField';
 import NfsDirectoryField from './fields/ova/NfsDirectoryField';
+import OvaApplianceManagementField from './fields/ova/OvaApplianceManagementField';
 import OvirtCredentialsFields from './fields/ovirt/OvirtCredentialsFields';
 import OvirtUrlField from './fields/ovirt/OvirtUrlField';
 import ProviderNameField from './fields/ProviderNameField';
@@ -48,7 +49,12 @@ const ProviderTypeFields: FC = () => {
 
       {selectedProviderType && <ProviderNameField />}
 
-      {selectedProviderType === PROVIDER_TYPES.ova && <NfsDirectoryField />}
+      {selectedProviderType === PROVIDER_TYPES.ova && (
+        <>
+          <NfsDirectoryField />
+          <OvaApplianceManagementField />
+        </>
+      )}
 
       {selectedProviderType === PROVIDER_TYPES.openshift && (
         <>

src/providers/create/fields/constants.ts

@@ -40,6 +40,7 @@ enum OpenstackProviderFormFieldId {
 
 enum OvaProviderFormFieldId {
   NfsDirectory = 'nfsDirectory',
+  OvaApplianceManagement = 'ovaApplianceManagement',
 }
 
 enum OvirtProviderFormFieldId {

src/providers/create/fields/ova/OvaApplianceManagementField.tsx

@@ -0,0 +1,40 @@
+import type { FC } from 'react';
+import { useController } from 'react-hook-form';
+import {
+  OVA_APPLIANCE_MANAGEMENT_DESCRIPTION,
+  OVA_APPLIANCE_MANAGEMENT_LABEL,
+} from 'src/providers/utils/constants';
+
+import { Checkbox, FormGroup } from '@patternfly/react-core';
+
+import { useCreateProviderFormContext } from '../../hooks/useCreateProviderFormContext';
+import { ProviderFormFieldId } from '../constants';
+
+const OvaApplianceManagementField: FC = () => {
+  const { control } = useCreateProviderFormContext();
+
+  const {
+    field: { onChange, value },
+  } = useController({
+    control,
+    name: ProviderFormFieldId.OvaApplianceManagement,
+  });
+
+  return (
+    <FormGroup fieldId={ProviderFormFieldId.OvaApplianceManagement}>
+      <Checkbox
+        label={OVA_APPLIANCE_MANAGEMENT_LABEL}
+        isChecked={value ?? false}
+        onChange={(_event, checked) => {
+          onChange(checked);
+        }}
+        id={ProviderFormFieldId.OvaApplianceManagement}
+        name={ProviderFormFieldId.OvaApplianceManagement}
+        data-testid="ova-appliance-management-checkbox"
+        description={OVA_APPLIANCE_MANAGEMENT_DESCRIPTION}
+      />
+    </FormGroup>
+  );
+};
+
+export default OvaApplianceManagementField;

src/providers/create/types.ts

@@ -23,6 +23,7 @@ type OpenshiftFields = {
 
 type OvaFields = {
   [ProviderFormFieldId.NfsDirectory]?: string;
+  [ProviderFormFieldId.OvaApplianceManagement]?: boolean;
 };
 
 type HypervFields = {

src/providers/create/utils/buildOvaProviderResources.ts

@@ -1,4 +1,4 @@
-import { PROVIDER_TYPES } from 'src/providers/utils/constants';
+import { PROVIDER_TYPES, TRUE_VALUE } from 'src/providers/utils/constants';
 
 import type { IoK8sApiCoreV1Secret, V1beta1Provider } from '@forklift-ui/types';
 
@@ -17,6 +17,7 @@ export const buildOvaProviderResources = (formData: OvaFormData): ProviderResour
   const namespace = formData[ProviderFormFieldId.ProviderProject];
   const providerName = formData[ProviderFormFieldId.ProviderName];
   const nfsDirectory = formData[ProviderFormFieldId.NfsDirectory] ?? '';
+  const applianceManagement = formData[ProviderFormFieldId.OvaApplianceManagement];
 
   const provider = buildProviderObject({
     name: providerName,
@@ -25,6 +26,13 @@ export const buildOvaProviderResources = (formData: OvaFormData): ProviderResour
     url: nfsDirectory,
   });
 
+  if (applianceManagement && provider.spec) {
+    provider.spec.settings = {
+      ...provider.spec.settings,
+      applianceManagement: TRUE_VALUE,
+    };
+  }
+
   const secret = buildSecretObject({
     namespace,
   });

src/providers/details/tabs/Details/components/DetailsSection/ApplianceManagementDetailsItem.tsx

@@ -0,0 +1,48 @@
+import type { FC } from 'react';
+import { DetailsItem } from 'src/components/DetailItems/DetailItem';
+import { OVA_APPLIANCE_MANAGEMENT_DESCRIPTION } from 'src/providers/utils/constants';
+
+import { useModal } from '@openshift-console/dynamic-plugin-sdk';
+import { Label } from '@patternfly/react-core';
+import { isApplianceManagementEnabled } from '@utils/crds/common/selectors';
+import { useForkliftTranslation } from '@utils/i18n';
+
+import type { ProviderDetailsItemProps } from './utils/types';
+import EditApplianceManagement, {
+  type EditApplianceManagementProps,
+} from './EditApplianceManagement';
+
+const ApplianceManagementDetailsItem: FC<ProviderDetailsItemProps> = ({
+  canPatch,
+  helpContent,
+  resource: provider,
+}) => {
+  const { t } = useForkliftTranslation();
+  const launcher = useModal();
+
+  const isEnabled = isApplianceManagementEnabled(provider);
+
+  return (
+    <DetailsItem
+      testId="appliance-management-detail-item"
+      title={t('Appliance management')}
+      content={
+        isEnabled ? (
+          <Label isCompact status="success">
+            {t('Enabled')}
+          </Label>
+        ) : (
+          <Label isCompact>{t('Disabled')}</Label>
+        )
+      }
+      helpContent={helpContent ?? OVA_APPLIANCE_MANAGEMENT_DESCRIPTION}
+      crumbs={['Provider', 'spec', 'settings', 'applianceManagement']}
+      onEdit={() => {
+        launcher<EditApplianceManagementProps>(EditApplianceManagement, { provider });
+      }}
+      canEdit={canPatch}
+    />
+  );
+};
+
+export default ApplianceManagementDetailsItem;