openshift · openshift-merge-robot · Nov 5, 2020 · Oct 29, 2020
diff --git a/frontend/public/components/configmap-and-secret-data.tsx b/frontend/public/components/configmap-and-secret-data.tsx
@@ -3,15 +3,18 @@ import { Base64 } from 'js-base64';
 import { saveAs } from 'file-saver';
 import { EyeIcon, EyeSlashIcon } from '@patternfly/react-icons';
 import { Button } from '@patternfly/react-core';
-
+import { useTranslation } from 'react-i18next';
 import { CopyToClipboard, EmptyBox, SectionHeading } from './utils';
 
-export const MaskedData: React.FC<{}> = () => (
-  <>
-    <span className="sr-only">Value hidden</span>
-    <span aria-hidden="true">&bull;&bull;&bull;&bull;&bull;</span>
-  </>
-);
+export const MaskedData: React.FC<{}> = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <span className="sr-only">{t('workload~Value hidden')}</span>
+      <span aria-hidden="true">&bull;&bull;&bull;&bull;&bull;</span>
+    </>
+  );
+};
 
 const downloadBinary = (key, value) => {
   const rawBinary = window.atob(value);
@@ -26,6 +29,7 @@ const downloadBinary = (key, value) => {
 
 export const ConfigMapBinaryData: React.FC<DownloadValueProps> = ({ data }) => {
   const dl = [];
+  const { t } = useTranslation();
   Object.keys(data || {})
     .sort()
     .forEach((k) => {
@@ -39,12 +43,12 @@ export const ConfigMapBinaryData: React.FC<DownloadValueProps> = ({ data }) => {
             onClick={() => downloadBinary(k, value)}
             variant="link"
           >
-            Save File
+            {t('workload~Save file')}
           </Button>
         </dd>,
       );
     });
-  return dl.length ? <dl>{dl}</dl> : <EmptyBox label="Binary Data" />;
+  return dl.length ? <dl>{dl}</dl> : <EmptyBox label={t('workload~binary data')} />;
 };
 ConfigMapBinaryData.displayName = 'ConfigMapBinaryData';
 
@@ -66,8 +70,9 @@ export const ConfigMapData: React.FC<ConfigMapDataProps> = ({ data, label }) =>
 ConfigMapData.displayName = 'ConfigMapData';
 
 export const SecretValue: React.FC<SecretValueProps> = ({ value, reveal, encoded = true }) => {
+  const { t } = useTranslation();
   if (!value) {
-    return <span className="text-muted">No value</span>;
+    return <span className="text-muted">{t('workload~No value')}</span>;
   }
 
   const decodedValue = encoded ? Base64.decode(value) : value;
@@ -78,7 +83,7 @@ SecretValue.displayName = 'SecretValue';
 
 export const SecretData: React.FC<SecretDataProps> = ({ data, title = 'Data' }) => {
   const [reveal, setReveal] = React.useState(false);
-
+  const { t } = useTranslation();
   const dl = [];
   Object.keys(data || {})
     .sort()
@@ -104,18 +109,18 @@ export const SecretData: React.FC<SecretDataProps> = ({ data, title = 'Data' })
             {reveal ? (
               <>
                 <EyeSlashIcon className="co-icon-space-r" />
-                Hide Values
+                {t('workload~Hide values')}
               </>
             ) : (
               <>
                 <EyeIcon className="co-icon-space-r" />
-                Reveal Values
+                {t('workload~Reveal values')}
               </>
             )}
           </Button>
         ) : null}
       </SectionHeading>
-      {dl.length ? <dl className="secret-data">{dl}</dl> : <EmptyBox label="Data" />}
+      {dl.length ? <dl className="secret-data">{dl}</dl> : <EmptyBox label={t('workload~Data')} />}
     </>
   );
 };

