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

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

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
-        <ToolbarButton
+        aria-label={t('time-picker.range-picker.backwards-time-aria-label', 'Move time range backwards')}
-          aria-label={t('time-picker.range-picker.backwards-time-aria-label', 'Move time range backwards')}
+        variant={variant}
-          variant={variant}
+        onClick={onMoveBackward}
-          onClick={onMoveBackward}
+        icon="angle-left"
-          icon="angle-left"
+        type="button"
-          type="button"
+        narrow
-          narrow
+      />
-        />
-      )}
 
       <Tooltip
         ref={buttonRef}
@@ -207,16 +204,14 @@ export function TimeRangePicker(props: TimeRangePickerProps) {
 
       {timeSyncButton}
 
-      {hasAbsolute && (
+      <ToolbarButton
-        <ToolbarButton
+        aria-label={t('time-picker.range-picker.forwards-time-aria-label', 'Move time range forwards')}
-          aria-label={t('time-picker.range-picker.forwards-time-aria-label', 'Move time range forwards')}
+        onClick={onMoveForward}
-          onClick={onMoveForward}
+        icon="angle-right"
-          icon="angle-right"
+        narrow
-          narrow
+        type="button"
-          type="button"
+        variant={variant}
-          variant={variant}
+      />
-        />
-      )}
 
       <Tooltip content={ZoomOutTooltip} placement="bottom">
         <ToolbarButton