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

View File

@ -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>

View File

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

View File

@ -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": {

View File

@ -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": {

View File

@ -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": {

View File

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

View File

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