Fix few text fields based on doc team review, replace reminded Trans …

…texts to Obj Reference: kubev2v#646 Reference: kubev2v#854 (comment) Reference: kubev2v#861 (comment) A follow up for kubev2v#854 and kubev2v#861 that includes the following fixes: 1. Fix vSphere and oVirt help text fields and code comments, based on doc team review. 2. Replace all reminded <Trans> text appearances from String to React Obj. Signed-off-by: Sharon Gratch <[email protected]>
sgratch · Jan 31, 2024 · 1e6e07a · 1e6e07a
1 parent dc2b7ce
commit 1e6e07a
Show file tree

Hide file tree

Showing 22 changed files with 174 additions and 141 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
diff --git a/...ift-console-plugin/src/modules/Providers/modals/EditProviderURL/OpenshiftEditURLModal.tsx b/...ift-console-plugin/src/modules/Providers/modals/EditProviderURL/OpenshiftEditURLModal.tsx
@@ -19,8 +19,8 @@ export const OpenshiftEditURLModal: React.FC<EditProviderURLModalProps> = (props
       <div className="forklift-edit-modal-field-error-validation">
         <Trans t={t} ns="plugin__forklift-console-plugin">
           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>'}.
+          domain name, and, optionally, a port. For example:{' '}
+          <strong>https://api.openshift-domain.com:6443</strong>.
         </Trans>
       </div>
     ),

diff --git a/...klift-console-plugin/src/modules/Providers/modals/EditProviderURL/VSphereEditURLModal.tsx b/...klift-console-plugin/src/modules/Providers/modals/EditProviderURL/VSphereEditURLModal.tsx
@@ -18,36 +18,43 @@ export const VSphereEditURLModal: React.FC<EditProviderURLModalProps> = (props)
     error: (
       <div className="forklift-edit-modal-field-error-validation">
         <Trans t={t} ns="plugin__forklift-console-plugin">
-          {
-            'Error: The format of the provided URL is invalid. Ensure the URL includes a scheme, a domain name, and a path. For example: <strong>https://vCenter-host-example.com/sdk</strong> .'
-          }
+          Error: The format of the provided URL is invalid. Ensure the URL includes a scheme, a
+          domain name, and a path. For example:{' '}
+          <strong>https://vCenter-host-example.com/sdk</strong>.
         </Trans>
       </div>
     ),
     warning: (
       <div className="forklift--edit-modal-field-warning-validation">
         <Trans t={t} ns="plugin__forklift-console-plugin">
-          {
-            'Warning: The provided URL does not end with the SDK endpoint path: <strong>"/sdk"</strong>. Ensure the URL includes the correct path. For example: <strong>https://vCenter-host-example.com/sdk</strong> .'
-          }
+          Warning: The provided URL does not end with the SDK endpoint path:{' '}
+          <strong>
+            {'"'}/sdk{'"'}
+          </strong>
+          . Ensure the URL includes the correct path. For example:{' '}
+          <strong>https://vCenter-host-example.com/sdk</strong>.
         </Trans>
       </div>
     ),
     success: (
       <div className="forklift-edit-modal-field-success-validation">
         <Trans t={t} ns="plugin__forklift-console-plugin">
-          {
-            'Ensure the URL includes the <strong>"/sdk"</strong> path. For example: <strong>https://vCenter-host-example.com/sdk</strong> .'
-          }
+          Ensure the URL includes the{' '}
+          <strong>
+            {'"'}/sdk{'"'}
+          </strong>{' '}
+          path. For example: <strong>https://vCenter-host-example.com/sdk</strong>.
         </Trans>
       </div>
     ),
     default: (
       <div className="forklift-edit-modal-field-default-validation">
         <Trans t={t} ns="plugin__forklift-console-plugin">
-          {
-            'Ensure the URL includes the <strong>"/sdk"</strong> path. For example: <strong>https://vCenter-host-example.com/sdk</strong> .'
-          }
+          Ensure the URL includes the{' '}
+          <strong>
+            {'"'}/sdk{'"'}
+          </strong>{' '}
+          path. For example: <strong>https://vCenter-host-example.com/sdk</strong>.
         </Trans>
       </div>
     ),

