Merge pull request #1036 from sgratch/vsphere-create-form-help-text-v…

…alidation-fixes 🐞 Fix few issues with field validations in the vSphere create form
kubev2v · Apr 9, 2024 · 5575a81 · 5575a81
2 parents bc7a452 + 344215d
commit 5575a81
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 61 deletions.
diff --git a/packages/forklift-console-plugin/src/modules/Providers/utils/helpers/safeBase64Decode.ts b/packages/forklift-console-plugin/src/modules/Providers/utils/helpers/safeBase64Decode.ts
@@ -4,6 +4,6 @@ export function safeBase64Decode(value: string) {
   try {
     return Base64.decode(value);
   } catch {
-    return '';
+    return undefined;
   }
 }
diff --git a/...rc/modules/Providers/utils/validators/provider/openstack/openstackSecretFieldValidator.ts b/...rc/modules/Providers/utils/validators/provider/openstack/openstackSecretFieldValidator.ts
@@ -12,7 +12,7 @@ import { validateNoSpaces, validatePublicCert, ValidationMsg } from '../../commo
  * 'error' - The field's value has failed validation.
  */
 export const openstackSecretFieldValidator = (id: string, value: string): ValidationMsg => {
-  const trimmedValue = value.trim();
+  const trimmedValue = value?.trim();
 
   let validationState: ValidationMsg;
 

diff --git a/...lugin/src/modules/Providers/utils/validators/provider/vsphere/esxiSecretFieldValidator.ts b/...lugin/src/modules/Providers/utils/validators/provider/vsphere/esxiSecretFieldValidator.ts
@@ -13,7 +13,7 @@ import { validateNoSpaces, validatePublicCert, ValidationMsg } from '../../commo
  * 'warning' - The field's value has passed validation but does not fit the standard format, it's the user's choice if to accept that value.
  */
 export const esxiSecretFieldValidator = (id: string, value: string): ValidationMsg => {
-  const trimmedValue = value?.trim() || '';
+  const trimmedValue = value?.trim();
 
   let validationState: ValidationMsg;
 
@@ -41,6 +41,13 @@ export const esxiSecretFieldValidator = (id: string, value: string): ValidationM
 const validateUser = (value: string): ValidationMsg => {
   const noSpaces = validateNoSpaces(value);
 
+  if (value === undefined) {
+    return {
+      type: 'default',
+      msg: 'A username and domain for the ESXi API endpoint, for example: user . [required]',
+    };
+  }
+
   if (value === '') {
     return {
       type: 'error',
@@ -61,6 +68,13 @@ const validateUser = (value: string): ValidationMsg => {
 const validatePassword = (value: string): ValidationMsg => {
   const valid = validateNoSpaces(value);
 
+  if (value === undefined) {
+    return {
+      type: 'default',
+      msg: 'A user password for connecting to the ESXi API endpoint. [required]',
+    };
+  }
+
   if (value === '') {
     return {
       type: 'error',

diff --git a/...console-plugin/src/modules/Providers/utils/validators/provider/vsphere/validateEsxiURL.ts b/...console-plugin/src/modules/Providers/utils/validators/provider/vsphere/validateEsxiURL.ts
@@ -1,6 +1,13 @@
 import { validateURL, ValidationMsg } from '../../common';
 
 export const validateEsxiURL = (url: string | number): ValidationMsg => {
+  if (url === undefined) {
+    return {
+      type: 'default',
+      msg: 'The URL is required, URL of the ESXi API endpoint for example: https://host-example.com/sdk .',
+    };
+  }
+
   // Sanity check
   if (typeof url !== 'string') {
     return { type: 'error', msg: 'URL is not a string' };

diff --git a/...sole-plugin/src/modules/Providers/utils/validators/provider/vsphere/validateVCenterURL.ts b/...sole-plugin/src/modules/Providers/utils/validators/provider/vsphere/validateVCenterURL.ts
@@ -1,6 +1,13 @@
 import { validateURL, ValidationMsg } from '../../common';
 
 export const validateVCenterURL = (url: string | number): ValidationMsg => {
+  if (url === undefined) {
+    return {
+      type: 'default',
+      msg: 'The URL is required, URL of the vCenter API endpoint for example: https://host-example.com/sdk .',
+    };
+  }
+
   // Sanity check
   if (typeof url !== 'string') {
     return { type: 'error', msg: 'URL is not a string' };

diff --git a/...nsole-plugin/src/modules/Providers/utils/validators/provider/vsphere/validateVDDKImage.ts b/...nsole-plugin/src/modules/Providers/utils/validators/provider/vsphere/validateVDDKImage.ts
@@ -1,6 +1,12 @@
 import { validateContainerImage, ValidationMsg } from '../../common';
 
 export const validateVDDKImage = (vddkImage: string | number): ValidationMsg => {
+  if (vddkImage === undefined)
+    return {
+      msg: 'The VDDK image is empty, it is recommended to provide an image, for example: quay.io/kubev2v/vddk:latest .',
+      type: 'default',
+    };
+
   // Sanity check
   if (typeof vddkImage !== 'string') {
     return { type: 'error', msg: 'VDDK image is not a string' };

diff --git a/...in/src/modules/Providers/utils/validators/provider/vsphere/vcenterSecretFieldValidator.ts b/...in/src/modules/Providers/utils/validators/provider/vsphere/vcenterSecretFieldValidator.ts
@@ -18,7 +18,7 @@ import {
  * 'warning' - The field's value has passed validation but does not fit the standard format, it's the user's choice if to accept that value.
  */
 export const vcenterSecretFieldValidator = (id: string, value: string): ValidationMsg => {
-  const trimmedValue = value?.trim() || '';
+  const trimmedValue = value?.trim();
 
   let validationState: ValidationMsg;
 
@@ -46,6 +46,13 @@ export const vcenterSecretFieldValidator = (id: string, value: string): Validati
 const validateUser = (value: string): ValidationMsg => {
   const noSpaces = validateNoSpaces(value);
 
+  if (value === undefined) {
+    return {
+      type: 'default',
+      msg: 'A username and domain for the vCenter API endpoint, for example: [email protected]. [required]',
+    };
+  }
+
   if (value === '') {
     return {
       type: 'error',
@@ -75,6 +82,13 @@ const validateUser = (value: string): ValidationMsg => {
 const validatePassword = (value: string): ValidationMsg => {
   const valid = validateNoSpaces(value);
 
+  if (value === undefined) {
+    return {
+      type: 'default',
+      msg: 'A user password for connecting to the vCenter API endpoint. [required]',
+    };
+  }
+
   if (value === '') {
     return {
       type: 'error',

diff --git a/...t-console-plugin/src/modules/Providers/views/create/components/EsxiProviderCreateForm.tsx b/...t-console-plugin/src/modules/Providers/views/create/components/EsxiProviderCreateForm.tsx
@@ -21,8 +21,8 @@ export const EsxiProviderCreateForm: React.FC<EsxiProviderCreateFormProps> = ({
 }) => {
   const { t } = useForkliftTranslation();
 
-  const url = provider?.spec?.url || '';
-  const vddkInitImage = provider?.spec?.settings?.['vddkInitImage'] || '';
+  const url = provider?.spec?.url;
+  const vddkInitImage = provider?.spec?.settings?.['vddkInitImage'];
   const sdkEndpoint = provider?.spec?.settings?.['sdkEndpoint'] || '';
 
   const vddkHelperTextPopover = (
@@ -44,14 +44,8 @@ export const EsxiProviderCreateForm: React.FC<EsxiProviderCreateFormProps> = ({
 
   const initialState = {
     validation: {
-      url: {
-        msg: 'The URL of the ESXi API endpoint for example: https://host-example.com/sdk .',
-        type: 'default',
-      },
-      vddkInitImage: {
-        type: 'default',
-        msg: 'VMware Virtual Disk Development Kit (VDDK) image, for example: quay.io/kubev2v/vddk:latest .',
-      },
+      url: validateEsxiURL(url),
+      vddkInitImage: validateVDDKImage(vddkInitImage),
     },
   };
 
@@ -74,7 +68,7 @@ export const EsxiProviderCreateForm: React.FC<EsxiProviderCreateFormProps> = ({
 
   const handleChange = useCallback(
     (id, value) => {
-      const trimmedValue = value.trim();
+      const trimmedValue = value?.trim();
 
       if (id == 'vddkInitImage') {
         const validationState = validateVDDKImage(trimmedValue);
@@ -87,8 +81,6 @@ export const EsxiProviderCreateForm: React.FC<EsxiProviderCreateFormProps> = ({
         onChange({
           ...provider,
           spec: {
-            type: provider.spec.type,
-            url: provider.spec.url,
             ...provider?.spec,
             settings: {
               ...(provider?.spec?.settings as object),
@@ -101,17 +93,9 @@ export const EsxiProviderCreateForm: React.FC<EsxiProviderCreateFormProps> = ({
       if (id == 'sdkEndpoint') {
         const sdkEndpoint = trimmedValue || undefined;
 
-        // Revalidate URL - VCenter or ESXi
-        const trimmedURL = provider?.spec?.url?.trim() || '';
-        const validationState = validateEsxiURL(trimmedURL);
-
-        dispatch({ type: 'SET_FIELD_VALIDATED', payload: { field: 'url', validationState } });
-
         onChange({
           ...provider,
           spec: {
-            type: provider.spec.type,
-            url: provider.spec.url,
             ...provider?.spec,
             settings: {
               ...(provider?.spec?.settings as object),

diff --git a/...onsole-plugin/src/modules/Providers/views/create/components/VCenterProviderCreateForm.tsx b/...onsole-plugin/src/modules/Providers/views/create/components/VCenterProviderCreateForm.tsx
@@ -21,9 +21,9 @@ export const VCenterProviderCreateForm: React.FC<VCenterProviderCreateFormProps>
 }) => {
   const { t } = useForkliftTranslation();
 
-  const url = provider?.spec?.url || '';
-  const vddkInitImage = provider?.spec?.settings?.['vddkInitImage'] || '';
-  const sdkEndpoint = provider?.spec?.settings?.['sdkEndpoint'] || '';
+  const url = provider?.spec?.url;
+  const vddkInitImage = provider?.spec?.settings?.['vddkInitImage'];
+  const sdkEndpoint = provider?.spec?.settings?.['sdkEndpoint'];
 
   const vddkHelperTextPopover = (
     <ForkliftTrans>
@@ -44,14 +44,8 @@ export const VCenterProviderCreateForm: React.FC<VCenterProviderCreateFormProps>
 
   const initialState = {
     validation: {
-      url: {
-        msg: 'The URL of the vCenter API endpoint for example: https://host-example.com/sdk .',
-        type: 'default',
-      },
-      vddkInitImage: {
-        type: 'default',
-        msg: 'VMware Virtual Disk Development Kit (VDDK) image, for example: quay.io/kubev2v/vddk:latest .',
-      },
+      url: validateVCenterURL(url),
+      vddkInitImage: validateVDDKImage(vddkInitImage),
     },
   };
 
@@ -74,7 +68,7 @@ export const VCenterProviderCreateForm: React.FC<VCenterProviderCreateFormProps>
 
   const handleChange = useCallback(
     (id, value) => {
-      const trimmedValue = value.trim();
+      const trimmedValue = value?.trim();
 
       if (id == 'vddkInitImage') {
         const validationState = validateVDDKImage(trimmedValue);
@@ -87,8 +81,6 @@ export const VCenterProviderCreateForm: React.FC<VCenterProviderCreateFormProps>
         onChange({
           ...provider,
           spec: {
-            type: provider.spec.type,
-            url: provider.spec.url,
             ...provider?.spec,
             settings: {
               ...(provider?.spec?.settings as object),
@@ -101,17 +93,9 @@ export const VCenterProviderCreateForm: React.FC<VCenterProviderCreateFormProps>
       if (id == 'sdkEndpoint') {
         const sdkEndpoint = trimmedValue || undefined;
 
-        // Revalidate URL - VCenter or ESXi
-        const trimmedURL = provider?.spec?.url?.trim() || '';
-        const validationState = validateVCenterURL(trimmedURL);
-
-        dispatch({ type: 'SET_FIELD_VALIDATED', payload: { field: 'url', validationState } });
-
         onChange({
           ...provider,
           spec: {
-            type: provider.spec.type,
-            url: provider.spec.url,
             ...provider?.spec,
             settings: {
               ...(provider?.spec?.settings as object),

diff --git a/...iders/views/details/components/CredentialsSection/components/edit/EsxiCredentialsEdit.tsx b/...iders/views/details/components/CredentialsSection/components/edit/EsxiCredentialsEdit.tsx
@@ -22,9 +22,9 @@ import { EditComponentProps } from '../BaseCredentialsSection';
 export const EsxiCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onChange }) => {
   const { t } = useForkliftTranslation();
 
-  const user = safeBase64Decode(secret?.data?.user || '');
-  const url = safeBase64Decode(secret?.data?.url || '');
-  const password = safeBase64Decode(secret?.data?.password || '');
+  const user = safeBase64Decode(secret?.data?.user);
+  const password = safeBase64Decode(secret?.data?.password);
+  const url = safeBase64Decode(secret?.data?.url);
   const cacert = safeBase64Decode(secret?.data?.cacert || '');
   const insecureSkipVerify = safeBase64Decode(secret?.data?.insecureSkipVerify || '') === 'true';
 
@@ -58,10 +58,7 @@ export const EsxiCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onCh
       user: esxiSecretFieldValidator('user', user),
       password: esxiSecretFieldValidator('password', password),
       insecureSkipVerify: { type: 'default', msg: 'Skip certificate validation' },
-      cacert: {
-        type: 'default',
-        msg: 'The Manager CA certificate unless it was replaced by a third-party certificate, in which case, enter the Manager Apache CA certificate.',
-      },
+      cacert: esxiSecretFieldValidator('cacert', cacert),
     },
   };
 

diff --git a/...rs/views/details/components/CredentialsSection/components/edit/VCenterCredentialsEdit.tsx b/...rs/views/details/components/CredentialsSection/components/edit/VCenterCredentialsEdit.tsx
@@ -22,9 +22,9 @@ import { EditComponentProps } from '../BaseCredentialsSection';
 export const VCenterCredentialsEdit: React.FC<EditComponentProps> = ({ secret, onChange }) => {
   const { t } = useForkliftTranslation();
 
-  const user = safeBase64Decode(secret?.data?.user || '');
-  const url = safeBase64Decode(secret?.data?.url || '');
-  const password = safeBase64Decode(secret?.data?.password || '');
+  const user = safeBase64Decode(secret?.data?.user);
+  const password = safeBase64Decode(secret?.data?.password);
+  const url = safeBase64Decode(secret?.data?.url);
   const cacert = safeBase64Decode(secret?.data?.cacert || '');
   const insecureSkipVerify = safeBase64Decode(secret?.data?.insecureSkipVerify || '') === 'true';
 
@@ -58,10 +58,7 @@ export const VCenterCredentialsEdit: React.FC<EditComponentProps> = ({ secret, o
       user: vcenterSecretFieldValidator('user', user),
       password: vcenterSecretFieldValidator('password', password),
       insecureSkipVerify: { type: 'default', msg: 'Skip certificate validation' },
-      cacert: {
-        type: 'default',
-        msg: 'The Manager CA certificate unless it was replaced by a third-party certificate, in which case, enter the Manager Apache CA certificate.',
-      },
+      cacert: vcenterSecretFieldValidator('cacert', cacert),
     },
   };