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;
 }