mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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:
parent
0d3c47da99
commit
a52fff4e86
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -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>
|
||||||
|
@ -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": {
|
||||||
|
@ -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": {
|
||||||
|
@ -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": {
|
||||||
|
@ -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": {
|
||||||
|
@ -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": {
|
||||||
|
@ -664,8 +664,9 @@
|
|||||||
"aria-label": "关闭自动刷新",
|
"aria-label": "关闭自动刷新",
|
||||||
"label": "关"
|
"label": "关"
|
||||||
},
|
},
|
||||||
"select-button": {
|
"tooltip": {
|
||||||
"auto-refresh": "设置自动刷新间隔"
|
"interval-selected": "",
|
||||||
|
"turned-off": ""
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"search": {
|
"search": {
|
||||||
|
Loading…
Reference in New Issue
Block a user