adds i18n for serving/eventing

openshift · Feb 2, 2021 · 7670b61 · 7670b61
1 parent 8cc6f80
commit 7670b61
Show file tree

Hide file tree

Showing 25 changed files with 164 additions and 87 deletions.
diff --git a/frontend/__tests__/components/create-yaml.spec.tsx b/frontend/__tests__/components/create-yaml.spec.tsx
@@ -9,6 +9,14 @@ import { getYAMLTemplates } from '../../public/models/yaml-templates';
 import { AsyncComponent, LoadingBox } from '../../public/components/utils';
 import { referenceForModel } from '../../public/module/k8s';
 
+jest.mock('react-i18next', () => {
+  const reactI18next = require.requireActual('react-i18next');
+  return {
+    ...reactI18next,
+    useTranslation: () => ({ t: (key) => key }),
+  };
+});
+
 describe(CreateYAML.displayName, () => {
   let wrapper: ShallowWrapper<CreateYAMLProps>;
 

diff --git a/frontend/packages/dev-console/locales/en/devconsole.json b/frontend/packages/dev-console/locales/en/devconsole.json
@@ -388,5 +388,7 @@
   "Browse the catalog to discover and deploy operator managed services": "Browse the catalog to discover and deploy operator managed services",
   "Invalid import option provided": "Invalid import option provided",
   "Add to Application": "Add to Application",
-  "Add to Project": "Add to Project"
+  "Add to Project": "Add to Project",
+  "Image name from external registry": "Image name from external registry",
+  "Image stream tag from internal registry": "Image stream tag from internal registry"
 }
diff --git a/frontend/packages/dev-console/src/components/import/__tests__/DeployImage.spec.tsx b/frontend/packages/dev-console/src/components/import/__tests__/DeployImage.spec.tsx
@@ -30,6 +30,8 @@ jest.mock('@console/shared/src/hooks/post-form-submit-action', () => {
   };
 });
 
