Internationalization: Translate TimePickerTitle component (#57909)

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:
 

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>

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"

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": {

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": {

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": {

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": {

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": {

public/locales/zh-Hans/grafana.json

@@ -411,6 +411,13 @@
     "absolute": {
       "recent-title": "最近使用的绝对范围",
       "title": "绝对时间范围"
+    },
+    "calendar": {
+      "select-time": ""
+    },
+    "time-range": {
+      "example-title": "",
+      "specify": ""
     }
   },
   "user-orgs": {