CONSOLE-2447: i18n for secrets

frontend/integration-tests/views/secrets.view.ts

@@ -36,7 +36,7 @@ export const imageSecretForm = $$('[data-test-id="create-image-secret-form"]');
 export const genericSecretForm = $$('.co-create-generic-secret__form');
 
 const revealValuesButton = element(by.partialButtonText('Reveal values'));
-const addSecrettoWorkloadButton = element(by.partialButtonText('Add Secret to Workload'));
+const addSecrettoWorkloadButton = element(by.partialButtonText('Add Secret to workload'));
 
 const selectWorkloadBtn = $('#co-add-secret-to-workload__workload');
 const addSecretAsEnv = $('#co-add-secret-to-workload__envvars');

frontend/packages/integration-tests-cypress/views/list-page.ts

@@ -7,8 +7,7 @@ export const listPage = {
   projectDropdownShouldNotExist: () =>
     cy.byLegacyTestID('namespace-bar-dropdown').should('not.exist'),
   clickCreateYAMLdropdownButton: () => {
-    return cy
-      .byLegacyTestID('dropdown-button')
+    cy.byTestID('item-create')
       .click()
       .get('body')
       .then(($body) => {

frontend/public/components/configmap-and-secret-data.tsx

@@ -81,9 +81,10 @@ export const SecretValue: React.FC<SecretValueProps> = ({ value, reveal, encoded
 };
 SecretValue.displayName = 'SecretValue';
 
-export const SecretData: React.FC<SecretDataProps> = ({ data, title = 'Data' }) => {
+export const SecretData: React.FC<SecretDataProps> = ({ data, title }) => {
   const [reveal, setReveal] = React.useState(false);
   const { t } = useTranslation();
+  const titleI18n = title || t('workload~Data');
   const dl = [];
   Object.keys(data || {})
     .sort()
@@ -98,7 +99,7 @@ export const SecretData: React.FC<SecretDataProps> = ({ data, title = 'Data' })
 
   return (
     <>
-      <SectionHeading text={title}>
+      <SectionHeading text={titleI18n}>
         {dl.length ? (
           <Button
             type="button"

frontend/public/components/factory/list-page.jsx

@@ -218,6 +218,7 @@ export const FireMan_ = connect(null, { filterList })(
               <Dropdown
                 buttonClassName="pf-m-primary"
                 id="item-create"
+                dataTest="item-create"
                 menuClassName={classNames({ 'pf-m-align-right-on-md': title })}
                 title={createButtonText}
                 noSelection

frontend/public/components/secret.jsx

@@ -2,6 +2,8 @@ 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 i18next from 'i18next';
 import { DetailsPage, ListPage, Table, TableRow, TableData } from './factory';
 import { SecretData } from './configmap-and-secret-data';
 import {
@@ -25,7 +27,7 @@ export const addSecretToWorkload = (kindObj, secret) => {
 
   return {
     callback: () => configureAddSecretToWorkloadModal({ secretName, namespace, blocking: true }),
-    label: 'Add Secret to Workload',
+    label: i18next.t('workload~Add Secret to workload'),
   };
 };
 
@@ -34,17 +36,20 @@ const actionButtons = [addSecretToWorkload];
 const menuActions = [
   Kebab.factory.ModifyLabels,
   Kebab.factory.ModifyAnnotations,
-  (kind, obj) => ({
-    label: `Edit ${kind.label}`,
-    href: `${resourceObjPath(obj, kind.kind)}/edit`,
-    accessReview: {
-      group: kind.apiGroup,
-      resource: kind.plural,
-      name: obj.metadata.name,
-      namespace: obj.metadata.namespace,
-      verb: 'update',
-    },
-  }),
+  (kind, obj) => {
+    return {
+      // t('workload~Edit Secret')
+      labelKey: 'workload~Edit Secret',
+      href: `${resourceObjPath(obj, kind.kind)}/edit`,
+      accessReview: {
+        group: kind.apiGroup,
+        resource: kind.plural,
+        name: obj.metadata.name,
+        namespace: obj.metadata.namespace,
+        verb: 'update',
+      },
+    };
+  },
   Kebab.factory.Delete,
 ];
 
@@ -59,47 +64,6 @@ const tableColumnClasses = [
   Kebab.columnClass,
 ];
 
-const SecretTableHeader = () => {
-  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: 'Type',
-      sortField: 'type',
-      transforms: [sortable],
-      props: { className: tableColumnClasses[2] },
-    },
-    {
-      title: 'Size',
-      sortFunc: 'dataSize',
-      transforms: [sortable],
-      props: { className: tableColumnClasses[3] },
-    },
-    {
-      title: 'Created',
-      sortField: 'metadata.creationTimestamp',
-      transforms: [sortable],
-      props: { className: tableColumnClasses[4] },
-    },
-    {
-      title: '',
-      props: { className: tableColumnClasses[5] },
-    },
-  ];
-};
-SecretTableHeader.displayName = 'SecretTableHeader';
-
 const SecretTableRow = ({ obj: secret, index, key, style }) => {
   const data = _.size(secret.data);
   return (
@@ -137,10 +101,11 @@ const SecretTableRow = ({ obj: secret, index, key, style }) => {
 };
 
 const SecretDetails = ({ obj: secret }) => {
+  const { t } = useTranslation();
   return (
     <>
       <div className="co-m-pane__body">
-        <SectionHeading text="Secret Details" />
+        <SectionHeading text={t('workload~Secret details')} />
         <div className="row">
           <div className="col-md-6">
             <ResourceSummary resource={secret} />
@@ -154,15 +119,56 @@ const SecretDetails = ({ obj: secret }) => {
   );
 };
 
-const SecretsList = (props) => (
-  <Table
-    {...props}
-    aria-label="Secrets"
-    Header={SecretTableHeader}
-    Row={SecretTableRow}
-    virtualize
-  />
-);
+const SecretsList = (props) => {
+  const { t } = useTranslation();
+  const SecretTableHeader = () => [
+    {
+      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~Type'),
+      sortField: 'type',
+      transforms: [sortable],
+      props: { className: tableColumnClasses[2] },
+    },
+    {
+      title: t('workload~Size'),
+      sortFunc: 'dataSize',
+      transforms: [sortable],
+      props: { className: tableColumnClasses[3] },
+    },
+    {
+      title: t('workload~Created'),
+      sortField: 'metadata.creationTimestamp',
+      transforms: [sortable],
+      props: { className: tableColumnClasses[4] },
+    },
+    {
+      title: '',
+      props: { className: tableColumnClasses[5] },
+    },
+  ];
+
+  return (
+    <Table
+      {...props}
+      aria-label="Secrets"
+      Header={SecretTableHeader}
+      Row={SecretTableRow}
+      virtualize
+    />
+  );
+};
 SecretsList.displayName = 'SecretsList';
 
 const IMAGE_FILTER_VALUE = 'Image';
@@ -212,12 +218,13 @@ const filters = [
 ];
 
 const SecretsPage = (props) => {
+  const { t } = useTranslation();
   const createItems = {
-    generic: 'Key/Value Secret',
-    image: 'Image Pull Secret',
-    source: 'Source Secret',
-    webhook: 'Webhook Secret',
-    yaml: 'From YAML',
+    generic: t('workload~Key/value secret'),
+    image: t('workload~Image pull secret'),
+    source: t('workload~Source secret'),
+    webhook: t('workload~Webhook secret'),
+    yaml: t('workload~From YAML'),
   };
 
   const createProps = {
@@ -231,7 +238,7 @@ const SecretsPage = (props) => {
       ListComponent={SecretsList}
       canCreate={true}
       rowFilters={filters}
-      createButtonText="Create"
+      createButtonText={t('workload~Create')}
       createProps={createProps}
       {...props}
     />

frontend/public/components/utils/details-page.tsx

@@ -40,7 +40,7 @@ const getTolerationsPath = (obj: K8sResourceKind): string => {
   return obj.kind === 'Pod' ? 'spec.tolerations' : 'spec.template.spec.tolerations';
 };
 
-export const ResourceSummary: React.SFC<ResourceSummaryProps> = ({
+export const ResourceSummary: React.FC<ResourceSummaryProps> = ({
   children,
   resource,
   customPathName,

frontend/public/locales/en/workload.json

@@ -3,9 +3,9 @@
   "Save file": "Save file",
   "binary data": "binary data",
   "No value": "No value",
+  "Data": "Data",
   "Hide values": "Hide values",
   "Reveal values": "Reveal values",
-  "Data": "Data",
   "Name": "Name",
   "Namespace": "Namespace",
   "Size": "Size",
@@ -118,6 +118,15 @@
   "Phase": "Phase",
   "{{statusReplicas}} of {{specReplicas}} pods": "{{statusReplicas}} of {{specReplicas}} pods",
   "ReplicationControllers": "ReplicationControllers",
+  "Add Secret to workload": "Add Secret to workload",
+  "Edit Secret": "Edit Secret",
+  "Secret details": "Secret details",
+  "Key/value secret": "Key/value secret",
+  "Image pull secret": "Image pull secret",
+  "Source secret": "Source secret",
+  "Webhook secret": "Webhook secret",
+  "From YAML": "From YAML",
+  "Create": "Create",
   "StatefulSet details": "StatefulSet details",
   "StatefulSets": "StatefulSets",
   "Resource limits": "Resource limits",