From e3567c21d13e2cf27cc4495726f90239a8b4afb2 Mon Sep 17 00:00:00 2001 From: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com> Date: Wed, 20 Jul 2022 17:28:32 +0100 Subject: [PATCH] Internationalisation: Translates RefreshPicker and the dashboard toolbar (#51827) --- .../RefreshPicker/RefreshPicker.tsx | 69 +++++++++++++----- public/app/core/navigation/kiosk.ts | 6 +- .../dashboard/components/DashNav/DashNav.tsx | 55 ++++++++++---- .../DashNav/DashNavTimeControls.tsx | 15 +++- public/locales/en/messages.po | 72 +++++++++++++++++++ public/locales/es/messages.po | 72 +++++++++++++++++++ public/locales/fr/messages.po | 72 +++++++++++++++++++ public/locales/pseudo-LOCALE/messages.po | 72 +++++++++++++++++++ 8 files changed, 401 insertions(+), 32 deletions(-) diff --git a/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx b/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx index f9c07499104..ed23a182234 100644 --- a/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx +++ b/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx @@ -10,7 +10,6 @@ import { ToolbarButtonVariant, ToolbarButton } from '../ToolbarButton'; // Default intervals used in the refresh picker component export const defaultIntervals = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d']; -const offLabel = 'Auto refresh turned off. Choose refresh time interval'; export interface Props { intervals?: string[]; @@ -24,11 +23,24 @@ export interface Props { noIntervalPicker?: boolean; width?: string; primary?: boolean; + // These props are used to translate the component + offOptionLabelMsg?: string; + offOptionAriaLabelMsg?: string; + offDescriptionAriaLabelMsg?: string; + onDescriptionAriaLabelMsg?: (durationAriaLabel: string | undefined) => string; } export class RefreshPicker extends PureComponent { - static offOption = { label: 'Off', value: '', ariaLabel: 'Turn off auto refresh' }; - static liveOption = { label: 'Live', value: 'LIVE', ariaLabel: 'Turn on live streaming' }; + static offOption = { + label: 'Off', + value: '', + ariaLabel: 'Turn off auto refresh', + }; + static liveOption = { + label: 'Live', + value: 'LIVE', + ariaLabel: 'Turn on live streaming', + }; static isLive = (refreshInterval?: string): boolean => refreshInterval === RefreshPicker.liveOption.value; constructor(props: Props) { @@ -57,18 +69,43 @@ export class RefreshPicker extends PureComponent { } render() { - const { onRefresh, intervals, tooltip, value, text, isLoading, noIntervalPicker, width } = this.props; + const { + onRefresh, + intervals, + tooltip, + value, + text, + isLoading, + noIntervalPicker, + width, + offOptionLabelMsg, + offOptionAriaLabelMsg, + offDescriptionAriaLabelMsg, + onDescriptionAriaLabelMsg, + } = this.props; const currentValue = value || ''; const variant = this.getVariant(); - const options = intervalsToOptions({ intervals }); + const translatedOffOption = { + value: RefreshPicker.offOption.value, + label: offOptionLabelMsg || RefreshPicker.offOption.label, + ariaLabel: offOptionAriaLabelMsg || RefreshPicker.offOption.ariaLabel, + }; + const options = intervalsToOptions({ intervals, offOption: translatedOffOption }); const option = options.find(({ value }) => value === currentValue); - let selectedValue = option || RefreshPicker.offOption; + let selectedValue = option || translatedOffOption; - if (selectedValue.label === RefreshPicker.offOption.label) { + if (selectedValue.label === translatedOffOption.label) { selectedValue = { value: '' }; } + const durationAriaLabel = selectedValue.ariaLabel; + const ariaLabel = + selectedValue.value === '' + ? offDescriptionAriaLabelMsg || 'Auto refresh turned off. Choose refresh time interval' + : onDescriptionAriaLabelMsg?.(durationAriaLabel) || + `Choose refresh time interval with current interval ${durationAriaLabel} selected`; + return ( { onChange={this.onChangeSelect as any} variant={variant} data-testid={selectors.components.RefreshPicker.intervalButtonV2} - aria-label={ - selectedValue.value === '' - ? offLabel - : `Choose refresh time interval with current interval ${selectedValue.ariaLabel} selected` - } + aria-label={ariaLabel} /> )} @@ -101,11 +134,11 @@ export class RefreshPicker extends PureComponent { } } -export function intervalsToOptions({ intervals = defaultIntervals }: { intervals?: string[] } = {}): Array< - SelectableValue -> { - const intervalsOrDefault = intervals || defaultIntervals; - const options = intervalsOrDefault.map((interval) => { +export function intervalsToOptions({ + intervals = defaultIntervals, + offOption = RefreshPicker.offOption, +}: { intervals?: string[]; offOption?: SelectableValue } = {}): Array> { + const options: Array> = intervals.map((interval) => { const duration = parseDuration(interval); const ariaLabel = formatDuration(duration); @@ -116,6 +149,6 @@ export function intervalsToOptions({ intervals = defaultIntervals }: { intervals }; }); - options.unshift(RefreshPicker.offOption); + options.unshift(offOption); return options; } diff --git a/public/app/core/navigation/kiosk.ts b/public/app/core/navigation/kiosk.ts index 61f36656c61..d4e137527cb 100644 --- a/public/app/core/navigation/kiosk.ts +++ b/public/app/core/navigation/kiosk.ts @@ -1,3 +1,5 @@ +import { t } from '@lingui/macro'; + import { AppEvents } from '@grafana/data'; import { locationService } from '@grafana/runtime'; @@ -10,7 +12,9 @@ export function toggleKioskMode() { switch (kiosk) { case 'tv': kiosk = true; - appEvents.emit(AppEvents.alertSuccess, ['Press ESC to exit Kiosk mode']); + appEvents.emit(AppEvents.alertSuccess, [ + t({ id: 'navigation.kiosk.tv-alert', message: 'Press ESC to exit Kiosk mode' }), + ]); break; case '1': case true: diff --git a/public/app/features/dashboard/components/DashNav/DashNav.tsx b/public/app/features/dashboard/components/DashNav/DashNav.tsx index 3d096d18dea..57e6aedea52 100644 --- a/public/app/features/dashboard/components/DashNav/DashNav.tsx +++ b/public/app/features/dashboard/components/DashNav/DashNav.tsx @@ -1,3 +1,4 @@ +import { t, Trans } from '@lingui/macro'; import React, { FC, ReactNode } from 'react'; import { connect, ConnectedProps } from 'react-redux'; import { useLocation } from 'react-router-dom'; @@ -120,7 +121,9 @@ export const DashNav = React.memo((props) => { } if (canStar) { - let desc = isStarred ? 'Unmark as favorite' : 'Mark as favorite'; + let desc = isStarred + ? t({ id: 'dashboard.toolbar.unmark-favorite', message: 'Unmark as favorite' }) + : t({ id: 'dashboard.toolbar.mark-favorite', message: 'Mark as favorite' }); buttons.push( ((props) => { } if (canShare) { - let desc = 'Share dashboard or panel'; buttons.push( {({ showModal, hideModal }) => ( { @@ -163,7 +165,7 @@ export const DashNav = React.memo((props) => { {({ showModal, hideModal }) => ( { @@ -185,9 +187,21 @@ export const DashNav = React.memo((props) => { const renderPlaylistControls = () => { return ( - - Stop playlist - + + + Stop playlist + + ); }; @@ -211,7 +225,12 @@ export const DashNav = React.memo((props) => { const snapshotUrl = snapshot && snapshot.originalUrl; const buttons: ReactNode[] = []; const tvButton = ( - + ); if (isPlaylistRunning()) { @@ -223,7 +242,14 @@ export const DashNav = React.memo((props) => { } if (canEdit && !isFullscreen) { - buttons.push(); + buttons.push( + + ); } if (canSave && !isFullscreen) { @@ -231,7 +257,7 @@ export const DashNav = React.memo((props) => { {({ showModal, hideModal }) => ( { showModal(SaveDashboardDrawer, { @@ -248,7 +274,7 @@ export const DashNav = React.memo((props) => { if (snapshotUrl) { buttons.push( gotoSnapshotOrigin(snapshotUrl)} icon="link" key="button-snapshot" @@ -258,7 +284,12 @@ export const DashNav = React.memo((props) => { if (showSettings) { buttons.push( - + ); } diff --git a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx index d3f3c29a3cb..b2570002848 100644 --- a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +++ b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx @@ -1,3 +1,4 @@ +import { t } from '@lingui/macro'; import React, { Component } from 'react'; import { Unsubscribable } from 'rxjs'; @@ -103,8 +104,20 @@ export class DashNavTimeControls extends Component { onRefresh={this.onRefresh} value={dashboard.refresh} intervals={intervals} - tooltip="Refresh dashboard" + tooltip={t({ id: 'dashboard.toolbar.refresh', message: 'Refresh dashboard' })} noIntervalPicker={hideIntervalPicker} + offDescriptionAriaLabelMsg={t({ + id: 'dashboard.refresh-picker.off-description', + message: 'Auto refresh turned off. Choose refresh time interval', + })} + onDescriptionAriaLabelMsg={(durationAriaLabel) => + t({ + id: 'dashboard.refresh-picker.on-description', + message: `Choose refresh time interval with current interval ${durationAriaLabel} selected`, + }) + } + offOptionLabelMsg={t({ id: 'dashboard.refresh-picker.off-label', message: 'Off' })} + offOptionAriaLabelMsg={t({ id: 'dashboard.refresh-picker.off-arialabel', message: 'Turn off auto refresh' })} /> ); diff --git a/public/locales/en/messages.po b/public/locales/en/messages.po index 4a99a2b5165..412f1f56dc7 100644 --- a/public/locales/en/messages.po +++ b/public/locales/en/messages.po @@ -202,6 +202,74 @@ msgstr "{queryCount} queries with total query time of {formatted}" msgid "dashboard.inspect.title" msgstr "Inspect: {panelTitle}" +#: public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +msgid "dashboard.refresh-picker.off-arialabel" +msgstr "Turn off auto refresh" + +#: public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +msgid "dashboard.refresh-picker.off-description" +msgstr "Auto refresh turned off. Choose refresh time interval" + +#: public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +msgid "dashboard.refresh-picker.off-label" +msgstr "Off" + +#: public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +msgid "dashboard.refresh-picker.on-description" +msgstr "Choose refresh time interval with current interval {durationAriaLabel} selected" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.add-panel" +msgstr "Add panel" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.comments-show" +msgstr "Show dashboard comments" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.mark-favorite" +msgstr "Mark as favorite" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.open-original" +msgstr "Open original dashboard" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.playlist-next" +msgstr "Go to next dashboard" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.playlist-previous" +msgstr "Go to previous dashboard" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.playlist-stop" +msgstr "Stop playlist" + +#: public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +msgid "dashboard.toolbar.refresh" +msgstr "Refresh dashboard" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.save" +msgstr "Save dashboard" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.settings" +msgstr "Dashboard settings" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.share" +msgstr "Share dashboard or panel" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.tv-button" +msgstr "Cycle view mode" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.unmark-favorite" +msgstr "Unmark as favorite" + #: public/app/core/components/NavBar/navBarItem-translations.ts msgid "nav.alerting" msgstr "Alerting" @@ -366,6 +434,10 @@ msgstr "Teams" msgid "nav.users" msgstr "Users" +#: public/app/core/navigation/kiosk.ts +msgid "navigation.kiosk.tv-alert" +msgstr "Press ESC to exit Kiosk mode" + #: public/app/features/dashboard/utils/getPanelMenu.ts msgid "panel.header-menu.inspect" msgstr "Inspect" diff --git a/public/locales/es/messages.po b/public/locales/es/messages.po index 339a58da31a..8a5b3aa21c3 100644 --- a/public/locales/es/messages.po +++ b/public/locales/es/messages.po @@ -202,6 +202,74 @@ msgstr "" msgid "dashboard.inspect.title" msgstr "" +#: public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +msgid "dashboard.refresh-picker.off-arialabel" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +msgid "dashboard.refresh-picker.off-description" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +msgid "dashboard.refresh-picker.off-label" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +msgid "dashboard.refresh-picker.on-description" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.add-panel" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.comments-show" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.mark-favorite" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.open-original" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.playlist-next" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.playlist-previous" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.playlist-stop" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +msgid "dashboard.toolbar.refresh" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.save" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.settings" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.share" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.tv-button" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.unmark-favorite" +msgstr "" + #: public/app/core/components/NavBar/navBarItem-translations.ts msgid "nav.alerting" msgstr "" @@ -366,6 +434,10 @@ msgstr "" msgid "nav.users" msgstr "" +#: public/app/core/navigation/kiosk.ts +msgid "navigation.kiosk.tv-alert" +msgstr "" + #: public/app/features/dashboard/utils/getPanelMenu.ts msgid "panel.header-menu.inspect" msgstr "" diff --git a/public/locales/fr/messages.po b/public/locales/fr/messages.po index 7dee94001b9..c5a9ec003e9 100644 --- a/public/locales/fr/messages.po +++ b/public/locales/fr/messages.po @@ -202,6 +202,74 @@ msgstr "" msgid "dashboard.inspect.title" msgstr "" +#: public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +msgid "dashboard.refresh-picker.off-arialabel" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +msgid "dashboard.refresh-picker.off-description" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +msgid "dashboard.refresh-picker.off-label" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +msgid "dashboard.refresh-picker.on-description" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.add-panel" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.comments-show" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.mark-favorite" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.open-original" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.playlist-next" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.playlist-previous" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.playlist-stop" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +msgid "dashboard.toolbar.refresh" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.save" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.settings" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.share" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.tv-button" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.unmark-favorite" +msgstr "" + #: public/app/core/components/NavBar/navBarItem-translations.ts msgid "nav.alerting" msgstr "" @@ -366,6 +434,10 @@ msgstr "" msgid "nav.users" msgstr "" +#: public/app/core/navigation/kiosk.ts +msgid "navigation.kiosk.tv-alert" +msgstr "" + #: public/app/features/dashboard/utils/getPanelMenu.ts msgid "panel.header-menu.inspect" msgstr "" diff --git a/public/locales/pseudo-LOCALE/messages.po b/public/locales/pseudo-LOCALE/messages.po index d71f621ecf1..8f0b6b214ec 100644 --- a/public/locales/pseudo-LOCALE/messages.po +++ b/public/locales/pseudo-LOCALE/messages.po @@ -202,6 +202,74 @@ msgstr "" msgid "dashboard.inspect.title" msgstr "" +#: public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +msgid "dashboard.refresh-picker.off-arialabel" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +msgid "dashboard.refresh-picker.off-description" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +msgid "dashboard.refresh-picker.off-label" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +msgid "dashboard.refresh-picker.on-description" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.add-panel" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.comments-show" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.mark-favorite" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.open-original" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.playlist-next" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.playlist-previous" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.playlist-stop" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +msgid "dashboard.toolbar.refresh" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.save" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.settings" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.share" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.tv-button" +msgstr "" + +#: public/app/features/dashboard/components/DashNav/DashNav.tsx +msgid "dashboard.toolbar.unmark-favorite" +msgstr "" + #: public/app/core/components/NavBar/navBarItem-translations.ts msgid "nav.alerting" msgstr "" @@ -366,6 +434,10 @@ msgstr "" msgid "nav.users" msgstr "" +#: public/app/core/navigation/kiosk.ts +msgid "navigation.kiosk.tv-alert" +msgstr "" + #: public/app/features/dashboard/utils/getPanelMenu.ts msgid "panel.header-menu.inspect" msgstr ""