From 813ebf988d354bf23e981e00c9c8458995774c21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Thu, 3 Nov 2022 16:03:28 +0100
Subject: [PATCH] Internationalization: Translate TimePickerTitle component
 (#57909)

---
 contribute/internationalization.md                |  2 +-
 .../RelativeTimeRangePicker.tsx                   |  7 +++++--
 .../TimeRangePicker/CalendarHeader.tsx            |  5 ++++-
 public/locales/de-DE/grafana.json                 |  7 +++++++
 public/locales/en-US/grafana.json                 |  7 +++++++
 public/locales/es-ES/grafana.json                 |  7 +++++++
 public/locales/fr-FR/grafana.json                 | 15 +++++++++++----
 public/locales/pseudo-LOCALE/grafana.json         |  7 +++++++
 public/locales/zh-Hans/grafana.json               |  7 +++++++
 9 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/contribute/internationalization.md b/contribute/internationalization.md
index 9f0aa1bba75..900573d5bc8 100644
--- a/contribute/internationalization.md
+++ b/contribute/internationalization.md
@@ -30,7 +30,7 @@ const SearchTitle = ({ term }) => (
 
 Prefer using `<Trans />` for JSX children, and `t()` for props and other javascript usage.
 
-When translating in grafana-ui, import `<Trans />` and `t()` from `src/utils/i18n`.
+When translating in grafana-ui, use a relative path to import `<Trans />` and `t()` from `src/utils/i18n`.
 
 Note that our tooling must be able to statically analyse the code to extract the phrase, so the `i18nKey` can not be dynamic. e.g. the following will not work:
 
diff --git a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx
index 37af429b70d..77c08d13510 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx
@@ -4,6 +4,7 @@ import React, { FormEvent, useCallback, useState } from 'react';
 import { RelativeTimeRange, GrafanaTheme2, TimeOption } from '@grafana/data';
 
 import { useStyles2 } from '../../../themes';
+import { Trans, t } from '../../../utils/i18n';
 import { Button } from '../../Button';
 import { ClickOutsideWrapper } from '../../ClickOutsideWrapper/ClickOutsideWrapper';
 import CustomScrollbar from '../../CustomScrollbar/CustomScrollbar';
@@ -111,7 +112,7 @@ export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps) {
             <div className={styles.body}>
               <CustomScrollbar className={styles.leftSide} hideHorizontalTrack>
                 <TimeRangeList
-                  title="Example time ranges"
+                  title={t('time-picker.time-range.example-title', 'Example time ranges')}
                   options={validOptions}
                   onChange={onChangeTimeOption}
                   value={timeOption}
@@ -122,7 +123,9 @@ export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps) {
                   <TimePickerTitle>
                     <Tooltip content={<TooltipContent />} placement="bottom" theme="info">
                       <div>
-                        Specify time range <Icon name="info-circle" />
+                        <Trans i18nKey="time-picker.time-range.specify">
+                          Specify time range <Icon name="info-circle" />
+                        </Trans>
                       </div>
                     </Tooltip>
                   </TimePickerTitle>
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarHeader.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarHeader.tsx
index e8ea6d9a0cf..08782cbd493 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarHeader.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarHeader.tsx
@@ -5,6 +5,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
 import { useStyles2 } from '../../../themes';
+import { Trans } from '../../../utils/i18n';
 import { Button } from '../../Button';
 
 import { TimePickerCalendarProps } from './TimePickerCalendar';
@@ -15,7 +16,9 @@ export function Header({ onClose }: TimePickerCalendarProps) {
 
   return (
     <div className={styles.container}>
-      <TimePickerTitle>Select a time range</TimePickerTitle>
+      <TimePickerTitle>
+        <Trans i18nKey="time-picker.calendar.select-time">Select a time range</Trans>
+      </TimePickerTitle>
       <Button
         aria-label={selectors.components.TimePicker.calendar.closeButton}
         icon="times"
diff --git a/public/locales/de-DE/grafana.json b/public/locales/de-DE/grafana.json
index b1db7230652..a2fb0ea6140 100644
--- a/public/locales/de-DE/grafana.json
+++ b/public/locales/de-DE/grafana.json
@@ -411,6 +411,13 @@
     "absolute": {
       "recent-title": "Kürzlich verwendete absolute Bereiche",
       "title": "Absoluter Zeitbereich"
+    },
+    "calendar": {
+      "select-time": ""
+    },
+    "time-range": {
+      "example-title": "",
+      "specify": ""
     }
   },
   "user-orgs": {
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 2edfc2e9fa4..903d64bad55 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -411,6 +411,13 @@
     "absolute": {
       "recent-title": "Recently used absolute ranges",
       "title": "Absolute time range"
+    },
+    "calendar": {
+      "select-time": "Select a time range"
+    },
+    "time-range": {
+      "example-title": "Example time ranges",
+      "specify": "Specify time range <1></1>"
     }
   },
   "user-orgs": {
diff --git a/public/locales/es-ES/grafana.json b/public/locales/es-ES/grafana.json
index e2d1894611b..01eebf5617c 100644
--- a/public/locales/es-ES/grafana.json
+++ b/public/locales/es-ES/grafana.json
@@ -411,6 +411,13 @@
     "absolute": {
       "recent-title": "Intervalos absolutos utilizados recientemente",
       "title": "Intervalo de tiempo absoluto"
+    },
+    "calendar": {
+      "select-time": ""
+    },
+    "time-range": {
+      "example-title": "",
+      "specify": ""
     }
   },
   "user-orgs": {
diff --git a/public/locales/fr-FR/grafana.json b/public/locales/fr-FR/grafana.json
index 4544567719a..955a6238492 100644
--- a/public/locales/fr-FR/grafana.json
+++ b/public/locales/fr-FR/grafana.json
@@ -16,7 +16,7 @@
       "query-tab": "Requête",
       "stats-tab": "Statistiques",
       "subtitle": "{{queryCount}} requêtes avec un délai total de requête de {{formatted}}",
-      "title": "Inspecter : {{panelTitle}}"
+      "title": "Inspecter\u00a0: {{panelTitle}}"
     },
     "inspect-data": {
       "data-options": "Options de données",
@@ -46,7 +46,7 @@
       "panel-json-description": "Le modèle enregistré dans le tableau de bord JSON qui configure comment tout fonctionne.",
       "panel-json-label": "Panneau JSON",
       "select-source": "Sélectionner la source",
-      "unknown": "Objet inconnu : {{show}}"
+      "unknown": "Objet inconnu\u00a0: {{show}}"
     },
     "inspect-meta": {
       "no-inspector": "Pas d'inspecteur de métadonnées"
@@ -96,7 +96,7 @@
   },
   "library-panels": {
     "save": {
-      "error": "Erreur lors de l'enregistrement du panneau de bibliothèque : \"{{errorMsg}}\"",
+      "error": "Erreur lors de l'enregistrement du panneau de bibliothèque\u00a0: \"{{errorMsg}}\"",
       "success": "Panneau de bibliothèque enregistré"
     }
   },
@@ -367,7 +367,7 @@
       "info-text-1": "Un instantané est un moyen instantané de partager publiquement un tableau de bord interactif. Lors de la création, nous supprimons les données sensibles telles que les requêtes (métrique, modèle et annotation) et les liens du panneau, pour ne laisser que les métriques visibles et les noms de séries intégrés dans votre tableau de bord.",
       "info-text-2": "N'oubliez pas que votre instantané <1>peut être consulté par une personne</1> qui dispose du lien et qui peut accéder à l'URL. Partagez judicieusement.",
       "local-button": "Instantané local",
-      "mistake-message": "Avez-vous commis une erreur ? ",
+      "mistake-message": "Avez-vous commis une erreur\u00a0? ",
       "name": "Nom de l'instantané",
       "timeout": "Délai d’expiration (secondes)",
       "timeout-description": "Vous devrez peut-être configurer la valeur du délai d'expiration si la collecte des métriques de votre tableau de bord prend beaucoup de temps."
@@ -411,6 +411,13 @@
     "absolute": {
       "recent-title": "Périodes absolues récemment utilisées",
       "title": "Période temporelle absolue"
+    },
+    "calendar": {
+      "select-time": ""
+    },
+    "time-range": {
+      "example-title": "",
+      "specify": ""
     }
   },
   "user-orgs": {
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index 50d0da6c645..e6ad48ed38a 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -411,6 +411,13 @@
     "absolute": {
       "recent-title": "Ŗęčęʼnŧľy ūşęđ äþşőľūŧę řäʼnģęş",
       "title": "Åþşőľūŧę ŧįmę řäʼnģę"
+    },
+    "calendar": {
+      "select-time": "Ŝęľęčŧ ä ŧįmę řäʼnģę"
+    },
+    "time-range": {
+      "example-title": "Ēχämpľę ŧįmę řäʼnģęş",
+      "specify": "Ŝpęčįƒy ŧįmę řäʼnģę <1></1>"
     }
   },
   "user-orgs": {
diff --git a/public/locales/zh-Hans/grafana.json b/public/locales/zh-Hans/grafana.json
index 125ecbd177c..85cdd237ae6 100644
--- a/public/locales/zh-Hans/grafana.json
+++ b/public/locales/zh-Hans/grafana.json
@@ -411,6 +411,13 @@
     "absolute": {
       "recent-title": "最近使用的绝对范围",
       "title": "绝对时间范围"
+    },
+    "calendar": {
+      "select-time": ""
+    },
+    "time-range": {
+      "example-title": "",
+      "specify": ""
     }
   },
   "user-orgs": {