Internationalization: Translate page headers and Search dashboard actions (#60727)

* Fix: PageHeader & PageHeaderTabs & NavBarItem & DashboardActions & PanelMenu is displayed in default_language (#60719)

* I18N: update strings (#60719)

Co-authored-by: TaitChan <1441645821@qq.coom>

public/app/core/components/NavBar/navBarItem-translations.ts

@@ -13,6 +13,8 @@ export function getNavTitle(navId: string | undefined) {
   switch (navId) {
     case 'home':
       return t('nav.home.title', 'Home');
+    case 'new':
+      return t('nav.new.title', 'New');
     case 'create':
       return t('nav.create.title', 'Create');
     case 'create-dashboard':
@@ -43,6 +45,8 @@ export function getNavTitle(navId: string | undefined) {
       return t('nav.new-dashboard.title', 'New dashboard');
     case 'dashboards/folder/new':
       return t('nav.new-folder.title', 'New folder');
+    case 'dashboards/import':
+      return t('nav.create-import.title', 'Import');
     case 'scenes':
       return t('nav.scenes.title', 'Scenes');
     case 'explore':

public/app/core/components/PageHeader/PageHeader.tsx

@@ -3,6 +3,7 @@ import React, { FC } from 'react';
 
 import { NavModelItem, NavModelBreadcrumb, GrafanaTheme2 } from '@grafana/data';
 import { Tab, TabsBar, Icon, useStyles2, toIconName } from '@grafana/ui';
+import { getNavTitle, getNavSubTitle } from 'app/core/components/NavBar/navBarItem-translations';
 import { PanelHeaderMenuItem } from 'app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem';
 
 import { PageInfoItem } from '../Page/types';
@@ -71,7 +72,7 @@ const Navigation = ({ children }: { children: NavModelItem[] }) => {
           return (
             !child.hideFromTabs && (
               <Tab
-                label={child.text}
+                label={getNavTitle(child.id) ?? child.text}
                 active={child.active}
                 key={`${child.url}-${index}`}
                 icon={child.icon}
@@ -96,19 +97,18 @@ export const PageHeader: FC<Props> = ({ navItem: model, renderTitle, actions, in
   const renderHeader = (main: NavModelItem) => {
     const marginTop = main.icon === 'grafana' ? 12 : 14;
     const icon = main.icon && toIconName(main.icon);
-    const sub = subTitle ?? main.subTitle;
+    const sub = subTitle ?? getNavSubTitle(main.id) ?? main.subTitle;
+    const text = getNavTitle(main.id) ?? main.text;
 
     return (
       <div className="page-header__inner">
         <span className="page-header__logo">
           {icon && <Icon name={icon} size="xxxl" style={{ marginTop }} />}
-          {main.img && <img className="page-header__img" src={main.img} alt={`logo of ${main.text}`} />}
+          {main.img && <img className="page-header__img" src={main.img} alt={`logo of ${text}`} />}
         </span>
 
         <div className={cx('page-header__info-block', styles.headerText)}>
-          {renderTitle
-            ? renderTitle(main.text)
-            : renderHeaderTitle(main.text, main.breadcrumbs ?? [], main.highlightText)}
+          {renderTitle ? renderTitle(text) : renderHeaderTitle(text, main.breadcrumbs ?? [], main.highlightText)}
           {info && <PageInfo info={info} />}
           {sub && <div className="page-header__sub-title">{sub}</div>}
           {actions && <div className={styles.actions}>{actions}</div>}

public/app/features/dashboard/utils/getPanelMenu.ts

@@ -109,9 +109,8 @@ export function getPanelMenu(
   const menu: PanelMenuItem[] = [];
 
   if (!panel.isEditing) {
-    const viewTextTranslation = t('panel.header-menu.view', `View`);
     menu.push({
-      text: viewTextTranslation,
+      text: t('panel.header-menu.view', `View`),
       iconClassName: 'eye',
       onClick: onViewPanel,
       shortcut: 'v',
@@ -120,7 +119,7 @@ export function getPanelMenu(
 
   if (dashboard.canEditPanel(panel) && !panel.isEditing) {
     menu.push({
-      text: 'Edit',
+      text: t('panel.header-menu.edit', `Edit`),
       iconClassName: 'edit',
       onClick: onEditPanel,
       shortcut: 'e',
@@ -138,10 +137,8 @@ export function getPanelMenu(
     });
   }
 
-  const shareTextTranslation = t('panel.header-menu.share', `Share`);
-
   menu.push({
-    text: shareTextTranslation,
+    text: t('panel.header-menu.share', `Share`),
     iconClassName: 'share-alt',
     onClick: onSharePanel,
     shortcut: 'p s',
@@ -149,7 +146,7 @@ export function getPanelMenu(
 
   if (contextSrv.hasAccessToExplore() && !(panel.plugin && panel.plugin.meta.skipDataQuery)) {
     menu.push({
-      text: 'Explore',
+      text: t('panel.header-menu.explore', `Explore`),
       iconClassName: 'compass',
       onClick: onNavigateToExplore,
       shortcut: 'x',
@@ -160,33 +157,27 @@ export function getPanelMenu(
 
   // Only show these inspect actions for data plugins
   if (panel.plugin && !panel.plugin.meta.skipDataQuery) {
-    const dataTextTranslation = t('panel.header-menu.inspect-data', `Data`);
-
     inspectMenu.push({
-      text: dataTextTranslation,
+      text: t('panel.header-menu.inspect-data', `Data`),
       onClick: (e: React.MouseEvent<any>) => onInspectPanel(InspectTab.Data),
     });
 
     if (dashboard.meta.canEdit) {
       inspectMenu.push({
-        text: 'Query',
+        text: t('panel.header-menu.query', `Query`),
         onClick: (e: React.MouseEvent<any>) => onInspectPanel(InspectTab.Query),
       });
     }
   }
 
-  const jsonTextTranslation = t('panel.header-menu.inspect-json', `Panel JSON`);
-
   inspectMenu.push({
-    text: jsonTextTranslation,
+    text: t('panel.header-menu.inspect-json', `Panel JSON`),
     onClick: (e: React.MouseEvent<any>) => onInspectPanel(InspectTab.JSON),
   });
 
-  const inspectTextTranslation = t('panel.header-menu.inspect', `Inspect`);
-
   menu.push({
     type: 'submenu',
-    text: inspectTextTranslation,
+    text: t('panel.header-menu.inspect', `Inspect`),
     iconClassName: 'info-circle',
     onClick: (e: React.MouseEvent<any>) => onInspectPanel(),
     shortcut: 'i',
@@ -198,24 +189,24 @@ export function getPanelMenu(
 
   if (canEdit && !(panel.isViewing || panel.isEditing)) {
     subMenu.push({
-      text: 'Duplicate',
+      text: t('panel.header-menu.duplicate', `Duplicate`),
       onClick: onDuplicatePanel,
       shortcut: 'p d',
     });
 
     subMenu.push({
-      text: 'Copy',
+      text: t('panel.header-menu.copy', `Copy`),
       onClick: onCopyPanel,
     });
 
     if (isPanelModelLibraryPanel(panel)) {
       subMenu.push({
-        text: 'Unlink library panel',
+        text: t('panel.header-menu.unlink-library-panel', `Unlink library panel`),
         onClick: onUnlinkLibraryPanel,
       });
     } else {
       subMenu.push({
-        text: 'Create library panel',
+        text: t('panel.header-menu.create-library-panel', `Create library panel`),
         onClick: onAddLibraryPanel,
       });
     }
@@ -261,16 +252,15 @@ export function getPanelMenu(
 
   if (canEdit && panel.plugin && !panel.plugin.meta.skipDataQuery) {
     subMenu.push({
-      text: 'Get help',
+      text: t('panel.header-menu.get-help', 'Get help'),
       onClick: (e: React.MouseEvent) => onInspectPanel(InspectTab.Help),
     });
   }
 
   if (subMenu.length) {
-    const moreTextTranslation = t('panel.header-menu.more', `More...`);
     menu.push({
       type: 'submenu',
-      text: moreTextTranslation,
+      text: t('panel.header-menu.more', `More...`),
       iconClassName: 'cube',
       subMenu,
       onClick: onMore,
@@ -281,7 +271,7 @@ export function getPanelMenu(
     menu.push({ type: 'divider', text: '' });
 
     menu.push({
-      text: 'Remove',
+      text: t('panel.header-menu.remove', `Remove`),
       iconClassName: 'trash-alt',
       onClick: onRemovePanel,
       shortcut: 'p r',

public/app/features/search/components/DashboardActions.tsx

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 
 import { config } from '@grafana/runtime';
 import { Menu, Dropdown, Button, Icon } from '@grafana/ui';
+import { t } from 'app/core/internationalization';
 
 export interface Props {
   folderUid?: string;
@@ -28,11 +29,15 @@ export const DashboardActions: FC<Props> = ({ folderUid, canCreateFolders = fals
   const MenuActions = () => {
     return (
       <Menu>
-        {canCreateDashboards && <Menu.Item url={actionUrl('new')} label="New Dashboard" />}
-        {canCreateFolders && (config.featureToggles.nestedFolders || !folderUid) && (
-          <Menu.Item url={actionUrl('new_folder')} label="New Folder" />
+        {canCreateDashboards && (
+          <Menu.Item url={actionUrl('new')} label={t('search.dashboard-actions.new-dashboard', 'New Dashboard')} />
+        )}
+        {canCreateFolders && (config.featureToggles.nestedFolders || !folderUid) && (
+          <Menu.Item url={actionUrl('new_folder')} label={t('search.dashboard-actions.new-folder', 'New Folder')} />
+        )}
+        {canCreateDashboards && (
+          <Menu.Item url={actionUrl('import')} label={t('search.dashboard-actions.import', 'Import')} />
         )}
-        {canCreateDashboards && <Menu.Item url={actionUrl('import')} label="Import" />}
       </Menu>
     );
   };
@@ -41,7 +46,7 @@ export const DashboardActions: FC<Props> = ({ folderUid, canCreateFolders = fals
     <div>
       <Dropdown overlay={MenuActions} placement="bottom-start">
         <Button variant="primary">
-          New
+          {t('search.dashboard-actions.new', 'New')}
           <Icon name="angle-down" />
         </Button>
       </Dropdown>

public/locales/de-DE/grafana.json

@@ -253,6 +253,9 @@
       "subtitle": "Überwachungs- und Infrastruktur-Apps",
       "title": "Überwachung"
     },
+    "new": {
+      "title": ""
+    },
     "new-dashboard": {
       "title": "Neues Dashboard"
     },
@@ -347,13 +350,22 @@
   },
   "panel": {
     "header-menu": {
+      "copy": "",
+      "create-library-panel": "",
+      "duplicate": "",
+      "edit": "",
+      "explore": "",
+      "get-help": "",
       "hide-legend": "Legende ausblenden",
       "inspect": "Überprüfen",
       "inspect-data": "Daten",
       "inspect-json": "Panel-JSON",
       "more": "Mehr …",
+      "query": "",
+      "remove": "",
       "share": "Teilen",
       "show-legend": "Legende anzeigen",
+      "unlink-library-panel": "",
       "view": "Anzeigen"
     }
   },
@@ -374,6 +386,14 @@
       "auto-refresh": "Automatisches Aktualisierungsintervall festlegen"
     }
   },
+  "search": {
+    "dashboard-actions": {
+      "import": "",
+      "new": "",
+      "new-dashboard": "",
+      "new-folder": ""
+    }
+  },
   "share-modal": {
     "dashboard": {
       "title": "Teilen"

public/locales/en-US/grafana.json

@@ -253,6 +253,9 @@
       "subtitle": "Monitoring and infrastructure apps",
       "title": "Monitoring"
     },
+    "new": {
+      "title": "New"
+    },
     "new-dashboard": {
       "title": "New dashboard"
     },
@@ -347,13 +350,22 @@
   },
   "panel": {
     "header-menu": {
+      "copy": "Copy",
+      "create-library-panel": "Create library panel",
+      "duplicate": "Duplicate",
+      "edit": "Edit",
+      "explore": "Explore",
+      "get-help": "Get help",
       "hide-legend": "Hide legend",
       "inspect": "Inspect",
       "inspect-data": "Data",
       "inspect-json": "Panel JSON",
       "more": "More...",
+      "query": "Query",
+      "remove": "Remove",
       "share": "Share",
       "show-legend": "Show legend",
+      "unlink-library-panel": "Unlink library panel",
       "view": "View"
     }
   },
@@ -374,6 +386,14 @@
       "auto-refresh": "Set auto refresh interval"
     }
   },
+  "search": {
+    "dashboard-actions": {
+      "import": "Import",
+      "new": "New",
+      "new-dashboard": "New Dashboard",
+      "new-folder": "New Folder"
+    }
+  },
   "share-modal": {
     "dashboard": {
       "title": "Share"

public/locales/es-ES/grafana.json

@@ -253,6 +253,9 @@
       "subtitle": "Aplicaciones de supervisión e infraestructura",
       "title": "Seguimiento"
     },
+    "new": {
+      "title": ""
+    },
     "new-dashboard": {
       "title": "Nuevo panel de control"
     },
@@ -347,13 +350,22 @@
   },
   "panel": {
     "header-menu": {
+      "copy": "",
+      "create-library-panel": "",
+      "duplicate": "",
+      "edit": "",
+      "explore": "",
+      "get-help": "",
       "hide-legend": "Ocultar leyenda",
       "inspect": "Inspeccionar",
       "inspect-data": "Datos",
       "inspect-json": "JSON de panel",
       "more": "Más...",
+      "query": "",
+      "remove": "",
       "share": "Compartir",
       "show-legend": "Mostrar leyenda",
+      "unlink-library-panel": "",
       "view": "Vista"
     }
   },
@@ -374,6 +386,14 @@
       "auto-refresh": "Establecer intervalo de actualización automática"
     }
   },
+  "search": {
+    "dashboard-actions": {
+      "import": "",
+      "new": "",
+      "new-dashboard": "",
+      "new-folder": ""
+    }
+  },
   "share-modal": {
     "dashboard": {
       "title": "Compartir"

public/locales/fr-FR/grafana.json

@@ -253,6 +253,9 @@
       "subtitle": "Applications de suivi et d'infrastructure",
       "title": "Suivi"
     },
+    "new": {
+      "title": ""
+    },
     "new-dashboard": {
       "title": "Nouveau tableau de bord"
     },
@@ -347,13 +350,22 @@
   },
   "panel": {
     "header-menu": {
+      "copy": "",
+      "create-library-panel": "",
+      "duplicate": "",
+      "edit": "",
+      "explore": "",
+      "get-help": "",
       "hide-legend": "Masquer la légende",
       "inspect": "Inspecter",
       "inspect-data": "Données",
       "inspect-json": "Panneau JSON",
       "more": "Plus...",
+      "query": "",
+      "remove": "",
       "share": "Partager",
       "show-legend": "Afficher la légende",
+      "unlink-library-panel": "",
       "view": "Afficher"
     }
   },
@@ -374,6 +386,14 @@
       "auto-refresh": "Définir l'intervalle d'actualisation automatique"
     }
   },
+  "search": {
+    "dashboard-actions": {
+      "import": "",
+      "new": "",
+      "new-dashboard": "",
+      "new-folder": ""
+    }
+  },
   "share-modal": {
     "dashboard": {
       "title": "Partager"

public/locales/pseudo-LOCALE/grafana.json

@@ -253,6 +253,9 @@
       "subtitle": "Mőʼnįŧőřįʼnģ äʼnđ įʼnƒřäşŧřūčŧūřę äppş",
       "title": "Mőʼnįŧőřįʼnģ"
     },
+    "new": {
+      "title": "Ńęŵ"
+    },
     "new-dashboard": {
       "title": "Ńęŵ đäşĥþőäřđ"
     },
@@ -347,13 +350,22 @@
   },
   "panel": {
     "header-menu": {
+      "copy": "Cőpy",
+      "create-library-panel": "Cřęäŧę ľįþřäřy päʼnęľ",
+      "duplicate": "Đūpľįčäŧę",
+      "edit": "Ēđįŧ",
+      "explore": "Ēχpľőřę",
+      "get-help": "Ğęŧ ĥęľp",
       "hide-legend": "Ħįđę ľęģęʼnđ",
       "inspect": "Ĩʼnşpęčŧ",
       "inspect-data": "Đäŧä",
       "inspect-json": "Päʼnęľ ĴŜØŃ",
       "more": "Mőřę...",
+      "query": "Qūęřy",
+      "remove": "Ŗęmővę",
       "share": "Ŝĥäřę",
       "show-legend": "Ŝĥőŵ ľęģęʼnđ",
+      "unlink-library-panel": "Ůʼnľįʼnĸ ľįþřäřy päʼnęľ",
       "view": "Vįęŵ"
     }
   },
@@ -374,6 +386,14 @@
       "auto-refresh": "Ŝęŧ äūŧő řęƒřęşĥ įʼnŧęřväľ"
     }
   },
+  "search": {
+    "dashboard-actions": {
+      "import": "Ĩmpőřŧ",
+      "new": "Ńęŵ",
+      "new-dashboard": "Ńęŵ Đäşĥþőäřđ",
+      "new-folder": "Ńęŵ Főľđęř"
+    }
+  },
   "share-modal": {
     "dashboard": {
       "title": "Ŝĥäřę"
@@ -554,4 +574,4 @@
       "option-tooltip": "Cľęäř şęľęčŧįőʼnş"
     }
   }
-}
+}

public/locales/zh-Hans/grafana.json

@@ -253,6 +253,9 @@
       "subtitle": "监控和基础设施应用",
       "title": "正在监控"
     },
+    "new": {
+      "title": ""
+    },
     "new-dashboard": {
       "title": "新建仪表板"
     },
@@ -347,13 +350,22 @@
   },
   "panel": {
     "header-menu": {
+      "copy": "",
+      "create-library-panel": "",
+      "duplicate": "",
+      "edit": "",
+      "explore": "",
+      "get-help": "",
       "hide-legend": "",
       "inspect": "检查",
       "inspect-data": "数据",
       "inspect-json": "面板 JSON",
       "more": "更多...",
+      "query": "",
+      "remove": "",
       "share": "分享",
       "show-legend": "",
+      "unlink-library-panel": "",
       "view": "查看"
     }
   },
@@ -374,6 +386,14 @@
       "auto-refresh": ""
     }
   },
+  "search": {
+    "dashboard-actions": {
+      "import": "",
+      "new": "",
+      "new-dashboard": "",
+      "new-folder": ""
+    }
+  },
   "share-modal": {
     "dashboard": {
       "title": "分享"