Enhance OVA provider help text fields

packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json

@@ -123,13 +123,13 @@
   "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 token is invalid. Ensure the token is a valid Kubernetes service account token.": "Error: The format of the provided token is invalid. Ensure the token is a valid Kubernetes service account token.",
   "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: <strong>https://api.&#8249;your-openshift-domain&#8250;:6443</strong>.": "Error: The format of the provided URL is invalid. Ensure the URL includes a scheme, a domain name, and, optionally, a port. For example: <strong>https://api.&#8249;your-openshift-domain&#8250;:6443</strong>.",
+  "Error: The format of the provided URL is invalid. Ensure the URL is in the following format: <strong>ip_or_hostname_of_nfs_server:/nfs_path</strong>. For example: <strong>10.10.0.10:/ova</strong> .": "Error: The format of the provided URL is invalid. Ensure the URL is in the following format: <strong>ip_or_hostname_of_nfs_server:/nfs_path</strong>. 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.",
@@ -419,6 +419,8 @@
   "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. Ensure the URL is in the following format: <strong>ip_or_hostname_of_nfs_server:/nfs_path</strong>. For example: <strong>10.10.0.10:/ova</strong> .": "URL of the NFS file share that serves the OVA. Ensure the URL is in the following format: <strong>ip_or_hostname_of_nfs_server:/nfs_path</strong>. 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> An IP or hostname of the server where the share was created.<br><strong>nfs_path: </strong> 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> An IP or hostname of the server where the share was created.<br><strong>nfs_path: </strong> 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. 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. 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",

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;
 }
 

packages/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;
 }
 

packages/forklift-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,40 @@ 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. Ensure the URL is in the following
+          format: {'<strong>'}ip_or_hostname_of_nfs_server:/nfs_path{'</strong>'}. 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. Ensure the URL is in the following format:{' '}
+          {'<strong>'}ip_or_hostname_of_nfs_server:/nfs_path{'</strong>'}. 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. Ensure the URL is in the following format:{' '}
+          {'<strong>'}ip_or_hostname_of_nfs_server:/nfs_path{'</strong>'}. For example: {'<strong>'}
+          10.10.0.10:/ova{'</strong>'} .
+        </Trans>
+      </span>
+    ),
+  };
+
   const initialState = {
     validation: {
       url: 'default' as Validation,
+      urlHelperText: helperTextMsgs.default,
     },
   };
 
@@ -50,6 +82,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 +101,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"

packages/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;
   }
 

packages/forklift-console-plugin/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>'} An IP or hostname of the server where the share
+              was created.{'<br>'}
+              {'<strong>'}nfs_path: {'</strong>'} 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']}