i18n support in devconsole Import components

openshift · Nov 10, 2020 · adae1d3 · adae1d3
1 parent bb51ca6
commit adae1d3
Show file tree

Hide file tree

Showing 66 changed files with 1,339 additions and 747 deletions.
diff --git a/frontend/packages/dev-console/locales/en/devconsole.json b/frontend/packages/dev-console/locales/en/devconsole.json
diff --git a/frontend/packages/dev-console/src/components/custom-resource-list/CustomResourceList.tsx b/frontend/packages/dev-console/src/components/custom-resource-list/CustomResourceList.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
+import { useTranslation } from 'react-i18next';
 import { EmptyState, EmptyStateVariant } from '@patternfly/react-core';
 import { Table } from '@console/internal/components/factory';
 import { getQueryArgument, LoadingBox } from '@console/internal/components/utils';
@@ -20,6 +21,7 @@ const CustomResourceList: React.FC<CustomResourceListProps> = ({
   sortBy,
   sortOrder,
 }) => {
+  const { t } = useTranslation();
   const applyFilters = React.useCallback(() => {
     const queryArgument = queryArg ? getQueryArgument(queryArg) : undefined;
     const activeFilters = queryArgument?.split(',');
@@ -47,7 +49,7 @@ const CustomResourceList: React.FC<CustomResourceListProps> = ({
       <EmptyMsg />
     ) : (
       <EmptyState variant={EmptyStateVariant.full}>
-        <p>No resources found</p>
+        <p>{t('devconsole~No resources found')}</p>
       </EmptyState>
     );
   }

diff --git a/...ges/dev-console/src/components/custom-resource-list/__tests__/CustomResourceList.spec.tsx b/...ges/dev-console/src/components/custom-resource-list/__tests__/CustomResourceList.spec.tsx
@@ -11,6 +11,14 @@ import { CustomResourceListProps } from '../custom-resource-list-types';
 
 let customResourceListProps: CustomResourceListProps;
 
+jest.mock('react-i18next', () => {
+  const reactI18next = require.requireActual('react-i18next');
+  return {
+    ...reactI18next,
+    useTranslation: () => ({ t: (key) => key }),
+  };
+});
+
 const mockColumnClasses = {
   name: 'col-lg-4',
   version: 'col-lg-4',

diff --git a/frontend/packages/dev-console/src/components/dropdown/ApplicationSelector.tsx b/frontend/packages/dev-console/src/components/dropdown/ApplicationSelector.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { connect, Dispatch } from 'react-redux';
 import {
   ALL_NAMESPACES_KEY,
@@ -28,7 +29,8 @@ interface DispatchProps {
 type Props = ApplicationSelectorProps & StateProps & DispatchProps;
 
 const ApplicationSelector: React.FC<Props> = ({ namespace, application, onChange, disabled }) => {
-  const allApplicationsTitle = 'all applications';
+  const { t } = useTranslation();
+  const allApplicationsTitle = t('devconsole~all applications');
   const noApplicationsTitle = UNASSIGNED_LABEL;
   const dropdownTitle: string =
     application === ALL_APPLICATIONS_KEY
@@ -55,7 +57,7 @@ const ApplicationSelector: React.FC<Props> = ({ namespace, application, onChange
       buttonClassName="pf-m-plain"
       namespace={namespace}
       title={title && <span className="btn-link__title">{title}</span>}
-      titlePrefix="Application"
+      titlePrefix={t('devconsole~Application')}
       allSelectorItem={{
         allSelectorKey: ALL_APPLICATIONS_KEY,
         allSelectorTitle: allApplicationsTitle,

diff --git a/frontend/packages/dev-console/src/components/dropdown/SourceSecretDropdown.tsx b/frontend/packages/dev-console/src/components/dropdown/SourceSecretDropdown.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { SecretModel } from '@console/internal/models';
 import { Firehose } from '@console/internal/components/utils';
 import { ResourceDropdown } from '@console/shared';
@@ -17,6 +18,7 @@ interface SourceSecretDropdownProps {
 }
 
 const SourceSecretDropdown: React.FC<SourceSecretDropdownProps> = (props) => {
+  const { t } = useTranslation();
   const filterData = (item) => {
     return item.type === 'kubernetes.io/basic-auth' || item.type === 'kubernetes.io/ssh-auth';
   };
@@ -32,7 +34,7 @@ const SourceSecretDropdown: React.FC<SourceSecretDropdownProps> = (props) => {
     <Firehose resources={resources}>
       <ResourceDropdown
         {...props}
-        placeholder="Select Secret Name"
+        placeholder={t('devconsole~Select Secret Name')}
         resourceFilter={filterData}
         dataSelector={['metadata', 'name']}
       />

diff --git a/frontend/packages/dev-console/src/components/edit-application/EditApplication.tsx b/frontend/packages/dev-console/src/components/edit-application/EditApplication.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Formik, FormikProps } from 'formik';
 import * as _ from 'lodash';
 import { connect } from 'react-redux';
+import { useTranslation } from 'react-i18next';
 import { getActivePerspective } from '@console/internal/reducers/ui';
 import { RootState } from '@console/internal/redux';
 import { history } from '@console/internal/components/utils';
@@ -30,6 +31,7 @@ const EditApplication: React.FC<EditApplicationProps & StateProps> = ({
   appName,
   resources: appResources,
 }) => {
+  const { t } = useTranslation();
   const perspectiveExtensions = useExtensions<Perspective>(isPerspective);
   const initialValues = getInitialValues(appResources, appName, namespace);
   const pageHeading = getPageHeading(_.get(initialValues, 'build.strategy', ''));
@@ -115,7 +117,7 @@ const EditApplication: React.FC<EditApplicationProps & StateProps> = ({
       onSubmit={handleSubmit}
       onReset={history.goBack}
       validationSchema={
-        _.get(initialValues, 'build.strategy') ? gitValidationSchema : deployValidationSchema
+        _.get(initialValues, 'build.strategy') ? gitValidationSchema(t) : deployValidationSchema(t)
       }
     >
       {renderForm}

diff --git a/frontend/packages/dev-console/src/components/edit-application/EditApplicationForm.tsx b/frontend/packages/dev-console/src/components/edit-application/EditApplicationForm.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
+import { useTranslation } from 'react-i18next';
 import { FormikProps, FormikValues } from 'formik';
 import { Form } from '@patternfly/react-core';
 import { PageHeading } from '@console/internal/components/utils';
@@ -32,34 +33,37 @@ const EditApplicationForm: React.FC<FormikProps<FormikValues> & EditApplicationF
   status,
   isSubmitting,
   appResources,
-}) => (
-  <>
-    <PageHeading title={createFlowType} style={{ padding: '0px' }} />
-    <Form onSubmit={handleSubmit}>
-      {createFlowType !== CreateApplicationFlow.Container && (
-        <GitSection builderImages={builderImages} />
-      )}
-      {createFlowType === CreateApplicationFlow.Git && (
-        <BuilderSection image={values.image} builderImages={builderImages} />
-      )}
-      {createFlowType === CreateApplicationFlow.Dockerfile && (
-        <DockerSection buildStrategy={values.build.strategy} />
-      )}
-      {createFlowType === CreateApplicationFlow.Container && <ImageSearchSection />}
-      {createFlowType === CreateApplicationFlow.Container && <IconSection />}
-      <AppSection project={values.project} />
-      <AdvancedSection values={values} appResources={appResources} />
-      <FormFooter
-        handleReset={handleReset}
-        errorMessage={status && status.submitError}
-        isSubmitting={isSubmitting}
-        submitLabel="Save"
-        disableSubmit={!dirty || !_.isEmpty(errors) || isSubmitting}
-        resetLabel="Cancel"
-        sticky
-      />
-    </Form>
-  </>
-);
+}) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <PageHeading title={createFlowType} style={{ padding: '0px' }} />
+      <Form onSubmit={handleSubmit}>
+        {createFlowType !== CreateApplicationFlow.Container && (
+          <GitSection builderImages={builderImages} />
+        )}
+        {createFlowType === CreateApplicationFlow.Git && (
+          <BuilderSection image={values.image} builderImages={builderImages} />
+        )}
+        {createFlowType === CreateApplicationFlow.Dockerfile && (
+          <DockerSection buildStrategy={values.build.strategy} />
+        )}
+        {createFlowType === CreateApplicationFlow.Container && <ImageSearchSection />}
+        {createFlowType === CreateApplicationFlow.Container && <IconSection />}
+        <AppSection project={values.project} />
+        <AdvancedSection values={values} appResources={appResources} />
+        <FormFooter
+          handleReset={handleReset}
+          errorMessage={status && status.submitError}
+          isSubmitting={isSubmitting}
+          submitLabel={t('devconsole~Save')}
+          disableSubmit={!dirty || !_.isEmpty(errors) || isSubmitting}
+          resetLabel={t('devconsole~Cancel')}
+          sticky
+        />
+      </Form>
+    </>
+  );
+};
 
 export default EditApplicationForm;
diff --git a/frontend/packages/dev-console/src/components/edit-application/EditApplicationPage.tsx b/frontend/packages/dev-console/src/components/edit-application/EditApplicationPage.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Firehose, FirehoseResource, LoadingBox } from '@console/internal/components/utils';
 import { ImageStreamModel } from '@console/internal/models';
 import { RouteComponentProps } from 'react-router-dom';
@@ -21,6 +22,7 @@ const EditApplicationComponentLoader: React.FunctionComponent<EditApplicationPro
 export type ImportPageProps = RouteComponentProps<{ ns?: string }>;
 
 const EditApplicationPage: React.FunctionComponent<ImportPageProps> = ({ match, location }) => {
+  const { t } = useTranslation();
   const namespace = match.params.ns;
   const queryParams = new URLSearchParams(location.search);
   const editAppResourceKind = queryParams.get('kind');
@@ -87,7 +89,7 @@ const EditApplicationPage: React.FunctionComponent<ImportPageProps> = ({ match,
   return (
     <NamespacedPage disabled variant={NamespacedPageVariants.light}>
       <Helmet>
-        <title>Edit</title>
+        <title>{t('devconsole~Edit')}</title>
       </Helmet>
       <div className="co-m-pane__body">
         <Firehose resources={appResources}>

diff --git a/frontend/packages/dev-console/src/components/gitops/details/GitOpsDetailsController.tsx b/frontend/packages/dev-console/src/components/gitops/details/GitOpsDetailsController.tsx
@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { TFunction } from 'i18next';
 import * as _ from 'lodash';
 import GitOpsDetails from './GitOpsDetails';
 import { routeDecoratorIcon } from '../../import/render-utils';
@@ -17,7 +19,7 @@ const getWorkLoad = (resources: GitOpsResource[]) => {
   return _.find(resources, (res) => _.includes(WORKLOAD_KINDS, res.kind));
 };
 
-const getTransformedServices = (originalEnv: GitOpsEnvironment) => {
+const getTransformedServices = (originalEnv: GitOpsEnvironment, t: TFunction) => {
   return _.sortBy(
     _.map(originalEnv?.services, (service) => {
       const workload = getWorkLoad(service?.resources);
@@ -26,7 +28,7 @@ const getTransformedServices = (originalEnv: GitOpsEnvironment) => {
         ...service,
         source: {
           ...service?.source,
-          icon: routeDecoratorIcon(service?.source?.url, 12),
+          icon: routeDecoratorIcon(service?.source?.url, 12, t),
         },
         workloadKind: workload?.kind,
         image,
@@ -38,12 +40,12 @@ const getTransformedServices = (originalEnv: GitOpsEnvironment) => {
   );
 };
 
-const getTransformedEnvsData = (originalEnvsData: GitOpsEnvironment[]) => {
+const getTransformedEnvsData = (originalEnvsData: GitOpsEnvironment[], t: TFunction) => {
   return _.map(originalEnvsData, (env) => {
     if (env) {
       const resModels = _.flatten(_.map(env?.services, (service) => service.resources));
       const timestamp = <TimestampWrapper resModels={resModels} />;
-      const services = getTransformedServices(env);
+      const services = getTransformedServices(env, t);
       return {
         ...env,
         services,
@@ -58,7 +60,8 @@ const GitOpsDetailsController: React.FC<GitOpsDetailsControllerProps> = ({
   envsData,
   emptyStateMsg,
 }) => {
-  const envs = React.useMemo(() => getTransformedEnvsData(envsData), [envsData]);
+  const { t } = useTranslation();
+  const envs = React.useMemo(() => getTransformedEnvsData(envsData, t), [envsData, t]);
 
   return emptyStateMsg ? (
     <GitOpsEmptyState emptyStateMsg={emptyStateMsg} />

diff --git a/frontend/packages/dev-console/src/components/gitops/details/GitOpsDetailsPageHeading.tsx b/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,6 +18,7 @@ const GitOpsDetailsPageHeading: React.FC<GitOpsDetailsPageHeadingProps> = ({
   manifestURL,
   badge,
 }) => {
+  const { t } = useTranslation();
   const breadcrumbs = [
     {
       name: 'Application Stages',
@@ -44,7 +46,7 @@ const GitOpsDetailsPageHeading: React.FC<GitOpsDetailsPageHeadingProps> = ({
           <Label
             style={{ fontSize: '12px' }}
             color="blue"
-            icon={routeDecoratorIcon(manifestURL, 12)}
+            icon={routeDecoratorIcon(manifestURL, 12, t)}
           >
             <a
               style={{ color: 'var(--pf-c-label__content--Color)' }}

diff --git a/frontend/packages/dev-console/src/components/health-checks/AddHealthChecksForm.tsx b/frontend/packages/dev-console/src/components/health-checks/AddHealthChecksForm.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as _ from 'lodash';
 import * as yup from 'yup';
 import { Formik } from 'formik';
+import { useTranslation } from 'react-i18next';
 import { FirehoseResult, LoadingBox, StatusBox, history } from '@console/internal/components/utils';
 import { K8sResourceKind, k8sUpdate, modelFor, referenceFor } from '@console/internal/module/k8s';
 import { getResourcesType } from '../edit-application/edit-application-utils';
@@ -19,6 +20,7 @@ const AddHealthChecksForm: React.FC<AddHealthChecksFormProps> = ({
   resource,
   currentContainer,
 }) => {
+  const { t } = useTranslation();
   if (!resource.loaded && _.isEmpty(resource.loadError)) {
     return <LoadingBox />;
   }
@@ -64,7 +66,7 @@ const AddHealthChecksForm: React.FC<AddHealthChecksFormProps> = ({
     <Formik
       initialValues={initialValues}
       validationSchema={yup.object().shape({
-        healthChecks: healthChecksProbesValidationSchema,
+        healthChecks: healthChecksProbesValidationSchema(t),
       })}
       onSubmit={handleSubmit}
       onReset={history.goBack}