I18n: Translate navigation items (#44131)

* I18n: Translate navigation items * improve comment, remove console.log * update mock macros * Mark up all phrases for translation * added deprecate text comment, moved translations to a seperate file * use TestProvider in NavBarItem * use TestProvider in nav tests * remove text deprecation comment * update translations
2025-02-25 18:55:37 -06:00 · 2022-01-31 13:41:58 +11:00 · 2022-01-31 13:41:58 +11:00 · c6ce629fd8
commit c6ce629fd8
parent b1b6205651
12 changed files with 749 additions and 25 deletions
--- a/pkg/api/index.go
+++ b/pkg/api/index.go
@ -330,7 +330,7 @@ func (hs *HTTPServer) getNavTree(c *models.ReqContext, hasEditPerm bool) ([]*dto
 		navTree = append(navTree, &dtos.NavLink{
 			Id:           "live",
 			Text:         "Live",
-			SubTitle:     "Event Streaming",
+			SubTitle:     "Event streaming",
 			Icon:         "exchange-alt",
 			Url:          hs.Cfg.AppSubURL + "/live",
 			Children:     liveNavLinks,
@ -425,11 +425,11 @@ func (hs *HTTPServer) buildDashboardNavLinks(c *models.ReqContext, hasEditPerm b
 			Text: "Divider", Divider: true, Id: "divider", HideFromTabs: true,
 		})
 		dashboardChildNavs = append(dashboardChildNavs, &dtos.NavLink{
-			Text: "New dashboard", Icon: "plus", Url: hs.Cfg.AppSubURL + "/dashboard/new", HideFromTabs: true,
+			Text: "New dashboard", Icon: "plus", Url: hs.Cfg.AppSubURL + "/dashboard/new", HideFromTabs: true, Id: "new-dashboard",
 		})
 		if c.OrgRole == models.ROLE_ADMIN || c.OrgRole == models.ROLE_EDITOR {
 			dashboardChildNavs = append(dashboardChildNavs, &dtos.NavLink{
-				Text: "New folder", SubTitle: "Create a new folder to organize your dashboards", Id: "folder",
+				Text: "New folder", SubTitle: "Create a new folder to organize your dashboards", Id: "new-folder",
 				Icon: "plus", Url: hs.Cfg.AppSubURL + "/dashboards/folder/new", HideFromTabs: true,
 			})
 		}
@ -475,7 +475,7 @@ func (hs *HTTPServer) buildAlertNavLinks(c *models.ReqContext, uaVisibleForOrg b

 func (hs *HTTPServer) buildCreateNavLinks(c *models.ReqContext) []*dtos.NavLink {
 	children := []*dtos.NavLink{
-		{Text: "Dashboard", Icon: "apps", Url: hs.Cfg.AppSubURL + "/dashboard/new"},
+		{Text: "Dashboard", Icon: "apps", Url: hs.Cfg.AppSubURL + "/dashboard/new", Id: "create-dashboard"},
 	}
 	if c.OrgRole == models.ROLE_ADMIN || c.OrgRole == models.ROLE_EDITOR {
 		children = append(children, &dtos.NavLink{
--- a/public/app/core/components/NavBar/NavBar.test.tsx
+++ b/public/app/core/components/NavBar/NavBar.test.tsx
@ -1,10 +1,11 @@
 import React from 'react';
-import { NavBar } from './NavBar';
-import { render, screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
 import { Router } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
 import { locationService } from '@grafana/runtime';
 import { configureStore } from 'app/store/configureStore';
-import { Provider } from 'react-redux';
+import TestProvider from '../../../../test/helpers/TestProvider';
+import { NavBar } from './NavBar';

 jest.mock('app/core/services/context_srv', () => ({
  contextSrv: {
@ -22,9 +23,11 @@ const setup = () => {

  return render(
    <Provider store={store}>
-      <Router history={locationService.getHistory()}>
-        <NavBar />
-      </Router>
+      <TestProvider>
+        <Router history={locationService.getHistory()}>
+          <NavBar />
+        </Router>
+      </TestProvider>
    </Provider>
  );
 };
--- a/public/app/core/components/NavBar/NavBarItem.test.tsx
+++ b/public/app/core/components/NavBar/NavBarItem.test.tsx
@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { BrowserRouter } from 'react-router-dom';
 import { locationUtil } from '@grafana/data';
 import { config, setLocationService } from '@grafana/runtime';
+import TestProvider from '../../../../test/helpers/TestProvider';

 import NavBarItem, { Props } from './NavBarItem';

@ -30,9 +31,11 @@ function getTestContext(overrides: Partial<Props> = {}, subUrl = '') {
  const props = { ...defaults, ...overrides };

  const { rerender } = render(
-    <BrowserRouter>
-      <NavBarItem {...props}>{props.children}</NavBarItem>
-    </BrowserRouter>
+    <TestProvider>
+      <BrowserRouter>
+        <NavBarItem {...props}>{props.children}</NavBarItem>
+      </BrowserRouter>
+    </TestProvider>
  );

  return { rerender, pushMock };
--- a/public/app/core/components/NavBar/NavBarItem.tsx
+++ b/public/app/core/components/NavBar/NavBarItem.tsx
@ -10,6 +10,8 @@ import { getNavBarItemWithoutMenuStyles, NavBarItemWithoutMenu } from './NavBarI
 import { NavBarItemMenuTrigger } from './NavBarItemMenuTrigger';
 import { NavBarItemMenu } from './NavBarItemMenu';
 import { getNavModelItemKey } from './utils';
+import { useLingui } from '@lingui/react';
+import menuItemTranslations from './navBarItem-translations';

 export interface Props {
  isActive?: boolean;
@ -28,6 +30,7 @@ const NavBarItem = ({
  showMenu = true,
  link,
 }: Props) => {
+  const { i18n } = useLingui();
  const theme = useTheme2();
  const menuItems = link.children ?? [];
  const menuItemsSorted = reverseMenuDirection ? menuItems.reverse() : menuItems;
@ -57,9 +60,12 @@ const NavBarItem = ({
    }
  };

+  const translationKey = link.id && menuItemTranslations[link.id];
+  const linkText = translationKey ? i18n._(translationKey) : link.text;
+
  return showMenu ? (
    <li className={cx(styles.container, className)}>
-      <NavBarItemMenuTrigger item={section} isActive={isActive} label={link.text}>
+      <NavBarItemMenuTrigger item={section} isActive={isActive} label={linkText}>
        <NavBarItemMenu
          items={items}
          reverseMenuDirection={reverseMenuDirection}
@ -69,12 +75,15 @@ const NavBarItem = ({
          onNavigate={onNavigate}
        >
          {(item: NavModelItem) => {
+            const translationKey = item.id && menuItemTranslations[item.id];
+            const itemText = translationKey ? i18n._(translationKey) : item.text;
+
            if (item.menuItemType === NavMenuItemType.Section) {
              return (
                <Item key={getNavModelItemKey(item)} textValue={item.text}>
                  <NavBarMenuItem
                    target={item.target}
-                    text={item.text}
+                    text={itemText}
                    url={item.url}
                    onClick={item.onClick}
                    styleOverrides={styles.header}
@ -90,7 +99,7 @@ const NavBarItem = ({
                  icon={item.icon as IconName}
                  onClick={item.onClick}
                  target={item.target}
-                  text={item.text}
+                  text={itemText}
                  url={item.url}
                  styleOverrides={styles.item}
                />
--- a/public/app/core/components/NavBar/NavBarMenuItem.tsx
+++ b/public/app/core/components/NavBar/NavBarMenuItem.tsx
@ -10,7 +10,7 @@ export interface Props {
  onClick?: () => void;
  styleOverrides?: string;
  target?: HTMLAnchorElement['target'];
-  text: string;
+  text: React.ReactNode;
  url?: string;
  adjustHeightForBorder?: boolean;
  isMobile?: boolean;
--- a/public/app/core/components/NavBar/NavBarNext.test.tsx
+++ b/public/app/core/components/NavBar/NavBarNext.test.tsx
@ -1,10 +1,11 @@
 import React from 'react';
-import { NavBarNext } from './NavBarNext';
-import { render, screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
 import { Router } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
 import { locationService } from '@grafana/runtime';
 import { configureStore } from 'app/store/configureStore';
-import { Provider } from 'react-redux';
+import TestProvider from '../../../../test/helpers/TestProvider';
+import { NavBarNext } from './NavBarNext';

 jest.mock('app/core/services/context_srv', () => ({
  contextSrv: {
@ -22,9 +23,11 @@ const setup = () => {

  return render(
    <Provider store={store}>
-      <Router history={locationService.getHistory()}>
-        <NavBarNext />
-      </Router>
+      <TestProvider>
+        <Router history={locationService.getHistory()}>
+          <NavBarNext />
+        </Router>
+      </TestProvider>
    </Provider>
  );
 };
--- a/public/app/core/components/NavBar/navBarItem-translations.ts
+++ b/public/app/core/components/NavBar/navBarItem-translations.ts
@ -0,0 +1,59 @@
+import { defineMessage } from '@lingui/macro';
+import { MessageDescriptor } from '@lingui/core';
+
+// Maps the ID of the nav item to a translated phrase to later pass to <Trans />
+// Because the navigation content is dynamic (defined in the backend), we can not use
+// the normal inline message definition method.
+// Keys MUST match the ID of the navigation item, defined in the backend.
+// see pkg/api/index.go
+const TRANSLATED_MENU_ITEMS: Record<string, MessageDescriptor> = {
+  home: defineMessage({ id: 'nav.home', message: 'Home' }),
+
+  create: defineMessage({ id: 'nav.create', message: 'Create' }),
+  'create-dashboard': defineMessage({ id: 'nav.create-dashboard', message: 'Dashboard' }),
+  folder: defineMessage({ id: 'nav.create-folder', message: 'Folder' }),
+  import: defineMessage({ id: 'nav.create-import', message: 'Import' }),
+  alert: defineMessage({ id: 'nav.create-alert', message: 'Alert rule' }),
+
+  dashboards: defineMessage({ id: 'nav.dashboards', message: 'Dashboards' }),
+  'manage-dashboards': defineMessage({ id: 'nav.manage-dashboards', message: 'Browse' }),
+  playlists: defineMessage({ id: 'nav.playlists', message: 'Playlists' }),
+  snapshots: defineMessage({ id: 'nav.snapshots', message: 'Snapshots' }),
+  'library-panels': defineMessage({ id: 'nav.library-panels', message: 'Library panels' }),
+  'new-dashboard': defineMessage({ id: 'nav.new-dashboard', message: 'New dashboard' }),
+  'new-folder': defineMessage({ id: 'nav.new-folder', message: 'New folder' }),
+
+  explore: defineMessage({ id: 'nav.explore', message: 'Explore' }),
+
+  alerting: defineMessage({ id: 'nav.alerting', message: 'Alerting' }),
+  'alert-list': defineMessage({ id: 'nav.alerting-list', message: 'Alert rules' }),
+  receivers: defineMessage({ id: 'nav.alerting-receivers', message: 'Contact points' }),
+  'am-routes': defineMessage({ id: 'nav.alerting-am-routes', message: 'Notification policies' }),
+  channels: defineMessage({ id: 'nav.alerting-channels', message: 'Notification channels' }),
+
+  silences: defineMessage({ id: 'nav.alerting-silences', message: 'Silences' }),
+  groups: defineMessage({ id: 'nav.alerting-groups', message: 'Groups' }),
+  'alerting-admin': defineMessage({ id: 'nav.alerting-admin', message: 'Admin' }),
+
+  cfg: defineMessage({ id: 'nav.config', message: 'Configuration' }),
+  datasources: defineMessage({ id: 'nav.datasources', message: 'Data sources' }),
+  users: defineMessage({ id: 'nav.users', message: 'Users' }),
+  teams: defineMessage({ id: 'nav.teams', message: 'Teams' }),
+  plugins: defineMessage({ id: 'nav.plugins', message: 'Plugins' }),
+  'org-settings': defineMessage({ id: 'nav.org-settings', message: 'Preferences' }),
+  apikeys: defineMessage({ id: 'nav.api-keys', message: 'API keys' }),
+  serviceaccounts: defineMessage({ id: 'nav.service-accounts', message: 'Service accounts' }),
+
+  live: defineMessage({ id: 'nav.live', message: 'Event streaming' }),
+  'live-status': defineMessage({ id: 'nav.live-status', message: 'Status' }),
+  'live-pipeline': defineMessage({ id: 'nav.live-pipeline', message: 'Pipeline' }),
+  'live-cloud': defineMessage({ id: 'nav.live-cloud', message: 'Cloud' }),
+
+  help: defineMessage({ id: 'nav.help', message: 'Help' }),
+
+  'profile-settings': defineMessage({ id: 'nav.profile-settings', message: 'Preferences' }),
+  'change-password': defineMessage({ id: 'nav.change-password', message: 'Change password' }),
+  'sign-out': defineMessage({ id: 'nav.sign-out', message: 'Sign out' }),
+};
+
+export default TRANSLATED_MENU_ITEMS;
--- a/public/locales/en/messages.po
+++ b/public/locales/en/messages.po
@ -18,6 +18,166 @@ msgstr ""
 msgid "common.save"
 msgstr "Save"

+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting"
+msgstr "Alerting"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-admin"
+msgstr "Admin"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-am-routes"
+msgstr "Notification policies"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-channels"
+msgstr "Notification channels"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-groups"
+msgstr "Groups"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-list"
+msgstr "Alert rules"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-receivers"
+msgstr "Contact points"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-silences"
+msgstr "Silences"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.api-keys"
+msgstr "API keys"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.change-password"
+msgstr "Change password"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.config"
+msgstr "Configuration"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.create"
+msgstr "Create"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.create-alert"
+msgstr "Alert rule"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.create-dashboard"
+msgstr "Dashboard"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.create-folder"
+msgstr "Folder"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.create-import"
+msgstr "Import"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.dashboards"
+msgstr "Dashboards"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.datasources"
+msgstr "Data sources"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.explore"
+msgstr "Explore"
+
+#: public/app/core/components/NavBar/NavBarItem.tsx
+#~ msgid "nav.folder"
+#~ msgstr "New folder"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.help"
+msgstr "Help"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.home"
+msgstr "Home"
+
+#: public/app/core/components/NavBar/NavBarItem.tsx
+#~ msgid "nav.import"
+#~ msgstr "Import"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.library-panels"
+msgstr "Library panels"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.live"
+msgstr "Event streaming"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.live-cloud"
+msgstr "Cloud"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.live-pipeline"
+msgstr "Pipeline"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.live-status"
+msgstr "Status"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.manage-dashboards"
+msgstr "Browse"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.new-dashboard"
+msgstr "New dashboard"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.new-folder"
+msgstr "New folder"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.org-settings"
+msgstr "Preferences"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.playlists"
+msgstr "Playlists"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.plugins"
+msgstr "Plugins"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.profile-settings"
+msgstr "Preferences"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.service-accounts"
+msgstr "Service accounts"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.sign-out"
+msgstr "Sign out"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.snapshots"
+msgstr "Snapshots"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.teams"
+msgstr "Teams"
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.users"
+msgstr "Users"
+
 #: public/app/core/components/SharedPreferences/SharedPreferences.tsx
 msgid "shared-dashboard.fields.timezone-label"
 msgstr "Timezone"
--- a/public/locales/es/messages.po
+++ b/public/locales/es/messages.po
@ -18,6 +18,166 @@ msgstr ""
 msgid "common.save"
 msgstr ""

+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-admin"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-am-routes"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-channels"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-groups"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-list"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-receivers"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-silences"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.api-keys"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.change-password"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.config"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.create"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.create-alert"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.create-dashboard"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.create-folder"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.create-import"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.dashboards"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.datasources"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.explore"
+msgstr ""
+
+#: public/app/core/components/NavBar/NavBarItem.tsx
+#~ msgid "nav.folder"
+#~ msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.help"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.home"
+msgstr ""
+
+#: public/app/core/components/NavBar/NavBarItem.tsx
+#~ msgid "nav.import"
+#~ msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.library-panels"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.live"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.live-cloud"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.live-pipeline"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.live-status"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.manage-dashboards"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.new-dashboard"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.new-folder"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.org-settings"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.playlists"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.plugins"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.profile-settings"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.service-accounts"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.sign-out"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.snapshots"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.teams"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.users"
+msgstr ""
+
 #: public/app/core/components/SharedPreferences/SharedPreferences.tsx
 msgid "shared-dashboard.fields.timezone-label"
 msgstr ""
--- a/public/locales/fr/messages.po
+++ b/public/locales/fr/messages.po
@ -18,6 +18,166 @@ msgstr ""
 msgid "common.save"
 msgstr ""

+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-admin"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-am-routes"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-channels"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-groups"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-list"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-receivers"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-silences"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.api-keys"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.change-password"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.config"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.create"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.create-alert"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.create-dashboard"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.create-folder"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.create-import"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.dashboards"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.datasources"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.explore"
+msgstr ""
+
+#: public/app/core/components/NavBar/NavBarItem.tsx
+#~ msgid "nav.folder"
+#~ msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.help"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.home"
+msgstr ""
+
+#: public/app/core/components/NavBar/NavBarItem.tsx
+#~ msgid "nav.import"
+#~ msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.library-panels"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.live"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.live-cloud"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.live-pipeline"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.live-status"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.manage-dashboards"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.new-dashboard"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.new-folder"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.org-settings"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.playlists"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.plugins"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.profile-settings"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.service-accounts"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.sign-out"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.snapshots"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.teams"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.users"
+msgstr ""
+
 #: public/app/core/components/SharedPreferences/SharedPreferences.tsx
 msgid "shared-dashboard.fields.timezone-label"
 msgstr ""
--- a/public/locales/pseudo-LOCALE/messages.po
+++ b/public/locales/pseudo-LOCALE/messages.po
@ -18,6 +18,166 @@ msgstr ""
 msgid "common.save"
 msgstr ""

+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-admin"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-am-routes"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-channels"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-groups"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-list"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-receivers"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.alerting-silences"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.api-keys"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.change-password"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.config"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.create"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.create-alert"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.create-dashboard"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.create-folder"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.create-import"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.dashboards"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.datasources"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.explore"
+msgstr ""
+
+#: public/app/core/components/NavBar/NavBarItem.tsx
+#~ msgid "nav.folder"
+#~ msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.help"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.home"
+msgstr ""
+
+#: public/app/core/components/NavBar/NavBarItem.tsx
+#~ msgid "nav.import"
+#~ msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.library-panels"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.live"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.live-cloud"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.live-pipeline"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.live-status"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.manage-dashboards"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.new-dashboard"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.new-folder"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.org-settings"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.playlists"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.plugins"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.profile-settings"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.service-accounts"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.sign-out"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.snapshots"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.teams"
+msgstr ""
+
+#: public/app/core/components/NavBar/navBarItem-translations.ts
+msgid "nav.users"
+msgstr ""
+
 #: public/app/core/components/SharedPreferences/SharedPreferences.tsx
 msgid "shared-dashboard.fields.timezone-label"
 msgstr ""
--- a/public/test/mocks/linguiMacro.tsx
+++ b/public/test/mocks/linguiMacro.tsx
@ -1,7 +1,9 @@
 import React from 'react';
+import { MessageDescriptor } from '@lingui/core';
+import { Trans as OriginalTrans } from '@lingui/macro';

-export const Trans: React.FC = ({ children }) => {
-  return <>{children}</>;
+export const Trans: typeof OriginalTrans = ({ id, children }) => {
+  return <>{children ?? id}</>;
 };

 export const Plural: React.FC = () => {
@ -19,3 +21,8 @@ export const SelectOrdinal: React.FC = () => {
 export const t = (msg: string | { message: string }) => {
  return typeof msg === 'string' ? msg : msg.message;
 };
+
+export const defineMessage = (descriptor: MessageDescriptor) => {
+  // We return the message as the ID so we can assert on the plain english value
+  return { ...descriptor, id: descriptor.message };
+};