diff --git a/...nsole-plugin/src/modules/Providers/modals/EditProviderVDDKImage/EditProviderVDDKImage.tsx b/...nsole-plugin/src/modules/Providers/modals/EditProviderVDDKImage/EditProviderVDDKImage.tsx
@@ -62,23 +62,23 @@ const EditProviderVDDKImage_: React.FC<EditProviderVDDKImageProps> = (props) =>
       <div className="forklift-edit-modal-field-error-validation">
         <Trans t={t} ns="plugin__forklift-console-plugin">
           Error: The format of the provided VDDK init image is invalid. Ensure the path is a valid
-          container image path. For example: {'<strong>'}quay.io/kubev2v/vddk:latest{'</strong>'}.
+          container image path. For example: <strong>quay.io/kubev2v/vddk:latest</strong>.
         </Trans>
       </div>
     ),
     success: (
       <div className="forklift-edit-modal-field-success-validation">
         <Trans t={t} ns="plugin__forklift-console-plugin">
-          The path must be empty or a valid container image path. For example: {'<strong>'}
-          quay.io/kubev2v/vddk:latest{'</strong>'}.
+          The path must be empty or a valid container image path. For example:{' '}
+          <strong>quay.io/kubev2v/vddk:latest</strong>.
         </Trans>
       </div>
     ),
     default: (
       <div className="forklift-edit-modal-field-default-validation">
         <Trans t={t} ns="plugin__forklift-console-plugin">
-          The path must be empty or a valid container image path. For example: {'<strong>'}
-          quay.io/kubev2v/vddk:latest{'</strong>'}.
+          The path must be empty or a valid container image path. For example:{' '}
+          <strong>quay.io/kubev2v/vddk:latest</strong>.
         </Trans>
       </div>
     ),
@@ -108,9 +108,10 @@ const EditProviderVDDKImage_: React.FC<EditProviderVDDKImageProps> = (props) =>
       model={ProviderModel}
       body={
         <Trans t={t} ns="plugin__forklift-console-plugin">
-          {
-            'Virtual Disk Development Kit (VDDK) container init image path.<br><br>Note: It is strongly recommended to specify a VDDK init image to accelerate migrations.'
-          }
+          Virtual Disk Development Kit (VDDK) container init image path.
+          <br />
+          <br />
+          Note: It is strongly recommended to specify a VDDK init image to accelerate migrations.
         </Trans>
       }
       helperText={vddkHelperTextMsgs.default}

diff --git a/...-plugin/src/modules/Providers/utils/validators/secret-fields/ovirtSecretFieldValidator.ts b/...-plugin/src/modules/Providers/utils/validators/secret-fields/ovirtSecretFieldValidator.ts
@@ -10,7 +10,7 @@ import { validateNoSpaces, validatePublicCert, validateUsernameAndDomain } from
  * @return {Validation} - The validation state of the form field. Can be one of the following:
  * 'default' - The default state of the form field, used when the field is empty or a value hasn't been entered yet.
  * 'success' - The field's value has passed validation.