diff --git a/frontend/public/components/configmap.jsx b/frontend/public/components/configmap.jsx
@@ -2,6 +2,7 @@ import * as _ from 'lodash-es';
 import * as React from 'react';
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
+import { useTranslation } from 'react-i18next';
 import { DetailsPage, ListPage, Table, TableRow, TableData } from './factory';
 import { ConfigMapData, ConfigMapBinaryData } from './configmap-and-secret-data';
 import {
@@ -21,41 +22,6 @@ const kind = 'ConfigMap';
 
 const tableColumnClasses = ['', '', 'hidden-xs', 'hidden-xs', Kebab.columnClass];
 
-const ConfigMapTableHeader = () => {
-  return [
-    {
-      title: 'Name',
-      sortField: 'metadata.name',
-      transforms: [sortable],
-      props: { className: tableColumnClasses[0] },
-    },
-    {
-      title: 'Namespace',
-      sortField: 'metadata.namespace',
-      transforms: [sortable],
-      props: { className: tableColumnClasses[1] },
-      id: 'namespace',
-    },
-    {
-      title: 'Size',
-      sortFunc: 'dataSize',
-      transforms: [sortable],
-      props: { className: tableColumnClasses[2] },
-    },
-    {
-      title: 'Created',
-      sortField: 'metadata.creationTimestamp',
-      transforms: [sortable],
-      props: { className: tableColumnClasses[3] },
-    },
-    {
-      title: '',
-      props: { className: tableColumnClasses[4] },
-    },
-  ];
-};
-ConfigMapTableHeader.displayName = 'ConfigMapTableHeader';
-
 const ConfigMapTableRow = ({ obj: configMap, index, key, style }) => {
   return (
     <TableRow id={configMap.metadata.uid} index={index} trKey={key} style={style}>
@@ -90,44 +56,83 @@ const ConfigMapTableRow = ({ obj: configMap, index, key, style }) => {
   );
 };
 
-const ConfigMapDetails = ({ obj: configMap }) => {
+const ConfigMaps = (props) => {
+  const { t } = useTranslation();
+  const ConfigMapTableHeader = () => [
+    {
+      title: t('workload~Name'),
+      sortField: 'metadata.name',
+      transforms: [sortable],
+      props: { className: tableColumnClasses[0] },
+    },
+    {
+      title: t('workload~Namespace'),
+      sortField: 'metadata.namespace',
+      transforms: [sortable],
+      props: { className: tableColumnClasses[1] },
+      id: 'namespace',
+    },
+    {
+      title: t('workload~Size'),
+      sortFunc: 'dataSize',
+      transforms: [sortable],
+      props: { className: tableColumnClasses[2] },
+    },
+    {
+      title: t('workload~Created'),
+      sortField: 'metadata.creationTimestamp',
+      transforms: [sortable],
+      props: { className: tableColumnClasses[3] },
+    },
+    {
+      title: '',
+      props: { className: tableColumnClasses[4] },
+    },
+  ];
+
   return (
-    <>
-      <div className="co-m-pane__body">
-        <SectionHeading text="Config Map Details" />
-        <ResourceSummary resource={configMap} />
-      </div>
-      <div className="co-m-pane__body">
-        <SectionHeading text="Data" />
-        <ConfigMapData data={configMap.data} label="Data" />
-      </div>
-      <div className="co-m-pane__body">
-        <SectionHeading text="Binary Data" />
-        <ConfigMapBinaryData data={configMap.binaryData} />
-      </div>
-    </>
+    <Table
+      {...props}
+      aria-label="Config Maps"
+      Header={ConfigMapTableHeader}
+      Row={ConfigMapTableRow}
+      virtualize
+    />
   );
 };
 
-const ConfigMaps = (props) => (
-  <Table
-    {...props}
-    aria-label="Config Maps"
-    Header={ConfigMapTableHeader}
-    Row={ConfigMapTableRow}
-    virtualize
-  />
-);
-
 const ConfigMapsPage = (props) => (
   <ListPage ListComponent={ConfigMaps} canCreate={true} {...props} />
 );
-const ConfigMapsDetailsPage = (props) => (
-  <DetailsPage
-    {...props}
-    menuActions={menuActions}
-    pages={[navFactory.details(ConfigMapDetails), navFactory.editYaml()]}
-  />
-);
+
+const ConfigMapsDetailsPage = (props) => {
+  const { t } = useTranslation();
+  const ConfigMapDetails = ({ obj: configMap }) => {
+    return (
+      <>
+        <div className="co-m-pane__body">
+          <SectionHeading text={t('workload~ConfigMap details')} />
+          <ResourceSummary resource={configMap} />
+        </div>
+        <div className="co-m-pane__body">
+          <SectionHeading text={t('workload~Data')} />
+          <ConfigMapData data={configMap.data} label="Data" />
+        </div>
+        <div className="co-m-pane__body">
+          <SectionHeading text={t('workload~Binary data')} />
+          <ConfigMapBinaryData data={configMap.binaryData} />
+        </div>
+      </>
+    );
+  };
+
+  return (
+    <DetailsPage
+      {...props}
+      menuActions={menuActions}
+      pages={[navFactory.details(ConfigMapDetails), navFactory.editYaml()]}
+    />
+  );
+};
 
 export { ConfigMaps, ConfigMapsPage, ConfigMapsDetailsPage };
diff --git a/frontend/public/locales/en/workload.json b/frontend/public/locales/en/workload.json
@@ -1,11 +1,22 @@
 {
+  "Value hidden": "Value hidden",
+  "Save file": "Save file",
+  "binary data": "binary data",
+  "No value": "No value",
+  "Hide values": "Hide values",
+  "Reveal values": "Reveal values",
+  "Data": "Data",
+  "Name": "Name",
+  "Namespace": "Namespace",
+  "Size": "Size",
+  "Created": "Created",
+  "ConfigMap details": "ConfigMap details",
+  "Binary data": "Binary data",
   "Current count": "Current count",
   "Desired count": "Desired count",
   "DaemonSet details": "DaemonSet details",
   "Containers": "Containers",
   "Volumes": "Volumes",
-  "Name": "Name",
-  "Namespace": "Namespace",
   "Status": "Status",
   "Labels": "Labels",
   "Pod selector": "Pod selector",
@@ -14,7 +25,6 @@
   "ReplicaSet details": "ReplicaSet details",
   "Deployment revision": "Deployment revision",
   "Owner": "Owner",
-  "Created": "Created",
   "{{count1}} of {{count2}} pods": "{{count1}} of {{count2}} pods",
   "ReplicaSets": "ReplicaSets",
   "StatefulSet details": "StatefulSet details",