Add i18n to topology package

frontend/packages/console-app/locales/en/console-app.json

@@ -1,4 +1,6 @@
 {
+  "Add Health Checks": "Add Health Checks",
+  "Edit Health Checks": "Edit Health Checks",
   "Clone": "Clone",
   "Name": "Name",
   "Clone PVC": "Clone PVC",

frontend/packages/console-app/src/actions/modify-health-checks.ts

@@ -23,7 +23,8 @@ const healthChecksUrl = (model: K8sKind, obj: K8sResourceKind): string => {
 
 export const AddHealthChecks = (model: K8sKind, obj: K8sResourceKind): KebabOption => {
   return {
-    label: 'Add Health Checks',
+    // t('console-app~Add Health Checks')
+    labelKey: 'console-app~Add Health Checks',
     hidden: healthChecksAdded(obj),
     href: healthChecksUrl(model, obj),
     accessReview: {
@@ -38,7 +39,8 @@ export const AddHealthChecks = (model: K8sKind, obj: K8sResourceKind): KebabOpti
 
 export const EditHealthChecks = (model: K8sKind, obj: K8sResourceKind): KebabOption => {
   return {
-    label: 'Edit Health Checks',
+    // t('console-app~Edit Health Checks')
+    labelKey: 'Edit Health Checks',
     hidden: !healthChecksAdded(obj),
     href: healthChecksUrl(model, obj),
     accessReview: {

frontend/packages/console-shared/locales/en/console-shared.json

@@ -55,6 +55,9 @@
   "Are you sure you want to remove the {{hpaLabel}}": "Are you sure you want to remove the {{hpaLabel}}",
   "from": "from",
   "The resources that are attached to the {{hpaLabel}} will be deleted.": "The resources that are attached to the {{hpaLabel}} will be deleted.",
+  "Delete": "Delete",
+  "This action cannot be undone. All associated Deployments, Routes, Builds, Pipelines, Storage/PVC's, secrets, and configmaps will be deleted.": "This action cannot be undone. All associated Deployments, Routes, Builds, Pipelines, Storage/PVC's, secrets, and configmaps will be deleted.",
+  "Confirm deletion by typing <1>{{resourceName}}</1> below:": "Confirm deletion by typing <1>{{resourceName}}</1> below:",
   "Increase the pod count": "Increase the pod count",
   "Decrease the pod count": "Decrease the pod count",
   "Close": "Close",

frontend/packages/console-shared/src/components/modals/DeleteResourceModal.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation, Trans } from 'react-i18next';
 import { TextInputTypes } from '@patternfly/react-core';
 import { PromiseComponent, history } from '@console/internal/components/utils';
 import {
@@ -15,7 +16,7 @@ import { InputField } from '../formik-fields';
 type DeleteResourceModalProps = {
   resourceName: string;
   resourceType: string;
-  actionLabel?: string;
+  actionLabelKey?: string;
   redirect?: string;
   onSubmit: (values: FormikValues) => Promise<K8sResourceKind[]>;
   cancel?: () => void;
@@ -31,31 +32,37 @@ const DeleteResourceForm: React.FC<FormikProps<FormikValues> & DeleteResourceMod
   handleSubmit,
   resourceName,
   resourceType,
-  actionLabel = 'Delete',
+  // t('console-shared~Delete')
+  actionLabelKey = 'console-shared~Delete',
   isSubmitting,
   cancel,
   values,
   status,
 }) => {
+  const { t } = useTranslation();
   const isValid = values.resourceName === resourceName;
+  const submitLabel = t(actionLabelKey);
   return (
     <form onSubmit={handleSubmit} className="modal-content modal-content--no-inner-scroll">
       <ModalTitle>
-        <YellowExclamationTriangleIcon className="co-icon-space-r" /> {actionLabel} {resourceType}?
+        <YellowExclamationTriangleIcon className="co-icon-space-r" /> {submitLabel} {resourceType}?
       </ModalTitle>
       <ModalBody>
         <p>
-          This action cannot be undone. All associated Deployments, Routes, Builds, Pipelines,
-          Storage/PVC&#39;s, secrets, and configmaps will be deleted.
+          {t(
+            `console-shared~This action cannot be undone. All associated Deployments, Routes, Builds, Pipelines, Storage/PVC's, secrets, and configmaps will be deleted.`,
+          )}
         </p>
         <p>
-          Confirm deletion by typing <strong className="co-break-word">{resourceName}</strong>{' '}
-          below:
+          <Trans ns="console-shared">
+            Confirm deletion by typing <strong className="co-break-word">{{ resourceName }}</strong>{' '}
+            below:
+          </Trans>
         </p>
         <InputField type={TextInputTypes.text} name="resourceName" />
       </ModalBody>
       <ModalSubmitFooter
-        submitText={actionLabel}
+        submitText={submitLabel}
         submitDisabled={(status && !!status.submitError) || !isValid}
         cancel={cancel}
         inProgress={isSubmitting}

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

@@ -1,4 +1,13 @@
 {
+  "From Git": "From Git",
+  "Container Image": "Container Image",
+  "From Catalog": "From Catalog",
+  "From Dockerfile": "From Dockerfile",
+  "Database": "Database",
+  "Samples": "Samples",
+  "Operator Backed": "Operator Backed",
+  "Helm Charts": "Helm Charts",
+  "Uninstall": "Uninstall",
   "Add": "Add",
   "Select a project to start adding to it": "Select a project to start adding to it",
   "Builds": "Builds",
@@ -10,7 +19,6 @@
   "Templates": "Templates",
   "Browse for templates that can deploy services, create builds, or create any resources the template enables. Cluster administrators can customize the content made available in the catalog.": "Browse for templates that can deploy services, create builds, or create any resources the template enables. Cluster administrators can customize the content made available in the catalog.",
   "**Templates** are sets of objects for creating services, build configurations, and anything you have permission to create within a project.": "**Templates** are sets of objects for creating services, build configurations, and anything you have permission to create within a project.",
-  "Helm Charts": "Helm Charts",
   "Browse for charts that help manage complex installations and upgrades. Cluster administrators can customize the content made available in the catalog.": "Browse for charts that help manage complex installations and upgrades. Cluster administrators can customize the content made available in the catalog.",
   "**Helm charts** are packages for deploying an application or components of a larger application.": "**Helm charts** are packages for deploying an application or components of a larger application.",
   "No results found": "No results found",
@@ -309,6 +317,7 @@
   "Tag": "Tag",
   "No Tag": "No Tag",
   "Select Tag": "Select Tag",
+  "no application group": "no application group",
   "Import from Git": "Import from Git",
   "Import from Dockerfile": "Import from Dockerfile",
   "Create Source-to-Image Application": "Create Source-to-Image Application",
@@ -339,7 +348,6 @@
   "The PEM format CA certificate chain. Upload file by dragging & dropping, selecting it, or pasting from the clipboard.": "The PEM format CA certificate chain. Upload file by dragging & dropping, selecting it, or pasting from the clipboard.",
   "Destination CA Certificate": "Destination CA Certificate",
   "The PEM format CA certificate chain to validate the endpoint certificate for re-encrypt termination. Upload file by dragging & dropping, selecting it, or pasting from the clipboard.": "The PEM format CA certificate chain to validate the endpoint certificate for re-encrypt termination. Upload file by dragging & dropping, selecting it, or pasting from the clipboard.",
-  "Samples": "Samples",
   "Get Started using applications by choosing a code sample.": "Get Started using applications by choosing a code sample.",
   "Select a project to view the list of Samples.": "Select a project to view the list of Samples.",
   "Runtime Icon": "Runtime Icon",
@@ -433,19 +441,16 @@
   "Helm": "Helm",
   "Developer": "Developer",
   "Create an application from a code sample": "Create an application from a code sample",
-  "From Git": "From Git",
   "Import code from your Git repository to be built and deployed": "Import code from your Git repository to be built and deployed",
-  "Container Image": "Container Image",
   "Deploy an existing image from an image registry or image stream tag": "Deploy an existing image from an image registry or image stream tag",
-  "From Dockerfile": "From Dockerfile",
   "Import your Dockerfile from your Git repository to be built and deployed": "Import your Dockerfile from your Git repository to be built and deployed",
   "YAML": "YAML",
   "Create resources from their YAML or JSON definitions": "Create resources from their YAML or JSON definitions",
-  "From Catalog": "From Catalog",
   "Browse the catalog to discover, deploy and connect to services": "Browse the catalog to discover, deploy and connect to services",
-  "Database": "Database",
   "Browse the catalog to discover database services to add to your application": "Browse the catalog to discover database services to add to your application",
-  "Operator Backed": "Operator Backed",
   "Browse the catalog to discover and deploy operator managed services": "Browse the catalog to discover and deploy operator managed services",
-  "Browse the catalog to discover and install Helm Charts": "Browse the catalog to discover and install Helm Charts"
+  "Browse the catalog to discover and install Helm Charts": "Browse the catalog to discover and install Helm Charts",
+  "Invalid Import option provided": "Invalid Import option provided",
+  "Add to Application": "Add to Application",
+  "Add to Project": "Add to Project"
 }

frontend/packages/dev-console/src/actions/add-resources.tsx

@@ -17,49 +17,61 @@ export const allCatalogImageResourceAccess = 'allCatalogImageResourceAccess';
 export const serviceBindingAvailable = 'serviceBindingAvailable';
 
 export const fromGit = createKebabAction(
-  'From Git',
+  // t('devconsole~From Git')
+  'devconsole~From Git',
   <GitAltIcon />,
   ImportOptions.GIT,
   allImportResourceAccess,
 );
 
 export const containerImage = createKebabAction(
-  'Container Image',
+  // t('devconsole~Container Image')
+  'devconsole~Container Image',
   <OsImageIcon />,
   ImportOptions.CONTAINER,
   allCatalogImageResourceAccess,
 );
 
 export const fromCatalog = createKebabAction(
-  'From Catalog',
+  // t('devconsole~From Catalog')
+  'devconsole~From Catalog',
   <CatalogIcon />,
   ImportOptions.CATALOG,
 );
 
 export const fromDockerfile = createKebabAction(
-  'From Dockerfile',
+  // t('devconsole~From Dockerfile')
+  'devconsole~From Dockerfile',
   <CubeIcon />,
   ImportOptions.DOCKERFILE,
   allImportResourceAccess,
 );
 
 export const fromDatabaseCatalog = createKebabAction(
-  'Database',
+  // t('devconsole~Database')
+  'devconsole~Database',
   <DatabaseIcon />,
   ImportOptions.DATABASE,
 );
 
-export const fromSamples = createKebabAction('Samples', <LaptopCodeIcon />, ImportOptions.SAMPLES);
+export const fromSamples = createKebabAction(
+  // t('devconsole~Samples')
+  'devconsole~Samples',
+  <LaptopCodeIcon />,
+  ImportOptions.SAMPLES,
+);
 
 export const fromOperatorBacked = createKebabAction(
-  'Operator Backed',
+  // t('devconsole~Operator Backed')
+  'devconsole~Operator Backed',
   <BoltIcon />,
   ImportOptions.OPERATORBACKED,
   serviceBindingAvailable,
 );
 
 export const fromHelmCharts = createKebabAction(
-  'Helm Charts',
+  // t('devconsole~Helm Charts')
+  'devconsole~Helm Charts',
   <HelmChartsIcon style={{ height: '1em', width: '1em' }} />,
   ImportOptions.HELMCHARTS,
 );

frontend/packages/dev-console/src/actions/modify-helm-release.ts

@@ -10,7 +10,8 @@ export const deleteHelmRelease = (releaseName: string, namespace: string, redire
         blocking: true,
         resourceName: releaseName,
         resourceType: 'Helm Release',
-        actionLabel: 'Uninstall',
+        // t('devconsole~Uninstall')
+        actionLabelKey: 'devconsole~Uninstall',
         redirect,
         onSubmit: () => {
           return coFetchJSON.delete(

frontend/packages/dev-console/src/components/import/ImportForm.tsx

@@ -8,11 +8,7 @@ import { RootState } from '@console/internal/redux';
 import { connect } from 'react-redux';
 import { ALL_APPLICATIONS_KEY, usePostFormSubmitAction } from '@console/shared';
 import { useExtensions, Perspective, isPerspective } from '@console/plugin-sdk';
-import {
-  UNASSIGNED_KEY,
-  UNASSIGNED_LABEL,
-  ALLOW_SERVICE_BINDING_FLAG,
-} from '@console/topology/src/const';
+import { UNASSIGNED_KEY, ALLOW_SERVICE_BINDING_FLAG } from '@console/topology/src/const';
 import { sanitizeApplicationValue } from '@console/topology/src/utils/application-utils';
 import { NormalizedBuilderImages, normalizeBuilderImages } from '../../utils/imagestream-utils';
 import { GitImportFormData, FirehoseList, ImportData, Resources } from './import-types';
@@ -59,7 +55,10 @@ const ImportForm: React.FC<ImportFormProps & StateProps> = ({
     application: {
       initial: sanitizeApplicationValue(activeApplication),
       name: sanitizeApplicationValue(activeApplication),
-      selectedKey: activeApplication === UNASSIGNED_LABEL ? UNASSIGNED_KEY : activeApplication,
+      selectedKey:
+        activeApplication === t('devconsole~no application group')
+          ? UNASSIGNED_KEY
+          : activeApplication,
       isInContext: !!sanitizeApplicationValue(activeApplication),
     },
     git: {

frontend/packages/dev-console/src/utils/__tests__/add-resources-menu-utils.spec.tsx

@@ -32,8 +32,8 @@ const getTopologyData = (mockData: TopologyDataResources, name: string) => {
 
 describe('addResourceMenuUtils: ', () => {
   it('should give proper menu item path based on the application', () => {
-    expect(getMenuPath(true)).toEqual('Add to Application');
-    expect(getMenuPath(false)).toEqual('Add to Project');
+    expect(getMenuPath(true)).toEqual('devconsole~Add to Application');
+    expect(getMenuPath(false)).toEqual('devconsole~Add to Project');
   });
 
   it('should return the page url with proper queryparams for git import flow', async () => {
@@ -139,9 +139,9 @@ describe('addResourceMenuUtils: ', () => {
     const connectorSourceObj = await getTopologyData(MockResources, 'nodejs');
     const icon = <GitAltIcon />;
     const hasApplication = true;
-    const label = 'From Git';
+    const labelKey = 'devconsole~From Git';
 
-    const kebabAction: KebabAction = createKebabAction(label, icon, ImportOptions.GIT);
+    const kebabAction: KebabAction = createKebabAction(labelKey, icon, ImportOptions.GIT);
     const kebabOption: KebabOption = kebabAction(
       primaryObj,
       '',
@@ -152,9 +152,9 @@ describe('addResourceMenuUtils: ', () => {
       connectorSourceObj?.metadata?.name
     }`;
 
-    expect(kebabOption.label).toEqual(label);
+    expect(kebabOption.labelKey).toEqual(labelKey);
     expect(kebabOption.icon).toEqual(icon);
-    expect(kebabOption.path).toEqual(null);
+    expect(kebabOption.path).toBeFalsy();
     expect(kebabOption.href).toEqual(
       getAddPageUrl(primaryObj, '', ImportOptions.GIT, hasApplication, contextSource),
     );
@@ -164,14 +164,14 @@ describe('addResourceMenuUtils: ', () => {
     const primaryObj = await getTopologyData(MockResources, 'analytics-deployment');
     const icon = <GitAltIcon />;
     const hasApplication = true;
-    const label = 'From Git';
+    const labelKey = 'devconsole~From Git';
 
-    const kebabAction: KebabAction = createKebabAction(label, icon, ImportOptions.GIT);
+    const kebabAction: KebabAction = createKebabAction(labelKey, icon, ImportOptions.GIT);
     const kebabOption: KebabOption = kebabAction(primaryObj, '', hasApplication);
 
-    expect(kebabOption.label).toEqual(label);
+    expect(kebabOption.labelKey).toEqual(labelKey);
     expect(kebabOption.icon).toEqual(icon);
-    expect(kebabOption.path).toEqual('Add to Application');
+    expect(kebabOption.pathKey).toEqual('devconsole~Add to Application');
     expect(kebabOption.href).toEqual(
       getAddPageUrl(primaryObj, '', ImportOptions.GIT, hasApplication),
     );

frontend/packages/dev-console/src/utils/add-resources-menu-utils.ts

@@ -1,3 +1,4 @@
+import i18next from 'i18next';
 import { K8sResourceKind, referenceFor } from '@console/internal/module/k8s';
 import { KebabOption } from '@console/internal/components/utils';
 import { UNASSIGNED_KEY } from '@console/topology/src/const';
@@ -85,7 +86,7 @@ export const getAddPageUrl = (
       pageUrl = `/channel/ns/${ns}`;
       break;
     default:
-      throw new Error('Invalid Import option provided');
+      throw new Error(i18next.t('devconsole~Invalid Import option provided'));
   }
   if (hasApplication && appGroup) {
     params.append(QUERY_PROPERTIES.APPLICATION, appGroup);
@@ -96,10 +97,16 @@ export const getAddPageUrl = (
 };
 
 export const getMenuPath = (hasApplication: boolean, connectorSourceContext?: string): string =>
-  connectorSourceContext?.length ? null : hasApplication ? 'Add to Application' : 'Add to Project';
+  // t('devconsole~Add to Application')
+  // t('devconsole~Add to Project')
+  connectorSourceContext?.length
+    ? null
+    : hasApplication
+    ? 'devconsole~Add to Application'
+    : 'devconsole~Add to Project';
 
 type KebabFactory = (
-  label: string,
+  labelKey: string,
   icon: React.ReactNode,
   importType: ImportOptions,
   checkAccess?: string,
@@ -115,7 +122,7 @@ export type KebabAction = (
 
 export type MenuOptions = (KebabAction | KebabOption)[];
 
-export const createKebabAction: KebabFactory = (label, icon, importType, checkAccess) => (
+export const createKebabAction: KebabFactory = (labelKey, icon, importType, checkAccess) => (
   obj: K8sResourceKind,
   namespace: string,
   hasApplication: boolean,
@@ -130,9 +137,9 @@ export const createKebabAction: KebabFactory = (label, icon, importType, checkAc
     : null;
 
   return {
-    label,
+    labelKey,
     icon,
-    path: getMenuPath(hasApplication, connectorSourceContext),
+    pathKey: getMenuPath(hasApplication, connectorSourceContext),
     href: getAddPageUrl(obj, namespace, importType, hasApplication, connectorSourceContext),
   };
 };

frontend/packages/dev-console/src/utils/resource-label-utils.ts

@@ -1,7 +1,6 @@
 import * as _ from 'lodash';
 import { K8sResourceKind } from '@console/internal/module/k8s';
 import { TRIGGERS_ANNOTATION } from '@console/shared';
-import { UNASSIGNED_LABEL } from '@console/topology/src/const';
 
 export const getAppLabels = ({
   name,
@@ -31,11 +30,7 @@ export const getAppLabels = ({
   if (runtimeIcon) {
     labels['app.openshift.io/runtime'] = runtimeIcon;
   }
-  if (
-    applicationName &&
-    applicationName !== UNASSIGNED_LABEL &&
-    applicationName.trim().length > 0
-  ) {
+  if (applicationName && applicationName.trim().length > 0) {
     labels['app.kubernetes.io/part-of'] = applicationName;
   }
   if (selectedTag) {