Refactor localized forklift Trans

Signed-off-by: yzamir <[email protected]>
kubev2v · Feb 11, 2024 · c0c9229 · c0c9229
1 parent cb3a295
commit c0c9229
Show file tree

Hide file tree

Showing 36 changed files with 214 additions and 291 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/packages/forklift-console-plugin/src/modules/NetworkMaps/EmptyStateNetworkMaps.tsx b/packages/forklift-console-plugin/src/modules/NetworkMaps/EmptyStateNetworkMaps.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
-import { Trans } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import ForkliftEmptyState from 'src/components/empty-states/ForkliftEmptyState';
 import automationIcon from 'src/components/empty-states/images/automation.svg';
 import { HELP_LINK_HREF } from 'src/utils/constants';
-import { useForkliftTranslation } from 'src/utils/i18n';
+import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
 import { ExternalLink } from '@kubev2v/common';
 import { PROVIDERS_REFERENCE } from '@kubev2v/legacy/common/constants';
@@ -27,9 +26,9 @@ const EmptyStatePlans: React.FC<{ namespace: string }> = ({ namespace }) => {
       icon={AutomationIcon}
       title={
         namespace ? (
-          <Trans t={t} ns="plugin__forklift-console-plugin">
+          <ForkliftTrans>
             No NetworkMaps found in namespace <strong>{namespace}</strong>.
-          </Trans>
+          </ForkliftTrans>
         ) : (
           t('No NetworkMaps found.')
         )
@@ -38,15 +37,15 @@ const EmptyStatePlans: React.FC<{ namespace: string }> = ({ namespace }) => {
         !hasSufficientProviders ? (
           <Flex direction={{ default: 'column' }} alignItems={{ default: 'alignItemsCenter' }}>
             <FlexItem>
-              <Trans t={t} ns="plugin__forklift-console-plugin">
+              <ForkliftTrans>
                 Migration network maps are used to map network interfaces between source and target
                 virtualization providers, at least one source and one target provider must be
                 available in order to create a migration storage map,{' '}
                 <ExternalLink href={HELP_LINK_HREF} isInline>
                   Learn more
                 </ExternalLink>
                 .
-              </Trans>
+              </ForkliftTrans>
             </FlexItem>
             <FlexItem>
               <Button variant="secondary">

diff --git a/...ift-console-plugin/src/modules/Overview/views/overview/tabs/Details/cards/WelcomeCard.tsx b/...ift-console-plugin/src/modules/Overview/views/overview/tabs/Details/cards/WelcomeCard.tsx
@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
-import { Trans } from 'react-i18next';
 import automationIcon from 'src/modules/Overview/images/automation.svg';
-import { useForkliftTranslation } from 'src/utils/i18n';
+import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
 import { V1beta1ForkliftController } from '@kubev2v/types';
 import {
@@ -74,25 +73,25 @@ export const OverviewCard: FC<OverviewCardProps> = ({ onHide }) => {
           </CardHeader>
           <CardBody>
             <Text className="forklift-welcome-text">
-              <Trans t={t} ns="plugin__forklift-console-plugin">
+              <ForkliftTrans>
                 Migration Toolkit for Virtualization (MTV) migrates virtual machines at scale to Red
                 Hat OpenShift Virtualization. You can migrate virtual machines from VMware vSphere,
                 Red Hat Virtualization, OpenStack, OVA and OpenShift Virtualization source providers
                 to OpenShift Virtualization with the Migration Toolkit for Virtualization (MTV).
-              </Trans>
+              </ForkliftTrans>
             </Text>
             <Text className="forklift-welcome-text">
-              <Trans t={t} ns="plugin__forklift-console-plugin">
+              <ForkliftTrans>
                 This gives organizations the ability to more easily access workloads running on
                 virtual machines, while developing new cloud-native applications.
-              </Trans>
+              </ForkliftTrans>
             </Text>
             <Text className="forklift-welcome-text">
-              <Trans t={t} ns="plugin__forklift-console-plugin">
+              <ForkliftTrans>
                 Migrations are performed in a few simple steps, first by providing source and
                 destination credentials, then mapping the source and destination infrastructure and
                 creating a choreographed plan, and finally, executing the migration effort.
-              </Trans>
+              </ForkliftTrans>
             </Text>
           </CardBody>
         </SplitItem>

diff --git a/packages/forklift-console-plugin/src/modules/Plans/EmptyStatePlans.tsx b/packages/forklift-console-plugin/src/modules/Plans/EmptyStatePlans.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
-import { Trans } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import ForkliftEmptyState from 'src/components/empty-states/ForkliftEmptyState';
 import digitalTransformation from 'src/modules/Overview/images/digitalTransormation.svg';
 import { HELP_LINK_HREF } from 'src/utils/constants';
-import { useForkliftTranslation } from 'src/utils/i18n';
+import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
 import { ExternalLink } from '@kubev2v/common';
 import { PROVIDERS_REFERENCE } from '@kubev2v/legacy/common/constants';
@@ -28,9 +27,9 @@ const EmptyStatePlans: React.FC<{ namespace: string }> = ({ namespace }) => {
       icon={AutomationIcon}
       title={
         namespace ? (
-          <Trans t={t} ns="plugin__forklift-console-plugin">
+          <ForkliftTrans>
             No Plans found in namespace <strong>{namespace}</strong>.
-          </Trans>
+          </ForkliftTrans>
         ) : (
           t('No Plans found.')
         )
@@ -39,15 +38,15 @@ const EmptyStatePlans: React.FC<{ namespace: string }> = ({ namespace }) => {
         !hasSufficientProviders ? (
           <Flex direction={{ default: 'column' }} alignItems={{ default: 'alignItemsCenter' }}>
             <FlexItem>
-              <Trans t={t} ns="plugin__forklift-console-plugin">
+              <ForkliftTrans>
                 Migration plans are used to plan migration or virtualization workloads from source
                 providers to target providers. At least one source and one target provider must be
                 available in order to create a migration plan,{' '}
                 <ExternalLink href={HELP_LINK_HREF} isInline>
                   Learn more
                 </ExternalLink>
                 .
-              </Trans>
+              </ForkliftTrans>
             </FlexItem>
             <FlexItem>
               <Button variant="secondary">

diff --git a/packages/forklift-console-plugin/src/modules/Plans/planActions.tsx b/packages/forklift-console-plugin/src/modules/Plans/planActions.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { Trans } from 'react-i18next';
-import { useForkliftTranslation } from 'src/utils/i18n';
+import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
 import { withActionServiceContext } from '@kubev2v/common';
 import { withQueryClient } from '@kubev2v/common';
@@ -376,10 +375,10 @@ const DeleteModal = ({
   const IsExecutingAlert = <Alert isInline variant="danger" title="Plan is currently running" />;
   const IsNotArchivedAlert = (
     <Alert isInline variant="info" title="Plan is not archived">
-      <Trans t={t} ns="plugin__forklift-console-plugin">
+      <ForkliftTrans>
         Deleting a migration plan does not remove temporary resources, it is recommended to{' '}
         <strong>archive</strong> the plan first before deleting it, to remove temporary resources.
-      </Trans>
+      </ForkliftTrans>
     </Alert>
   );
 
@@ -399,11 +398,11 @@ const DeleteModal = ({
           {isPlanExecuting ? IsExecutingAlert : ''}
           {isPlanArchived || !isPlanStarted ? '' : IsNotArchivedAlert}
           <TextContent>
-            <Trans t={t} ns="plugin__forklift-console-plugin">
+            <ForkliftTrans>
               Are you sure you want to delete{' '}
               <strong className="co-break-word">{{ resourceName: plan.name }}</strong> in namespace{' '}
               <strong>{{ namespace: plan.namespace }}</strong>?
-            </Trans>
+            </ForkliftTrans>
           </TextContent>
         </Stack>
       }

diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/create/PlanCreatePage.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/create/PlanCreatePage.tsx
@@ -1,9 +1,8 @@
 import React, { useReducer } from 'react';
-import { Trans } from 'react-i18next';
 import { useHistory } from 'react-router';
 import { getResourceUrl } from 'src/modules/Providers/utils';
 import { MigrationAction } from 'src/modules/Providers/views/details/tabs/VirtualMachines/components/MigrationAction';
-import { useForkliftTranslation } from 'src/utils/i18n';
+import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
 import { ProviderModelGroupVersionKind, ProviderModelRef, V1beta1Provider } from '@kubev2v/types';
 import { useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
@@ -70,10 +69,10 @@ export const PlanCreatePage: React.FC<{
           variant="info"
           title={t('How to create a migration plan')}
         >
-          <Trans t={t} ns="plugin__forklift-console-plugin">
+          <ForkliftTrans>
             To migrate virtual machines select a provider, then select the virtual machines to
             migrate and click the <strong>Create migration plan</strong> button.
-          </Trans>
+          </ForkliftTrans>
         </Alert>
 
         {!namespace && (
@@ -83,11 +82,11 @@ export const PlanCreatePage: React.FC<{
             variant="warning"
             title={t('Namespace is not defined')}
           >
-            <Trans t={t} ns="plugin__forklift-console-plugin">
+            <ForkliftTrans>
               This plan will be created in <strong>{defaultNamespace}</strong> namespace, if you
               wish to choose another namespace please cancel, and choose a namespace from the top
               bar.
-            </Trans>
+            </ForkliftTrans>
           </Alert>
         )}
 

diff --git a/packages/forklift-console-plugin/src/modules/Providers/modals/DeleteModal/DeleteModal.tsx b/packages/forklift-console-plugin/src/modules/Providers/modals/DeleteModal/DeleteModal.tsx
@@ -1,7 +1,6 @@
 import React, { ReactNode, useCallback, useState } from 'react';
-import { Trans } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
-import { useForkliftTranslation } from 'src/utils/i18n';
+import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
 import {
   k8sDelete,
@@ -98,16 +97,16 @@ export const DeleteModal: React.FC<DeleteModalProps> = ({ title, resource, model
       actions={actions}
     >
       {namespace ? (
-        <Trans t={t} ns="plugin__forklift-console-plugin">
+        <ForkliftTrans>
           Are you sure you want to delete{' '}
           <strong className="co-break-word">{{ resourceName: name }}</strong> in namespace{' '}
           <strong>{{ namespace: namespace }}</strong>?
-        </Trans>
+        </ForkliftTrans>
       ) : (
-        <Trans t={t} ns="plugin__forklift-console-plugin">
+        <ForkliftTrans>
           Are you sure you want to delete{' '}
           <strong className="co-break-word">{{ resourceName: name }}</strong>?
-        </Trans>
+        </ForkliftTrans>
       )}
       {typeof owner === 'object' && <ItemIsOwnedAlert owner={owner} namespace={namespace} />}
       {alertMessage}

diff --git a/...ift-console-plugin/src/modules/Providers/modals/EditProviderURL/OpenshiftEditURLModal.tsx b/...ift-console-plugin/src/modules/Providers/modals/EditProviderURL/OpenshiftEditURLModal.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { Trans } from 'react-i18next';
-import { useForkliftTranslation } from 'src/utils/i18n';
+import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
 import { ProviderModel } from '@kubev2v/types';
 import { ModalVariant } from '@patternfly/react-core';
@@ -17,25 +16,21 @@ export const OpenshiftEditURLModal: React.FC<EditProviderURLModalProps> = (props
   const helperTextMsgs = {
     error: (
       <div className="forklift-edit-modal-field-error-validation">
-        <Trans t={t} ns="plugin__forklift-console-plugin">
+        <ForkliftTrans>
           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.openshift-domain.com:6443</strong>.
-        </Trans>
+        </ForkliftTrans>
       </div>
     ),
     success: (
       <div className="forklift-edit-modal-field-success-validation">
-        <Trans t={t} ns="plugin__forklift-console-plugin">
-          {'URL of the Openshift Virtualization API endpoint.'}
-        </Trans>
+        <ForkliftTrans>{'URL of the Openshift Virtualization API endpoint.'}</ForkliftTrans>
       </div>
     ),
     default: (
       <div className="forklift-edit-modal-field-default-validation">
-        <Trans t={t} ns="plugin__forklift-console-plugin">
-          {'URL of the Openshift Virtualization API endpoint.'}
-        </Trans>
+        <ForkliftTrans>{'URL of the Openshift Virtualization API endpoint.'}</ForkliftTrans>
       </div>
     ),
   };

diff --git a/...ift-console-plugin/src/modules/Providers/modals/EditProviderURL/OpenstackEditURLModal.tsx b/...ift-console-plugin/src/modules/Providers/modals/EditProviderURL/OpenstackEditURLModal.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { Trans } from 'react-i18next';
-import { useForkliftTranslation } from 'src/utils/i18n';
+import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
 import { ProviderModel } from '@kubev2v/types';
 import { ModalVariant } from '@patternfly/react-core';
@@ -17,38 +16,38 @@ export const OpenstackEditURLModal: React.FC<EditProviderURLModalProps> = (props
   const helperTextMsgs = {
     error: (
       <div className="forklift-edit-modal-field-error-validation">
-        <Trans t={t} ns="plugin__forklift-console-plugin">
+        <ForkliftTrans>
           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://identity_service.com:5000/v3</strong>.
-        </Trans>
+        </ForkliftTrans>
       </div>
     ),
     warning: (
       <div className="forklift--edit-modal-field-warning-validation">
-        <Trans t={t} ns="plugin__forklift-console-plugin">
+        <ForkliftTrans>
           Warning: The provided URL does not end with the API endpoint path:
           <strong>
             {'"'}/v3{'"'}
           </strong>
           {'. '}
           Ensure the URL includes the correct path. For example:{' '}
           <strong>https://identity_service.com:5000/v3</strong>.
-        </Trans>
+        </ForkliftTrans>
       </div>
     ),
     success: (
       <div className="forklift-edit-modal-field-success-validation">
-        <Trans t={t} ns="plugin__forklift-console-plugin">
+        <ForkliftTrans>
           For example: <strong>https://identity_service.com:5000/v3</strong>.
-        </Trans>
+        </ForkliftTrans>
       </div>
     ),
     default: (
       <div className="forklift-edit-modal-field-default-validation">
-        <Trans t={t} ns="plugin__forklift-console-plugin">
+        <ForkliftTrans>
           For example: <strong>https://identity_service.com:5000/v3</strong>.
-        </Trans>
+        </ForkliftTrans>
       </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
@@ -1,6 +1,5 @@
 import React from 'react';
-import { Trans } from 'react-i18next';
-import { useForkliftTranslation } from 'src/utils/i18n';
+import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
 import { ProviderModel } from '@kubev2v/types';
 import { ModalVariant } from '@patternfly/react-core';
@@ -17,36 +16,36 @@ export const VSphereEditURLModal: React.FC<EditProviderURLModalProps> = (props)
   const helperTextMsgs = {
     error: (
       <div className="forklift-edit-modal-field-error-validation">
-        <Trans t={t} ns="plugin__forklift-console-plugin">
+        <ForkliftTrans>
           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>
+        </ForkliftTrans>
       </div>
     ),
     warning: (
       <div className="forklift--edit-modal-field-warning-validation">
-        <Trans t={t} ns="plugin__forklift-console-plugin">
+        <ForkliftTrans>
           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>
+        </ForkliftTrans>
       </div>
     ),
     success: (
       <div className="forklift-edit-modal-field-success-validation">
-        <Trans t={t} ns="plugin__forklift-console-plugin">
+        <ForkliftTrans>
           Ensure the URL includes the <strong>/sdk</strong> path. For example:{' '}
           <strong>https://vCenter-host-example.com/sdk</strong>.
-        </Trans>
+        </ForkliftTrans>
       </div>
     ),
     default: (
       <div className="forklift-edit-modal-field-default-validation">
-        <Trans t={t} ns="plugin__forklift-console-plugin">
+        <ForkliftTrans>
           Ensure the URL includes the <strong>/sdk</strong> path. For example:{' '}
           <strong>https://vCenter-host-example.com/sdk</strong>.
-        </Trans>
+        </ForkliftTrans>
       </div>
     ),
   };