From a52fff4e868fa5ec301a6ca2eca1782aea2dde91 Mon Sep 17 00:00:00 2001 From: Laura Benz <48948963+L-M-K-B@users.noreply.github.com> Date: Tue, 19 Sep 2023 15:06:19 +0200 Subject: [PATCH] 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 --- .../grafana-ui/src/components/Dropdown/ButtonSelect.tsx | 2 ++ .../src/components/RefreshPicker/RefreshPicker.tsx | 6 +++++- public/locales/de-DE/grafana.json | 5 +++-- public/locales/en-US/grafana.json | 5 +++-- public/locales/es-ES/grafana.json | 5 +++-- public/locales/fr-FR/grafana.json | 5 +++-- public/locales/pseudo-LOCALE/grafana.json | 5 +++-- public/locales/zh-Hans/grafana.json | 5 +++-- 8 files changed, 25 insertions(+), 13 deletions(-) diff --git a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx index bff3fb8353e..a6dba1060bb 100644 --- a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx +++ b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx @@ -20,9 +20,11 @@ export interface Props extends HTMLAttributes { options: Array>; value?: SelectableValue; onChange: (item: SelectableValue) => void; + /** @deprecated use tooltip instead, tooltipContent is not being processed in ToolbarButton*/ tooltipContent?: PopoverContent; narrow?: boolean; variant?: ToolbarButtonVariant; + tooltip?: string; } /** diff --git a/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx b/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx index 278a85a3137..ab08d0d51ef 100644 --- a/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx +++ b/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx @@ -101,6 +101,10 @@ export class RefreshPicker extends PureComponent { ); 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 ( { 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} /> )} diff --git a/public/locales/de-DE/grafana.json b/public/locales/de-DE/grafana.json index 3d9902318b2..8809a2424af 100644 --- a/public/locales/de-DE/grafana.json +++ b/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": { diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index 60801a3f577..bda6c9dbe90 100644 --- a/public/locales/en-US/grafana.json +++ b/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": { diff --git a/public/locales/es-ES/grafana.json b/public/locales/es-ES/grafana.json index d8631fe219c..eb8e6f1c773 100644 --- a/public/locales/es-ES/grafana.json +++ b/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": { diff --git a/public/locales/fr-FR/grafana.json b/public/locales/fr-FR/grafana.json index b45239be892..05bfcb26f84 100644 --- a/public/locales/fr-FR/grafana.json +++ b/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": { diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json index 5f9770bac16..6229a841b09 100644 --- a/public/locales/pseudo-LOCALE/grafana.json +++ b/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": { diff --git a/public/locales/zh-Hans/grafana.json b/public/locales/zh-Hans/grafana.json index 669cc3c2980..9dfb9d50719 100644 --- a/public/locales/zh-Hans/grafana.json +++ b/public/locales/zh-Hans/grafana.json @@ -664,8 +664,9 @@ "aria-label": "关闭自动刷新", "label": "关" }, - "select-button": { - "auto-refresh": "设置自动刷新间隔" + "tooltip": { + "interval-selected": "", + "turned-off": "" } }, "search": {