console-shared localization

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

@@ -0,0 +1,73 @@
+{
+  "0": "0",
+  "1": "1",
+  "An error occurred": "An error occurred",
+  "Error Loading - {{placeholder}}": "Error Loading - {{placeholder}}",
+  "{{description}}": "{{description}}",
+  "{{label}}": "{{label}}",
+  "Limits": "Limits",
+  "Requests": "Requests",
+  "true": "true",
+  "false": "false",
+  "Select {{title}}": "Select {{title}}",
+  "A form could not be generated for this resource.": "A form could not be generated for this resource.",
+  "A form is not available for this resource. Please use the YAML View.": "A form is not available for this resource. Please use the YAML View.",
+  "Note: Some fields may not be represented in this form view. Please select \"YAML view\" for full control.": "Note: Some fields may not be represented in this form view. Please select \"YAML view\" for full control.",
+  "Create": "Create",
+  "Cancel": "Cancel",
+  "Advanced Configuration": "Advanced Configuration",
+  "Remove {{singularLabel}}": "Remove {{singularLabel}}",
+  "Add {{singularLabel}}": "Add {{singularLabel}}",
+  "Error": "Error",
+  "Fix the above errors:": "Fix the above errors:",
+  "Select {{label}}": "Select {{label}}",
+  "Cluster does not have resource {{groupVersionKind}}": "Cluster does not have resource {{groupVersionKind}}",
+  "You made changes to this page.": "You made changes to this page.",
+  "Click {{submit}} to save changes or {{reset}} to cancel changes.": "Click {{submit}} to save changes or {{reset}} to cancel changes.",
+  "Save": "Save",
+  "Reload": "Reload",
+  "{{ariaDescribed}}": "{{ariaDescribed}}",
+  "Value": "Value",
+  "Name": "Name",
+  "Add Value": "Add Value",
+  "Filter by type...": "Filter by type...",
+  "Filter by type": "Filter by type",
+  "{{count}} item": "{{count}} item",
+  "{{count}} item_plural": "{{count}} items",
+  "No results match the filter criteria": "No results match the filter criteria",
+  "No Event Source types are being shown due to the filters being applied.": "No Event Source types are being shown due to the filters being applied.",
+  "Clear filter": "Clear filter",
+  "Add values": "Add values",
+  "Remove": "Remove",
+  "Configure via:": "Configure via:",
+  "Form View": "Form View",
+  "YAML View": "YAML View",
+  "Invalid YAML cannot be persisted": "Invalid YAML cannot be persisted",
+  "Switching to Form View will delete any invalid YAML.": "Switching to Form View will delete any invalid YAML.",
+  "Switch and Delete": "Switch and Delete",
+  "Form view is disabled for this chart because the schema is not available": "Form view is disabled for this chart because the schema is not available",
+  "View sidebar": "View sidebar",
+  "Not all containers have health checks to ensure your application is running correctly.": "Not all containers have health checks to ensure your application is running correctly.",
+  "Container {{containersName}} does not have health checks to ensure your application is running correctly.": "Container {{containersName}} does not have health checks to ensure your application is running correctly.",
+  "Health Checks": "Health Checks",
+  "Add Health Checks": "Add Health Checks",
+  "Unknown error removing {{hpaLabel}} {{hpaName}}.": "Unknown error removing {{hpaLabel}} {{hpaName}}.",
+  "Remove {{label}}?": "Remove {{label}}?",
+  "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.",
+  "Increase the pod count": "Increase the pod count",
+  "Decrease the pod count": "Decrease the pod count",
+  "closeBtnAriaLabel": "closeBtnAriaLabel",
+  "Hover": "Hover",
+  "Drag": "Drag",
+  "Click": "Click",
+  "Right Click": "Right Click",
+  "Scaled to 0": "Scaled to 0",
+  "scaling to {{podSubTitle}}": "scaling to {{podSubTitle}}",
+  "Autoscaled": "Autoscaled",
+  "to 0": "to 0",
+  "Autoscaling": "Autoscaling",
+  "to {{podSubTitle}}": "to {{podSubTitle}}",
+  "Invalid target resource: ({{targetResource}})": "Invalid target resource: ({{targetResource}})"
+}

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

