i18n support in devconsole helm components

frontend/packages/dev-console/locales/en/devconsole.json

@@ -1,8 +1,62 @@
 {
   "Select application": "Select application",
-  "Application": "Application",
-  "Application Name": "Application Name",
+  "Helm Releases": "Helm Releases",
+  "Helm Release Details": "Helm Release Details",
+  "Resources": "Resources",
+  "Revision History": "Revision History",
+  "Release Notes": "Release Notes",
+  "Helm Release history": "Helm Release history",
+  "Revision": "Revision",
+  "Updated": "Updated",
+  "Status": "Status",
+  "Chart Name": "Chart Name",
+  "Chart Version": "Chart Version",
+  "App Version": "App Version",
+  "Description": "Description",
+  "confirmModalRollbackHelmReleaseKey": "Are you sure you want to rollback <1>{{releaseName}}</1> to <4>Revision {{revision}}</4>?",
+  "No Release Notes Available": "No Release Notes Available",
+  "Release Notes are not available for this Helm Chart.": "Release Notes are not available for this Helm Chart.",
+  "Resources by name": "Resources by name",
+  "Name": "Name",
+  "Type": "Type",
+  "Created": "Created",
+  "No Resources Found": "No Resources Found",
+  "{{chartVersion}} provided by {{provider}}": "{{chartVersion}} provided by {{provider}}",
+  "Change Chart Version?": "Change Chart Version?",
+  "Are you sure you want to change the chart version from": "Are you sure you want to change the chart version from",
+  "to": "to",
+  "All data entered for version": "All data entered for version",
+  "will be reset": "will be reset",
+  "Proceed": "Proceed",
+  "Cancel": "Cancel",
+  "Select the Chart Version.": "Select the Chart Version.",
+  "Select the version to upgrade to.": "Select the version to upgrade to.",
+  "No versions available": "No versions available",
+  "For more information on the chart, refer to this": "For more information on the chart, refer to this",
+  "README": "README",
+  "Helm chart cannot be installed": "Helm chart cannot be installed",
+  "The Helm chart is currently unavailable. {{chartError}}": "The Helm chart is currently unavailable. {{chartError}}",
+  "Release Name": "Release Name",
+  "A unique name for the Helm Chart release.": "A unique name for the Helm Chart release.",
+  "Select the version to rollback": "Select the version to rollback",
+  "to, from the table below:": "to, from the table below:",
+  "Install Helm Chart": "Install Helm Chart",
+  "The Helm chart can be installed by completing the form. Default values may be provided by the Helm chart authors.": "The Helm chart can be installed by completing the form. Default values may be provided by the Helm chart authors.",
+  "The Helm chart can be installed by manually entering YAML or JSON definitions.": "The Helm chart can be installed by manually entering YAML or JSON definitions.",
+  "Upgrade Helm Release": "Upgrade Helm Release",
+  "Upgrade by selecting a new chart version or manually changing the form values.": "Upgrade by selecting a new chart version or manually changing the form values.",
+  "Upgrade by selecting a new chart version or manually changing YAML.": "Upgrade by selecting a new chart version or manually changing YAML.",
+  "Rollback Helm Release": "Rollback Helm Release",
+  "Required": "Required",
+  "Errors in the Form - {{errorsText}}": "Errors in the Form - {{errorsText}}",
+  "Invalid YAML - {{err}}": "Invalid YAML - {{err}}",
+  "Select a project to view the list of Helm Releases": "Select a project to view the list of Helm Releases",
+  "Unable to load Helm Releases": "Unable to load Helm Releases",
+  "No Helm Releases found": "No Helm Releases found",
+  "Install a Helm Chart from the developer catalog": "Install a Helm Chart from the developer catalog",
   "Warning: the application grouping already exists.": "Warning: the application grouping already exists.",
   "A unique name given to the application grouping to label your resources.": "A unique name given to the application grouping to label your resources.",
-  "Select an application for your grouping or {{UNASSIGNED_LABEL}} to not use an application grouping.": "Select an application for your grouping or {{UNASSIGNED_LABEL}} to not use an application grouping."
-}
+  "Application": "Application",
+  "Select an application for your grouping or {{UNASSIGNED_LABEL}} to not use an application grouping.": "Select an application for your grouping or {{UNASSIGNED_LABEL}} to not use an application grouping.",
+  "Application Name": "Application Name"
+}

frontend/packages/dev-console/src/components/helm/HelmInstallUpgradePage.tsx