- * 'warning' - The field's value might fail the validation, but it's not mandatory and not disabling the form saving.
+ * '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.
  * 'error' - The field's value has failed validation.
  */
 export const ovirtSecretFieldValidator = (id: string, value: string) => {

diff --git a/...lugin/src/modules/Providers/utils/validators/secret-fields/vsphereSecretFieldValidator.ts b/...lugin/src/modules/Providers/utils/validators/secret-fields/vsphereSecretFieldValidator.ts
@@ -8,10 +8,10 @@ import { validateFingerprint, validateNoSpaces, validateUsernameAndDomain } from
  * @param {string} value - The value of the form field.
  *
  * @return {Validation} - The validation state of the form field. Can be one of the following:
- * 'default' - The default state of the form field, used when the field is empty or a value hasn't been entered yet.
+ * 'default' - The default state of the form field, used when the field is empty or a value has not been entered yet.
  * 'success' - The field's value has passed validation.
  * 'error' - The field's value has failed validation.
- * 'warning' - The field's value might fail the validation, but it's not mandatory and not disabling the form saving.
+ * '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 vsphereSecretFieldValidator = (id: string, value: string) => {
   const trimmedValue = value.trim();

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
@@ -24,26 +24,26 @@ export const OVAProviderCreateForm: React.FC<OVAProviderCreateFormProps> = ({
       <div 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>'} .
+          format: <strong>ip_or_hostname_of_nfs_server:/nfs_path</strong>. For example:{' '}
+          <strong>10.10.0.10:/ova</strong>.
         </Trans>
       </div>
     ),
     success: (
       <div 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>'} .
+          <strong>ip_or_hostname_of_nfs_server:/nfs_path</strong>. For example:{' '}
+          <strong>10.10.0.10:/ova</strong> .
         </Trans>
       </div>
     ),
     default: (
       <div 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>'} .
+          <strong>ip_or_hostname_of_nfs_server:/nfs_path</strong>. For example:{' '}
+          <strong>10.10.0.10:/ova</strong> .
         </Trans>
       </div>
     ),

diff --git a/...sole-plugin/src/modules/Providers/views/create/components/OpenshiftProviderCreateForm.tsx b/...sole-plugin/src/modules/Providers/views/create/components/OpenshiftProviderCreateForm.tsx
@@ -24,26 +24,26 @@ export const OpenshiftProviderFormCreate: React.FC<OpenshiftProviderCreateFormPr
       <div 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 includes a scheme, a
-          domain name, and, optionally, a port. For example: {'<strong>'}
-          https://api.&#8249;your-openshift-domain&#8250;:6443{'</strong>'}.
+          domain name, and, optionally, a port. For example:{' '}
+          <strong>https://api.openshift-domain.com:6443</strong>.
         </Trans>
       </div>
     ),
     success: (
       <div className="forklift--create-provider-field-success-validation">
         <Trans t={t} ns="plugin__forklift-console-plugin">
-          {
-            '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.
         </Trans>
       </div>
     ),
     default: (
       <div className="forklift--create-provider-field-default-validation">
         <Trans t={t} ns="plugin__forklift-console-plugin">
-          {
-            '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.
         </Trans>
       </div>
     ),

diff --git a/...sole-plugin/src/modules/Providers/views/create/components/OpenstackProviderCreateForm.tsx b/...sole-plugin/src/modules/Providers/views/create/components/OpenstackProviderCreateForm.tsx
@@ -52,8 +52,8 @@ export const OpenstackProviderCreateForm: React.FC<OpenstackProviderCreateFormPr
     default: (
       <div className="forklift--create-provider-field-default-validation">
         <Trans t={t} ns="plugin__forklift-console-plugin">
-          URL of the OpenStack Identity (Keystone) endpoint. For example: {'<strong>'}
-          https://identity_service.com:5000/v3{'</strong>'}.
+          URL of the OpenStack Identity (Keystone) endpoint. For example:{' '}
+          <strong>https://identity_service.com:5000/v3</strong>.
         </Trans>
       </div>
     ),

diff --git a/...onsole-plugin/src/modules/Providers/views/create/components/VSphereProviderCreateForm.tsx b/...onsole-plugin/src/modules/Providers/views/create/components/VSphereProviderCreateForm.tsx
@@ -25,36 +25,43 @@ export const VSphereProviderCreateForm: React.FC<VSphereProviderCreateFormProps>
     error: (
       <div 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 includes a scheme, a domain name, and a path. For example: <strong>https://vCenter-host-example.com/sdk</strong> .'
-          }
+          Error: The format of the provided URL is invalid. Ensure the URL includes a scheme, a
+          domain name, and a path. For example:{' '}
+          <strong>https://vCenter-host-example.com/sdk</strong>.
         </Trans>
       </div>
     ),
     warning: (
       <div className="forklift--create-provider-field-warning-validation">
         <Trans t={t} ns="plugin__forklift-console-plugin">
-          {
-            'Warning: The provided URL does not end with the SDK endpoint path: <strong>"/sdk"</strong>. Ensure the URL includes the correct path. For example: <strong>https://vCenter-host-example.com/sdk</strong> .'
-          }
+          Warning: The provided URL does not end with the SDK endpoint path:{' '}
+          <strong>
+            {'"'}/sdk{'"'}
+          </strong>
+          . Ensure the URL includes the correct path. For example:{' '}
+          <strong>https://vCenter-host-example.com/sdk</strong>.
         </Trans>
       </div>
     ),
     success: (
       <div className="forklift--create-provider-field-success-validation">
         <Trans t={t} ns="plugin__forklift-console-plugin">
-          {
-            'URL of the vCenter API endpoint. Ensure the URL includes the <strong>"/sdk"</strong> path. For example: <strong>https://vCenter-host-example.com/sdk</strong> .'
-          }
+          URL of the vCenter API endpoint. Ensure the URL includes the{' '}
+          <strong>
+            {'"'}/sdk{'"'}
+          </strong>{' '}
+          path. For example: <strong>https://vCenter-host-example.com/sdk</strong>.
         </Trans>
       </div>
     ),
     default: (
       <div className="forklift--create-provider-field-default-validation">
         <Trans t={t} ns="plugin__forklift-console-plugin">
-          {
-            'URL of the vCenter API endpoint. Ensure the URL includes the <strong>"/sdk"</strong> path. For example: <strong>https://vCenter-host-example.com/sdk</strong> .'
-          }
+          URL of the vCenter API endpoint. Ensure the URL includes the{' '}
+          <strong>
+            {'"'}/sdk{'"'}
+          </strong>{' '}
+          path. For example: <strong>https://vCenter-host-example.com/sdk</strong>.
         </Trans>
       </div>
     ),
@@ -65,33 +72,32 @@ export const VSphereProviderCreateForm: React.FC<VSphereProviderCreateFormProps>
       <div className="forklift--create-provider-field-error-validation">
         <Trans t={t} ns="plugin__forklift-console-plugin">
           Error: The format of the provided VDDK init image is invalid. Ensure the path is a valid
-          container image path. For example: {'<strong>'}quay.io/kubev2v/vddk:latest{'</strong>'}.
+          container image path. For example: <strong>quay.io/kubev2v/vddk:latest</strong>.
         </Trans>
       </div>
     ),
     success: (
       <div className="forklift--create-provider-field-success-validation">
         <Trans t={t} ns="plugin__forklift-console-plugin">
           Virtual Disk Development Kit (VDDK) container init image path. The path must be empty or a
-          valid container image path. For example: {'<strong>'}quay.io/kubev2v/vddk:latest
-          {'</strong>'}.
+          valid container image path. For example: <strong>quay.io/kubev2v/vddk:latest</strong>.
         </Trans>
       </div>
     ),
     default: (
       <div className="forklift--create-provider-field-default-validation">
         <Trans t={t} ns="plugin__forklift-console-plugin">
           Virtual Disk Development Kit (VDDK) container init image path. The path must be empty or a
-          valid container image path. For example: {'<strong>'}quay.io/kubev2v/vddk:latest
-          {'</strong>'}.
+          valid container image path. For example: <strong>quay.io/kubev2v/vddk:latest</strong>.
         </Trans>
       </div>
     ),
   };
 
   const vddkHelperTextPopover = (
     <Trans t={t} ns="plugin__forklift-console-plugin">
-      {'Note: It is strongly recommended to specify a VDDK init image to accelerate migrations.'}
+      VDDK init image is optional, but it is strongly recommended to specify a VDDK init image to
+      accelerate migrations.
     </Trans>
   );
 

