Internationalization: Translate RefreshPicker component (#58530)

packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx

@@ -4,6 +4,7 @@ import React, { PureComponent } from 'react';
 import { SelectableValue, parseDuration } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
+import { t } from '../../utils/i18n';
 import { ButtonGroup } from '../Button';
 import { ButtonSelect } from '../Dropdown/ButtonSelect';
 import { ToolbarButtonVariant, ToolbarButton } from '../ToolbarButton';
@@ -24,11 +25,6 @@ export interface Props {
   width?: string;
   primary?: boolean;
   isOnCanvas?: 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<Props> {
@@ -42,6 +38,7 @@ export class RefreshPicker extends PureComponent<Props> {
     value: 'LIVE',
     ariaLabel: 'Turn on live streaming',
   };
+
   static isLive = (refreshInterval?: string): boolean => refreshInterval === RefreshPicker.liveOption.value;
 
   constructor(props: Props) {
@@ -72,30 +69,13 @@ export class RefreshPicker extends PureComponent<Props> {
   }
 
   render() {
-    const {
-      onRefresh,
-      intervals,
-      tooltip,
-      value,
-      text,
-      isLoading,
-      noIntervalPicker,
-      width,
-      offOptionLabelMsg,
-      offOptionAriaLabelMsg,
-      offDescriptionAriaLabelMsg,
-      onDescriptionAriaLabelMsg,
-    } = this.props;
+    const { onRefresh, intervals, tooltip, value, text, isLoading, noIntervalPicker, width } = this.props;
 
     const currentValue = value || '';
     const variant = this.getVariant();
-    const translatedOffOption = {
-      value: RefreshPicker.offOption.value,
-      label: offOptionLabelMsg || RefreshPicker.offOption.label,
-      ariaLabel: offOptionAriaLabelMsg || RefreshPicker.offOption.ariaLabel,
-    };
-    const options = intervalsToOptions({ intervals, offOption: translatedOffOption });
+    const options = intervalsToOptions({ intervals });
     const option = options.find(({ value }) => value === currentValue);
+    const translatedOffOption = translateOption(RefreshPicker.offOption.value);
     let selectedValue = option || translatedOffOption;
 
     if (selectedValue.label === translatedOffOption.label) {
@@ -103,11 +83,16 @@ export class RefreshPicker extends PureComponent<Props> {
     }
 
     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`;
+    const ariaLabelDurationSelectedMessage = t(
+      'refresh-picker.aria-label.duration-selected',
+      'Choose refresh time interval with current interval {{durationAriaLabel}} selected',
+      { durationAriaLabel }
+    );
+    const ariaLabelChooseIntervalMessage = t(
+      'refresh-picker.aria-label.choose-interval',
+      'Auto refresh turned off. Choose refresh time interval'
+    );
+    const ariaLabel = selectedValue.value === '' ? ariaLabelChooseIntervalMessage : ariaLabelDurationSelectedMessage;
 
     return (
       <ButtonGroup className="refresh-picker">
@@ -128,7 +113,7 @@ export class RefreshPicker extends PureComponent<Props> {
             options={options}
             onChange={this.onChangeSelect}
             variant={variant}
-            title="Set auto refresh interval"
+            title={t('refresh-picker.select-button.auto-refresh', 'Set auto refresh interval')}
             data-testid={selectors.components.RefreshPicker.intervalButtonV2}
             aria-label={ariaLabel}
           />
@@ -138,10 +123,24 @@ export class RefreshPicker extends PureComponent<Props> {
   }
 }
 
-export function intervalsToOptions({
-  intervals = defaultIntervals,
-  offOption = RefreshPicker.offOption,
-}: { intervals?: string[]; offOption?: SelectableValue<string> } = {}): Array<SelectableValue<string>> {
+export function translateOption(option: string) {
+  if (option === RefreshPicker.liveOption.value) {
+    return {
+      label: t('refresh-picker.live-option.label', 'Live'),
+      value: 'LIVE',
+      ariaLabel: t('refresh-picker.live-option.aria-label', 'Turn on live streaming'),
+    };
+  }
+  return {
+    label: t('refresh-picker.off-option.label', 'Off'),
+    value: '',
+    ariaLabel: t('refresh-picker.off-option.aria-label', 'Turn off auto refresh'),
+  };
+}
+
+export function intervalsToOptions({ intervals = defaultIntervals }: { intervals?: string[] } = {}): Array<
+  SelectableValue<string>
+> {
   const options: Array<SelectableValue<string>> = intervals.map((interval) => {
     const duration = parseDuration(interval);
     const ariaLabel = formatDuration(duration);
@@ -153,6 +152,6 @@ export function intervalsToOptions({
     };
   });
 
-  options.unshift(offOption);
+  options.unshift(translateOption(RefreshPicker.offOption.value));
   return options;
 }

public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx

@@ -109,18 +109,6 @@ export class DashNavTimeControls extends Component<Props> {
           isOnCanvas={isOnCanvas}
           tooltip={t('dashboard.toolbar.refresh', 'Refresh dashboard')}
           noIntervalPicker={hideIntervalPicker}
-          offDescriptionAriaLabelMsg={t(
-            'dashboard.refresh-picker.off-description',
-            'Auto refresh turned off. Choose refresh time interval'
-          )}
-          onDescriptionAriaLabelMsg={(durationAriaLabel) =>
-            t(
-              'dashboard.refresh-picker.on-description',
-              `Choose refresh time interval with current interval ${durationAriaLabel} selected`
-            )
-          }
-          offOptionLabelMsg={t('dashboard.refresh-picker.off-label', 'Off')}
-          offOptionAriaLabelMsg={t('dashboard.refresh-picker.off-arialabel', 'Turn off auto refresh')}
         />
       </>
     );

public/locales/de-DE/grafana.json

@@ -59,12 +59,6 @@
       "rows": "Gesamtanzahl an Zeilen",
       "table-title": "Statistiken"
     },
-    "refresh-picker": {
-      "off-arialabel": "Automatische Aktualisierung deaktivieren",
-      "off-description": "Automatische Aktualisierung deaktiviert. Zeitintervall für Aktualisierungen auswählen",
-      "off-label": "Aus",
-      "on-description": ""
-    },
     "toolbar": {
       "add-panel": "Panel hinzufügen",
       "comments-show": "Dashboard-Kommentare anzeigen",
@@ -315,6 +309,23 @@
       "view": "Anzeigen"
     }
   },
+  "refresh-picker": {
+    "aria-label": {
+      "choose-interval": "",
+      "duration-selected": ""
+    },
+    "live-option": {
+      "aria-label": "",
+      "label": ""
+    },
+    "off-option": {
+      "aria-label": "",
+      "label": ""
+    },
+    "select-button": {
+      "auto-refresh": ""
+    }
+  },
   "share-modal": {
     "dashboard": {
       "title": "Teilen"

public/locales/en-US/grafana.json

@@ -59,12 +59,6 @@
       "rows": "Total number rows",
       "table-title": "Stats"
     },
-    "refresh-picker": {
-      "off-arialabel": "Turn off auto refresh",
-      "off-description": "Auto refresh turned off. Choose refresh time interval",
-      "off-label": "Off",
-      "on-description": ""
-    },
     "toolbar": {
       "add-panel": "Add panel",
       "comments-show": "Show dashboard comments",
@@ -315,6 +309,23 @@
       "view": "View"
     }
   },
+  "refresh-picker": {
+    "aria-label": {
+      "choose-interval": "Auto refresh turned off. Choose refresh time interval",
+      "duration-selected": "Choose refresh time interval with current interval {{durationAriaLabel}} selected"
+    },
+    "live-option": {
+      "aria-label": "Turn on live streaming",
+      "label": "Live"
+    },
+    "off-option": {
+      "aria-label": "Turn off auto refresh",
+      "label": "Off"
+    },
+    "select-button": {
+      "auto-refresh": "Set auto refresh interval"
+    }
+  },
   "share-modal": {
     "dashboard": {
       "title": "Share"

public/locales/es-ES/grafana.json

@@ -59,12 +59,6 @@
       "rows": "Número total de filas",
       "table-title": "Estadísticas"
     },
-    "refresh-picker": {
-      "off-arialabel": "Desactivar actualización automática",
-      "off-description": "Actualización automática desactivada. Elija un intervalo de tiempo de actualización",
-      "off-label": "Apagado",
-      "on-description": ""
-    },
     "toolbar": {
       "add-panel": "Añadir panel",
       "comments-show": "Mostrar comentarios del panel de control",
@@ -315,6 +309,23 @@
       "view": "Vista"
     }
   },
+  "refresh-picker": {
+    "aria-label": {
+      "choose-interval": "",
+      "duration-selected": ""
+    },
+    "live-option": {
+      "aria-label": "",
+      "label": ""
+    },
+    "off-option": {
+      "aria-label": "",
+      "label": ""
+    },
+    "select-button": {
+      "auto-refresh": ""
+    }
+  },
   "share-modal": {
     "dashboard": {
       "title": "Compartir"

public/locales/fr-FR/grafana.json

@@ -59,12 +59,6 @@
       "rows": "Nombre total de lignes",
       "table-title": "Statistiques"
     },
-    "refresh-picker": {
-      "off-arialabel": "Désactiver l'actualisation automatique",
-      "off-description": "Actualisation automatique désactivée. Choisir un intervalle de temps d'actualisation",
-      "off-label": "Désactivé",
-      "on-description": ""
-    },
     "toolbar": {
       "add-panel": "Ajouter un panneau",
       "comments-show": "Afficher les commentaires du tableau de bord",
@@ -315,6 +309,23 @@
       "view": "Afficher"
     }
   },
+  "refresh-picker": {
+    "aria-label": {
+      "choose-interval": "",
+      "duration-selected": ""
+    },
+    "live-option": {
+      "aria-label": "",
+      "label": ""
+    },
+    "off-option": {
+      "aria-label": "",
+      "label": ""
+    },
+    "select-button": {
+      "auto-refresh": ""
+    }
+  },
   "share-modal": {
     "dashboard": {
       "title": "Partager"

public/locales/pseudo-LOCALE/grafana.json

@@ -59,12 +59,6 @@
       "rows": "Ŧőŧäľ ʼnūmþęř řőŵş",
       "table-title": "Ŝŧäŧş"
     },
-    "refresh-picker": {
-      "off-arialabel": "Ŧūřʼn őƒƒ äūŧő řęƒřęşĥ",
-      "off-description": "Åūŧő řęƒřęşĥ ŧūřʼnęđ őƒƒ. Cĥőőşę řęƒřęşĥ ŧįmę įʼnŧęřväľ",
-      "off-label": "؃ƒ",
-      "on-description": ""
-    },
     "toolbar": {
       "add-panel": "Åđđ päʼnęľ",
       "comments-show": "Ŝĥőŵ đäşĥþőäřđ čőmmęʼnŧş",
@@ -315,6 +309,23 @@
       "view": "Vįęŵ"
     }
   },
+  "refresh-picker": {
+    "aria-label": {
+      "choose-interval": "Åūŧő řęƒřęşĥ ŧūřʼnęđ őƒƒ. Cĥőőşę řęƒřęşĥ ŧįmę įʼnŧęřväľ",
+      "duration-selected": "Cĥőőşę řęƒřęşĥ ŧįmę įʼnŧęřväľ ŵįŧĥ čūřřęʼnŧ įʼnŧęřväľ {{đūřäŧįőʼnÅřįäĿäþęľ}} şęľęčŧęđ"
+    },
+    "live-option": {
+      "aria-label": "Ŧūřʼn őʼn ľįvę şŧřęämįʼnģ",
+      "label": "Ŀįvę"
+    },
+    "off-option": {
+      "aria-label": "Ŧūřʼn őƒƒ äūŧő řęƒřęşĥ",
+      "label": "؃ƒ"
+    },
+    "select-button": {
+      "auto-refresh": "Ŝęŧ äūŧő řęƒřęşĥ įʼnŧęřväľ"
+    }
+  },
   "share-modal": {
     "dashboard": {
       "title": "Ŝĥäřę"

public/locales/zh-Hans/grafana.json

@@ -59,12 +59,6 @@
       "rows": "总行数",
       "table-title": "统计信息"
     },
-    "refresh-picker": {
-      "off-arialabel": "关闭自动刷新",
-      "off-description": "自动刷新已关闭。选择刷新时间间隔",
-      "off-label": "关",
-      "on-description": ""
-    },
     "toolbar": {
       "add-panel": "添加面板",
       "comments-show": "显示仪表板备注",
@@ -315,6 +309,23 @@
       "view": "查看"
     }
   },
+  "refresh-picker": {
+    "aria-label": {
+      "choose-interval": "",
+      "duration-selected": ""
+    },
+    "live-option": {
+      "aria-label": "",
+      "label": ""
+    },
+    "off-option": {
+      "aria-label": "",
+      "label": ""
+    },
+    "select-button": {
+      "auto-refresh": ""
+    }
+  },
   "share-modal": {
     "dashboard": {
       "title": "分享"