Grafana-UI: Add tooltip for interval picker in RefreshPicker (#74534)

* feat: add tooltip for interval picker

* refactor: remove ts error

* feat: extract new translations

* refactor: deprecate unused tooltip property

* refactor: correct syntax of dynamic string

* refactor: remove interval and autogenerated strings

* refactor: localisation

* refactor

packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx

@@ -20,9 +20,11 @@ export interface Props<T> extends HTMLAttributes<HTMLButtonElement> {
   options: Array<SelectableValue<T>>;
   value?: SelectableValue<T>;
   onChange: (item: SelectableValue<T>) => void;
+  /** @deprecated use tooltip instead, tooltipContent is not being processed in ToolbarButton*/
   tooltipContent?: PopoverContent;
   narrow?: boolean;
   variant?: ToolbarButtonVariant;
+  tooltip?: string;
 }
 
 /**

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

@@ -101,6 +101,10 @@ export class RefreshPicker extends PureComponent<Props> {
     );
     const ariaLabel = selectedValue.value === '' ? ariaLabelChooseIntervalMessage : ariaLabelDurationSelectedMessage;
 
+    const tooltipIntervalSelected = t('refresh-picker.tooltip.interval-selected', 'Set auto refresh interval');
+    const tooltipAutoRefreshOff = t('refresh-picker.tooltip.turned-off', 'Auto refresh off');
+    const tooltipAutoRefresh = selectedValue.value === '' ? tooltipAutoRefreshOff : tooltipIntervalSelected;
+
     return (
       <ButtonGroup className="refresh-picker">
         <ToolbarButton
@@ -120,9 +124,9 @@ export class RefreshPicker extends PureComponent<Props> {
             options={options}
             onChange={this.onChangeSelect}
             variant={variant}
-            title={t('refresh-picker.select-button.auto-refresh', 'Set auto refresh interval')}
             data-testid={selectors.components.RefreshPicker.intervalButtonV2}
             aria-label={ariaLabel}
+            tooltip={tooltipAutoRefresh}
           />
         )}
       </ButtonGroup>

public/locales/de-DE/grafana.json

@@ -669,8 +669,9 @@
       "aria-label": "Automatische Aktualisierung ausschalten",
       "label": "Aus"
     },
-    "select-button": {
-      "auto-refresh": "Automatisches Aktualisierungsintervall festlegen"
+    "tooltip": {
+      "interval-selected": "",
+      "turned-off": ""
     }
   },
   "search": {

public/locales/en-US/grafana.json

@@ -669,8 +669,9 @@
       "aria-label": "Turn off auto refresh",
       "label": "Off"
     },
-    "select-button": {
-      "auto-refresh": "Set auto refresh interval"
+    "tooltip": {
+      "interval-selected": "Set auto refresh interval",
+      "turned-off": "Auto refresh off"
     }
   },
   "search": {

public/locales/es-ES/grafana.json

@@ -674,8 +674,9 @@
       "aria-label": "Desactivar actualización automática",
       "label": "Apagado"
     },
-    "select-button": {
-      "auto-refresh": "Establecer intervalo de actualización automática"
+    "tooltip": {
+      "interval-selected": "",
+      "turned-off": ""
     }
   },
   "search": {

public/locales/fr-FR/grafana.json

@@ -674,8 +674,9 @@
       "aria-label": "Désactiver l'actualisation automatique",
       "label": "Désactivé"
     },
-    "select-button": {
-      "auto-refresh": "Définir l'intervalle d'actualisation automatique"
+    "tooltip": {
+      "interval-selected": "",
+      "turned-off": ""
     }
   },
   "search": {

public/locales/pseudo-LOCALE/grafana.json

@@ -669,8 +669,9 @@
       "aria-label": "Ŧūřʼn őƒƒ äūŧő řęƒřęşĥ",
       "label": "؃ƒ"
     },
-    "select-button": {
-      "auto-refresh": "Ŝęŧ äūŧő řęƒřęşĥ įʼnŧęřväľ"
+    "tooltip": {
+      "interval-selected": "Ŝęŧ äūŧő řęƒřęşĥ įʼnŧęřväľ",
+      "turned-off": "Åūŧő řęƒřęşĥ őƒƒ"
     }
   },
   "search": {

public/locales/zh-Hans/grafana.json

@@ -664,8 +664,9 @@
       "aria-label": "关闭自动刷新",
       "label": "关"
     },
-    "select-button": {
-      "auto-refresh": "设置自动刷新间隔"
+    "tooltip": {
+      "interval-selected": "",
+      "turned-off": ""
     }
   },
   "search": {