opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-07-30 21:32:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

TimeRangePicker: Added prop to allow side move buttons w/ relative range (#105422)

Browse Source 
* TimeRangePicker: Added prop to allow side move buttons w/ relative range

* Remove prop for displaying the errors

* lint fix
This commit is contained in:
Collin Fingar
2025-05-20 09:31:38 -04:00
committed by GitHub
parent 38de0cac3a
commit ea9040bbf7
2 changed files with 54 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.test.tsx
View File

@ -18,6 +18,12 @@ const value: TimeRange = {
raw: { from, to },
};
const relativeValue: TimeRange = {
from: from.subtract(1, 'hour'),
to: to,
raw: { from: 'now-1h', to: 'now' },
};
describe('TimePicker', () => {
it('renders buttons correctly', () => {
render(
@ -34,6 +40,38 @@ describe('TimePicker', () => {
expect(screen.getByLabelText(/Time range selected/i)).toBeInTheDocument();
});
it('renders move buttons with relative range', () => {
render(
<TimeRangePicker
onChangeTimeZone={() => {}}
onChange={(value) => {}}
value={relativeValue}
onMoveBackward={() => {}}
onMoveForward={() => {}}
onZoom={() => {}}
/>
);
expect(screen.getByLabelText(/Move time range backwards/i)).toBeInTheDocument();
expect(screen.getByLabelText(/Move time range forwards/i)).toBeInTheDocument();
});
it('renders move buttons with absolute range', () => {
render(
<TimeRangePicker
onChangeTimeZone={() => {}}
onChange={(value) => {}}
value={value}
onMoveBackward={() => {}}
onMoveForward={() => {}}
onZoom={() => {}}
/>
);
expect(screen.getByLabelText(/Move time range backwards/i)).toBeInTheDocument();
expect(screen.getByLabelText(/Move time range forwards/i)).toBeInTheDocument();
});
it('switches overlay content visibility when toolbar button is clicked twice', async () => {
render(
<TimeRangePicker

37
packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
View File

@ -137,7 +137,6 @@ export function TimeRangePicker(props: TimeRangePickerProps) {
const styles = useStyles2(getStyles);
const { modalBackdrop } = useStyles2(getModalStyles);
const hasAbsolute = !rangeUtil.isRelativeTime(value.raw.from) || !rangeUtil.isRelativeTime(value.raw.to);
const variant = isSynced ? 'active' : isOnCanvas ? 'canvas' : 'default';
@ -148,16 +147,14 @@ export function TimeRangePicker(props: TimeRangePickerProps) {
return (
<ButtonGroup className={styles.container}>
{hasAbsolute && (
<ToolbarButton
aria-label={t('time-picker.range-picker.backwards-time-aria-label', 'Move time range backwards')}
variant={variant}
onClick={onMoveBackward}
icon="angle-left"
type="button"
narrow
/>
)}
<ToolbarButton
aria-label={t('time-picker.range-picker.backwards-time-aria-label', 'Move time range backwards')}
variant={variant}
onClick={onMoveBackward}
icon="angle-left"
type="button"
narrow
/>
<Tooltip
ref={buttonRef}
@ -207,16 +204,14 @@ export function TimeRangePicker(props: TimeRangePickerProps) {
{timeSyncButton}
{hasAbsolute && (
<ToolbarButton
aria-label={t('time-picker.range-picker.forwards-time-aria-label', 'Move time range forwards')}
onClick={onMoveForward}
icon="angle-right"
narrow
type="button"
variant={variant}
/>
)}
<ToolbarButton
aria-label={t('time-picker.range-picker.forwards-time-aria-label', 'Move time range forwards')}
onClick={onMoveForward}
icon="angle-right"
narrow
type="button"
variant={variant}
/>
<Tooltip content={ZoomOutTooltip} placement="bottom">
<ToolbarButton