Resolves: MTV-3738 | Address more feedback

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

Author: jpuzz0

locales/en/plugin__forklift-console-plugin.json

@@ -844,6 +844,7 @@
   "Select a network": "Select a network",
   "Select a network map:": "Select a network map:",
   "Select a project": "Select a project",
+  "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:",

src/components/common/Select.tsx

@@ -28,7 +28,7 @@ type SelectOption = {
 
 type SelectProps = Pick<PfSelectProps, 'onSelect' | 'className' | 'children'> & {
   id: string;
-  value: string;
+  value: string | undefined;
   options?: SelectOption[];
   status?: MenuToggleStatus;
   placeholder?: string;

src/providers/create-new/CreateProviderForm.tsx

@@ -1,5 +1,5 @@
 import { type FC, useCallback, useState } from 'react';
-import { FormProvider, useWatch } from 'react-hook-form';
+import { FormProvider, useForm, 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';
@@ -26,7 +26,6 @@ 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';
@@ -40,7 +39,7 @@ const CreateProviderForm: FC = () => {
   const { trackEvent } = useForkliftAnalytics();
   const [apiError, setApiError] = useState<Error | null>(null);
 
-  const form = useCreateProviderForm({
+  const form = useForm<CreateProviderFormData>({
     defaultValues: getDefaultFormValues(''),
     mode: 'onChange',
   });
@@ -71,16 +70,19 @@ const CreateProviderForm: FC = () => {
       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,
-        });
+        if (secret) {
+          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);
+          const providerURL = getProviderDetailsPageUrl(provider);
+          navigate(providerURL);
+        }
       } catch (err) {
         trackEvent(TELEMETRY_EVENTS.PROVIDER_CREATE_FAILED, {
           error: err instanceof Error ? err.message : 'Unknown error',

src/providers/create-new/fields/NfsDirectoryField.tsx

@@ -1,17 +1,19 @@
 import type { FC } from 'react';
-import { useController, useFormContext } from 'react-hook-form';
+import { useController } from 'react-hook-form';
 
 import { FormGroupWithHelpText } from '@components/common/FormGroupWithHelpText/FormGroupWithHelpText';
 import { TextInput } from '@patternfly/react-core';
+import { getInputValidated } from '@utils/form';
 import { useForkliftTranslation } from '@utils/i18n';
 
+import { useCreateProviderFormContext } from '../hooks/useCreateProviderFormContext';
 import { NFS_PATH_REGEX } from '../utils/validationPatterns';
 
 import { ProviderFormFieldId } from './constants';
 
 const NfsDirectoryField: FC = () => {
   const { t } = useForkliftTranslation();
-  const { control } = useFormContext();
+  const { control } = useCreateProviderFormContext();
 
   const {
     field: { onChange, value },
@@ -22,8 +24,8 @@ const NfsDirectoryField: FC = () => {
     rules: {
       required: t('NFS shared directory is required'),
       validate: {
-        pattern: async (val: string) => {
-          if (!NFS_PATH_REGEX.test(val)) {
+        pattern: async (val: string | undefined) => {
+          if (!val || !NFS_PATH_REGEX.test(val)) {
             return t('NFS path must be in format: host:/path (e.g., 10.10.0.10:/ova)');
           }
 
@@ -38,18 +40,18 @@ const NfsDirectoryField: FC = () => {
       label={t('NFS shared directory')}
       isRequired
       fieldId={ProviderFormFieldId.NfsDirectory}
-      validated={error ? 'error' : 'default'}
+      validated={getInputValidated(error)}
       helperText={t('For example: 10.10.0.10:/ova')}
       helperTextInvalid={error?.message}
     >
       <TextInput
         id={ProviderFormFieldId.NfsDirectory}
         type="text"
-        value={value ?? ''}
+        value={value}
         onChange={(_event, val) => {
           onChange(val);
         }}
-        validated={error ? 'error' : 'default'}
+        validated={getInputValidated(error)}
         data-testid="nfs-directory-input"
       />
     </FormGroupWithHelpText>

src/providers/create-new/fields/ProviderNameField.tsx

@@ -1,19 +1,20 @@
 import type { FC } from 'react';
-import { useController, useFormContext } from 'react-hook-form';
+import { useController } from 'react-hook-form';
 
 import { FormGroupWithHelpText } from '@components/common/FormGroupWithHelpText/FormGroupWithHelpText';
 import { TextInput } from '@patternfly/react-core';
 import { getInputValidated } from '@utils/form';
 import { useForkliftTranslation } from '@utils/i18n';
 import { validateProviderName } from '@utils/validation/providerNameValidation';
 
-import { useCreateProviderDataContext } from '../hooks/useCreateProviderFormContext';
+import { useCreateProviderDataContext } from '../hooks/useCreateProviderDataContext';
+import { useCreateProviderFormContext } from '../hooks/useCreateProviderFormContext';
 
 import { ProviderFormFieldId } from './constants';
 
 const ProviderNameField: FC = () => {
   const { t } = useForkliftTranslation();
-  const { control } = useFormContext();
+  const { control } = useCreateProviderFormContext();
   const { providerNames } = useCreateProviderDataContext();
 
   const {
@@ -32,7 +33,7 @@ const ProviderNameField: FC = () => {
       label={t('Provider name')}
       isRequired
       fieldId={ProviderFormFieldId.ProviderName}
-      validated={error ? 'error' : 'default'}
+      validated={getInputValidated(error)}
       helperTextInvalid={error?.message}
     >
       <TextInput

src/providers/create-new/fields/ProviderTypeField.tsx

@@ -1,12 +1,14 @@
 import type { FC } from 'react';
-import { useController, useFormContext } from 'react-hook-form';
+import { useController } from 'react-hook-form';
 
 import { FormGroupWithHelpText } from '@components/common/FormGroupWithHelpText/FormGroupWithHelpText';
 import Select from '@components/common/Select';
 import { SelectList, SelectOption } from '@patternfly/react-core';
+import { getInputValidated } from '@utils/form';
 import { useIsDarkTheme } from '@utils/hooks/useIsDarkTheme';
 import { useForkliftTranslation } from '@utils/i18n';
 
+import { useCreateProviderFormContext } from '../hooks/useCreateProviderFormContext';
 import { getProviderTypeOptions } from '../utils/getProviderTypeOptions';
 
 import { ProviderFormFieldId } from './constants';
@@ -16,7 +18,7 @@ import './ProviderTypeField.style.scss';
 const ProviderTypeField: FC = () => {
   const { t } = useForkliftTranslation();
   const isDarkTheme = useIsDarkTheme();
-  const { control } = useFormContext();
+  const { control } = useCreateProviderFormContext();
 
   const {
     field: { onChange, value },
@@ -42,7 +44,7 @@ const ProviderTypeField: FC = () => {
       label={t('Provider type')}
       isRequired
       fieldId={ProviderFormFieldId.ProviderType}
-      validated={error ? 'error' : 'default'}
+      validated={getInputValidated(error)}
       helperTextInvalid={error?.message}
     >
       <Select

src/providers/create-new/hooks/useCreateProviderDataContext.ts

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+
+import { CreateProviderFormContext } from '../constants';
+
+/**
+ * Hook to access the Create Provider data context
+ * @returns Context containing provider names for validation
+ */
+export const useCreateProviderDataContext = () => useContext(CreateProviderFormContext);

src/providers/create-new/hooks/useCreateProviderForm.ts

@@ -1,17 +1,9 @@
-import { useContext } from 'react';
 import { useFormContext } from 'react-hook-form';
 
-import { CreateProviderFormContext } from '../constants';
 import type { CreateProviderFormData } from '../types';
 
 /**
- * Typed wrapper around useFormContext for Create Provider form
- * Provides type safety when accessing form context in components
+ * Custom wrapper around react-hook-form's useFormContext hook
+ * Provides typed access to form context for the provider creation form
  */
 export const useCreateProviderFormContext = () => useFormContext<CreateProviderFormData>();
-
-/**
- * Hook to access the Create Provider form data fetching context
- * Provides centralized data like provider names for validation
- */
-export const useCreateProviderDataContext = () => useContext(CreateProviderFormContext);