Enhance OVA provider help text fields

Enhance and rephrase the help text fields and validations for following OVA dialogs: Create OVA provider, OCP details - URL title icon help text Changes include supporting formatted help text. Signed-off-by: Sharon Gratch <[email protected]>
kubev2v · Jan 25, 2024 · ea0d99a · ea0d99a
1 parent 4c66a1b
commit ea0d99a
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 14 deletions.
diff --git a/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json b/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json
@@ -125,12 +125,12 @@
   "Error: Fingerprint is required and must be valid.": "Error: Fingerprint is required and must be valid.",
   "Error: Insecure Skip Verify must be a boolean value.": "Error: Insecure Skip Verify must be a boolean value.",
   "Error: Name is required and must be a unique within a namespace and valid Kubernetes name (i.e., must contain no more than 253 characters, consists of lower case alphanumeric characters , '-' or '.' and starts and ends with an alphanumeric character).": "Error: Name is required and must be a unique within a namespace and valid Kubernetes name (i.e., must contain no more than 253 characters, consists of lower case alphanumeric characters , '-' or '.' and starts and ends with an alphanumeric character).",
-  "Error: NFS mount end point should be in the form NFS_SERVER:EXPORTED_DIRECTORY, for example: 10.10.0.10:/ova.": "Error: NFS mount end point should be in the form NFS_SERVER:EXPORTED_DIRECTORY, for example: 10.10.0.10:/ova.",
   "Error: Password is required and must be valid.": "Error: Password is required and must be valid.",
   "Error: The format of the provided CA Certificate is invalid. Ensure the CA certificate format is in a PEM encoded X.509 format.": "Error: The format of the provided CA Certificate is invalid. Ensure the CA certificate format is in a PEM encoded X.509 format.",
   "Error: The format of the provided URL is invalid. Ensure the URL includes a scheme, a domain name, and a path. For example: https://rhv-host-example.com/ovirt-engine/api.": "Error: The format of the provided URL is invalid. Ensure the URL includes a scheme, a domain name, and a path. For example: https://rhv-host-example.com/ovirt-engine/api.",
   "Error: The format of the provided URL is invalid. Ensure the URL includes a scheme, a domain name, and a path. For example: https://vCenter-host-example.com/sdk.": "Error: The format of the provided URL is invalid. Ensure the URL includes a scheme, a domain name, and a path. For example: https://vCenter-host-example.com/sdk.",
   "Error: The format of the provided URL is invalid. Ensure the URL includes a scheme, a domain name, and optionally a port. For example: <1>https://api.&#8249;your-openshift-domain&#8250;:6443</1> .": "Error: The format of the provided URL is invalid. Ensure the URL includes a scheme, a domain name, and optionally a port. For example: <1>https://api.&#8249;your-openshift-domain&#8250;:6443</1> .",
+  "Error: The format of the provided URL is invalid.<br><br>Ensure the URL is in the following format: <strong>nfs_server:/nfs_path</strong>, where:<br><strong>nfs_server:</strong>&nbsp; &nbsp;An IP or hostname of the server where the share was created.<br><strong>nfs_path: </strong>&nbsp; &nbsp;&nbsp;The path on the server where the OVA files are stored.<br>For example:  <strong>10.10.0.10:/ova</strong> .": "Error: The format of the provided URL is invalid.<br><br>Ensure the URL is in the following format: <strong>nfs_server:/nfs_path</strong>, where:<br><strong>nfs_server:</strong>&nbsp; &nbsp;An IP or hostname of the server where the share was created.<br><strong>nfs_path: </strong>&nbsp; &nbsp;&nbsp;The path on the server where the OVA files are stored.<br>For example:  <strong>10.10.0.10:/ova</strong> .",
   "Error: The format of the provided user name is invalid. Ensure the user name doesn't include whitespace characters.": "Error: The format of the provided user name is invalid. Ensure the user name doesn't include whitespace characters.",
   "Error: The format of the provided user password is invalid. Ensure the user password doesn't include whitespace characters.": "Error: The format of the provided user password is invalid. Ensure the user password doesn't include whitespace characters.",
   "Error: This field must be a boolean.": "Error: This field must be a boolean.",
@@ -420,6 +420,7 @@
   "URL": "URL",
   "URL must start with https:// or http:// and contain valid hostname and path": "URL must start with https:// or http:// and contain valid hostname and path",
   "URL of the API endpoint of the Red Hat Virtualization Manager (RHVM) on which the source VM is mounted. Ensure that the URL includes the path leading to the RHVM API server, usually /ovirt-engine/api. For example, https://rhv-host-example.com/ovirt-engine/api.": "URL of the API endpoint of the Red Hat Virtualization Manager (RHVM) on which the source VM is mounted. Ensure that the URL includes the path leading to the RHVM API server, usually /ovirt-engine/api. For example, https://rhv-host-example.com/ovirt-engine/api.",
