i18n support in devconsole Gitops and Guided tour components

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

@@ -1,8 +1,35 @@
 {
   "Select application": "Select application",
-  "Application": "Application",
-  "Application Name": "Application Name",
+  " by ": " by ",
+  "Commit details not available": "Commit details not available",
+  "Cluster URL not available": "Cluster URL not available",
+  "Application Stages": "Application Stages",
+  "Application Details": "Application Details",
+  "Manifest File Repo": "Manifest File Repo",
+  "Image not available": "Image not available",
+  "Service source URL not available": "Service source URL not available",
+  "Pod Info Not Available": "Pod Info Not Available",
+  "Info not available": "Info not available",
+  "Environment details were not found. Try reloading the page or contacting an administrator.": "Environment details were not found. Try reloading the page or contacting an administrator.",
+  "{{appName}} · Details": "{{appName}} · Details",
+  "{{appGroupsSize, number}} items": "{{appGroupsSize, number}} items",
+  "{{enviromentSize, number}} Environments": "{{enviromentSize, number}} Environments",
+  "Get started with a tour of some of the key areas in OpenShift": "Get started with a tour of some of the key areas in OpenShift",
+  "Developer perspective that can help you complete workflows and be more productive.": "Developer perspective that can help you complete workflows and be more productive.",
+  "Switch between the Developer and Administrator perspectives.": "Switch between the Developer and Administrator perspectives.",
+  "Use the Administrator perspective to manage workload storage, networking, cluster settings, and more. This may require additional user access.": "Use the Administrator perspective to manage workload storage, networking, cluster settings, and more. This may require additional user access.",
+  "Use the Developer perspective to build applications and associated components and services, define how they work together, and monitor their health over time.": "Use the Developer perspective to build applications and associated components and services, define how they work together, and monitor their health over time.",
+  "Search for resources in your project by simply starting to type or scrolling through a list of existing resources.": "Search for resources in your project by simply starting to type or scrolling through a list of existing resources.",
+  "Add frequently accessed resources to your side navigation for quick access. Look for the": "Add frequently accessed resources to your side navigation for quick access. Look for the",
+  "Add to navigation": "Add to navigation",
+  "link next to your search result.": "link next to your search result.",
+  "Stay up-to-date with everything OpenShift on our": "Stay up-to-date with everything OpenShift on our",
+  "blog": "blog",
+  "or continue to learn more in our": "or continue to learn more in our",
+  "documentation": "documentation",
   "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/gitops/GitOpsDetailsPage.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Helmet from 'react-helmet';
+import { useTranslation } from 'react-i18next';
 import { RouteComponentProps } from 'react-router-dom';
 import * as _ from 'lodash';
 import { LoadingBox } from '@console/internal/components/utils';
@@ -18,6 +19,7 @@ import GitOpsDetailsController from './details/GitOpsDetailsController';
 type GitOpsDetailsPageProps = RouteComponentProps<{ appName?: string }>;
 
 const GitOpsDetailsPage: React.FC<GitOpsDetailsPageProps> = ({ match, location }) => {
+  const { t } = useTranslation();
   const [envs, setEnvs] = React.useState<string[]>(null);
   const [envsData, setEnvsData] = React.useState<GitOpsEnvironment[]>(null);
   const [emptyStateMsg, setEmptyStateMsg] = React.useState(null);
@@ -42,8 +44,9 @@ const GitOpsDetailsPage: React.FC<GitOpsDetailsPageProps> = ({ match, location }
       if (ignore) return;
       const app = _.find(appGroups, (appObj) => appName === appObj?.name);
       if (!app?.environments) {
-        emptyMsg =
-          'Environment details were not found. Try reloading the page or contacting an administrator.';
+        emptyMsg = t(
+          'devconsole~Environment details were not found. Try reloading the page or contacting an administrator.',
+        );
       }
       setEmptyStateMsg(emptyMsg);
       setEnvs(app?.environments);
@@ -54,7 +57,7 @@ const GitOpsDetailsPage: React.FC<GitOpsDetailsPageProps> = ({ match, location }
     return () => {
       ignore = true;
     };
-  }, [appName, manifestURL, pipelinesBaseURI]);
+  }, [appName, manifestURL, pipelinesBaseURI, t]);
 
   React.useEffect(() => {
     const getEnvsData = async () => {
@@ -75,7 +78,7 @@ const GitOpsDetailsPage: React.FC<GitOpsDetailsPageProps> = ({ match, location }
   return (
     <>
       <Helmet>
-        <title>{`${appName} · Details`}</title>
+        <title>{t('devconsole~{{appName}} · Details', { appName })}</title>
       </Helmet>
       <GitOpsDetailsPageHeading
         url={match.url}

frontend/packages/dev-console/src/components/gitops/GitOpsListPage.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Helmet from 'react-helmet';
+import { useTranslation } from 'react-i18next';
 import { PageHeading, LoadingBox } from '@console/internal/components/utils';
 import { ProjectModel } from '@console/internal/models';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
@@ -17,6 +18,7 @@ const GitOpsListPage: React.FC = () => {
   const [namespaces, nsLoaded, nsError] = useK8sWatchResource<K8sResourceKind[]>(projectRes);
   const [secretNS, secretName] = useDefaultSecret();
   const baseURL = getPipelinesBaseURI(secretNS, secretName);
+  const { t } = useTranslation();
 
   React.useEffect(() => {
     let ignore = false;
@@ -41,9 +43,9 @@ const GitOpsListPage: React.FC = () => {
   return (
     <>
       <Helmet>
-        <title>Application Stages</title>
+        <title>{t('devconsole~Application Stages')}</title>
       </Helmet>
-      <PageHeading title="Application Stages" badge={<DevPreviewBadge />} />
+      <PageHeading title={t('devconsole~Application Stages')} badge={<DevPreviewBadge />} />
       {!appGroups && !emptyStateMsg ? (
         <LoadingBox />
       ) : (

frontend/packages/dev-console/src/components/gitops/details/CommitDetails.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
+import { useTranslation } from 'react-i18next';
 // FIXME upgrading redux types is causing many errors at this time
 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore
@@ -17,6 +18,7 @@ interface CommitDetailsProps {
 const CommitDetails: React.FC<CommitDetailsProps> = ({ imageName }) => {
   const [commitData, setCommitData] = React.useState<CommitData>(null);
   const namespace = useSelector(getActiveNamespace);
+  const { t } = useTranslation();
   const importImage = imageName && {
     kind: 'ImageStreamImport',
     apiVersion: 'image.openshift.io/v1',
@@ -80,11 +82,11 @@ const CommitDetails: React.FC<CommitDetailsProps> = ({ imageName }) => {
         <>
           <Timestamp timestamp={commitData.timestamp} />
           {commitData.id}
-          {' by '}
+          {t('devconsole~ by ')}
           {commitData.author}
         </>
       ) : (
-        <span>Commit details not available</span>
+        <span>{t('devconsole~Commit details not available')}</span>
       )}
     </>
   );

frontend/packages/dev-console/src/components/gitops/details/GitOpsDetails.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
+import { useTranslation } from 'react-i18next';
 import { Stack, StackItem, Card, CardTitle, SplitItem, Split, Label } from '@patternfly/react-core';
 import { ExternalLink, ResourceIcon } from '@console/internal/components/utils';
 import GitOpsServiceDetailsSection from './GitOpsServiceDetailsSection';
@@ -11,6 +12,7 @@ interface GitOpsDetailsProps {
 }
 
 const GitOpsDetails: React.FC<GitOpsDetailsProps> = ({ envs }) => {
+  const { t } = useTranslation();
   return (
     <div className="odc-gitops-details">
       {_.map(
@@ -51,7 +53,7 @@ const GitOpsDetails: React.FC<GitOpsDetailsProps> = ({ envs }) => {
                           />
                         ) : (
                           <div className="odc-gitops-details__env-section__url-empty-state">
-                            Cluster URL not available
+                            {t('devconsole~Cluster URL not available')}
                           </div>
                         )}
                       </StackItem>

frontend/packages/dev-console/src/components/gitops/details/GitOpsDetailsPageHeading.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { BreadCrumbs, ResourceIcon } from '@console/internal/components/utils';
 import { Split, SplitItem, Label } from '@patternfly/react-core';
 import { routeDecoratorIcon } from '../../import/render-utils';
@@ -17,13 +18,14 @@ const GitOpsDetailsPageHeading: React.FC<GitOpsDetailsPageHeadingProps> = ({
   manifestURL,
   badge,
 }) => {
+  const { t } = useTranslation();
   const breadcrumbs = [
     {
-      name: 'Application Stages',
+      name: t('devconsole~Application Stages'),
       path: '/applicationstages',
     },
     {
-      name: 'Application Details',
+      name: t('devconsole~Application Details'),
       path: `${url}`,
     },
   ];
@@ -39,7 +41,7 @@ const GitOpsDetailsPageHeading: React.FC<GitOpsDetailsPageHeadingProps> = ({
         {badge && <span className="co-m-pane__heading-badge">{badge}</span>}
       </h1>
       <Split className="odc-gitops-details-page-heading__repo" hasGutter>
-        <SplitItem>Manifest File Repo:</SplitItem>
+        <SplitItem>{t('devconsole~Manifest File Repo')}:</SplitItem>
         <SplitItem isFilled>
           <Label
             style={{ fontSize: '12px' }}

frontend/packages/dev-console/src/components/gitops/details/GitOpsServiceDetailsSection.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
+import { useTranslation } from 'react-i18next';
 import {
   StackItem,
   Card,
@@ -18,6 +19,7 @@ interface GitOpsServiceDetailsSectionProps {
 }
 
 const GitOpsServiceDetailsSection: React.FC<GitOpsServiceDetailsSectionProps> = ({ services }) => {
+  const { t } = useTranslation();
   return (
     <>
       {_.map(
@@ -35,7 +37,7 @@ const GitOpsServiceDetailsSection: React.FC<GitOpsServiceDetailsSectionProps> =
                 </CardTitle>
                 <CardBody>
                   <Label className="co-nowrap" style={{ fontSize: '12px' }} color="cyan">
-                    {service.image || <div>Image not available</div>}
+                    {service.image || <div>{t('devconsole~Image not available')}</div>}
                   </Label>
                   <Split className="odc-gitops-service__details">
                     <SplitItem>
@@ -58,7 +60,7 @@ const GitOpsServiceDetailsSection: React.FC<GitOpsServiceDetailsSectionProps> =
                     />
                   ) : (
                     <div className="odc-gitops-service__details">
-                      Service source URL not available
+                      {t('devconsole~Service source URL not available')}
                     </div>
                   )}
                 </CardBody>

frontend/packages/dev-console/src/components/gitops/details/PodRingWrapper.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
+import { useTranslation } from 'react-i18next';
 import { PodModel } from '@console/internal/models';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 import { K8sResourceKind, modelFor } from '@console/internal/module/k8s';
@@ -12,6 +13,7 @@ interface PodRingWrapperProps {
 }
 
 const PodRingWrapper: React.FC<PodRingWrapperProps> = ({ workload }) => {
+  const { t } = useTranslation();
   const workloadResource = React.useMemo(
     () => ({
       kind: workload?.kind,
@@ -51,7 +53,7 @@ const PodRingWrapper: React.FC<PodRingWrapperProps> = ({ workload }) => {
           enableScaling={false}
         />
       ) : (
-        <div style={{ border: '1px solid' }}>Pod Info Not Available</div>
+        <div style={{ border: '1px solid' }}>{t('devconsole~Pod Info Not Available')}</div>
       )}
     </>
   );

frontend/packages/dev-console/src/components/gitops/details/TimestampWrapper.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
+import { useTranslation } from 'react-i18next';
 import { useK8sWatchResources } from '@console/internal/components/utils/k8s-watch-hook';
 import { Timestamp } from '@console/internal/components/utils';
 import {
@@ -16,6 +17,7 @@ interface TimestampWrapperProps {
 
 const TimestampWrapper: React.FC<TimestampWrapperProps> = ({ resModels }) => {
   const [lastUpdatedTimestamp, setLastUpdatedTimestamp] = React.useState<number>(null);
+  const { t } = useTranslation();
   const memoResources = React.useMemo(() => {
     let resources = {};
     _.forEach(resModels, (res) => {
@@ -55,7 +57,7 @@ const TimestampWrapper: React.FC<TimestampWrapperProps> = ({ resModels }) => {
       {lastUpdatedTimestamp ? (
         <Timestamp timestamp={lastUpdatedTimestamp} />
       ) : (
-        <div>Info not available</div>
+        <div>{t('devconsole~Info not available')}</div>
       )}
     </>
   );

frontend/packages/dev-console/src/components/gitops/list/GitOpsList.tsx

@@ -1,36 +1,44 @@
 import * as React from 'react';
 import * as _ from 'lodash';
+import { useTranslation } from 'react-i18next';
 import GitOpsListItem from './GitOpsListItem';
 import { Stack, StackItem, Split, SplitItem } from '@patternfly/react-core';
 import { GitOpsAppGroupData } from '../utils/gitops-types';
-import './GitOpsList.scss';
 import GitOpsEmptyState from '../GitOpsEmptyState';
+import './GitOpsList.scss';
 
 interface GitOpsListProps {
   appGroups: GitOpsAppGroupData[];
   emptyStateMsg: string;
 }
 
-const GitOpsList: React.FC<GitOpsListProps> = ({ appGroups, emptyStateMsg }) => (
-  <div className="odc-gitops-list">
-    {!emptyStateMsg ? (
-      <Stack hasGutter>
-        <StackItem>
-          <Split>
-            <SplitItem isFilled />
-            <SplitItem>{`${_.size(appGroups)} items`}</SplitItem>
-          </Split>
-        </StackItem>
-        {_.map(appGroups, (appGroup) => (
-          <StackItem key={`${appGroup.name}-${appGroup.repo_url}`}>
-            <GitOpsListItem appGroup={appGroup} />
+const GitOpsList: React.FC<GitOpsListProps> = ({ appGroups, emptyStateMsg }) => {
+  const { t } = useTranslation();
+  return (
+    <div className="odc-gitops-list">
+      {!emptyStateMsg ? (
+        <Stack hasGutter>
+          <StackItem>
+            <Split>
+              <SplitItem isFilled />
+              <SplitItem>
+                {t('devconsole~{{appGroupsSize, number}} items', {
+                  appGroupsSize: _.size(appGroups),
+                })}
+              </SplitItem>
+            </Split>
           </StackItem>
-        ))}
-      </Stack>
-    ) : (
-      <GitOpsEmptyState emptyStateMsg={emptyStateMsg} />
-    )}
-  </div>
-);
+          {_.map(appGroups, (appGroup) => (
+            <StackItem key={`${appGroup.name}-${appGroup.repo_url}`}>
+              <GitOpsListItem appGroup={appGroup} />
+            </StackItem>
+          ))}
+        </Stack>
+      ) : (
+        <GitOpsEmptyState emptyStateMsg={emptyStateMsg} />
+      )}
+    </div>
+  );
+};
 
 export default GitOpsList;

frontend/packages/dev-console/src/components/gitops/list/GitOpsListItem.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
+import { useTranslation } from 'react-i18next';
 import { Grid, GridItem, Card, CardBody } from '@patternfly/react-core';
 import { history, ResourceLink } from '@console/internal/components/utils';
 import { GitOpsAppGroupData } from '../utils/gitops-types';
@@ -10,6 +11,7 @@ interface GitOpsListItemProps {
 }
 
 const GitOpsListItem: React.FC<GitOpsListItemProps> = ({ appGroup }) => {
+  const { t } = useTranslation();
   const handleCardClick = () => {
     history.push(`/applicationstages/${appGroup.name}?url=${appGroup.repo_url}`);
   };
@@ -22,7 +24,9 @@ const GitOpsListItem: React.FC<GitOpsListItemProps> = ({ appGroup }) => {
             <ResourceLink kind="application" name={appGroup.name} linkTo={false} />
           </GridItem>
           <GridItem lg={6} md={6} sm={6}>
-            {`${_.size(appGroup.environments)} Environments`}
+            {t('devconsole~{{enviromentSize, number}} Environments', {
+              enviromentSize: _.size(appGroup.environments),
+            })}
           </GridItem>
         </Grid>
       </CardBody>