+const i18ns = 'devconsole';
+
 describe('DeployImage Page Test', () => {
   type DeployImagePageProps = React.ComponentProps<typeof DeployImagePage>;
   let deployImagePageProps: DeployImagePageProps;
@@ -88,10 +90,12 @@ describe('Deploy Image Test', () => {
     expect(radioButtons.exists()).toBe(true);
     expect(radioButtons.length).toEqual(2);
     expect(radioButtons.at(0).prop('value')).toBe('external');
-    expect(radioButtons.at(0).prop('label')).toBe('Image name from external registry');
+    expect(radioButtons.at(0).prop('label')).toBe(`${i18ns}~Image name from external registry`);
     expect(radioButtons.at(0).prop('isChecked')).toBe(true);
     expect(radioButtons.at(1).prop('value')).toBe('internal');
-    expect(radioButtons.at(1).prop('label')).toBe('Image stream tag from internal registry');
+    expect(radioButtons.at(1).prop('label')).toBe(
+      `${i18ns}~Image stream tag from internal registry`,
+    );
     expect(radioButtons.at(1).prop('isChecked')).toBe(false);
   });
 

diff --git a/frontend/packages/dev-console/src/components/import/image-search/ImageSearchSection.tsx b/frontend/packages/dev-console/src/components/import/image-search/ImageSearchSection.tsx
@@ -36,14 +36,14 @@ const ImageSearchSection: React.FC = () => {
         name="registry"
         options={[
           {
-            label: imageRegistryType.External.label,
-            value: imageRegistryType.External.value,
+            label: imageRegistryType(t).External.label,
+            value: imageRegistryType(t).External.value,
             isDisabled: values.formType === 'edit' && values.registry === 'internal',
             activeChildren: <ImageSearch />,
           },
           {
-            label: imageRegistryType.Internal.label,
-            value: imageRegistryType.Internal.value,
+            label: imageRegistryType(t).Internal.label,
+            value: imageRegistryType(t).Internal.value,
             isDisabled: values.formType === 'edit' && values.registry === 'external',
             activeChildren: <ImageStream />,
           },

diff --git a/frontend/packages/dev-console/src/utils/imagestream-utils.ts b/frontend/packages/dev-console/src/utils/imagestream-utils.ts
@@ -1,4 +1,5 @@
 import * as _ from 'lodash';
+import { TFunction } from 'i18next';
 import * as semver from 'semver';
 import { ContainerPort, K8sResourceKind, K8sResourceCommon } from '@console/internal/module/k8s';
 import {
@@ -149,15 +150,17 @@ export enum RegistryType {
 export enum BuilderImagesNamespace {
   Openshift = 'openshift',
 }
-export const imageRegistryType = {
-  External: {
-    value: RegistryType.External,
-    label: 'Image name from external registry',
-  },
-  Internal: {
-    value: RegistryType.Internal,
-    label: 'Image stream tag from internal registry',
-  },
+export const imageRegistryType = (t: TFunction) => {
+  return {
+    External: {
+      value: RegistryType.External,
+      label: t('devconsole~Image name from external registry'),
+    },
+    Internal: {
+      value: RegistryType.Internal,
+      label: t('devconsole~Image stream tag from internal registry'),
+    },
+  };
 };
 
 export const getSortedTags = (imageStream: K8sResourceKind) => {

diff --git a/frontend/packages/knative-plugin/locales/en/knative-plugin.json b/frontend/packages/knative-plugin/locales/en/knative-plugin.json
@@ -92,6 +92,7 @@
   "Note: Some fields may not be represented in this form view. Please select \"YAML view\" for full control of object creation.": "Note: Some fields may not be represented in this form view. Please select \"YAML view\" for full control of object creation.",
   "Provided by {{provider}}": "Provided by {{provider}}",
   "Create an Event source to register interest in a class of events from a particular system. Configure using the YAML and form views.": "Create an Event source to register interest in a class of events from a particular system. Configure using the YAML and form views.",
+  "URI": "URI",
   "Service Account name": "Service Account name",
   "Select a Service Account name": "Select a Service Account name",
   "The name of Service Account use to run this": "The name of Service Account use to run this",
@@ -133,6 +134,7 @@
   "No Routes found for this resource.": "No Routes found for this resource.",
   "Location": "Location",
   "Unique Route": "Unique Route",
+  "Service": "Service",
   "Services": "Services",
   "Serving": "Serving",
   "Resources": "Resources",
@@ -153,18 +155,19 @@
   "Unable to delete {{revlabel}}": "Unable to delete {{revlabel}}",
   "You cannot delete the last {{revlabel}} for the {{serviceLabel}}.": "You cannot delete the last {{revlabel}} for the {{serviceLabel}}.",
   "OK": "OK",
-  "Service": "Service",
   "Reason": "Reason",
   "URL": "URL",
   "Traffic": "Traffic",
-  "namespace": "namespace",
   "Generation": "Generation",
   "Move {{sourceKind}}": "Move {{sourceKind}}",
   "Connects": "Connects",
   "to": "to",
   "Save": "Save",
   "Editing this URI will affect all associated Event Sources.": "Editing this URI will affect all associated Event Sources.",
   "Add Revision": "Add Revision",
+  "Split": "Split",
+  "Tag": "Tag",
+  "Revision": "Revision",
   "Select a Revision": "Select a Revision",
   "Set traffic distribution for the Revisions of the Knative Service": "Set traffic distribution for the Revisions of the Knative Service",
   "Serverless": "Serverless",

diff --git a/frontend/packages/knative-plugin/src/components/add/event-sources/SinkSection.tsx b/frontend/packages/knative-plugin/src/components/add/event-sources/SinkSection.tsx
@@ -145,18 +145,19 @@ const SinkResources: React.FC<SinkResourcesProps> = ({ namespace, isMoveSink })
 };
 
 export const SinkUriResourcesGroup: React.FC<SinkResourcesProps> = ({ namespace, isMoveSink }) => {
+  const { t } = useTranslation();
   return (
     <RadioGroupField
       name="formData.sinkType"
       options={[
         {
-          label: sourceSinkType.Resource.label,
-          value: sourceSinkType.Resource.value,
+          label: sourceSinkType(t).Resource.label,
+          value: sourceSinkType(t).Resource.value,
           activeChildren: <SinkResources namespace={namespace} isMoveSink={isMoveSink} />,
         },
         {
-          label: sourceSinkType.Uri.label,
-          value: sourceSinkType.Uri.value,
+          label: sourceSinkType(t).Uri.label,
+          value: sourceSinkType(t).Uri.value,
           activeChildren: <SinkUri />,
         },
       ]}

diff --git a/frontend/packages/knative-plugin/src/components/add/import-types.ts b/frontend/packages/knative-plugin/src/components/add/import-types.ts
@@ -1,3 +1,4 @@
+import { TFunction } from 'i18next';
 import { CatalogItem } from '@console/plugin-sdk';
 import {
   EventSourceApiServerModel,
@@ -84,15 +85,17 @@ export enum SinkType {
 
 export const EVENT_SOURCES_APP = 'event-sources-app';
 
-export const sourceSinkType = {
-  Resource: {
-    value: SinkType.Resource,
-    label: 'Resource',
-  },
-  Uri: {
-    value: SinkType.Uri,
-    label: 'URI',
-  },
+export const sourceSinkType = (t: TFunction) => {
+  return {
+    Resource: {
+      value: SinkType.Resource,
+      label: t('knative-plugin~Resource'),
+    },
+    Uri: {
+      value: SinkType.Uri,
+      label: t('knative-plugin~URI'),
+    },
+  };
 };
 export interface AddChannelFormData {
   application: ApplicationData;

diff --git a/frontend/packages/knative-plugin/src/components/overview/KnativeServingDetailsPage.tsx b/frontend/packages/knative-plugin/src/components/overview/KnativeServingDetailsPage.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { navFactory } from '@console/internal/components/utils';
 import { DetailsPage } from '@console/internal/components/factory';
 import { DetailsForKind } from '@console/internal/components/default-resource';
@@ -9,7 +10,8 @@ import { KnativeServingModel } from '../../models';
 const knativeServingReference: K8sResourceKindReference = referenceForModel(KnativeServingModel);
 
 const KnativeServingDetailsPage: React.FC<React.ComponentProps<typeof DetailsPage>> = (props) => {
-  const pages = [navFactory.details(DetailsForKind(props.kind)), navFactory.editYaml()];
+  const { t } = useTranslation();
+  const pages = [navFactory.details(DetailsForKind(props.kind, t)), navFactory.editYaml()];
 
   return (
     <DetailsPage

diff --git a/frontend/packages/knative-plugin/src/components/overview/serving-list/ServingListsPage.tsx b/frontend/packages/knative-plugin/src/components/overview/serving-list/ServingListsPage.tsx
@@ -21,7 +21,7 @@ const ServingListPage: React.FC<ServingListPageProps> = ({ match }) => {
   } = match;
   const [showTitle, canCreate] = [false, false];
   const menuActions: MenuActions = {
-    service: { model: ServiceModel },
+    service: { label: t('knative-plugin~Service'), model: ServiceModel },
   };
   const pages: Page[] = [
     {

diff --git a/frontend/packages/knative-plugin/src/components/revisions/RevisionDetailsPage.tsx b/frontend/packages/knative-plugin/src/components/revisions/RevisionDetailsPage.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { DetailsPage } from '@console/internal/components/factory';
 import { navFactory } from '@console/internal/components/utils';
 import { DetailsForKind } from '@console/internal/components/default-resource';
@@ -9,7 +10,8 @@ import { serverlessTab } from '../../utils/serverless-tab-utils';
 
 const RevisionDetailsPage: React.FC<React.ComponentProps<typeof DetailsPage>> = (props) => {
   const { kindObj, match, kind } = props;
-  const pages = [navFactory.details(DetailsForKind(kind)), navFactory.editYaml()];
+  const { t } = useTranslation();
+  const pages = [navFactory.details(DetailsForKind(kind, t)), navFactory.editYaml()];
   const breadcrumbs = useTabbedTableBreadcrumbsFor(
     kindObj,
     match,

diff --git a/frontend/packages/knative-plugin/src/components/revisions/RevisionHeader.tsx b/frontend/packages/knative-plugin/src/components/revisions/RevisionHeader.tsx
@@ -11,7 +11,7 @@ const RevisionHeader = (t: TFunction) => () => {
       props: { className: tableColumnClasses[0] },
     },
     {
-      id: 'namesoace',
+      id: 'namespace',
       title: t('knative-plugin~Namespace'),
       sortField: 'metadata.namespace',
       transforms: [sortable],

diff --git a/frontend/packages/knative-plugin/src/components/routes/RouteDetailsPage.tsx b/frontend/packages/knative-plugin/src/components/routes/RouteDetailsPage.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Kebab, navFactory } from '@console/internal/components/utils';
 import { DetailsPage } from '@console/internal/components/factory';
 import { DetailsForKind } from '@console/internal/components/default-resource';
@@ -8,7 +9,8 @@ import { serverlessTab } from '../../utils/serverless-tab-utils';
 
 const RouteDetailsPage: React.FC<React.ComponentProps<typeof DetailsPage>> = (props) => {
   const { kindObj, match, kind } = props;
-  const pages = [navFactory.details(DetailsForKind(kind)), navFactory.editYaml()];
+  const { t } = useTranslation();
+  const pages = [navFactory.details(DetailsForKind(kind, t)), navFactory.editYaml()];
   const commonActions = Kebab.factory.common.map((action) => action);
   const menuActionsCreator = [...Kebab.getExtensionsActionsForKind(RouteModel), ...commonActions];
   const breadcrumbs = useTabbedTableBreadcrumbsFor(

diff --git a/frontend/packages/knative-plugin/src/components/services/ServiceDetailsPage.tsx b/frontend/packages/knative-plugin/src/components/services/ServiceDetailsPage.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Kebab, navFactory } from '@console/internal/components/utils';
 import { DetailsPage } from '@console/internal/components/factory';
 import { DetailsForKind } from '@console/internal/components/default-resource';
@@ -8,7 +9,8 @@ import { serverlessTab } from '../../utils/serverless-tab-utils';
 
 const ServiceDetailsPage: React.FC<React.ComponentProps<typeof DetailsPage>> = (props) => {
   const { kindObj, match, kind } = props;
-  const pages = [navFactory.details(DetailsForKind(kind)), navFactory.editYaml()];
+  const { t } = useTranslation();
+  const pages = [navFactory.details(DetailsForKind(kind, t)), navFactory.editYaml()];
   const commonActions = Kebab.factory.common.map((action) => action);
   const menuActionsCreator = [...Kebab.getExtensionsActionsForKind(ServiceModel), ...commonActions];
   const breadcrumbs = useTabbedTableBreadcrumbsFor(

diff --git a/frontend/packages/knative-plugin/src/components/services/ServiceHeader.tsx b/frontend/packages/knative-plugin/src/components/services/ServiceHeader.tsx
@@ -11,8 +11,8 @@ const ServiceHeader = (t: TFunction) => () => {
       props: { className: tableColumnClasses[0] },
     },
     {
-      id: t('knative-plugin~namespace'),
-      title: 'Namespace',
+      id: 'namespace',
+      title: t('knative-plugin~Namespace'),
       sortField: 'metadata.namespace',
       transforms: [sortable],
       props: { className: tableColumnClasses[1] },

diff --git a/frontend/packages/knative-plugin/src/components/traffic-splitting/TrafficSplittingFields.tsx b/frontend/packages/knative-plugin/src/components/traffic-splitting/TrafficSplittingFields.tsx
@@ -23,7 +23,11 @@ const TrafficSplittingFields: React.FC<Props> = ({ revisionItems, values }) => {
     <MultiColumnField
       name="trafficSplitting"
       addLabel={t('knative-plugin~Add Revision')}
-      headers={[{ name: 'Split', required: true }, 'Tag', { name: 'Revision', required: true }]}
+      headers={[
+        { name: t('knative-plugin~Split'), required: true },
+        t('knative-plugin~Tag'),
+        { name: t('knative-plugin~Revision'), required: true },
+      ]}
       emptyValues={{ percent: '', tag: '', revisionName: '' }}
       disableDeleteRow={values.trafficSplitting.length === 1}
       disableAddRow={values.trafficSplitting.length === size(revisionItems)}

diff --git a/frontend/packages/pipelines-plugin/src/components/cluster-tasks/ClusterTaskDetailsPage.tsx b/frontend/packages/pipelines-plugin/src/components/cluster-tasks/ClusterTaskDetailsPage.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { DetailsPageProps, DetailsPage } from '@console/internal/components/factory';
 import { navFactory, Kebab } from '@console/internal/components/utils';
 import { DetailsForKind } from '@console/internal/components/default-resource';
@@ -7,13 +8,14 @@ import { useTasksBreadcrumbsFor } from '../pipelines/hooks';
 const ClusterTaskDetailsPage: React.FC<DetailsPageProps> = (props) => {
   const { kindObj, match, kind } = props;
   const breadcrumbsFor = useTasksBreadcrumbsFor(kindObj, match);
+  const { t } = useTranslation();
 
   return (
     <DetailsPage
       {...props}
       menuActions={Kebab.factory.common}
       breadcrumbsFor={() => breadcrumbsFor}
-      pages={[navFactory.details(DetailsForKind(kind)), navFactory.editYaml()]}
+      pages={[navFactory.details(DetailsForKind(kind, t)), navFactory.editYaml()]}
     />
   );
 };

diff --git a/frontend/packages/pipelines-plugin/src/components/pipelines/ClusterTriggerBindingPage.tsx b/frontend/packages/pipelines-plugin/src/components/pipelines/ClusterTriggerBindingPage.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { DetailsPageProps, DetailsPage } from '@console/internal/components/factory';
 import { navFactory, Kebab } from '@console/internal/components/utils';
 import { DetailsForKind } from '@console/internal/components/default-resource';
@@ -7,13 +8,14 @@ import { useTriggersBreadcrumbsFor } from './hooks';
 const ClusterTriggerBindingPage: React.FC<DetailsPageProps> = (props) => {
   const { kindObj, match, kind } = props;
   const breadcrumbsFor = useTriggersBreadcrumbsFor(kindObj, match);
+  const { t } = useTranslation();
 
   return (
     <DetailsPage
       {...props}
       menuActions={Kebab.factory.common}
       breadcrumbsFor={() => breadcrumbsFor}
-      pages={[navFactory.details(DetailsForKind(kind)), navFactory.editYaml()]}
+      pages={[navFactory.details(DetailsForKind(kind, t)), navFactory.editYaml()]}
     />
   );
 };

diff --git a/...pelines-plugin/src/components/pipelines/detail-page-tabs/PipelineConditionDetailsPage.tsx b/...pelines-plugin/src/components/pipelines/detail-page-tabs/PipelineConditionDetailsPage.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { DetailsPageProps, DetailsPage } from '@console/internal/components/factory';
 import { navFactory, Kebab } from '@console/internal/components/utils';
 import { DetailsForKind } from '@console/internal/components/default-resource';
@@ -7,13 +8,14 @@ import { usePipelinesBreadcrumbsFor } from '../hooks';
 const PipelineConditionDetailsPage: React.FC<DetailsPageProps> = (props) => {
   const { kindObj, match, kind } = props;
   const breadcrumbsFor = usePipelinesBreadcrumbsFor(kindObj, match);
+  const { t } = useTranslation();
 
   return (
     <DetailsPage
       {...props}
       menuActions={Kebab.factory.common}
       breadcrumbsFor={() => breadcrumbsFor}
-      pages={[navFactory.details(DetailsForKind(kind)), navFactory.editYaml()]}
+      pages={[navFactory.details(DetailsForKind(kind, t)), navFactory.editYaml()]}
     />
   );
 };

diff --git a/...ipelines-plugin/src/components/pipelines/detail-page-tabs/PipelineResourceDetailsPage.tsx b/...ipelines-plugin/src/components/pipelines/detail-page-tabs/PipelineResourceDetailsPage.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { DetailsPageProps, DetailsPage } from '@console/internal/components/factory';
 import { navFactory, Kebab } from '@console/internal/components/utils';
 import { DetailsForKind } from '@console/internal/components/default-resource';
@@ -7,13 +8,14 @@ import { usePipelinesBreadcrumbsFor } from '../hooks';
 const PipelineResourceDetailsPage: React.FC<DetailsPageProps> = (props) => {
   const { kindObj, match, kind } = props;
   const breadcrumbsFor = usePipelinesBreadcrumbsFor(kindObj, match);
+  const { t } = useTranslation();
 
   return (
     <DetailsPage
       {...props}
       menuActions={Kebab.factory.common}
       breadcrumbsFor={() => breadcrumbsFor}
-      pages={[navFactory.details(DetailsForKind(kind)), navFactory.editYaml()]}
+      pages={[navFactory.details(DetailsForKind(kind, t)), navFactory.editYaml()]}
     />
   );
 };