+  "URL of the NFS file share that serves the OVA.<br><br>Ensure the URL is in the following format: <strong>nfs_server:/nfs_path</strong>, where:<br><strong>nfs_server:</strong>&nbsp; &nbsp;An IP or hostname of the server where the share was created.<br><strong>nfs_path: </strong>&nbsp; &nbsp;&nbsp;The path on the server where the OVA files are stored.<br>For example:  <strong>10.10.0.10:/ova</strong> .": "URL of the NFS file share that serves the OVA.<br><br>Ensure the URL is in the following format: <strong>nfs_server:/nfs_path</strong>, where:<br><strong>nfs_server:</strong>&nbsp; &nbsp;An IP or hostname of the server where the share was created.<br><strong>nfs_path: </strong>&nbsp; &nbsp;&nbsp;The path on the server where the OVA files are stored.<br>For example:  <strong>10.10.0.10:/ova</strong> .",
   "URL of the Openshift Virtualization API endpoint.": "URL of the Openshift Virtualization API endpoint.",
   "URL of the Openshift Virtualization API endpoint.<br>If both <strong>URL</strong> and <strong>Service account bearer token</strong> are left blank, the local OpenShift cluster is used.": "URL of the Openshift Virtualization API endpoint.<br>If both <strong>URL</strong> and <strong>Service account bearer token</strong> are left blank, the local OpenShift cluster is used.",
   "URL of the provider": "URL of the provider",

diff --git a/packages/forklift-console-plugin/src/modules/Providers/modals/EditModal/EditModal.style.css b/packages/forklift-console-plugin/src/modules/Providers/modals/EditModal/EditModal.style.css
@@ -4,12 +4,12 @@
 }
 
 .forklift-edit-modal-field-error-validation {
-  color: var(--pf-v5-global--danger-color--100);
+  color: var(--pf-c-form__helper-text--m-error--Color);
   font-size: small;
 }
 
 .forklift-edit-modal-field-success-validation {
-  color: var(--pf-v5-global--success-color--100);
+  color: var(--pf-c-form__helper-text--m-success--Color);
   font-size: small;
 }
 

diff --git a/.../forklift-console-plugin/src/modules/Providers/views/create/ProvidersCreatePage.style.css b/.../forklift-console-plugin/src/modules/Providers/views/create/ProvidersCreatePage.style.css
@@ -15,12 +15,12 @@
 }
 
 .forklift--create-provider-field-error-validation {
-  color: var(--pf-v5-global--danger-color--100);
+  color: var(--pf-c-form__helper-text--m-error--Color);
   font-size: small;
 }
 
 .forklift--create-provider-field-success-validation {
-  color: var(--pf-v5-global--success-color--100);
+  color: var(--pf-c-form__helper-text--m-success--Color);
   font-size: small;
 }
 

diff --git a/...ft-console-plugin/src/modules/Providers/views/create/components/OVAProviderCreateForm.tsx b/...ft-console-plugin/src/modules/Providers/views/create/components/OVAProviderCreateForm.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useReducer } from 'react';
+import { Trans } from 'react-i18next';
 import { validateNFSMount, Validation } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
