Resolves: MTV-3738 | Provider create form - OVA

Signed-off-by: Jeff Puzzo <[email protected]>

Author: jpuzz0

knip.config.ts

@@ -9,6 +9,7 @@ export default {
     'src/onlineHelp/tipsAndTricksDrawer/hooks/useLearningExperienceContext.ts',
 
     'src/providers/create/ProvidersCreatePage.tsx',
+    'src/providers/create-new/ProvidersCreatePage.tsx',
     'src/providers/list/ProvidersListPage.tsx',
     'src/providers/details/ProviderDetailsPage.tsx',
     'src/utils/types.ts',

locales/en/plugin__forklift-console-plugin.json

@@ -202,6 +202,8 @@
   "Click to select a different provider from the list.": "Click to select a different provider from the list.",
   "Click to unselect": "Click to unselect",
   "Close": "Close",
+  "Cloud computing platform that controls large pools of resources": "Cloud computing platform that controls large pools of resources",
+  "Cloud computing virtualization platform": "Cloud computing virtualization platform",
   "Cluster": "Cluster",
   "Clusters": "Clusters",
   "Cold": "Cold",
@@ -270,6 +272,7 @@
   "Default transfer network": "Default transfer network",
   "Default transfer Network": "Default transfer Network",
   "Define an affinity rule. This rule will be added to the list of affinity rules applied to this workload.": "Define an affinity rule. This rule will be added to the list of affinity rules applied to this workload.",
+  "Define the connection attributes the Migration Toolkit for Virtualization needs to interact with your source and target providers.": "Define the connection attributes the Migration Toolkit for Virtualization needs to interact with your source and target providers.",
   "Define your plan details:": "Define your plan details:",
   "Defines the CPU limits allocated to the main container in the controller pod. The default value is 500 milliCPU.": "Defines the CPU limits allocated to the main container in the controller pod. The default value is 500 milliCPU.",
   "Delete": "Delete",
@@ -359,6 +362,7 @@
   "Enter value": "Enter value",
   "Error": "Error",
   "Error creating network map": "Error creating network map",
+  "Error creating provider": "Error creating provider",
   "Error creating storage map": "Error creating storage map",
   "Error details": "Error details",
   "Error updating storage map": "Error updating storage map",
@@ -414,6 +418,7 @@
   "Folder name": "Folder name",
   "For applications that need to be available 24/7, warm migration is the preferred choice to ensure business continuity.": "For applications that need to be available 24/7, warm migration is the preferred choice to ensure business continuity.",
   "For each LUKS-encrypted device, Migration Toolkit for Virtualization (MTV) tries each passphrase until one unlocks the device.": "For each LUKS-encrypted device, Migration Toolkit for Virtualization (MTV) tries each passphrase until one unlocks the device.",
+  "For example: 10.10.0.10:/ova": "For example: 10.10.0.10:/ova",
   "For VMs used for development, testing, or other non-essential tasks, the downtime is unlikely to have a major business impact.": "For VMs used for development, testing, or other non-essential tasks, the downtime is unlikely to have a major business impact.",
   "Forklift controller logs": "Forklift controller logs",
   "Forklift controller logs capture Migration Toolkit for Virtualization (MTV) related events.": "Forklift controller logs capture Migration Toolkit for Virtualization (MTV) related events.",
@@ -585,6 +590,8 @@
   "My warm migration is failing or getting stuck during the pre-copy stage. What's the problem?": "My warm migration is failing or getting stuck during the pre-copy stage. What's the problem?",
   "Name": "Name",
   "Name is primarily intended for creation idempotence and configuration definition. Cannot be updated.": "Name is primarily intended for creation idempotence and configuration definition. Cannot be updated.",
+  "Name must be no more than 253 characters": "Name must be no more than 253 characters",
+  "Name must consist of lower case alphanumeric characters or \"-\", and must start and end with an alphanumeric character": "Name must consist of lower case alphanumeric characters or \"-\", and must start and end with an alphanumeric character",
   "Name your plan and choose the project you would like it to be created in.": "Name your plan and choose the project you would like it to be created in.",
   "Namespace": "Namespace",
   "Namespace defines the space within which each name must be unique.\n     An empty namespace is equivalent to the \"default\" namespace, but \"default\" is the canonical representation.\n     Not all objects are required to be scoped to a namespace -\n     the value of this field for those objects will be empty.": "Namespace defines the space within which each name must be unique.\n     An empty namespace is equivalent to the \"default\" namespace, but \"default\" is the canonical representation.\n     Not all objects are required to be scoped to a namespace -\n     the value of this field for those objects will be empty.",
@@ -609,6 +616,9 @@
   "Networks used by the selected VMs": "Networks used by the selected VMs",
   "New migration plan name": "New migration plan name",
   "Next": "Next",
+  "NFS path must be in format: host:/path (e.g., 10.10.0.10:/ova)": "NFS path must be in format: host:/path (e.g., 10.10.0.10:/ova)",
+  "NFS shared directory": "NFS shared directory",
+  "NFS shared directory is required": "NFS shared directory is required",
   "No affinity rules found": "No affinity rules found",
   "No concerns found for this virtual machine.": "No concerns found for this virtual machine.",
   "No credentials found.": "No credentials found.",
@@ -678,7 +688,10 @@
   "Offload options (optional)": "Offload options (optional)",
   "Offload plugin": "Offload plugin",
   "On": "On",
+  "Open Virtual Appliance": "Open Virtual Appliance",
+  "OpenShift Virtualization": "OpenShift Virtualization",
   "OpenShift web console UI": "OpenShift web console UI",
+  "OpenStack": "OpenStack",
   "OpenStack application credential ID needed for the application credential authentication.": "OpenStack application credential ID needed for the application credential authentication.",
   "OpenStack application credential ID needed for the application credential authentication. [required]": "OpenStack application credential ID needed for the application credential authentication. [required]",
   "OpenStack application credential name needed for application credential authentication.": "OpenStack application credential name needed for application credential authentication.",
@@ -777,7 +790,12 @@
   "Provider inventory": "Provider inventory",
   "Provider name": "Provider name",
   "Provider name is not unique": "Provider name is not unique",
+  "Provider project": "Provider project",
+  "Provider project is required.": "Provider project is required.",
+  "Provider resource name": "Provider resource name",
+  "Provider resource name is required": "Provider resource name is required",
   "Provider type": "Provider type",
+  "Provider type is required": "Provider type is required",
   "Provider web UI link": "Provider web UI link",
   "Provider YAML": "Provider YAML",
   "Providers": "Providers",
@@ -790,6 +808,7 @@
   "Ready for migration": "Ready for migration",
   "Ready to start": "Ready to start",
   "Reason": "Reason",
+  "Red Hat Virtualization": "Red Hat Virtualization",
   "Red Hat Virtualization Manager UI": "Red Hat Virtualization Manager UI",
   "Region": "Region",
   "Regions": "Regions",
@@ -810,6 +829,7 @@
   "Root filesystem format should start with \"/dev/sd[X]\", see documentation for more information.": "Root filesystem format should start with \"/dev/sd[X]\", see documentation for more information.",
   "Rules with \"Preferred\" condition will stack with an \"AND\" relation between them.": "Rules with \"Preferred\" condition will stack with an \"AND\" relation between them.",
   "Rules with \"Required\" condition will stack with an \"OR\" relation between them.": "Rules with \"Required\" condition will stack with an \"OR\" relation between them.",
+  "Run and manage virtual machines in Red Hat OpenShift": "Run and manage virtual machines in Red Hat OpenShift",
   "Run the command:<1><0>{mustGatherExample}</0></1>(But this won't be static; the UI should populate it as the image can change),": "Run the command:<1><0>{mustGatherExample}</0></1>(But this won't be static; the UI should populate it as the image can change),",
   "running": "running",
   "Running": "Running",
@@ -825,6 +845,7 @@
   "Select a network map:": "Select a network map:",
   "Select a project": "Select a project",
   "Select a provider": "Select a provider",
+  "Select a provider type": "Select a provider type",
   "Select a source provider to list available source networks": "Select a source provider to list available source networks",
   "Select a source provider to list available source storages": "Select a source provider to list available source storages",
   "Select a storage map:": "Select a storage map:",
@@ -843,6 +864,7 @@
   "Select offload plugin": "Select offload plugin",
   "Select plan project": "Select plan project",
   "Select project": "Select project",
+  "Select provider project": "Select provider project",
   "Select source network": "Select source network",
   "Select source provider": "Select source provider",
   "Select source storage": "Select source storage",
@@ -983,6 +1005,7 @@
   "The project that your migration plan will be created in. Only projects with providers in them can be selected.": "The project that your migration plan will be created in. Only projects with providers in them can be selected.",
   "The project that your network map will be created in.": "The project that your network map will be created in.",
   "The project that your provider will be created in.": "The project that your provider will be created in.",
+  "The project that your provider will be created in. This determines where the provider credentials and configuration will be stored.": "The project that your provider will be created in. This determines where the provider credentials and configuration will be stored.",
   "The project that your storage map will be created in.": "The project that your storage map will be created in.",
   "The project, within your selected target provider, in which your virtual machines will be migrated.": "The project, within your selected target provider, in which your virtual machines will be migrated.",
   "The project, within your selected target provider, in which your virtual machines will be migrated. Namespace is a Kubernetes term, but it is also called a Project in OpenShift.": "The project, within your selected target provider, in which your virtual machines will be migrated. Namespace is a Kubernetes term, but it is also called a Project in OpenShift.",
@@ -1106,9 +1129,11 @@
   "View network map details": "View network map details",
   "View provider details": "View provider details",
   "View storage map details": "View storage map details",
+  "Virtual appliance used by virtualization applications. Only supports OVA files created by VMware vSphere.": "Virtual appliance used by virtualization applications. Only supports OVA files created by VMware vSphere.",
   "Virtual Disk Development Kit (VDDK) container init image path. The path must be empty or a valid container image path in the format of <2>registry_route_or_server_path/vddk:&#8249;tag&#8250;</2>.<4></4><5></5>To accelerate migration and reduce the risk of a plan failing, it is strongly recommended to specify a VDDK init image.": "Virtual Disk Development Kit (VDDK) container init image path. The path must be empty or a valid container image path in the format of <2>registry_route_or_server_path/vddk:&#8249;tag&#8250;</2>.<4></4><5></5>To accelerate migration and reduce the risk of a plan failing, it is strongly recommended to specify a VDDK init image.",
   "Virtual machine": "Virtual machine",
   "Virtual machines": "Virtual machines",
+  "Virtualization platform from Red Hat. Currently in maintenance for existing customers only.": "Virtualization platform from Red Hat. Currently in maintenance for existing customers only.",
   "VM name": "VM name",
   "VM network name template": "VM network name template",
   "VM PVC name template": "VM PVC name template",
@@ -1125,6 +1150,7 @@
   "VMs included in live migrations migrate without downtime.": "VMs included in live migrations migrate without downtime.",
   "VMs included in warm migrations migrate with minimal downtime.": "VMs included in warm migrations migrate with minimal downtime.",
   "VMware only: vSphere product name.": "VMware only: vSphere product name.",
+  "VMware vSphere": "VMware vSphere",
   "VMware vSphere UI": "VMware vSphere UI",
   "VMware: A popular method is to use a Storage vMotion. This migration process automatically renames the VM's files and folder on the datastore to match the new name you have given it in the vSphere Client. You can also manually remove the VM from inventory, rename the files and folders, edit the .vmx file to update the references, and then re-add the VM to the inventory.": "VMware: A popular method is to use a Storage vMotion. This migration process automatically renames the VM's files and folder on the datastore to match the new name you have given it in the vSphere Client. You can also manually remove the VM from inventory, rename the files and folders, edit the .vmx file to update the references, and then re-add the VM to the inventory.",
   "Volume name template": "Volume name template",

src/providers/create-new/CreateProviderForm.style.scss

@@ -0,0 +1,5 @@
+.create-provider-form {
+  max-width: 600px;
+  min-width: 280px;
+  width: 100%;
+}

src/providers/create-new/CreateProviderForm.tsx

@@ -0,0 +1,154 @@
+import { type FC, useCallback, useState } from 'react';
+import { FormProvider, useWatch } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom-v5-compat';
+import { createProvider } from 'src/providers/create/utils/createProvider';
+import { createProviderSecret } from 'src/providers/create/utils/createProviderSecret';
+import { patchProviderSecretOwner } from 'src/providers/create/utils/patchProviderSecretOwner';
+import { PROVIDER_TYPES } from 'src/providers/utils/constants';
+import { getProviderDetailsPageUrl } from 'src/providers/utils/getProviderDetailsPageUrl';
+
+import {
+  Alert,
+  AlertVariant,
+  Button,
+  ButtonVariant,
+  Flex,
+  FlexItem,
+  Form,
+  Split,
+} from '@patternfly/react-core';
+import { TELEMETRY_EVENTS } from '@utils/analytics/constants';
+import { useForkliftAnalytics } from '@utils/analytics/hooks/useForkliftAnalytics';
+import { useForkliftTranslation } from '@utils/i18n';
+
+import { ProviderFormFieldId } from './fields/constants';
+import NfsDirectoryField from './fields/NfsDirectoryField';
+import ProviderNameField from './fields/ProviderNameField';
+import ProviderProjectField from './fields/ProviderProjectField';
+import ProviderTypeField from './fields/ProviderTypeField';
+import { useCreateProviderForm } from './hooks/useCreateProviderForm';
+import { buildOvaProviderResources } from './utils/buildProviderResources';
+import { getDefaultFormValues } from './utils/getDefaultFormValues';
+import CreateProviderFormContextProvider from './CreateProviderFormContextProvider';
+import type { CreateProviderFormData } from './types';
+
+import './CreateProviderForm.style.scss';
+
+const CreateProviderForm: FC = () => {
+  const { t } = useForkliftTranslation();
+  const navigate = useNavigate();
+  const { trackEvent } = useForkliftAnalytics();
+  const [apiError, setApiError] = useState<Error | null>(null);
+
+  const form = useCreateProviderForm({
+    defaultValues: getDefaultFormValues(''),
+    mode: 'onChange',
+  });
+
+  const {
+    control,
+    formState: { isSubmitting, isValid },
+    handleSubmit,
+  } = form;
+
+  const [selectedProject, selectedProviderType] = useWatch({
+    control,
+    name: [ProviderFormFieldId.ProviderProject, ProviderFormFieldId.ProviderType],
+  });
+
+  const onSubmit = useCallback(
+    async (formData: CreateProviderFormData) => {
+      setApiError(null);
+
+      const providerType = formData[ProviderFormFieldId.ProviderType];
+      const namespace = formData[ProviderFormFieldId.ProviderProject];
+
+      trackEvent(TELEMETRY_EVENTS.PROVIDER_CREATE_STARTED, {
+        namespace,
+        providerType,
+      });
+
+      try {
+        const { provider: newProvider, secret: newSecret } = buildOvaProviderResources(formData);
+        const secret = await createProviderSecret(newProvider, newSecret);
+        const provider = await createProvider(newProvider, secret!);
+        await patchProviderSecretOwner(provider, secret);
+
+        trackEvent(TELEMETRY_EVENTS.PROVIDER_CREATE_COMPLETED, {
+          namespace,
+          providerType: provider?.spec?.type,
+        });
+
+        const providerURL = getProviderDetailsPageUrl(provider);
+        navigate(providerURL);
+      } catch (err) {
+        trackEvent(TELEMETRY_EVENTS.PROVIDER_CREATE_FAILED, {
+          error: err instanceof Error ? err.message : 'Unknown error',
+          namespace,
+          providerType,
+        });
+
+        setApiError(err as Error);
+      }
+    },
+    [navigate, trackEvent],
+  );
+
+  return (
+    <FormProvider {...form}>
+      <CreateProviderFormContextProvider namespace={selectedProject || ''}>
+        <Flex
+          direction={{ default: 'column' }}
+          justifyContent={{ default: 'justifyContentSpaceBetween' }}
+          alignItems={{ default: 'alignItemsStretch' }}
+          flexWrap={{ default: 'nowrap' }}
+          spaceItems={{ default: 'spaceItemsLg' }}
+          className="pf-v6-u-h-100"
+        >
+          <Form className="create-provider-form">
+            <ProviderProjectField />
+            <ProviderTypeField />
+            {selectedProviderType && <ProviderNameField />}
+            {selectedProviderType === PROVIDER_TYPES.ova && <NfsDirectoryField />}
+
+            {apiError && (
+              <Alert
+                variant={AlertVariant.danger}
+                title={t('Error creating provider')}
+                isInline
+                className="pf-v6-u-mt-md"
+              >
+                {apiError.message}
+              </Alert>
+            )}
+          </Form>
+
+          <FlexItem>
+            <Split hasGutter>
+              <Button
+                data-testid="provider-create-button"
+                onClick={handleSubmit(onSubmit)}
+                isDisabled={!isValid || isSubmitting}
+                isLoading={isSubmitting}
+              >
+                {t('Create provider')}
+              </Button>
+
+              <Button
+                variant={ButtonVariant.secondary}
+                onClick={() => {
+                  navigate(-1);
+                }}
+                data-testid="provider-cancel-button"
+              >
+                {t('Cancel')}
+              </Button>
+            </Split>
+          </FlexItem>
+        </Flex>
+      </CreateProviderFormContextProvider>
+    </FormProvider>
+  );
+};
+
+export default CreateProviderForm;

src/providers/create-new/CreateProviderFormContextProvider.tsx

@@ -0,0 +1,29 @@
+import type { FC, PropsWithChildren } from 'react';
+import { useMemo } from 'react';
+
+import { useK8sWatchProviderNames } from '../../modules/Providers/hooks/useK8sWatchProviderNames';
+
+import { CreateProviderFormContext } from './constants';
+
+const CreateProviderFormContextProvider: FC<PropsWithChildren<{ namespace: string }>> = ({
+  children,
+  namespace,
+}) => {
+  const [providerNames, providerNamesLoaded] = useK8sWatchProviderNames({ namespace });
+
+  const value = useMemo(
+    () => ({
+      providerNames,
+      providerNamesLoaded,
+    }),
+    [providerNames, providerNamesLoaded],
+  );
+
+  return (
+    <CreateProviderFormContext.Provider value={value}>
+      {children}
+    </CreateProviderFormContext.Provider>
+  );
+};
+
+export default CreateProviderFormContextProvider;