From 79746863260cfae9d88bdafd35d4db11b07fc12e Mon Sep 17 00:00:00 2001 From: Sharon Gratch Date: Thu, 25 Jan 2024 12:51:05 +0200 Subject: [PATCH] Enhance OVA provider help text fields Enhance and rephrase the help text fields and validations for following OVA dialogs: 1. Create OVA provider, 2. OCP details - URL title icon help text Changes include supporting formatted help text. Signed-off-by: Sharon Gratch --- .../en/plugin__forklift-console-plugin.json | 4 +- .../modals/EditModal/EditModal.style.css | 4 +- .../create/ProvidersCreatePage.style.css | 4 +- .../components/OVAProviderCreateForm.tsx | 46 +++++++++++++++++-- .../details/ProviderDetailsPage.style.css | 4 +- .../DetailsSection/OVADetailsSection.tsx | 14 ++++-- 6 files changed, 62 insertions(+), 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 index ff955b15b..64c7d8c2f 100644 --- a/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json +++ b/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: https://api.‹your-openshift-domain›:6443.": "Error: The format of the provided URL is invalid. Ensure the URL includes a scheme, a domain name, and, optionally, a port. For example: https://api.‹your-openshift-domain›:6443.", + "Error: The format of the provided URL is invalid. Ensure the URL is in the following format: ip_or_hostname_of_nfs_server:/nfs_path. For example: 10.10.0.10:/ova .": "Error: The format of the provided URL is invalid. Ensure the URL is in the following format: ip_or_hostname_of_nfs_server:/nfs_path. For example: 10.10.0.10:/ova .", "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: ip_or_hostname_of_nfs_server:/nfs_path. For example: 10.10.0.10:/ova .": "URL of the NFS file share that serves the OVA. Ensure the URL is in the following format: ip_or_hostname_of_nfs_server:/nfs_path. For example: 10.10.0.10:/ova .", + "URL of the NFS file share that serves the OVA.

Ensure the URL is in the following format: nfs_server:/nfs_path, where:
nfs_server: An IP or hostname of the server where the share was created.
nfs_path: The path on the server where the OVA files are stored.
For example: 10.10.0.10:/ova .": "URL of the NFS file share that serves the OVA.

Ensure the URL is in the following format: nfs_server:/nfs_path, where:
nfs_server: An IP or hostname of the server where the share was created.
nfs_path: The path on the server where the OVA files are stored.
For example: 10.10.0.10:/ova .", "URL of the Openshift Virtualization API endpoint.": "URL of the Openshift Virtualization API endpoint.", "URL of the Openshift Virtualization API endpoint. If both URL and Service account bearer token are left blank, the local OpenShift cluster is used.": "URL of the Openshift Virtualization API endpoint. If both URL and Service account bearer token 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 index 51d4787c2..93993eda7 100644 --- 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/packages/forklift-console-plugin/src/modules/Providers/views/create/ProvidersCreatePage.style.css b/packages/forklift-console-plugin/src/modules/Providers/views/create/ProvidersCreatePage.style.css index 17a9e8b05..0ce0bd6fb 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/create/ProvidersCreatePage.style.css +++ b/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; } diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OVAProviderCreateForm.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OVAProviderCreateForm.tsx index c6bcbc455..bf2202899 100644 --- a/packages/forklift-console-plugin/src/modules/Providers/views/create/components/OVAProviderCreateForm.tsx +++ b/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 = ({ const url = provider?.spec?.url || ''; + const helperTextMsgs = { + error: ( + + + Error: The format of the provided URL is invalid. Ensure the URL is in the following + format: {''}ip_or_hostname_of_nfs_server:/nfs_path{''}. For example:{' '} + {''}10.10.0.10:/ova{''} . + + + ), + success: ( + + + URL of the NFS file share that serves the OVA. Ensure the URL is in the following format:{' '} + {''}ip_or_hostname_of_nfs_server:/nfs_path{''}. For example: {''} + 10.10.0.10:/ova{''} . + + + ), + default: ( + + + URL of the NFS file share that serves the OVA. Ensure the URL is in the following format:{' '} + {''}ip_or_hostname_of_nfs_server:/nfs_path{''}. For example: {''} + 10.10.0.10:/ova{''} . + + + ), + }; + const initialState = { validation: { url: 'default' as Validation, + urlHelperText: helperTextMsgs.default, }, }; @@ -50,6 +82,14 @@ export const OVAProviderCreateForm: React.FC = ({ 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 = ({ = ({ data }) => { } helpContent={ - {t( - 'NFS mount end point should be in the form NFS_SERVER:EXPORTED_DIRECTORY, for example: 10.10.0.10:/ova', - )} + + URL of the NFS file share that serves the OVA.{'

'} + Ensure the URL is in the following format: {''}nfs_server:/nfs_path + {''}, where:{'
'} + {''}nfs_server:{''} An IP or hostname of the server where the share + was created.{'
'} + {''}nfs_path: {''} The path on the server where the OVA files are + stored.{'
'} + For example: {''}10.10.0.10:/ova{''} . + } crumbs={['Provider', 'spec', 'url']}