@@ -6,6 +6,7 @@ import { safeDump, safeLoad } from 'js-yaml';
 import { Formik } from 'formik';
 import { Helmet } from 'react-helmet';
 import { RouteComponentProps } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { history, LoadingBox } from '@console/internal/components/utils';
 import { coFetchJSON } from '@console/internal/co-fetch';
 import { PageBody } from '@console/shared';
@@ -58,6 +59,7 @@ const HelmInstallUpgradePage: React.FunctionComponent<HelmInstallUpgradePageProp
   const helmChartRepoName = searchParams.get('chartRepoName');
   const helmActionOrigin = searchParams.get('actionOrigin') as HelmActionOrigins;
 
+  const { t } = useTranslation();
   const [chartData, setChartData] = React.useState<HelmChart>(null);
   const [chartName, setChartName] = React.useState<string>('');
   const [chartVersion, setChartVersion] = React.useState<string>('');
@@ -79,10 +81,11 @@ const HelmInstallUpgradePage: React.FunctionComponent<HelmInstallUpgradePageProp
         helmAction,
         initialReleaseName,
         namespace,
+        t,
         helmActionOrigin,
         initialChartURL,
       ),
-    [helmAction, helmActionOrigin, initialChartURL, initialReleaseName, namespace],
+    [helmAction, helmActionOrigin, initialChartURL, initialReleaseName, namespace, t],
   );
 
   React.useEffect(() => {
@@ -155,14 +158,18 @@ const HelmInstallUpgradePage: React.FunctionComponent<HelmInstallUpgradePageProp
       if (validFormData) {
         valuesObj = formData;
       } else {
-        actions.setStatus({ submitError: `Errors in the Form - ${ajv.errorsText()}` });
+        actions.setStatus({
+          submitError: t('devconsole~Errors in the Form - {{errorsText}}', {
+            errorsText: ajv.errorsText(),
+          }),
+        });
         return;
       }
     } else if (yamlData) {
       try {
         valuesObj = safeLoad(yamlData);
       } catch (err) {
-        actions.setStatus({ submitError: `Invalid YAML - ${err}` });
+        actions.setStatus({ submitError: t('devconsole~Invalid YAML - {{err}}', { err }) });
         return;
       }
     }
@@ -223,7 +230,7 @@ const HelmInstallUpgradePage: React.FunctionComponent<HelmInstallUpgradePageProp
           initialValues={initialValues}
           onSubmit={handleSubmit}
           onReset={history.goBack}
-          validationSchema={getHelmActionValidationSchema(helmAction)}
+          validationSchema={getHelmActionValidationSchema(helmAction, t)}
         >
           {(formikProps) => (
             <HelmInstallUpgradeForm

frontend/packages/dev-console/src/components/helm/HelmReadmeModal.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   ModalTitle,
   ModalBody,
@@ -12,14 +13,17 @@ type HelmReadmeModalProps = {
 };
 type Props = HelmReadmeModalProps & ModalComponentProps;
 
-const HelmReadmeModal: React.FunctionComponent<Props> = ({ readme, close }) => (
-  <div className="modal-content">
-    <ModalTitle close={close}>README</ModalTitle>
-    <ModalBody>
-      <SyncMarkdownView content={readme} />
-    </ModalBody>
-  </div>
-);
+const HelmReadmeModal: React.FunctionComponent<Props> = ({ readme, close }) => {
+  const { t } = useTranslation();
+  return (
+    <div className="modal-content">
+      <ModalTitle close={close}>{t('devconsole~README')}</ModalTitle>
+      <ModalBody>
+        <SyncMarkdownView content={readme} />
+      </ModalBody>
+    </div>
+  );
+};
 
 export const helmReadmeModalLauncher = createModalLauncher<Props>(HelmReadmeModal);
 export default HelmReadmeModal;

frontend/packages/dev-console/src/components/helm/HelmReleaseListPage.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
 import Helmet from 'react-helmet';
+import { useTranslation } from 'react-i18next';
 import { PageHeading } from '@console/internal/components/utils';
 import { withStartGuide } from '@console/internal/components/start-guide';
 import CreateProjectListPage from '../projects/CreateProjectListPage';
@@ -10,32 +11,36 @@ import HelmReleaseList from './list/HelmReleaseList';
 type HelmReleaseListPageProps = RouteComponentProps<{ ns: string }>;
 
 const PageContents: React.FC<HelmReleaseListPageProps> = (props) => {
+  const { t } = useTranslation();
   const {
     match: {
       params: { ns: namespace },
     },
   } = props;
   return namespace ? (
     <div>
-      <PageHeading title="Helm Releases" />
+      <PageHeading title={t('devconsole~Helm Releases')} />
       <HelmReleaseList namespace={namespace} />
     </div>
   ) : (
-    <CreateProjectListPage title="Helm Releases">
-      Select a project to view the list of Helm Releases
+    <CreateProjectListPage title={t('devconsole~Helm Releases')}>
+      {t('devconsole~Select a project to view the list of Helm Releases')}
     </CreateProjectListPage>
   );
 };
 
 const PageContentsWithStartGuide = withStartGuide(PageContents);
 
-export const HelmReleaseListPage: React.FC<HelmReleaseListPageProps> = (props) => (
-  <NamespacedPage variant={NamespacedPageVariants.light} hideApplications>
-    <Helmet>
-      <title>Helm Releases</title>
-    </Helmet>
-    <PageContentsWithStartGuide {...props} />
-  </NamespacedPage>
-);
+export const HelmReleaseListPage: React.FC<HelmReleaseListPageProps> = (props) => {
+  const { t } = useTranslation();
+  return (
+    <NamespacedPage variant={NamespacedPageVariants.light} hideApplications>
+      <Helmet>
+        <title>{t('devconsole~Helm Releases')}</title>
+      </Helmet>
+      <PageContentsWithStartGuide {...props} />
+    </NamespacedPage>
+  );
+};
 
 export default HelmReleaseListPage;

frontend/packages/dev-console/src/components/helm/HelmReleaseRollbackPage.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import Helmet from 'react-helmet';
 import { Formik } from 'formik';
 import { RouteComponentProps } from 'react-router';
+import { useTranslation } from 'react-i18next';
 import { PageBody } from '@console/shared';
 import { coFetchJSON } from '@console/internal/co-fetch';
 import { history, getQueryArgument } from '@console/internal/components/utils';
@@ -21,13 +22,14 @@ type HelmRollbackFormData = {
 };
 
 const HelmReleaseRollbackPage: React.FC<HelmReleaseRollbackPageProps> = ({ match }) => {
+  const { t } = useTranslation();
   const { releaseName, ns: namespace } = match.params;
   const actionOrigin = getQueryArgument('actionOrigin') as HelmActionOrigins;
   const [releaseHistory, setReleaseHistory] = React.useState<HelmRelease[]>(null);
 
   const config = React.useMemo(
-    () => getHelmActionConfig(HelmActionType.Rollback, releaseName, namespace, actionOrigin),
-    [actionOrigin, namespace, releaseName],
+    () => getHelmActionConfig(HelmActionType.Rollback, releaseName, namespace, t, actionOrigin),
+    [actionOrigin, namespace, releaseName, t],
   );
 
   React.useEffect(() => {

frontend/packages/dev-console/src/components/helm/details/HelmReleaseDetails.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 import { match as RMatch } from 'react-router';
+import { useTranslation } from 'react-i18next';
 import {
   navFactory,
   LoadingBox,
@@ -44,6 +45,7 @@ export const LoadedHelmReleaseDetails: React.FC<LoadedHelmReleaseDetailsProps> =
   secret,
   helmReleaseData,
 }) => {
+  const { t } = useTranslation();
   const namespace = match.params.ns;
   if (!helmReleaseData || !secret || (!secret.loaded && _.isEmpty(secret.loadError))) {
     return <LoadingBox />;
@@ -92,28 +94,28 @@ export const LoadedHelmReleaseDetails: React.FC<LoadedHelmReleaseDetailsProps> =
       customData={helmReleaseData}
       breadcrumbsFor={() => [
         {
-          name: `Helm Releases`,
+          name: t('devconsole~Helm Releases'),
           path: `/helm-releases/ns/${namespace}`,
         },
-        { name: `Helm Release Details`, path: `${match.url}` },
+        { name: t('devconsole~Helm Release Details'), path: `${match.url}` },
       ]}
       title={title}
       kind={SecretReference}
       pages={[
         navFactory.details(HelmReleaseOverview),
         {
           href: 'resources',
-          name: 'Resources',
+          name: t('devconsole~Resources'),
           component: HelmReleaseResources,
         },
         {
           href: 'history',
-          name: 'Revision History',
+          name: t('devconsole~Revision History'),
           component: HelmReleaseHistory,
         },
         {
           href: 'releasenotes',
-          name: 'Release Notes',
+          name: t('devconsole~Release Notes'),
           component: HelmReleaseNotes,
         },
       ]}

frontend/packages/dev-console/src/components/helm/details/__tests__/HelmReleaseDetails.spec.tsx

@@ -9,6 +9,14 @@ import HelmReleaseDetails, { LoadedHelmReleaseDetails } from '../HelmReleaseDeta
 let helmReleaseDetailsProps: React.ComponentProps<typeof HelmReleaseDetails>;
 let loadedHelmReleaseDetailsProps: React.ComponentProps<typeof LoadedHelmReleaseDetails>;
 
+jest.mock('react-i18next', () => {
+  const reactI18next = require.requireActual('react-i18next');
+  return {
+    ...reactI18next,
+    useTranslation: () => ({ t: (key) => key }),
+  };
+});
+
 describe('HelmReleaseDetails', () => {
   beforeEach(() => {
     helmReleaseDetailsProps = {

frontend/packages/dev-console/src/components/helm/details/history/HelmReleaseHistory.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { match as RMatch } from 'react-router';
+import { useTranslation } from 'react-i18next';
 import { SortByDirection } from '@patternfly/react-table';
 import { useDeepCompareMemoize } from '@console/shared';
 import { K8sResourceKind } from '@console/internal/module/k8s';
@@ -24,6 +25,7 @@ const HelmReleaseHistory: React.FC<HelmReleaseHistoryProps> = ({ match, obj }) =
   const [loadError, setLoadError] = React.useState<string>();
   const [revisions, setRevisions] = React.useState([]);
   const memoizedObj = useDeepCompareMemoize(obj);
+  const { t } = useTranslation();
 
   React.useEffect(() => {
     let destroyed = false;
@@ -47,7 +49,7 @@ const HelmReleaseHistory: React.FC<HelmReleaseHistoryProps> = ({ match, obj }) =
   }, [helmReleaseName, namespace, memoizedObj]);
 
   if (loadError) {
-    return <StatusBox loaded loadError={loadError} label="Helm Release history" />;
+    return <StatusBox loaded loadError={loadError} label={t('devconsole~Helm Release history')} />;
   }
 
   return (
@@ -57,7 +59,7 @@ const HelmReleaseHistory: React.FC<HelmReleaseHistoryProps> = ({ match, obj }) =
       sortBy="version"
       sortOrder={SortByDirection.desc}
       resourceRow={HelmReleaseHistoryRow}
-      resourceHeader={HelmReleaseHistoryHeader}
+      resourceHeader={() => HelmReleaseHistoryHeader(t)}
     />
   );
 };

frontend/packages/dev-console/src/components/helm/details/history/HelmReleaseHistoryHeader.tsx

@@ -1,3 +1,4 @@
+import { TFunction } from 'i18next';
 import { sortable } from '@patternfly/react-table';
 import { Kebab } from '@console/internal/components/utils';
 
@@ -12,46 +13,46 @@ export const tableColumnClasses = {
   kebab: Kebab.columnClass,
 };
 
-const HelmReleaseHistoryHeader = () => {
+const HelmReleaseHistoryHeader = (t: TFunction) => {
   return [
     {
-      title: 'Revision',
+      title: t('devconsole~Revision'),
       sortField: 'version',
       transforms: [sortable],
       props: { className: tableColumnClasses.revision },
     },
     {
-      title: 'Updated',
+      title: t('devconsole~Updated'),
       sortField: 'info.last_deployed',
       transforms: [sortable],
       props: { className: tableColumnClasses.updated },
     },
     {
-      title: 'Status',
+      title: t('devconsole~Status'),
       sortField: 'info.status',
       transforms: [sortable],
       props: { className: tableColumnClasses.status },
     },
     {
-      title: 'Chart Name',
+      title: t('devconsole~Chart Name'),
       sortField: 'chart.metadata.name',
       transforms: [sortable],
       props: { className: tableColumnClasses.chartName },
     },
     {
-      title: 'Chart Version',
+      title: t('devconsole~Chart Version'),
       sortField: 'chart.metadata.version',
       transforms: [sortable],
       props: { className: tableColumnClasses.chartVersion },
     },
     {
-      title: 'App Version',
+      title: t('devconsole~App Version'),
       sortField: 'chart.metadata.appVersion',
       transforms: [sortable],
       props: { className: tableColumnClasses.appVersion },
     },
     {
-      title: 'Description',
+      title: t('devconsole~Description'),
       props: { className: tableColumnClasses.description },
     },
     {