feat(localization): adding localization support for the entityTabs title coming from dynamic-plugins.default.yaml and defaultTabs.tsx

.ibm/pipelines/value_files/values_showcase-rbac.yaml

@@ -118,6 +118,7 @@ global:
                 entityTabs:
                   - path: "/scorecard"
                     title: Scorecard
+                    titleKey: catalog.entityPage.scorecard.title
                     mountPoint: entity.page.scorecard
                 mountPoints:
                   - mountPoint: entity.page.scorecard/cards

dynamic-plugins.default.yaml

@@ -1326,6 +1326,7 @@ plugins:
             entityTabs:
               - path: /workflows
                 title: Workflows
+                titleKey: catalog.entityPage.workflows.title
                 mountPoint: entity.page.workflows
             mountPoints:
               - mountPoint: entity.page.workflows/cards

packages/app/src/components/DynamicRoot/DynamicRoot.tsx

@@ -443,14 +443,14 @@ export const DynamicRoot = ({
     }, []);
 
     const entityTabOverrides = entityTabs.reduce<EntityTabOverrides>(
-      (acc, { path, title, mountPoint, scope, priority }) => {
+      (acc, { path, title, titleKey, mountPoint, scope, priority }) => {
         if (acc[path]) {
           // eslint-disable-next-line no-console
           console.warn(
             `Plugin ${scope} is not configured properly: a tab has already been configured for "${path}", ignoring entry with title: "${title}" and mountPoint: "${mountPoint}"`,
           );
         } else {
-          acc[path] = { title, mountPoint, priority };
+          acc[path] = { title, titleKey, mountPoint, priority };
         }
         return acc;
       },

packages/app/src/components/catalog/EntityPage/DiagramTabContent.tsx

@@ -27,7 +27,7 @@ export const DiagramTabContent = () => {
           <EntityCatalogGraphCard
             variant="gridItem"
             direction={Direction.TOP_BOTTOM}
-            title={t('app.entityPage.diagram.title')}
+            title={t('catalog.entityPage.diagram.title')}
             height={700}
             relations={[
               RELATION_PART_OF,

packages/app/src/components/catalog/EntityPage/DynamicEntityTab.tsx

@@ -1,17 +1,44 @@
+import { forwardRef } from 'react';
+
 import { Entity } from '@backstage/catalog-model';
+import { Link } from '@backstage/core-components';
 import { ApiHolder } from '@backstage/core-plugin-api';
 import { EntityLayout, EntitySwitch } from '@backstage/plugin-catalog';
 
 import Box from '@mui/material/Box';
 import { DynamicRootConfig } from '@red-hat-developer-hub/plugin-utils';
 
+import { useTranslation } from '../../../hooks/useTranslation';
 import getDynamicRootConfig from '../../../utils/dynamicUI/getDynamicRootConfig';
 import getMountPointData from '../../../utils/dynamicUI/getMountPointData';
+import { getTranslatedTextWithFallback } from '../../../utils/translations';
 import Grid from '../Grid';
 
+const TranslatedTab = forwardRef<
+  any,
+  {
+    title?: string;
+    titleKey?: string;
+    path?: string;
+    children?: React.ReactNode;
+    [key: string]: any;
+  }
+>((props, ref) => {
+  const { title, titleKey, path, children, ...otherProps } = props;
+  const { t } = useTranslation();
+
+  const translatedText = getTranslatedTextWithFallback(t, titleKey, title);
+  return (
+    <Link ref={ref} to={path} {...otherProps}>
+      {translatedText}
+    </Link>
+  );
+});
+
 export type DynamicEntityTabProps = {
   path: string;
   title: string;
+  titleKey?: string;
   mountPoint: string;
   if?: (entity: Entity) => boolean;
   children?: React.ReactNode;
@@ -30,6 +57,7 @@ export type DynamicEntityTabProps = {
 export const dynamicEntityTab = ({
   path,
   title,
+  titleKey,
   mountPoint,
   children,
   if: condition,
@@ -38,6 +66,12 @@ export const dynamicEntityTab = ({
     key={`${path}`}
     path={path}
     title={title}
+    tabProps={{
+      component: TranslatedTab,
+      title: title,
+      titleKey: titleKey,
+      path: path,
+    }}
     if={entity =>
       (condition
         ? errorWrappedCondition(

packages/app/src/components/catalog/EntityPage/defaultTabs.tsx

@@ -18,62 +18,77 @@ export const defaultTabs: Record<
 > = {
   '/': {
     title: 'Overview',
+    titleKey: 'catalog.entityPage.overview.title',
     mountPoint: 'entity.page.overview',
   },
   '/topology': {
     title: 'Topology',
+    titleKey: 'catalog.entityPage.topology.title',
     mountPoint: 'entity.page.topology',
   },
   '/issues': {
     title: 'Issues',
+    titleKey: 'catalog.entityPage.issues.title',
     mountPoint: 'entity.page.issues',
   },
   '/pr': {
     title: 'Pull/Merge Requests',
+    titleKey: 'catalog.entityPage.pullRequests.title',
     mountPoint: 'entity.page.pull-requests',
   },
   '/ci': {
     title: 'CI',
+    titleKey: 'catalog.entityPage.ci.title',
     mountPoint: 'entity.page.ci',
   },
   '/cd': {
     title: 'CD',
+    titleKey: 'catalog.entityPage.cd.title',
     mountPoint: 'entity.page.cd',
   },
   '/kubernetes': {
     title: 'Kubernetes',
+    titleKey: 'catalog.entityPage.kubernetes.title',
     mountPoint: 'entity.page.kubernetes',
   },
   '/image-registry': {
     title: 'Image Registry',
+    titleKey: 'catalog.entityPage.imageRegistry.title',
     mountPoint: 'entity.page.image-registry',
   },
   '/monitoring': {
     title: 'Monitoring',
+    titleKey: 'catalog.entityPage.monitoring.title',
     mountPoint: 'entity.page.monitoring',
   },
   '/lighthouse': {
     title: 'Lighthouse',
+    titleKey: 'catalog.entityPage.lighthouse.title',
     mountPoint: 'entity.page.lighthouse',
   },
   '/api': {
     title: 'Api',
+    titleKey: 'catalog.entityPage.api.title',
     mountPoint: 'entity.page.api',
   },
   '/dependencies': {
     title: 'Dependencies',
+    titleKey: 'catalog.entityPage.dependencies.title',
     mountPoint: 'entity.page.dependencies',
   },
   '/docs': {
     title: 'Docs',
+    titleKey: 'catalog.entityPage.docs.title',
     mountPoint: 'entity.page.docs',
   },
   '/definition': {
     title: 'Definition',
+    titleKey: 'catalog.entityPage.definition.title',
     mountPoint: 'entity.page.definition',
   },
   '/system': {
     title: 'Diagram',
+    titleKey: 'catalog.entityPage.diagram.title',
     mountPoint: 'entity.page.diagram',
   },
 };

packages/app/src/translations/rhdh/de.ts

@@ -43,6 +43,23 @@ export default createTranslationMessages({
     'menuItem.orchestrator': 'Orchestrator',
     'menuItem.adoptionInsights': 'Einführungseinblicke',
 
+    'catalog.entityPage.overview.title': 'Übersicht',
+    'catalog.entityPage.topology.title': 'Topologie',
+    'catalog.entityPage.issues.title': 'Issues',
+    'catalog.entityPage.pullRequests.title': 'Pull/Merge Requests',
+    'catalog.entityPage.ci.title': 'CI',
+    'catalog.entityPage.cd.title': 'CD',
+    'catalog.entityPage.kubernetes.title': 'Kubernetes',
+    'catalog.entityPage.imageRegistry.title': 'Image Registry',
+    'catalog.entityPage.monitoring.title': 'Überwachung',
+    'catalog.entityPage.lighthouse.title': 'Lighthouse',
+    'catalog.entityPage.api.title': 'API',
+    'catalog.entityPage.dependencies.title': 'Abhängigkeiten',
+    'catalog.entityPage.docs.title': 'Dokumentation',
+    'catalog.entityPage.definition.title': 'Definition',
+    'catalog.entityPage.diagram.title': 'Systemdiagramm',
+    'catalog.entityPage.workflows.title': 'Workflows',
+
     'sidebar.menu': 'Menü',
     'sidebar.home': 'Startseite',
     'sidebar.homeLogo': 'Startseite-Logo',
@@ -88,7 +105,6 @@ export default createTranslationMessages({
     'app.learningPaths.title': 'Lernpfade',
     'app.learningPaths.error.title': 'Daten konnten nicht abgerufen werden.',
     'app.learningPaths.error.unknownError': 'Unbekannter Fehler',
-    'app.entityPage.diagram.title': 'Systemdiagramm',
     'app.userSettings.infoCard.title': 'RHDH-Metadaten',
     'app.userSettings.infoCard.metadataCopied':
       'Metadaten in die Zwischenablage kopiert',

packages/app/src/translations/rhdh/es.ts

@@ -43,6 +43,23 @@ export default createTranslationMessages({
     'menuItem.orchestrator': 'Orquestador',
     'menuItem.adoptionInsights': 'Insights de adopción',
 
+    'catalog.entityPage.overview.title': 'Resumen',
+    'catalog.entityPage.topology.title': 'Topología',
+    'catalog.entityPage.issues.title': 'Problemas',
+    'catalog.entityPage.pullRequests.title': 'Pull/Merge Requests',
+    'catalog.entityPage.ci.title': 'CI',
+    'catalog.entityPage.cd.title': 'CD',
+    'catalog.entityPage.kubernetes.title': 'Kubernetes',
+    'catalog.entityPage.imageRegistry.title': 'Registro de Imágenes',
+    'catalog.entityPage.monitoring.title': 'Monitoreo',
+    'catalog.entityPage.lighthouse.title': 'Lighthouse',
+    'catalog.entityPage.api.title': 'API',
+    'catalog.entityPage.dependencies.title': 'Dependencias',
+    'catalog.entityPage.docs.title': 'Documentación',
+    'catalog.entityPage.definition.title': 'Definición',
+    'catalog.entityPage.diagram.title': 'Diagrama del Sistema',
+    'catalog.entityPage.workflows.title': 'Flujos de trabajo',
+
     'sidebar.menu': 'Menú',
     'sidebar.home': 'Inicio',
     'sidebar.homeLogo': 'Logo de inicio',
@@ -89,7 +106,6 @@ export default createTranslationMessages({
     'app.learningPaths.title': 'Rutas de aprendizaje',
     'app.learningPaths.error.title': 'No se pudieron obtener los datos.',
     'app.learningPaths.error.unknownError': 'Error desconocido',
-    'app.entityPage.diagram.title': 'Diagrama del sistema',
     'app.userSettings.infoCard.title': 'Metadatos RHDH',
     'app.userSettings.infoCard.metadataCopied':
       'Metadatos copiados al portapapeles',

packages/app/src/translations/rhdh/fr.ts

@@ -43,6 +43,23 @@ export default createTranslationMessages({
     'menuItem.orchestrator': 'Orchestrateur',
     'menuItem.adoptionInsights': "Insights d'adoption",
 
+    'catalog.entityPage.overview.title': 'Aperçu',
+    'catalog.entityPage.topology.title': 'Topologie',
+    'catalog.entityPage.issues.title': 'Problèmes',
+    'catalog.entityPage.pullRequests.title': 'Pull/Merge Requests',
+    'catalog.entityPage.ci.title': 'CI',
+    'catalog.entityPage.cd.title': 'CD',
+    'catalog.entityPage.kubernetes.title': 'Kubernetes',
+    'catalog.entityPage.imageRegistry.title': "Registre d'Images",
+    'catalog.entityPage.monitoring.title': 'Surveillance',
+    'catalog.entityPage.lighthouse.title': 'Lighthouse',
+    'catalog.entityPage.api.title': 'API',
+    'catalog.entityPage.dependencies.title': 'Dépendances',
+    'catalog.entityPage.docs.title': 'Documentation',
+    'catalog.entityPage.definition.title': 'Définition',
+    'catalog.entityPage.diagram.title': 'Diagramme du Système',
+    'catalog.entityPage.workflows.title': 'Flux de travail',
+
     'sidebar.menu': 'Menu',
     'sidebar.home': 'Accueil',
     'sidebar.homeLogo': "Logo d'accueil",
@@ -89,7 +106,6 @@ export default createTranslationMessages({
     'app.learningPaths.title': "Parcours d'apprentissage",
     'app.learningPaths.error.title': 'Impossible de récupérer les données.',
     'app.learningPaths.error.unknownError': 'Erreur inconnue',
-    'app.entityPage.diagram.title': 'Diagramme système',
     'app.userSettings.infoCard.title': 'Métadonnées RHDH',
     'app.userSettings.infoCard.metadataCopied':
       'Métadonnées copiées dans le presse-papiers',

packages/app/src/translations/rhdh/it.ts

@@ -43,6 +43,23 @@ export default createTranslationMessages({
     'menuItem.orchestrator': 'Orchestratore',
     'menuItem.adoptionInsights': 'Insights di adozione',
 
+    'catalog.entityPage.overview.title': 'Panoramica',
+    'catalog.entityPage.topology.title': 'Topologia',
+    'catalog.entityPage.issues.title': 'Problemi',
+    'catalog.entityPage.pullRequests.title': 'Pull/Merge Requests',
+    'catalog.entityPage.ci.title': 'CI',
+    'catalog.entityPage.cd.title': 'CD',
+    'catalog.entityPage.kubernetes.title': 'Kubernetes',
+    'catalog.entityPage.imageRegistry.title': 'Registro Immagini',
+    'catalog.entityPage.monitoring.title': 'Monitoraggio',
+    'catalog.entityPage.lighthouse.title': 'Lighthouse',
+    'catalog.entityPage.api.title': 'API',
+    'catalog.entityPage.dependencies.title': 'Dipendenze',
+    'catalog.entityPage.docs.title': 'Documentazione',
+    'catalog.entityPage.definition.title': 'Definizione',
+    'catalog.entityPage.diagram.title': 'Diagramma del Sistema',
+    'catalog.entityPage.workflows.title': 'Flussi di lavoro',
+
     'sidebar.menu': 'Menu',
     'sidebar.home': 'Home',
     'sidebar.homeLogo': 'Logo principale',
@@ -88,7 +105,6 @@ export default createTranslationMessages({
     'app.learningPaths.title': 'Percorsi di apprendimento',
     'app.learningPaths.error.title': 'Impossibile recuperare i dati.',
     'app.learningPaths.error.unknownError': 'Errore sconosciuto',
-    'app.entityPage.diagram.title': 'Diagramma di sistema',
     'app.userSettings.infoCard.title': 'Metadati RHDH',
     'app.userSettings.infoCard.metadataCopied':
       'Metadati copiati negli appunti',

packages/app/src/translations/rhdh/ref.ts

@@ -103,6 +103,58 @@ export const rhdhMessages = {
       },
     },
   },
+  catalog: {
+    entityPage: {
+      overview: {
+        title: 'Overview',
+      },
+      topology: {
+        title: 'Topology',
+      },
+      issues: {
+        title: 'Issues',
+      },
+      pullRequests: {
+        title: 'Pull/Merge Requests',
+      },
+      ci: {
+        title: 'CI',
+      },
+      cd: {
+        title: 'CD',
+      },
+      kubernetes: {
+        title: 'Kubernetes',
+      },
+      imageRegistry: {
+        title: 'Image Registry',
+      },
+      monitoring: {
+        title: 'Monitoring',
+      },
+      lighthouse: {
+        title: 'Lighthouse',
+      },
+      api: {
+        title: 'API',
+      },
+      dependencies: {
+        title: 'Dependencies',
+      },
+      docs: {
+        title: 'Docs',
+      },
+      definition: {
+        title: 'Definition',
+      },
+      diagram: {
+        title: 'System Diagram',
+      },
+      workflows: {
+        title: 'Workflows',
+      },
+    },
+  },
   app: {
     scaffolder: {
       title: 'Self-service',
@@ -127,11 +179,6 @@ export const rhdhMessages = {
         unknownError: 'Unknown error',
       },
     },
-    entityPage: {
-      diagram: {
-        title: 'System Diagram',
-      },
-    },
     userSettings: {
       infoCard: {
         title: 'RHDH Metadata',