@@ -21,4 +21,4 @@
   "{{humanAvailable}} available of {{humanLimit}} total limit": "{{humanAvailable}} available of {{humanLimit}} total limit",
   "{{humanAvailable}} available of {{humanMax}}": "{{humanAvailable}} available of {{humanMax}}",
   "{{humanAvailable}} available": "{{humanAvailable}} available"
-}
+}

frontend/packages/console-shared/src/components/alerts/AlertSeverityIcon.tsx

@@ -19,7 +19,6 @@ const AlertSeverityIcon: React.FC<AlertSeverityIconProps> = ({
             fontSize,
             color: 'var(--pf-global--danger-color--100)',
           }}
-          title="Monitoring Alert"
         />
       );
     case AlertSeverity.Warning:
@@ -29,7 +28,6 @@ const AlertSeverityIcon: React.FC<AlertSeverityIconProps> = ({
             fontSize,
             color: 'var(--pf-global--warning-color--100)',
           }}
-          title="Monitoring Alert"
         />
       );
     default:

frontend/packages/console-shared/src/components/alerts/error.tsx

@@ -1,11 +1,21 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Alert } from '@patternfly/react-core';
 
-const ErrorAlert: React.FC<Props> = ({ message, title = 'An error occurred' }) => (
-  <Alert isInline className="co-alert co-alert--scrollable" title={title} variant="danger">
-    {message}
-  </Alert>
-);
+const ErrorAlert: React.FC<Props> = ({ message, title }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Alert
+      isInline
+      className="co-alert co-alert--scrollable"
+      title={title || t('console-shared~An error occurred')}
+      variant="danger"
+    >
+      {message}
+    </Alert>
+  );
+};
 
 type Props = {
   message: string;

frontend/packages/console-shared/src/components/dropdown/ResourceDropdown.tsx

@@ -1,5 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
+import { TFunction } from 'i18next';
+import { withTranslation } from 'react-i18next';
 import * as fuzzy from 'fuzzysearch';
 import {
   Dropdown,
@@ -77,6 +79,7 @@ interface ResourceDropdownProps {
   autocompleteFilter?: (strText: string, item: object) => boolean;
   customResourceKey?: (key: string, resource: K8sResourceKind) => string;
   appendItems?: ResourceDropdownItems;
+  t: TFunction;
 }
 
 class ResourceDropdown extends React.Component<ResourceDropdownProps, State> {
@@ -118,7 +121,11 @@ class ResourceDropdown extends React.Component<ResourceDropdownProps, State> {
 
     if (loadError) {
       this.setState({
-        title: <span className="cos-error-title">Error Loading - {placeholder}</span>,
+        title: (
+          <span className="cos-error-title">
+            {this.props.t('console-shared~Error Loading - {{placeholder}}', { placeholder })}
+          </span>
+        ),
       });
     }
 
@@ -287,4 +294,4 @@ class ResourceDropdown extends React.Component<ResourceDropdownProps, State> {
   }
 }
 
-export default ResourceDropdown;
+export default withTranslation()(ResourceDropdown);

frontend/packages/console-shared/src/components/dropdown/__tests__/ResourceDropdown.spec.tsx

@@ -3,6 +3,17 @@ import { shallow } from 'enzyme';
 import ResourceDropdown from '../ResourceDropdown';
 import { mockDropdownData } from '../__mocks__/dropdown-data-mock';
 
+jest.mock('react-i18next', () => {
+  const reactI18next = require.requireActual('react-i18next');
+  return {
+    ...reactI18next,
+    withTranslation: () => (Component) => {
+      Component.defaultProps = { ...Component.defaultProps, t: (s) => s };
+      return Component;
+    },
+  };
+});
+
 const componentFactory = (props = {}) => (
   <ResourceDropdown
     placeholder="Select an Item"

frontend/packages/console-shared/src/components/dynamic-form/fields.tsx

@@ -1,6 +1,7 @@
 import * as _ from 'lodash';
 import * as classnames from 'classnames';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { JSONSchema6 } from 'json-schema';
 import { getUiOptions } from 'react-jsonschema-form/lib/utils';
 import { FieldProps, UiSchema } from 'react-jsonschema-form';
@@ -21,14 +22,16 @@ import {
 } from '@console/operator-lifecycle-manager/src/components/descriptors/spec/affinity';
 import { hasNoFields, useSchemaDescription, useSchemaLabel } from './utils';
 
-const Description = ({ id, description }) =>
-  description ? (
+const Description = ({ id, description }) => {
+  const { t } = useTranslation();
+  return description ? (
     <span id={id} className="help-block">
       <LinkifyExternal>
-        <div className="co-pre-line">{description}</div>
+        <div className="co-pre-line">{t('console-shared~{{description}}', { description })}</div>
       </LinkifyExternal>
     </span>
   ) : null;
+};
 
 export const DescriptionField: React.FC<FieldProps> = ({ id, description }) => (
   <Description id={id} description={description} />
@@ -43,11 +46,13 @@ export const FormField: React.FC<FormFieldProps> = ({
   uiSchema,
 }) => {
   const [showLabel, label] = useSchemaLabel(schema, uiSchema, defaultLabel || 'Value');
+  const { t } = useTranslation();
+
   return (
     <div id={`${id}_field`} className="form-group">
       {showLabel && label && (
         <label className={classnames('form-label', { 'co-required': required })} htmlFor={id}>
-          {label}
+          {t('console-shared~{{label}}', { label })}
         </label>
       )}
       {children}
@@ -63,13 +68,15 @@ export const FieldSet: React.FC<FieldSetProps> = ({
   schema,
   uiSchema,
 }) => {
+  const { t } = useTranslation();
   const [expanded, setExpanded] = React.useState(false);
   const [showLabel, label] = useSchemaLabel(schema, uiSchema, defaultLabel);
   const description = useSchemaDescription(schema, uiSchema);
   const onToggle = (e) => {
     e.preventDefault();
     setExpanded((current) => !current);
   };
+
   return showLabel && label ? (
     <div id={`${idSchema.$id}_field-group`} className="form-group co-dynamic-form__field-group">
       <AccordionItem>
@@ -82,7 +89,7 @@ export const FieldSet: React.FC<FieldSetProps> = ({
             className={classnames({ 'co-required': required })}
             htmlFor={`${idSchema.$id}_accordion-content`}
           >
-            {_.startCase(label)}
+            {t('console-shared~{{label}}', { label: _.startCase(label) })}
           </label>
         </AccordionToggle>
         {description && (
@@ -106,46 +113,49 @@ export const ResourceRequirementsField: React.FC<FieldProps> = ({
   required,
   schema,
   uiSchema,
-}) => (
-  <FieldSet
-    defaultLabel={name || 'Resource Requirements'}
-    idSchema={idSchema}
-    required={required}
-    schema={schema}
-    uiSchema={uiSchema}
-  >
-    <dl id={idSchema.$id}>
-      <dt>Limits</dt>
-      <dd>
-        <ResourceRequirements
-          cpu={formData?.limits?.cpu || ''}
-          memory={formData?.limits?.memory || ''}
-          storage={formData?.limits?.['ephemeral-storage'] || ''}
-          onChangeCPU={(cpu) => onChange(_.set(_.cloneDeep(formData), 'limits.cpu', cpu))}
-          onChangeMemory={(mem) => onChange(_.set(_.cloneDeep(formData), 'limits.memory', mem))}
-          onChangeStorage={(sto) =>
-            onChange(_.set(_.cloneDeep(formData), 'limits.ephemeral-storage', sto))
-          }
-          path={`${idSchema.$id}.limits`}
-        />
-      </dd>
-      <dt>Requests</dt>
-      <dd>
-        <ResourceRequirements
-          cpu={formData?.requests?.cpu || ''}
-          memory={formData?.requests?.memory || ''}
-          storage={formData?.requests?.['ephemeral-storage'] || ''}
-          onChangeCPU={(cpu) => onChange(_.set(_.cloneDeep(formData), 'requests.cpu', cpu))}
-          onChangeMemory={(mem) => onChange(_.set(_.cloneDeep(formData), 'requests.memory', mem))}
-          onChangeStorage={(sto) =>
-            onChange(_.set(_.cloneDeep(formData), 'requests.ephemeral-storage', sto))
-          }
-          path={`${idSchema.$id}.requests`}
-        />
-      </dd>
-    </dl>
-  </FieldSet>
-);
+}) => {
+  const { t } = useTranslation();
+  return (
+    <FieldSet
+      defaultLabel={name || 'Resource Requirements'}
+      idSchema={idSchema}
+      required={required}
+      schema={schema}
+      uiSchema={uiSchema}
+    >
+      <dl id={idSchema.$id}>
+        <dt>{t('console-shared~Limits')}</dt>
+        <dd>
+          <ResourceRequirements
+            cpu={formData?.limits?.cpu || ''}
+            memory={formData?.limits?.memory || ''}
+            storage={formData?.limits?.['ephemeral-storage'] || ''}
+            onChangeCPU={(cpu) => onChange(_.set(_.cloneDeep(formData), 'limits.cpu', cpu))}
+            onChangeMemory={(mem) => onChange(_.set(_.cloneDeep(formData), 'limits.memory', mem))}
+            onChangeStorage={(sto) =>
+              onChange(_.set(_.cloneDeep(formData), 'limits.ephemeral-storage', sto))
+            }
+            path={`${idSchema.$id}.limits`}
+          />
+        </dd>
+        <dt>{t('console-shared~Requests')}</dt>
+        <dd>
+          <ResourceRequirements
+            cpu={formData?.requests?.cpu || ''}
+            memory={formData?.requests?.memory || ''}
+            storage={formData?.requests?.['ephemeral-storage'] || ''}
+            onChangeCPU={(cpu) => onChange(_.set(_.cloneDeep(formData), 'requests.cpu', cpu))}
+            onChangeMemory={(mem) => onChange(_.set(_.cloneDeep(formData), 'requests.memory', mem))}
+            onChangeStorage={(sto) =>
+              onChange(_.set(_.cloneDeep(formData), 'requests.ephemeral-storage', sto))
+            }
+            path={`${idSchema.$id}.requests`}
+          />
+        </dd>
+      </dl>
+    </FieldSet>
+  );
+};
 
 export const UpdateStrategyField: React.FC<FieldProps> = ({
   formData,
@@ -243,7 +253,7 @@ export const MatchExpressionsField: React.FC<FieldProps> = ({
   uiSchema,
 }) => (
   <FieldSet
-    defaultLabel={name || 'Match Expressions'}
+    defaultLabel={name || 'Expressions'}
     idSchema={idSchema}
     required={required}
     schema={schema}
@@ -264,7 +274,10 @@ export const BooleanField: React.FC<FieldProps> = ({
   onChange,
   uiSchema,
 }) => {
-  const { labelOn = 'true', labelOff = 'false' } = getUiOptions(uiSchema);
+  const { t } = useTranslation();
+  const { labelOn = t('console-shared~true'), labelOff = t('console-shared~false') } = getUiOptions(
+    uiSchema,
+  );
   return (
     <Switch
       id={idSchema?.$id || name}
@@ -309,12 +322,13 @@ export const DropdownField: React.FC<FieldProps> = ({
   schema,
   uiSchema = {},
 }) => {
+  const { t } = useTranslation();
   const { items, title } = getUiOptions(uiSchema);
   return (
     <Dropdown
       id={idSchema.$id}
       key={idSchema.$id}
-      title={`Select ${title || schema?.title || name}`}
+      title={t('console-shared~Select {{title}}', { title: title || schema?.title || name })}
       selectedKey={formData}
       items={items ?? {}}
       onChange={(val) => onChange(val)}