[EuiSuperDatePicker] Time window buttons

packages/eui/changelogs/upcoming/9151.md

@@ -0,0 +1,2 @@
+- Updated `EuiSuperDatePicker` with new time window buttons for time shifting and zoom out, opt-in via `showTimeWindowButtons` boolean prop.
+

packages/eui/src/components/date_picker/super_date_picker/__snapshots__/time_window_buttons.test.tsx.snap

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TimeWindowButtons renders 1`] = `
+<div
+  class="euiSuperDatePicker__timeWindowButtons emotion-euiButtonGroup__buttons-m-TimeWindowButtons"
+  data-test-subj="timeWindowButtons"
+>
+  <span
+    class="euiToolTipAnchor euiButtonGroup__tooltipWrapper emotion-euiToolTipAnchor-inlineBlock-tooltipWrapper-m"
+  >
+    <button
+      aria-pressed="false"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly emotion-euiButtonDisplay-m-defaultMinWidth-euiButtonGroupButton-iconOnly-hasToolTip-uncompressed-base-text"
+      data-test-subj="timeWindowButtonsPrevious"
+      title=""
+      type="button"
+    >
+      <span
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
+      >
+        <span
+          color="inherit"
+          data-euiicon-type="arrowLeft"
+        />
+        <span
+          class="eui-textTruncate emotion-euiButtonGroupButton__iconOnly"
+          data-text="Previous"
+        >
+          Previous
+        </span>
+      </span>
+    </button>
+  </span>
+  <span
+    class="euiToolTipAnchor euiButtonGroup__tooltipWrapper emotion-euiToolTipAnchor-inlineBlock-tooltipWrapper-m"
+  >
+    <button
+      aria-pressed="false"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly emotion-euiButtonDisplay-m-defaultMinWidth-euiButtonGroupButton-iconOnly-hasToolTip-uncompressed-base-text"
+      data-test-subj="timeWindowButtonsZoomOut"
+      title=""
+      type="button"
+    >
+      <span
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
+      >
+        <span
+          color="inherit"
+          data-euiicon-type="magnifyWithMinus"
+        />
+        <span
+          class="eui-textTruncate emotion-euiButtonGroupButton__iconOnly"
+          data-text="Zoom out"
+        >
+          Zoom out
+        </span>
+      </span>
+    </button>
+  </span>
+  <span
+    class="euiToolTipAnchor euiButtonGroup__tooltipWrapper emotion-euiToolTipAnchor-inlineBlock-tooltipWrapper-m"
+  >
+    <button
+      aria-pressed="false"
+      class="euiButtonGroupButton euiButtonGroupButton-isIconOnly emotion-euiButtonDisplay-m-defaultMinWidth-euiButtonGroupButton-iconOnly-hasToolTip-uncompressed-base-text"
+      data-test-subj="timeWindowButtonsNext"
+      title=""
+      type="button"
+    >
+      <span
+        class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content"
+      >
+        <span
+          color="inherit"
+          data-euiicon-type="arrowRight"
+        />
+        <span
+          class="eui-textTruncate emotion-euiButtonGroupButton__iconOnly"
+          data-text="Next"
+        >
+          Next
+        </span>
+      </span>
+    </button>
+  </span>
+</div>
+`;

packages/eui/src/components/date_picker/super_date_picker/pretty_duration.tsx

@@ -11,7 +11,7 @@ import dateMath from '@elastic/datemath';
 import moment, { LocaleSpecifier, RelativeTimeKey } from 'moment'; // eslint-disable-line import/named
 import { useEuiI18n } from '../../i18n';
 import { getDateMode, DATE_MODES } from './date_modes';
-import { parseRelativeParts } from './relative_utils';
+import { parseRelativeParts, isRelativeToNow } from './relative_utils';
 import { useI18nTimeOptions } from './time_options';
 import {
   DurationRange,
@@ -315,16 +315,6 @@ const hasRangeMatch = (
   return ranges.find(({ start, end }) => timeFrom === start && timeTo === end);
 };
 
-const isRelativeToNow = (timeFrom: ShortDate, timeTo: ShortDate): boolean => {
-  const fromDateMode = getDateMode(timeFrom);
-  const toDateMode = getDateMode(timeTo);
-  const isLast =
-    fromDateMode === DATE_MODES.RELATIVE && toDateMode === DATE_MODES.NOW;
-  const isNext =
-    fromDateMode === DATE_MODES.NOW && toDateMode === DATE_MODES.RELATIVE;
-  return isLast || isNext;
-};
-
 export const showPrettyDuration = (
   timeFrom: ShortDate,
   timeTo: ShortDate,

packages/eui/src/components/date_picker/super_date_picker/relative_utils.ts

@@ -11,7 +11,8 @@ import moment from 'moment';
 
 import { get } from '../../../services/objects';
 import { isString } from '../../../services/predicate';
-import { TimeUnitId, RelativeParts } from '../types';
+import { TimeUnitId, RelativeParts, ShortDate } from '../types';
+import { getDateMode, DATE_MODES } from './date_modes';
 
 const ROUND_DELIMETER = '/';
 
@@ -80,3 +81,16 @@ export const toRelativeStringFromParts = (relativeParts: RelativeParts) => {
 
   return `now${operator}${count}${unit}${round}`;
 };
+
+export const isRelativeToNow = (
+  timeFrom: ShortDate,
+  timeTo: ShortDate
+): boolean => {
+  const fromDateMode = getDateMode(timeFrom);
+  const toDateMode = getDateMode(timeTo);
+  const isLast =
+    fromDateMode === DATE_MODES.RELATIVE && toDateMode === DATE_MODES.NOW;
+  const isNext =
+    fromDateMode === DATE_MODES.NOW && toDateMode === DATE_MODES.RELATIVE;
+  return isLast || isNext;
+};

packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx

@@ -190,6 +190,14 @@ export const QuickSelectOnly: Story = {
   },
 };
 
+export const TimeWindowButtons: Story = {
+  args: {
+    showTimeWindowButtons: true,
+    showUpdateButton: false,
+  },
+  render: (args) => <StatefulSuperDatePicker {...args} />,
+};
+
 /**
  * VRT only
  */

packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx

@@ -8,7 +8,7 @@
 
 import React, { useState } from 'react';
 import moment from 'moment';
-import { fireEvent, act } from '@testing-library/react';
+import { fireEvent, act, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { render, waitForEuiPopoverOpen, screen } from '../../../test/rtl';
@@ -19,6 +19,7 @@ import {
   EuiSuperDatePicker,
   EuiSuperDatePickerProps,
 } from './super_date_picker';
+import { ZOOM_FACTOR_DEFAULT } from './time_window_buttons';
 
 const noop = () => {};
 
@@ -640,4 +641,136 @@ describe('EuiSuperDatePicker', () => {
       expect(prevEnd).toBe('2025-01-01T10:00:00.000Z');
     });
   });
+
+  describe('Time window buttons', () => {
+    it('renders only when showTimeWindowButtons prop is passed', () => {
+      const start = '2025-10-30T12:00:00.000Z';
+      const end = '2025-10-30T13:00:00.000Z';
+
+      const { queryByTestSubject, rerender } = render(
+        <EuiSuperDatePicker
+          start={start}
+          end={end}
+          onTimeChange={() => {}}
+          showTimeWindowButtons
+        />
+      );
+
+      expect(queryByTestSubject('timeWindowButtons')).toBeInTheDocument();
+
+      rerender(
+        <EuiSuperDatePicker start={start} end={end} onTimeChange={() => {}} />
+      );
+
+      expect(queryByTestSubject('timeWindowButtons')).not.toBeInTheDocument();
+    });
+
+    it('updates time when shifting', async () => {
+      const start = '2025-10-30T12:00:00.000Z';
+      const end = '2025-10-30T13:00:00.000Z';
+      const stepBackwardStart = '2025-10-30T11:00:00.000Z';
+      const stepBackwardEnd = '2025-10-30T12:00:00.000Z';
+      let lastTimeChange: { start: string; end: string } = { start, end };
+
+      const { getByTestSubject } = render(
+        <EuiSuperDatePicker
+          start={start}
+          end={end}
+          onTimeChange={({ start, end }) => {
+            lastTimeChange = { start, end };
+          }}
+          showUpdateButton={false}
+          showTimeWindowButtons={true}
+        />
+      );
+
+      act(() => {
+        userEvent.click(getByTestSubject('timeWindowButtonsPrevious'));
+      });
+
+      await waitFor(() => {
+        expect(lastTimeChange.end).toEqual(stepBackwardEnd);
+        expect(lastTimeChange.start).toEqual(stepBackwardStart);
+
+        const initialTimeStart = new Date(start).getTime();
+        const updatedTimeStart = new Date(lastTimeChange.start).getTime();
+        const initialTimeEnd = new Date(end).getTime();
+        const updatedTimeEnd = new Date(lastTimeChange.end).getTime();
+
+        expect(initialTimeStart).toBeGreaterThan(updatedTimeStart);
+        expect(initialTimeEnd).toBeGreaterThan(updatedTimeEnd);
+        // Also check the diff is the same
+        expect(initialTimeEnd - initialTimeStart).toEqual(
+          updatedTimeEnd - updatedTimeStart
+        );
+      });
+    });
+
+    it('updates time when zooming out', async () => {
+      const start = '2025-10-30T12:00:00.000Z';
+      const end = '2025-10-31T12:00:00.000Z';
+      let lastTimeChange: { start: string; end: string } = { start, end };
+
+      const { getByTestSubject } = render(
+        <EuiSuperDatePicker
+          start={start}
+          end={end}
+          onTimeChange={({ start, end }) => {
+            lastTimeChange = { start, end };
+          }}
+          showUpdateButton={false}
+          showTimeWindowButtons={true}
+        />
+      );
+
+      act(() => {
+        userEvent.click(getByTestSubject('timeWindowButtonsZoomOut'));
+      });
+
+      await waitFor(() => {
+        const initialTimeStart = new Date(start).getTime();
+        const updatedTimeStart = new Date(lastTimeChange.start).getTime();
+        const initialTimeEnd = new Date(end).getTime();
+        const updatedTimeEnd = new Date(lastTimeChange.end).getTime();
+        expect(initialTimeStart).toBeGreaterThan(updatedTimeStart);
+        expect(initialTimeEnd).toBeLessThan(updatedTimeEnd);
+        // Check the diff expanded by zoom factor
+        expect(
+          (initialTimeEnd - initialTimeStart) * (1 + ZOOM_FACTOR_DEFAULT)
+        ).toEqual(updatedTimeEnd - updatedTimeStart);
+      });
+    });
+
+    it('is disabled when date/time range is invalid', async () => {
+      // reversed range (invalid)
+      const start = '2025-10-30T14:00:00.000Z';
+      const end = '2025-10-31T14:00:00.000Z';
+
+      const { rerender, getByTestSubject } = render(
+        <EuiSuperDatePicker
+          start={end}
+          end={start}
+          onTimeChange={() => {}}
+          showTimeWindowButtons={true}
+        />
+      );
+
+      expect(getByTestSubject('timeWindowButtonsPrevious')).toBeDisabled();
+      expect(getByTestSubject('timeWindowButtonsZoomOut')).toBeDisabled();
+      expect(getByTestSubject('timeWindowButtonsNext')).toBeDisabled();
+
+      rerender(
+        <EuiSuperDatePicker
+          start={start}
+          end={end}
+          onTimeChange={() => {}}
+          showTimeWindowButtons={true}
+        />
+      );
+
+      expect(getByTestSubject('timeWindowButtonsPrevious')).not.toBeDisabled();
+      expect(getByTestSubject('timeWindowButtonsZoomOut')).not.toBeDisabled();
+      expect(getByTestSubject('timeWindowButtonsNext')).not.toBeDisabled();
+    });
+  });
 });

packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx

@@ -39,6 +39,10 @@ import {
 
 import { TimeOptions, RenderI18nTimeOptions } from './time_options';
 import { PrettyDuration, showPrettyDuration } from './pretty_duration';
+import {
+  TimeWindowButtons,
+  type TimeWindowButtonsConfig,
+} from './time_window_buttons';
 import { AsyncInterval } from './async_interval';
 
 import {
@@ -202,6 +206,12 @@ export type EuiSuperDatePickerProps = CommonProps & {
    */
   showUpdateButton?: boolean | 'iconOnly';
 
+  /**
+   * Set to true to display buttons for time shifting and zooming out,
+   * next to the top-level control.
+   */
+  showTimeWindowButtons?: boolean | TimeWindowButtonsConfig;
+
   /**
    * Hides the actual input reducing to just the quick select button.
    */
@@ -725,6 +735,27 @@ export class EuiSuperDatePickerInternal extends Component<
     }
   };
 
+  renderTimeWindowButtons = () => {
+    if (!this.props.showTimeWindowButtons || this.props.isAutoRefreshOnly) {
+      return null;
+    }
+    const { start, end, showTimeWindowButtons, compressed, isDisabled } =
+      this.props;
+    const config =
+      typeof showTimeWindowButtons === 'boolean' ? {} : showTimeWindowButtons;
+
+    return (
+      <TimeWindowButtons
+        applyTime={this.applyQuickTime}
+        start={start}
+        end={end}
+        compressed={compressed}
+        isDisabled={!!isDisabled || this.state.isInvalid}
+        {...config}
+      />
+    );
+  };
+
   renderUpdateButton = () => {
     const {
       isLoading,
@@ -805,6 +836,7 @@ export class EuiSuperDatePickerInternal extends Component<
         ) : (
           <>
             {this.renderDatePickerRange()}
+            {this.renderTimeWindowButtons()}
             {this.renderUpdateButton()}
           </>
         )}