Internationalisation: Translates RefreshPicker and the dashboard toolbar (#51827)

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

@@ -10,7 +10,6 @@ import { ToolbarButtonVariant, ToolbarButton } from '../ToolbarButton';
 
 // Default intervals used in the refresh picker component
 export const defaultIntervals = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d'];
-const offLabel = 'Auto refresh turned off. Choose refresh time interval';
 
 export interface Props {
   intervals?: string[];
@@ -24,11 +23,24 @@ export interface Props {
   noIntervalPicker?: boolean;
   width?: string;
   primary?: 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> {
-  static offOption = { label: 'Off', value: '', ariaLabel: 'Turn off auto refresh' };
-  static liveOption = { label: 'Live', value: 'LIVE', ariaLabel: 'Turn on live streaming' };
+  static offOption = {
+    label: 'Off',
+    value: '',
+    ariaLabel: 'Turn off auto refresh',
+  };
+  static liveOption = {
+    label: 'Live',
+    value: 'LIVE',
+    ariaLabel: 'Turn on live streaming',
+  };
   static isLive = (refreshInterval?: string): boolean => refreshInterval === RefreshPicker.liveOption.value;
 
   constructor(props: Props) {
@@ -57,18 +69,43 @@ export class RefreshPicker extends PureComponent<Props> {
   }
 
   render() {
-    const { onRefresh, intervals, tooltip, value, text, isLoading, noIntervalPicker, width } = this.props;
+    const {
+      onRefresh,
+      intervals,
+      tooltip,
+      value,
+      text,
+      isLoading,
+      noIntervalPicker,
+      width,
+      offOptionLabelMsg,
+      offOptionAriaLabelMsg,
+      offDescriptionAriaLabelMsg,
+      onDescriptionAriaLabelMsg,
+    } = this.props;
 
     const currentValue = value || '';
     const variant = this.getVariant();
-    const options = intervalsToOptions({ intervals });
+    const translatedOffOption = {
+      value: RefreshPicker.offOption.value,
+      label: offOptionLabelMsg || RefreshPicker.offOption.label,
+      ariaLabel: offOptionAriaLabelMsg || RefreshPicker.offOption.ariaLabel,
+    };
+    const options = intervalsToOptions({ intervals, offOption: translatedOffOption });
     const option = options.find(({ value }) => value === currentValue);
-    let selectedValue = option || RefreshPicker.offOption;
+    let selectedValue = option || translatedOffOption;
 
-    if (selectedValue.label === RefreshPicker.offOption.label) {
+    if (selectedValue.label === translatedOffOption.label) {
       selectedValue = { value: '' };
     }
 
+    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`;
+
     return (
       <ButtonGroup className="refresh-picker">
         <ToolbarButton
@@ -89,11 +126,7 @@ export class RefreshPicker extends PureComponent<Props> {
             onChange={this.onChangeSelect as any}
             variant={variant}
             data-testid={selectors.components.RefreshPicker.intervalButtonV2}
-            aria-label={
-              selectedValue.value === ''
-                ? offLabel
-                : `Choose refresh time interval with current interval ${selectedValue.ariaLabel} selected`
-            }
+            aria-label={ariaLabel}
           />
         )}
       </ButtonGroup>
@@ -101,11 +134,11 @@ export class RefreshPicker extends PureComponent<Props> {
   }
 }
 
-export function intervalsToOptions({ intervals = defaultIntervals }: { intervals?: string[] } = {}): Array<
-  SelectableValue<string>
-> {
-  const intervalsOrDefault = intervals || defaultIntervals;
-  const options = intervalsOrDefault.map((interval) => {
+export function intervalsToOptions({
+  intervals = defaultIntervals,
+  offOption = RefreshPicker.offOption,
+}: { intervals?: string[]; offOption?: SelectableValue<string> } = {}): Array<SelectableValue<string>> {
+  const options: Array<SelectableValue<string>> = intervals.map((interval) => {
     const duration = parseDuration(interval);
     const ariaLabel = formatDuration(duration);
 
@@ -116,6 +149,6 @@ export function intervalsToOptions({ intervals = defaultIntervals }: { intervals
     };
   });
 
-  options.unshift(RefreshPicker.offOption);
+  options.unshift(offOption);
   return options;
 }