From ea9040bbf77a6da4e714bbb6aaf86e2cee8c798f Mon Sep 17 00:00:00 2001
From: Collin Fingar <collin.fingar@grafana.com>
Date: Tue, 20 May 2025 09:31:38 -0400
Subject: [PATCH] TimeRangePicker: Added prop to allow side move buttons w/
 relative range (#105422)

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

* Remove prop for displaying the errors

* lint fix
---
 .../DateTimePickers/TimeRangePicker.test.tsx  | 38 +++++++++++++++++++
 .../DateTimePickers/TimeRangePicker.tsx       | 37 ++++++++----------
 2 files changed, 54 insertions(+), 21 deletions(-)

diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.test.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.test.tsx
index 0b2284e875f..386c79ec53a 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.test.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.test.tsx
@@ -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
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
index 0f9e1e5b423..4a6bfb7bc14 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
@@ -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