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
This commit is contained in:
Laura Benz 2023-09-19 15:06:19 +02:00 committed by GitHub
parent 0d3c47da99
commit a52fff4e86
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 25 additions and 13 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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