feat(orchestrator): add i18n (#1483)

Signed-off-by: Marek Libra <marek.libra@gmail.com>

Author: mareklibra

workspaces/orchestrator/.changeset/two-garlics-act.md

@@ -0,0 +1,8 @@
+---
+'@red-hat-developer-hub/backstage-plugin-orchestrator-form-react': patch
+'@red-hat-developer-hub/backstage-plugin-orchestrator-backend': patch
+'@red-hat-developer-hub/backstage-plugin-orchestrator-common': patch
+'@red-hat-developer-hub/backstage-plugin-orchestrator': patch
+---
+
+Added internationalization to the frontend plugins.

workspaces/orchestrator/packages/app/src/App.tsx

@@ -58,6 +58,7 @@ import { apis } from './apis';
 import { entityPage } from './components/catalog/EntityPage';
 import { Root } from './components/Root';
 import { searchPage } from './components/search/SearchPage';
+import { orchestratorTranslations } from '@red-hat-developer-hub/backstage-plugin-orchestrator';
 
 const app = createApp({
   apis,
@@ -102,6 +103,10 @@ const app = createApp({
     ),
   },
   themes: getThemes(),
+  __experimentalTranslations: {
+    availableLanguages: ['en', 'de', 'fr', 'it', 'es'],
+    resources: [orchestratorTranslations],
+  },
   /* Hardcoded deployment of the Orchestrator Form Widget library in our DEV-only instance.
     In a production deployment, the plugin will be loaded dynamically. */
   plugins: [orchestratorFormWidgetsPlugin, customAuthProviderPlugin],

workspaces/orchestrator/plugins/orchestrator-backend/package.json

@@ -70,6 +70,7 @@
     "@backstage/backend-plugin-api": "^1.3.1",
     "@backstage/backend-tasks": "^0.6.1",
     "@backstage/catalog-client": "^1.10.0",
+    "@backstage/core-plugin-api": "^1.10.7",
     "@backstage/errors": "^1.2.7",
     "@backstage/integration": "^1.17.0",
     "@backstage/plugin-catalog-node": "^1.17.0",

workspaces/orchestrator/plugins/orchestrator-common/package.json

@@ -57,6 +57,7 @@
     "openapi:check": "./scripts/openapi.sh check"
   },
   "dependencies": {
+    "@backstage/core-plugin-api": "^1.10.7",
     "@backstage/plugin-permission-common": "^0.9.0",
     "@backstage/types": "^1.2.1",
     "@severlessworkflow/sdk-typescript": "^3.0.3",

workspaces/orchestrator/plugins/orchestrator-form-react/report.api.md

@@ -8,10 +8,10 @@ import { JsonObject } from '@backstage/types';
 import type { JSONSchema7 } from 'json-schema';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { OrchestratorFormContextProps } from '@red-hat-developer-hub/backstage-plugin-orchestrator-form-api';
-import { default as React_2 } from 'react';
+import { ReactNode } from 'react';
 
 // @public
-export const OrchestratorForm: ({ schema: rawSchema, updateSchema, handleExecute, isExecuting, initialFormData, setAuthTokenDescriptors, }: OrchestratorFormProps) => JSX_2.Element;
+export const OrchestratorForm: ({ schema: rawSchema, updateSchema, handleExecute, isExecuting, initialFormData, setAuthTokenDescriptors, t, }: OrchestratorFormProps) => JSX_2.Element;
 
 // @public
 export type OrchestratorFormProps = {
@@ -21,14 +21,32 @@ export type OrchestratorFormProps = {
     isExecuting: boolean;
     handleExecute: (parameters: JsonObject) => Promise<void>;
     initialFormData: JsonObject;
+    t: TranslationFunction;
 };
 
 // @public
 export const SubmitButton: ({ submitting, handleClick, children, focusOnMount, }: {
     submitting: boolean;
     handleClick?: () => void;
-    children: React_2.ReactNode;
+    children: ReactNode;
     focusOnMount?: boolean;
 }) => JSX_2.Element;
 
+// Warning: (ae-missing-release-tag) "TranslationFunction" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export type TranslationFunction = (key: string) => string;
+
+// Warning: (ae-missing-release-tag) "useTranslation" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export const useTranslation: () => {
+    t: TranslationFunction;
+};
+
+// Warnings were encountered during analysis:
+//
+// src/hooks/useTranslation.d.ts:1:1 - (ae-undocumented) Missing documentation for "TranslationFunction".
+// src/hooks/useTranslation.d.ts:2:22 - (ae-undocumented) Missing documentation for "useTranslation".
+
 ```

workspaces/orchestrator/plugins/orchestrator-form-react/src/components/OrchestratorForm.tsx

@@ -25,6 +25,7 @@ import get from 'lodash/get';
 
 import { OrchestratorFormContextProps } from '@red-hat-developer-hub/backstage-plugin-orchestrator-form-api';
 
+import { TranslationFunction } from '../hooks/useTranslation';
 import generateUiSchema from '../utils/generateUiSchema';
 import { StepperContextProvider } from '../utils/StepperContext';
 import OrchestratorFormWrapper from './OrchestratorFormWrapper';
@@ -50,6 +51,7 @@ export type OrchestratorFormProps = {
   isExecuting: boolean;
   handleExecute: (parameters: JsonObject) => Promise<void>;
   initialFormData: JsonObject;
+  t: TranslationFunction;
 };
 
 /**
@@ -105,6 +107,7 @@ const OrchestratorForm = ({
   isExecuting,
   initialFormData,
   setAuthTokenDescriptors,
+  t,
 }: OrchestratorFormProps) => {
   // make the form a controlled component so the state will remain when moving between steps. see https://rjsf-team.github.io/react-jsonschema-form/docs/quickstart#controlled-component
   const [formData, setFormData] = useState<JsonObject>(
@@ -148,7 +151,7 @@ const OrchestratorForm = ({
   );
 
   return (
-    <StepperContextProvider reviewStep={reviewStep}>
+    <StepperContextProvider reviewStep={reviewStep} t={t}>
       {isMultiStep ? (
         <OrchestratorFormWrapper
           schema={schema}

workspaces/orchestrator/plugins/orchestrator-form-react/src/components/OrchestratorFormStepper.tsx

@@ -14,15 +14,14 @@
  * limitations under the License.
  */
 
-import React from 'react';
-
 import Button from '@mui/material/Button';
 import Step from '@mui/material/Step';
 import StepLabel from '@mui/material/StepLabel';
 import Stepper from '@mui/material/Stepper';
 import Typography from '@mui/material/Typography';
 import { makeStyles } from 'tss-react/mui';
 
+import { useTranslation } from '../hooks/useTranslation';
 import { useStepperContext } from '../utils/StepperContext';
 import SubmitButton from './SubmitButton';
 
@@ -59,11 +58,12 @@ const OrchestratorFormStepper = ({
 }: {
   steps: OrchestratorFormStep[];
 }) => {
+  const { t } = useTranslation();
   const { classes } = useStyles();
   const { activeStep, reviewStep } = useStepperContext();
   const stepsWithReview = [
     ...steps,
-    { content: reviewStep, title: 'Review', key: 'review' },
+    { content: reviewStep, title: t('common.review'), key: 'review' },
   ];
 
   return (
@@ -96,18 +96,20 @@ const OrchestratorFormStepper = ({
 };
 
 export const OrchestratorFormToolbar = () => {
+  const { t } = useTranslation();
   const { activeStep, handleBack, isValidating } = useStepperContext();
   const { classes } = useStyles();
+
   return (
     <div className={classes.footer}>
       <Button
         disabled={activeStep === 0}
         onClick={handleBack}
         className={classes.regularButton}
       >
-        Back
+        {t('common.back')}
       </Button>
-      <SubmitButton submitting={isValidating}>Next</SubmitButton>
+      <SubmitButton submitting={isValidating}>{t('common.next')}</SubmitButton>
     </div>
   );
 };

workspaces/orchestrator/plugins/orchestrator-form-react/src/components/OrchestratorFormWrapper.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import { useMemo, useState } from 'react';
 
 import { ErrorPanel } from '@backstage/core-components';
 import { JsonObject } from '@backstage/types';
@@ -32,6 +32,7 @@ import {
   useOrchestratorFormApiOrDefault,
 } from '@red-hat-developer-hub/backstage-plugin-orchestrator-form-api';
 
+import { useTranslation } from '../hooks/useTranslation';
 import { getActiveStepKey } from '../utils/getSortedStepEntries';
 import { useStepperContext } from '../utils/StepperContext';
 import useValidator from '../utils/useValidator';
@@ -47,20 +48,19 @@ const MuiForm = withTheme<
 const FormComponent = (decoratorProps: FormDecoratorProps) => {
   const formContext = decoratorProps.formContext;
 
-  const [extraErrors, setExtraErrors] = React.useState<
+  const [extraErrors, setExtraErrors] = useState<
     ErrorSchema<JsonObject> | undefined
   >();
   const numStepsInMultiStepSchema = formContext?.numStepsInMultiStepSchema;
   const isMultiStep = numStepsInMultiStepSchema !== undefined;
   const { handleNext, activeStep, handleValidateStarted, handleValidateEnded } =
     useStepperContext();
-  const [validationError, setValidationError] = React.useState<
-    Error | undefined
-  >();
+  const [validationError, setValidationError] = useState<Error | undefined>();
   const validator = useValidator(isMultiStep);
+  const { t } = useTranslation();
 
   if (!formContext) {
-    return <div>Form decorator must provide context data.</div>;
+    return <div>{t('formDecorator.error')}</div>;
   }
 
   const {
@@ -148,7 +148,7 @@ const FormComponent = (decoratorProps: FormDecoratorProps) => {
 const OrchestratorFormWrapper = (props: OrchestratorFormContextProps) => {
   const formApi = useOrchestratorFormApiOrDefault();
 
-  const NewComponent = React.useMemo(() => {
+  const NewComponent = useMemo(() => {
     const formDecorator = formApi.getFormDecorator();
     return formDecorator(FormComponent);
   }, [formApi]);

workspaces/orchestrator/plugins/orchestrator-form-react/src/components/ReviewStep.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import { useMemo } from 'react';
 
 import { Content, StructuredMetadataTable } from '@backstage/core-components';
 import { JsonObject } from '@backstage/types';
@@ -25,6 +25,7 @@ import Paper from '@mui/material/Paper';
 import type { JSONSchema7 } from 'json-schema';
 import { makeStyles } from 'tss-react/mui';
 
+import { useTranslation } from '../hooks/useTranslation';
 import generateReviewTableData from '../utils/generateReviewTableData';
 import { useStepperContext } from '../utils/StepperContext';
 import SubmitButton from './SubmitButton';
@@ -66,9 +67,11 @@ const ReviewStep = ({
   data: JsonObject;
   handleExecute: () => void;
 }) => {
+  const { t } = useTranslation();
+
   const { classes } = useStyles();
   const { handleBack } = useStepperContext();
-  const displayData = React.useMemo<JsonObject>(() => {
+  const displayData = useMemo<JsonObject>(() => {
     return generateReviewTableData(schema, data);
   }, [schema, data]);
 
@@ -83,14 +86,14 @@ const ReviewStep = ({
             className={classes.backButton}
             disabled={busy}
           >
-            Back
+            {t('common.back')}
           </Button>
           <SubmitButton
             handleClick={handleExecute}
             submitting={busy}
             focusOnMount
           >
-            Run
+            {t('common.run')}
           </SubmitButton>
         </div>
       </Paper>

workspaces/orchestrator/plugins/orchestrator-form-react/src/components/SingleStepForm.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+import { useMemo } from 'react';
 
 import { OrchestratorFormContextProps } from '@red-hat-developer-hub/backstage-plugin-orchestrator-form-api';
 
@@ -35,7 +35,7 @@ type SingleStepFormProps = Pick<
 >;
 
 const SingleStepForm = (props: SingleStepFormProps) => {
-  const steps = React.useMemo<OrchestratorFormStep[]>(() => {
+  const steps = useMemo<OrchestratorFormStep[]>(() => {
     return [
       {
         title: props.schema.title ?? 'Inputs',