@@ -18,9 +19,55 @@ export const OVAProviderCreateForm: React.FC<OVAProviderCreateFormProps> = ({
 
   const url = provider?.spec?.url || '';
 
+  const helperTextMsgs = {
+    error: (
+      <span className="forklift--create-provider-field-error-validation">
+        <Trans t={t} ns="plugin__forklift-console-plugin">
+          Error: The format of the provided URL is invalid.{'<br><br>'}
+          Ensure the URL is in the following format: {'<strong>'}nfs_server:/nfs_path{'</strong>'},
+          where:{'<br>'}
+          {'<strong>'}nfs_server:{'</strong>'}&nbsp; &nbsp;An IP or hostname of the server where the
+          share was created.{'<br>'}
+          {'<strong>'}nfs_path: {'</strong>'}&nbsp; &nbsp;&nbsp;The path on the server where the OVA
+          files are stored.{'<br>'}
+          For example: {'<strong>'}10.10.0.10:/ova{'</strong>'} .
+        </Trans>
+      </span>
+    ),
+    success: (
+      <span className="forklift--create-provider-field-success-validation">
+        <Trans t={t} ns="plugin__forklift-console-plugin">
+          URL of the NFS file share that serves the OVA.{'<br><br>'}
+          Ensure the URL is in the following format: {'<strong>'}nfs_server:/nfs_path{'</strong>'},
+          where:{'<br>'}
+          {'<strong>'}nfs_server:{'</strong>'}&nbsp; &nbsp;An IP or hostname of the server where the
+          share was created.{'<br>'}
+          {'<strong>'}nfs_path: {'</strong>'}&nbsp; &nbsp;&nbsp;The path on the server where the OVA
+          files are stored.{'<br>'}
+          For example: {'<strong>'}10.10.0.10:/ova{'</strong>'} .
+        </Trans>
+      </span>
+    ),
+    default: (
+      <span className="forklift--create-provider-field-default-validation">
+        <Trans t={t} ns="plugin__forklift-console-plugin">
+          URL of the NFS file share that serves the OVA.{'<br><br>'}
+          Ensure the URL is in the following format: {'<strong>'}nfs_server:/nfs_path{'</strong>'},
+          where:{'<br>'}
+          {'<strong>'}nfs_server:{'</strong>'}&nbsp; &nbsp;An IP or hostname of the server where the
+          share was created.{'<br>'}
+          {'<strong>'}nfs_path: {'</strong>'}&nbsp; &nbsp;&nbsp;The path on the server where the OVA
+          files are stored.{'<br>'}
+          For example: {'<strong>'}10.10.0.10:/ova{'</strong>'} .
+        </Trans>
+      </span>
+    ),
+  };
+
   const initialState = {
     validation: {
       url: 'default' as Validation,
+      urlHelperText: helperTextMsgs.default,
     },
   };
 
@@ -50,6 +97,14 @@ export const OVAProviderCreateForm: React.FC<OVAProviderCreateFormProps> = ({
 
         dispatch({ type: 'SET_FIELD_VALIDATED', payload: { field: id, validationState } });
 
+        dispatch({
+          type: 'SET_FIELD_VALIDATED',
+          payload: {
+            field: 'urlHelperText',
+            validationState: helperTextMsgs[validationState],
+          },
+        });
+
         onChange({ ...provider, spec: { ...provider.spec, url: trimmedValue } });
       }
     },
@@ -61,11 +116,9 @@ export const OVAProviderCreateForm: React.FC<OVAProviderCreateFormProps> = ({
       <FormGroup
         label={t('URL')}
         fieldId="url"
-        helperText={t('Please enter OVA server end point.')}
         validated={state.validation.url}
-        helperTextInvalid={t(
-          'Error: NFS mount end point should be in the form NFS_SERVER:EXPORTED_DIRECTORY, for example: 10.10.0.10:/ova.',
-        )}
+        helperText={state.validation.urlHelperText}
+        helperTextInvalid={state.validation.urlHelperText}
       >
         <TextInput
           type="text"

diff --git a/...forklift-console-plugin/src/modules/Providers/views/details/ProviderDetailsPage.style.css b/...forklift-console-plugin/src/modules/Providers/views/details/ProviderDetailsPage.style.css
@@ -15,12 +15,12 @@
 }
 
 .forklift-page-provider-field-error-validation {
-    color: var(--pf-v5-global--danger-color--100);
+    color: var(--pf-c-form__helper-text--m-error--Color);
     font-size: small;
   }
 
   .forklift-page-provider-field-success-validation {
-    color: var(--pf-v5-global--success-color--100);
+    color: var(--pf-c-form__helper-text--m-success--Color);
     font-size: small;
   }
 

diff --git a/...lugin/src/modules/Providers/views/details/components/DetailsSection/OVADetailsSection.tsx b/...lugin/src/modules/Providers/views/details/components/DetailsSection/OVADetailsSection.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Trans } from 'react-i18next';
 import { EditProviderURLModal, useModal } from 'src/modules/Providers/modals';
 import { PROVIDERS } from 'src/utils/enums';
 import { useForkliftTranslation } from 'src/utils/i18n';
@@ -93,9 +94,16 @@ export const OVADetailsSection: React.FC<DetailsSectionProps> = ({ data }) => {
         }
         helpContent={
           <Text>
-            {t(
-              'NFS mount end point should be in the form NFS_SERVER:EXPORTED_DIRECTORY, for example: 10.10.0.10:/ova',
-            )}
+            <Trans t={t} ns="plugin__forklift-console-plugin">
+              URL of the NFS file share that serves the OVA.{'<br><br>'}
+              Ensure the URL is in the following format: {'<strong>'}nfs_server:/nfs_path
+              {'</strong>'}, where:{'<br>'}
+              {'<strong>'}nfs_server:{'</strong>'}&nbsp; &nbsp;An IP or hostname of the server where
+              the share was created.{'<br>'}
+              {'<strong>'}nfs_path: {'</strong>'}&nbsp; &nbsp;&nbsp;The path on the server where the
+              OVA files are stored.{'<br>'}
+              For example: {'<strong>'}10.10.0.10:/ova{'</strong>'} .
+            </Trans>
           </Text>
         }
         crumbs={['Provider', 'spec', 'url']}