From 67bd0d553707da8e969d5cc4a3743688240969ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Mon, 14 Nov 2022 17:16:34 +0100
Subject: [PATCH] Internationalization: Translate TimeRangePicker component
 (#58470)

---
 .../DateTimePickers/TimeRangePicker.test.tsx  |  2 +-
 .../DateTimePickers/TimeRangePicker.tsx       | 26 ++++++++++++++-----
 packages/grafana-ui/src/utils/i18n.tsx        |  4 +--
 public/locales/de-DE/grafana.json             |  8 ++++++
 public/locales/en-US/grafana.json             |  8 ++++++
 public/locales/es-ES/grafana.json             |  8 ++++++
 public/locales/fr-FR/grafana.json             |  8 ++++++
 public/locales/pseudo-LOCALE/grafana.json     |  8 ++++++
 public/locales/zh-Hans/grafana.json           |  8 ++++++
 9 files changed, 71 insertions(+), 9 deletions(-)

diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.test.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.test.tsx
index 8403577a7d6..fcbdb834914 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.test.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.test.tsx
@@ -27,6 +27,6 @@ describe('TimePicker', () => {
       />
     );
 
-    expect(container.queryByLabelText(/Time range picker/i)).toBeInTheDocument();
+    expect(container.queryByLabelText(/Time range selected/i)).toBeInTheDocument();
   });
 });
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
index ac9c8a4c332..131ac5db6a7 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
@@ -17,6 +17,7 @@ import {
 import { selectors } from '@grafana/e2e-selectors';
 
 import { useStyles2 } from '../../themes/ThemeContext';
+import { t, Trans } from '../../utils/i18n';
 import { ButtonGroup } from '../Button';
 import { ToolbarButton } from '../ToolbarButton';
 import { Tooltip } from '../Tooltip/Tooltip';
@@ -91,11 +92,13 @@ export function TimeRangePicker(props: TimeRangePickerProps) {
   const hasAbsolute = isDateTime(value.raw.from) || isDateTime(value.raw.to);
   const variant = isSynced ? 'active' : isOnCanvas ? 'canvas' : 'default';
 
+  const currentTimeRange = formattedRange(value, timeZone);
+
   return (
     <ButtonGroup className={styles.container}>
       {hasAbsolute && (
         <ToolbarButton
-          aria-label="Move time range backwards"
+          aria-label={t('time-picker.range-picker.backwards-time-aria-label', 'Move time range backwards')}
           variant={variant}
           onClick={onMoveBackward}
           icon="angle-left"
@@ -106,7 +109,9 @@ export function TimeRangePicker(props: TimeRangePickerProps) {
       <Tooltip content={<TimePickerTooltip timeRange={value} timeZone={timeZone} />} placement="bottom" interactive>
         <ToolbarButton
           data-testid={selectors.components.TimePicker.openButton}
-          aria-label={`Time range picker with current time range ${formattedRange(value, timeZone)} selected`}
+          aria-label={t('time-picker.range-picker.current-time-selected', 'Time range selected: {{currentTimeRange}}', {
+            currentTimeRange,
+          })}
           aria-controls="TimePickerContent"
           onClick={onOpen}
           icon="clock-nine"
@@ -140,7 +145,7 @@ export function TimeRangePicker(props: TimeRangePickerProps) {
 
       {hasAbsolute && (
         <ToolbarButton
-          aria-label="Move time range forwards"
+          aria-label={t('time-picker.range-picker.forwards-time-aria-label', 'Move time range forwards')}
           onClick={onMoveForward}
           icon="angle-right"
           narrow
@@ -149,7 +154,12 @@ export function TimeRangePicker(props: TimeRangePickerProps) {
       )}
 
       <Tooltip content={ZoomOutTooltip} placement="bottom">
-        <ToolbarButton aria-label="Zoom out time range" onClick={onZoom} icon="search-minus" variant={variant} />
+        <ToolbarButton
+          aria-label={t('time-picker.range-picker.zoom-out-button', 'Zoom out time range')}
+          onClick={onZoom}
+          icon="search-minus"
+          variant={variant}
+        />
       </Tooltip>
     </ButtonGroup>
   );
@@ -159,7 +169,9 @@ TimeRangePicker.displayName = 'TimeRangePicker';
 
 const ZoomOutTooltip = () => (
   <>
-    Time range zoom out <br /> CTRL+Z
+    <Trans i18nKey="time-picker.range-picker.zoom-out-tooltip">
+      Time range zoom out <br /> CTRL+Z
+    </Trans>
   </>
 );
 
@@ -169,7 +181,9 @@ const TimePickerTooltip = ({ timeRange, timeZone }: { timeRange: TimeRange; time
   return (
     <>
       {dateTimeFormat(timeRange.from, { timeZone })}
-      <div className="text-center">to</div>
+      <div className="text-center">
+        <Trans i18nKey="time-picker.range-picker.to">to</Trans>
+      </div>
       {dateTimeFormat(timeRange.to, { timeZone })}
       <div className="text-center">
         <span className={styles.utc}>{timeZoneFormatUserFriendly(timeZone)}</span>
diff --git a/packages/grafana-ui/src/utils/i18n.tsx b/packages/grafana-ui/src/utils/i18n.tsx
index 588523e79d4..a721e5066ee 100644
--- a/packages/grafana-ui/src/utils/i18n.tsx
+++ b/packages/grafana-ui/src/utils/i18n.tsx
@@ -28,7 +28,7 @@ export const Trans: typeof I18NextTrans = (props) => {
   return <I18NextTrans {...props} />;
 };
 
-export const t = (id: string, defaultMessage: string) => {
+export const t = (id: string, defaultMessage: string, values?: Record<string, unknown>) => {
   initI18n();
-  return i18next.t(id, defaultMessage);
+  return i18next.t(id, defaultMessage, values);
 };
diff --git a/public/locales/de-DE/grafana.json b/public/locales/de-DE/grafana.json
index 27cf2529b5c..81e5b3138ee 100644
--- a/public/locales/de-DE/grafana.json
+++ b/public/locales/de-DE/grafana.json
@@ -436,6 +436,14 @@
       "range-error": "",
       "to-input": ""
     },
+    "range-picker": {
+      "backwards-time-aria-label": "",
+      "current-time-selected": "",
+      "forwards-time-aria-label": "",
+      "to": "",
+      "zoom-out-button": "",
+      "zoom-out-tooltip": ""
+    },
     "time-range": {
       "aria-role": "",
       "default-title": "",
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index f651674b9b8..c75ec38b75f 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -436,6 +436,14 @@
       "range-error": "\"From\" can't be after \"To\"",
       "to-input": "To"
     },
+    "range-picker": {
+      "backwards-time-aria-label": "Move time range backwards",
+      "current-time-selected": "Time range selected: {{currentTimeRange}}",
+      "forwards-time-aria-label": "Move time range forwards",
+      "to": "to",
+      "zoom-out-button": "Zoom out time range",
+      "zoom-out-tooltip": "Time range zoom out <1></1> CTRL+Z"
+    },
     "time-range": {
       "aria-role": "Time range selection",
       "default-title": "Time ranges",
diff --git a/public/locales/es-ES/grafana.json b/public/locales/es-ES/grafana.json
index d91371180db..87235fc3043 100644
--- a/public/locales/es-ES/grafana.json
+++ b/public/locales/es-ES/grafana.json
@@ -436,6 +436,14 @@
       "range-error": "",
       "to-input": ""
     },
+    "range-picker": {
+      "backwards-time-aria-label": "",
+      "current-time-selected": "",
+      "forwards-time-aria-label": "",
+      "to": "",
+      "zoom-out-button": "",
+      "zoom-out-tooltip": ""
+    },
     "time-range": {
       "aria-role": "",
       "default-title": "",
diff --git a/public/locales/fr-FR/grafana.json b/public/locales/fr-FR/grafana.json
index 7b27e4bc8d9..dea096a2e69 100644
--- a/public/locales/fr-FR/grafana.json
+++ b/public/locales/fr-FR/grafana.json
@@ -436,6 +436,14 @@
       "range-error": "",
       "to-input": ""
     },
+    "range-picker": {
+      "backwards-time-aria-label": "",
+      "current-time-selected": "",
+      "forwards-time-aria-label": "",
+      "to": "",
+      "zoom-out-button": "",
+      "zoom-out-tooltip": ""
+    },
     "time-range": {
       "aria-role": "",
       "default-title": "",
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index c35edcd0d73..b4a20777dec 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -436,6 +436,14 @@
       "range-error": "\"Fřőm\" čäʼn'ŧ þę äƒŧęř \"Ŧő\"",
       "to-input": "Ŧő"
     },
+    "range-picker": {
+      "backwards-time-aria-label": "Mővę ŧįmę řäʼnģę þäčĸŵäřđş",
+      "current-time-selected": "Ŧįmę řäʼnģę şęľęčŧęđ: {{čūřřęʼnŧŦįmęŖäʼnģę}}",
+      "forwards-time-aria-label": "Mővę ŧįmę řäʼnģę ƒőřŵäřđş",
+      "to": "ŧő",
+      "zoom-out-button": "Żőőm őūŧ ŧįmę řäʼnģę",
+      "zoom-out-tooltip": "Ŧįmę řäʼnģę žőőm őūŧ <1></1> CŦŖĿ+Ż"
+    },
     "time-range": {
       "aria-role": "Ŧįmę řäʼnģę şęľęčŧįőʼn",
       "default-title": "Ŧįmę řäʼnģęş",
diff --git a/public/locales/zh-Hans/grafana.json b/public/locales/zh-Hans/grafana.json
index aef95b3bb87..0d11d8a32b2 100644
--- a/public/locales/zh-Hans/grafana.json
+++ b/public/locales/zh-Hans/grafana.json
@@ -436,6 +436,14 @@
       "range-error": "",
       "to-input": ""
     },
+    "range-picker": {
+      "backwards-time-aria-label": "",
+      "current-time-selected": "",
+      "forwards-time-aria-label": "",
+      "to": "",
+      "zoom-out-button": "",
+      "zoom-out-tooltip": ""
+    },
     "time-range": {
       "aria-role": "",
       "default-title": "",