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>
This commit is contained in:
TaitChan
2023-01-13 22:33:42 +08:00
committed by GitHub
parent ed88401a58
commit a1d33c63c8
10 changed files with 156 additions and 37 deletions

View File

@@ -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':

View File

@@ -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>}