Merge pull request #6887 from rebeccaalpert/i18n-common-staging

i18n common components: modals

frontend/__tests__/components/modals/column-management-modal.spec.tsx

@@ -4,13 +4,20 @@ import { mount } from 'enzyme';
 import { Alert, DataList, DataListCheck } from '@patternfly/react-core';
 import store from '@console/internal/redux';
 
-import {
-  ColumnManagementModal,
-  MAX_VIEW_COLS,
-} from '@console/internal/components/modals/column-management-modal';
+import { ColumnManagementModal } from '@console/internal/components/modals/column-management-modal';
 import { referenceForModel } from '@console/internal/module/k8s';
 import { PodModel } from '@console/internal/models';
 
+jest.mock('react-i18next', () => {
+  const reactI18next = require.requireActual('react-i18next');
+  return {
+    ...reactI18next,
+    useTranslation: () => ({ t: (key) => key }),
+  };
+});
+
+const i18nNS = 'modal';
+
 const columnManagementID = referenceForModel(PodModel);
 const columnManagementType = 'Pod';
 const columnLayout = [
@@ -153,7 +160,7 @@ describe(ColumnManagementModal.displayName, () => {
   it('renders max row info alert', () => {
     expect(wrapper.find(Alert).props().variant).toEqual('info');
     expect(wrapper.find(Alert).props().title).toEqual(
-      `You can select up to ${MAX_VIEW_COLS} columns`,
+      `${i18nNS}~You can select up to {{MAX_VIEW_COLS}} columns`,
     );
   });
 

frontend/packages/console-shared/locales/en/dashboard.json

@@ -21,4 +21,4 @@
   "{{humanAvailable}} available of {{humanLimit}} total limit": "{{humanAvailable}} available of {{humanLimit}} total limit",
   "{{humanAvailable}} available of {{humanMax}}": "{{humanAvailable}} available of {{humanMax}}",
   "{{humanAvailable}} available": "{{humanAvailable}} available"
-}
+}

frontend/packages/operator-lifecycle-manager/src/components/descriptors/spec/resource-requirements.spec.tsx

@@ -14,6 +14,14 @@ import { Button } from '@patternfly/react-core';
 
 import Spy = jasmine.Spy;
 
+jest.mock('react-i18next', () => {
+  const reactI18next = require.requireActual('react-i18next');
+  return {
+    ...reactI18next,
+    useTranslation: () => ({ t: (key) => key }),
+  };
+});
+
 describe(ResourceRequirementsModal.name, () => {
   let wrapper: ReactWrapper<ResourceRequirementsModalProps>;
   const title = 'TestResource Resource Requests';

frontend/public/components/about-modal.tsx

@@ -7,6 +7,7 @@ import {
   TextListItem,
 } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
+import { Trans, useTranslation } from 'react-i18next';
 import { useClusterVersion, BlueArrowCircleUpIcon } from '@console/shared';
 import { getBrandingDetails } from './masthead';
 import { useAccessReview } from './utils';
@@ -23,11 +24,12 @@ import { ReleaseNotesLink } from './cluster-settings/cluster-settings';
 
 const AboutModalItems: React.FC<AboutModalItemsProps> = ({ closeAboutModal }) => {
   const [kubernetesVersion, setKubernetesVersion] = React.useState('');
+  const { t } = useTranslation();
   React.useEffect(() => {
     k8sVersion()
       .then((response) => setKubernetesVersion(getK8sGitVersion(response) || '-'))
-      .catch(() => setKubernetesVersion('unknown'));
-  }, []);
+      .catch(() => setKubernetesVersion(t('modal~unknown')));
+  }, [t]);
   const clusterVersion = useClusterVersion();
 
   const clusterID = getClusterID(clusterVersion);
@@ -51,10 +53,12 @@ const AboutModalItems: React.FC<AboutModalItemsProps> = ({ closeAboutModal }) =>
               {/* PatternFly does not have an `update` alert variant
               See https://github.com/patternfly/patternfly-react/issues/4594 */}
               <BlueArrowCircleUpIcon className="pf-c-alert__icon pf-c-alert__icon--alt" />
-              Cluster update available.{' '}
-              <Link to="/settings/cluster?showVersions" onClick={closeAboutModal}>
-                Update cluster
-              </Link>
+              <Trans t={t} ns="modal">
+                Cluster update available.{' '}
+                <Link to="/settings/cluster?showVersions" onClick={closeAboutModal}>
+                  Update cluster
+                </Link>
+              </Trans>
             </>
           }
         />
@@ -63,34 +67,34 @@ const AboutModalItems: React.FC<AboutModalItemsProps> = ({ closeAboutModal }) =>
         <TextList component="dl">
           {openshiftVersion && (
             <>
-              <TextListItem component="dt">OpenShift Version</TextListItem>
+              <TextListItem component="dt">{t('modal~OpenShift version')}</TextListItem>
               <TextListItem component="dd">
                 <div className="co-select-to-copy">{openshiftVersion}</div>
                 <ReleaseNotesLink version={getCurrentVersion(clusterVersion)} />
               </TextListItem>
             </>
           )}
-          <TextListItem component="dt">Kubernetes Version</TextListItem>
+          <TextListItem component="dt">{t('modal~Kubernetes version')}</TextListItem>
           <TextListItem component="dd" className="co-select-to-copy">
             {kubernetesVersion}
           </TextListItem>
           {channel && (
             <>
-              <TextListItem component="dt">Channel</TextListItem>
+              <TextListItem component="dt">{t('modal~Channel')}</TextListItem>
               <TextListItem component="dd" className="co-select-to-copy">
                 {channel}
               </TextListItem>
             </>
           )}
           {clusterID && (
             <>
-              <TextListItem component="dt">Cluster ID</TextListItem>
+              <TextListItem component="dt">{t('modal~Cluster ID')}</TextListItem>
               <TextListItem component="dd" className="co-select-to-copy">
                 {clusterID}
               </TextListItem>
             </>
           )}
-          <TextListItem component="dt">API Server</TextListItem>
+          <TextListItem component="dt">{t('modal~API server')}</TextListItem>
           <TextListItem component="dd" className="co-select-to-copy">
             {window.SERVER_FLAGS.kubeAPIServerURL}
           </TextListItem>
@@ -103,6 +107,7 @@ AboutModalItems.displayName = 'AboutModalItems';
 
 export const AboutModal: React.FC<AboutModalProps> = (props) => {
   const { isOpen, closeAboutModal } = props;
+  const { t } = useTranslation();
   const details = getBrandingDetails();
   const customBranding = window.SERVER_FLAGS.customLogoURL || window.SERVER_FLAGS.customProductName;
   return (
@@ -116,8 +121,9 @@ export const AboutModal: React.FC<AboutModalProps> = (props) => {
     >
       {!customBranding && (
         <p>
-          OpenShift is Red Hat&apos;s container application platform that allows developers to
-          quickly develop, host, and scale applications in a cloud environment.
+          {t(
+            "modal~OpenShift is Red Hat's container application platform that allows developers to quickly develop, host, and scale applications in a cloud environment.",
+          )}
         </p>
       )}
       <AboutModalItems {...(props as any)} />

frontend/public/components/factory/modal.tsx

@@ -6,6 +6,7 @@ import { Router } from 'react-router-dom';
 import * as classNames from 'classnames';
 import * as _ from 'lodash-es';
 import { ActionGroup, Button } from '@patternfly/react-core';
+import { useTranslation } from 'react-i18next';
 
 import store from '../../redux';
 import { ButtonBar } from '../utils/button-bar';
@@ -122,6 +123,7 @@ export const ModalSubmitFooter: React.SFC<ModalSubmitFooterProps> = ({
   resetText = 'Reset',
   reset,
 }) => {
+  const { t } = useTranslation();
   const onCancelClick = (e) => {
     e.stopPropagation();
     cancel(e);
@@ -146,7 +148,7 @@ export const ModalSubmitFooter: React.SFC<ModalSubmitFooterProps> = ({
           data-test-id="modal-cancel-action"
           onClick={onCancelClick}
         >
-          {cancelText || 'Cancel'}
+          {cancelText || t('public~Cancel')}
         </Button>
         {submitDanger ? (
           <Button

frontend/public/components/modals/column-management-modal.tsx

@@ -12,6 +12,7 @@ import {
   DataListCell,
   DataListItemCells,
 } from '@patternfly/react-core';
+import { useTranslation } from 'react-i18next';
 
 import { createModalLauncher, ModalTitle, ModalBody, ModalSubmitFooter } from '../factory';
 import { setTableColumns } from '../../actions/ui';
@@ -55,6 +56,7 @@ export const ColumnManagementModal: React.FC<ColumnManagementModalProps> = ({
   close,
   columnLayout,
 }) => {
+  const { t } = useTranslation();
   const dispatch = useDispatch();
   const defaultColumns = columnLayout.columns.filter((column) => column.id && !column.additional);
   const additionalColumns = columnLayout.columns.filter((column) => column.additional);
@@ -96,26 +98,32 @@ export const ColumnManagementModal: React.FC<ColumnManagementModalProps> = ({
 
   return (
     <form onSubmit={submit} name="form" className="modal-content">
-      <ModalTitle className="modal-header">Manage Columns</ModalTitle>
+      <ModalTitle className="modal-header">{t('modal~Manage columns')}</ModalTitle>
       <ModalBody>
         <div className="co-m-form-row">
-          <p>Selected columns will appear in the table.</p>
+          <p>{t('modal~Selected columns will appear in the table.')}</p>
         </div>
         <div className="co-m-form-row">
           <Alert
             className="co-alert"
             isInline
-            title={`You can select up to ${MAX_VIEW_COLS} columns`}
+            title={t('modal~You can select up to {{MAX_VIEW_COLS}} columns', { MAX_VIEW_COLS })}
             variant="info"
           >
-            The namespace column is only shown when in 'All Projects'
+            {t('modal~The namespace column is only shown when in "All projects"')}
           </Alert>
         </div>
         <div className="row co-m-form-row">
           <div className="col-sm-12">
             <span className="col-sm-6">
-              <label className="control-label">Default {columnLayout.type} Columns</label>
-              <DataList aria-label="default column list" id="defalt-column-management" isCompact>
+              <label className="control-label">
+                {t('modal~Default {{resourceKind}} columns', { resourceKind: columnLayout.type })}
+              </label>
+              <DataList
+                aria-label={t('modal~Default column list')}
+                id="defalt-column-management"
+                isCompact
+              >
                 {defaultColumns.map((defaultColumn) => (
                   <DataListRow
                     key={defaultColumn.id}
@@ -128,9 +136,9 @@ export const ColumnManagementModal: React.FC<ColumnManagementModalProps> = ({
               </DataList>
             </span>
             <span className="col-sm-6">
-              <label className="control-label">Additional Columns</label>
+              <label className="control-label">{t('modal~Additional columns')}</label>
               <DataList
-                aria-label="Additional column list"
+                aria-label={t('modal~Additional column list')}
                 id="additional-column-management"
                 isCompact
               >
@@ -151,8 +159,8 @@ export const ColumnManagementModal: React.FC<ColumnManagementModalProps> = ({
       <ModalSubmitFooter
         inProgress={false}
         cancel={cancel}
-        submitText="Save"
-        resetText="Restore Default Columns"
+        submitText={t('public~Save')}
+        resetText={t('modal~Restore default columns')}
         reset={resetColumns}
       />
     </form>

frontend/public/components/modals/configure-count-modal.tsx

@@ -1,14 +1,28 @@
 import * as _ from 'lodash-es';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { k8sPatch, K8sResourceKind, K8sKind } from '../../module/k8s';
 import { createModalLauncher, ModalTitle, ModalBody, ModalSubmitFooter } from '../factory/modal';
 import { NumberSpinner, withHandlePromise, HandlePromiseProps } from '../utils';
 
 export const ConfigureCountModal = withHandlePromise((props: ConfigureCountModalProps) => {
-  const { defaultValue, path, resource, resourceKind, handlePromise, close } = props;
+  const {
+    defaultValue,
+    path,
+    resource,
+    resourceKind,
+    handlePromise,
+    title,
+    titleKey,
+    message,
+    messageKey,
+    messageVariables,
+    close,
+  } = props;
   const getPath = path.substring(1).replace('/', '.');
   const [value, setValue] = React.useState<number>(_.get(resource, getPath) || defaultValue);
+  const { t } = useTranslation();
 
   const submit = (e) => {
     e.preventDefault();
@@ -30,9 +44,9 @@ export const ConfigureCountModal = withHandlePromise((props: ConfigureCountModal
 
   return (
     <form onSubmit={submit} name="form" className="modal-content ">
-      <ModalTitle>{props.title}</ModalTitle>
+      <ModalTitle>{titleKey ? t(titleKey) : title}</ModalTitle>
       <ModalBody>
-        <p>{props.message}</p>
+        <p>{messageKey ? t(messageKey, messageVariables) : message}</p>
         <NumberSpinner
           className="pf-c-form-control"
           value={value}
@@ -46,7 +60,7 @@ export const ConfigureCountModal = withHandlePromise((props: ConfigureCountModal
       <ModalSubmitFooter
         errorMessage={props.errorMessage}
         inProgress={props.inProgress}
-        submitText={props.buttonText}
+        submitText={props.buttonTextKey ? t(props.buttonTextKey) : props.buttonText}
         cancel={props.cancel}
       />
     </form>
@@ -61,10 +75,14 @@ export const configureReplicaCountModal = (props) => {
       {},
       {
         defaultValue: 0,
-        title: 'Edit Pod Count',
-        message: `${props.resourceKind.labelPlural} maintain the desired number of healthy pods.`,
+        // t('modal~Edit Pod count')
+        titleKey: 'modal~Edit Pod count',
+        // t('modal~{{resourceKinds}} maintain the desired number of healthy pods.', {resourceKind: props.resourceKind.labelPlural})
+        messageKey: 'modal~{{resourceKinds}} maintain the desired number of healthy pods.',
+        messageVariables: { resourceKinds: props.resourceKind.labelPlural },
         path: '/spec/replicas',
-        buttonText: 'Save',
+        // t('modal~Save')
+        buttonTextKey: 'modal~Save',
       },
       props,
     ),
@@ -77,24 +95,33 @@ export const configureJobParallelismModal = (props) => {
       {},
       {
         defaultValue: 1,
-        title: 'Edit Parallelism',
-        message: `${props.resourceKind.labelPlural} create one or more pods and ensure that a specified number of them successfully terminate. When the specified number of completions is successfully reached, the job is complete.`,
+        // t('modal~Edit parallelism')
+        titleKey: 'modal~Edit parallelism',
+        // t('modal~{{resourceKinds}} create one or more pods and ensure that a specified number of them successfully terminate. When the specified number of completions is successfully reached, the job is complete.', {resourceKind: props.resourceKind.labelPlural})
+        messageKey:
+          'modal~{{resourceKinds}} create one or more pods and ensure that a specified number of them successfully terminate. When the specified number of completions is successfully reached, the job is complete.',
+        messageVariables: { resourceKinds: props.resourceKind.labelPlural },
         path: '/spec/parallelism',
-        buttonText: 'Save',
+        // t('modal~Save')
+        buttonTextKey: 'modal~Save',
       },
       props,
     ),
   );
 };
 
 export type ConfigureCountModalProps = {
-  message: string;
-  buttonText: string;
+  message?: string;
+  messageKey: string;
+  messageVariables: { [key: string]: any };
+  buttonText?: string;
+  buttonTextKey?: string;
   defaultValue: number;
   path: string;
   resource: K8sResourceKind;
   resourceKind: K8sKind;
-  title: string;
+  title?: string;
+  titleKey?: string;
   invalidateState?: (isInvalid: boolean, count?: number) => void;
   inProgress: boolean;
   errorMessage: string;