diff --git a/.../views/details/components/CredentialsSection/components/edit/OpenshiftCredentialsEdit.tsx b/.../views/details/components/CredentialsSection/components/edit/OpenshiftCredentialsEdit.tsx
@@ -23,27 +23,24 @@ export const OpenshiftCredentialsEdit: React.FC<EditComponentProps> = ({ secret,
     error: (
       <div className="forklift-page-provider-field-error-validation">
         <Trans t={t} ns="plugin__forklift-console-plugin">
-          {
-            '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.
         </Trans>
       </div>
     ),
     success: (
       <div className="forklift-page-provider-field-success-validation">
         <Trans t={t} ns="plugin__forklift-console-plugin">
-          {
-            'A service account token with cluster admin privileges, required for authenticating the connection to the API server.'
-          }
+          A service account token with cluster admin privileges, required for authenticating the
+          connection to the API server.
         </Trans>
       </div>
     ),
     default: (
       <div className="forklift-page-provider-field-default-validation">
         <Trans t={t} ns="plugin__forklift-console-plugin">
-          {
-            'A service account token with cluster admin privileges, required for authenticating the connection to the API server.'
-          }
+          A service account token with cluster admin privileges, required for authenticating the
+          connection to the API server.
         </Trans>
       </div>
     ),

diff --git a/.../views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEdit.tsx b/.../views/details/components/CredentialsSection/components/edit/OpenstackCredentialsEdit.tsx
@@ -49,9 +49,12 @@ export const OpenstackCredentialsEdit: React.FC<EditComponentProps> = ({ secret,
 
   const insecureSkipVerifyHelperTextPopover = (
     <Trans t={t} ns="plugin__forklift-console-plugin">
-      Note: If {"'"}Skip certificate validation{"'"} is selected, migrations from this provider will
-      not be secure.{'<br><br>'}Insecure migration means that the transferred data is sent over an
-      insecure connection and potentially sensitive data could be exposed.
+      Note: If <strong>Skip certificate validation</strong> is selected, migrations from this
+      provider will not be secure.
+      <br />
+      <br />
+      Insecure migration means that the transferred data is sent over an insecure connection and
+      potentially sensitive data could be exposed.
     </Trans>
   );
 

diff --git a/...dit/OpenstackCredentialsEditFormGroups/ApplicationCredentialNameSecretFieldsFormGroup.tsx b/...dit/OpenstackCredentialsEditFormGroups/ApplicationCredentialNameSecretFieldsFormGroup.tsx
@@ -108,7 +108,7 @@ export const ApplicationCredentialNameSecretFieldsFormGroup: React.FC<EditCompon
           'OpenStack application credential Secret needed for the application credential authentication.',
         )}
         helperTextInvalid={t(
-          "Error: The format of the provided application credential Secret is invalid. Ensure the secret doesn't include whitespace characters.",
+          "Error: The format of the provided application credential secret is invalid. Ensure the secret doesn't include whitespace characters.",
         )}
         validated={state.validation.applicationCredentialSecret}
       >

diff --git a/...ponents/edit/OpenstackCredentialsEditFormGroups/ApplicationWithCredentialsIDFormGroup.tsx b/...ponents/edit/OpenstackCredentialsEditFormGroups/ApplicationWithCredentialsIDFormGroup.tsx
@@ -104,7 +104,7 @@ export const ApplicationWithCredentialsIDFormGroup: React.FC<EditComponentProps>
           'OpenStack application credential Secret needed for the application credential authentication.',
         )}
         helperTextInvalid={t(
-          "Error: The format of the provided application credential Secret is invalid. Ensure the secret doesn't include whitespace characters.",
+          "Error: The format of the provided application credential secret is invalid. Ensure the secret doesn't include whitespace characters.",
         )}
         validated={state.validation.applicationCredentialSecret}
       >