[EuiSuperDatePicker][EuiAutoRefresh][EuiRefreshInterval] Allow controlling the rendered unit

changelogs/upcoming/7501.md

@@ -0,0 +1,3 @@
+- Updated `EuiSuperDatePicker` with a new `refreshIntervalUnits` prop. Passing this prop allows controlling and overriding the default unit rounding behavior.
+- Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new `intervalUnits` prop. Passing this prop allows controlling and overriding the default unit rounding behavior.
+- Updated `onRefreshChange` to pass back a new `intervalUnits` key that contains the current interval unit format (seconds, minutes, or hours).

src-docs/src/views/auto_refresh/playground.js

@@ -8,6 +8,7 @@ import {
   propUtilityForPlayground,
   dummyFunction,
   simulateFunction,
+  createOptionalEnum,
 } from '../../services/playground';
 
 export const autoRefreshConfig = () => {
@@ -21,6 +22,8 @@ export const autoRefreshConfig = () => {
     true
   );
 
+  propsToUse.intervalUnits = createOptionalEnum(propsToUse.intervalUnits);
+
   propsToUse.append = {
     ...propsToUse.append,
     type: PropTypes.String,
@@ -56,6 +59,8 @@ export const autoRefreshButtonConfig = () => {
     true
   );
 
+  propsToUse.intervalUnits = createOptionalEnum(propsToUse.intervalUnits);
+
   return {
     config: {
       componentName: 'EuiAutoRefreshButton',
@@ -86,6 +91,8 @@ export const refreshIntervalConfig = () => {
     true
   );
 
+  propsToUse.intervalUnits = createOptionalEnum(propsToUse.intervalUnits);
+
   return {
     config: {
       componentName: 'EuiRefreshInterval',

src-docs/src/views/super_date_picker/auto_refresh.tsx

@@ -5,9 +5,14 @@ import {
   OnRefreshChangeProps,
   OnRefreshProps,
   OnTimeChangeProps,
+  RefreshUnitsOptions,
+  EuiSwitch,
 } from '../../../../src';
 
 export default () => {
+  const [doNotRoundUnits, setDoNotRoundUnits] = useState(false);
+  const [intervalUnits, setIntervalUnits] = useState<RefreshUnitsOptions>();
+
   const [refreshInterval, setRefreshInterval] = useState(1000);
   const [isPaused, setIsPaused] = useState(true);
   const [start, setStart] = useState('now-30m');
@@ -29,9 +34,11 @@ export default () => {
   const onRefreshChange = ({
     isPaused,
     refreshInterval,
+    intervalUnits,
   }: OnRefreshChangeProps) => {
     setIsPaused(isPaused);
     setRefreshInterval(refreshInterval);
+    setIntervalUnits(intervalUnits);
   };
 
   return (
@@ -41,8 +48,20 @@ export default () => {
       onTimeChange={onTimeChange}
       onRefresh={onRefresh}
       isPaused={isPaused}
-      refreshInterval={refreshInterval}
       onRefreshChange={onRefreshChange}
+      refreshInterval={refreshInterval}
+      refreshIntervalUnits={doNotRoundUnits ? intervalUnits : undefined}
+      customQuickSelectRender={({ refreshInterval }) => (
+        <>
+          <EuiSwitch
+            label="Round refresh interval up to the next largest unit"
+            checked={!doNotRoundUnits}
+            onChange={() => setDoNotRoundUnits(!doNotRoundUnits)}
+            compressed
+          />
+          {refreshInterval}
+        </>
+      )}
     />
   );
 };

src-docs/src/views/super_date_picker/playground.js

@@ -7,6 +7,7 @@ import {
   propUtilityForPlayground,
   dummyFunction,
   simulateFunction,
+  createOptionalEnum,
 } from '../../services/playground';
 
 export const superDatePickerConfig = () => {
@@ -18,6 +19,10 @@ export const superDatePickerConfig = () => {
   propsToUse.onTimeChange = simulateFunction(propsToUse.onTimeChange, true);
   propsToUse.onRefreshChange = simulateFunction(propsToUse.onRefreshChange);
 
+  propsToUse.refreshIntervalUnits = createOptionalEnum(
+    propsToUse.refreshIntervalUnits
+  );
+
   propsToUse.isPaused = {
     ...propsToUse.isPaused,
     type: PropTypes.Boolean,

src-docs/src/views/super_date_picker/super_date_picker_example.js

@@ -303,7 +303,7 @@ if (!endMoment || !endMoment.isValid()) {
       text: (
         <>
           <p>
-            Set <EuiCode>isAutoRefreshOnly</EuiCode> to <EuiCode>true </EuiCode>{' '}
+            Set <EuiCode>isAutoRefreshOnly</EuiCode> to <EuiCode>true</EuiCode>{' '}
             to limit the component to only display auto refresh content. This is
             useful in cases where there is no time data but auto-refresh
             configuration is still desired.

src/components/date_picker/auto_refresh/auto_refresh.test.tsx

@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import { fireEvent } from '@testing-library/react';
 import { requiredProps } from '../../../test/required_props';
 import { render } from '../../../test/rtl';
 
@@ -40,6 +41,50 @@ describe('EuiAutoRefresh', () => {
 
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  test('intervalUnits forces rendering in the provided units', () => {
+    const { getByLabelText, getByRole, getByTestSubject } = render(
+      <EuiAutoRefresh
+        isPaused={false}
+        refreshInterval={200000}
+        intervalUnits="s"
+        onRefreshChange={() => {}}
+      />
+    );
+
+    expect(getByLabelText('Auto refresh')).toHaveValue('200 seconds');
+
+    fireEvent.click(getByRole('button'));
+    expect(getByTestSubject('superDatePickerRefreshIntervalInput')).toHaveValue(
+      200
+    );
+    expect(
+      getByTestSubject('superDatePickerRefreshIntervalUnitsSelect')
+    ).toHaveValue('s');
+  });
+
+  test('onRefreshChange passes back all expected values', () => {
+    const onRefreshChange = jest.fn();
+    const { getByLabelText, getByTestSubject } = render(
+      <EuiAutoRefresh
+        isPaused={false}
+        refreshInterval={1000}
+        onRefreshChange={onRefreshChange}
+      />
+    );
+
+    fireEvent.click(getByLabelText('Auto refresh'));
+    fireEvent.change(
+      getByTestSubject('superDatePickerRefreshIntervalUnitsSelect'),
+      { target: { value: 'h' } }
+    );
+
+    expect(onRefreshChange).toHaveBeenCalledWith({
+      refreshInterval: 3600000,
+      intervalUnits: 'h',
+      isPaused: false,
+    });
+  });
 });
 
 describe('EuiAutoRefreshButton', () => {
@@ -70,4 +115,48 @@ describe('EuiAutoRefreshButton', () => {
 
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  test('intervalUnits forces rendering in the provided units', () => {
+    const { getByRole, getByTestSubject } = render(
+      <EuiAutoRefreshButton
+        isPaused={false}
+        refreshInterval={200000}
+        intervalUnits="s"
+        onRefreshChange={() => {}}
+      />
+    );
+
+    expect(getByRole('button')).toHaveTextContent('200 s');
+
+    fireEvent.click(getByRole('button'));
+    expect(getByTestSubject('superDatePickerRefreshIntervalInput')).toHaveValue(
+      200
+    );
+    expect(
+      getByTestSubject('superDatePickerRefreshIntervalUnitsSelect')
+    ).toHaveValue('s');
+  });
+
+  test('onRefreshChange passes back all expected values', () => {
+    const onRefreshChange = jest.fn();
+    const { getByRole, getByTestSubject } = render(
+      <EuiAutoRefreshButton
+        isPaused={false}
+        refreshInterval={1000}
+        onRefreshChange={onRefreshChange}
+      />
+    );
+
+    fireEvent.click(getByRole('button'));
+    fireEvent.change(
+      getByTestSubject('superDatePickerRefreshIntervalUnitsSelect'),
+      { target: { value: 'h' } }
+    );
+
+    expect(onRefreshChange).toHaveBeenCalledWith({
+      refreshInterval: 3600000,
+      intervalUnits: 'h',
+      isPaused: false,
+    });
+  });
 });

src/components/date_picker/auto_refresh/auto_refresh.tsx

@@ -36,6 +36,7 @@ export type EuiAutoRefreshProps = EuiAutoRefreshSharedProps & {
 export const EuiAutoRefresh: FunctionComponent<EuiAutoRefreshProps> = ({
   className,
   onRefreshChange,
+  intervalUnits,
   isDisabled,
   isPaused = true,
   refreshInterval = 1000,
@@ -74,7 +75,9 @@ export const EuiAutoRefresh: FunctionComponent<EuiAutoRefreshProps> = ({
           }
           readOnly={readOnly}
           disabled={isDisabled}
-          value={usePrettyInterval(Boolean(isPaused), refreshInterval)}
+          value={usePrettyInterval(Boolean(isPaused), refreshInterval, {
+            unit: intervalUnits,
+          })}
           {...rest}
         />
       }
@@ -87,6 +90,7 @@ export const EuiAutoRefresh: FunctionComponent<EuiAutoRefreshProps> = ({
         onRefreshChange={onRefreshChange}
         isPaused={isPaused}
         refreshInterval={refreshInterval}
+        intervalUnits={intervalUnits}
       />
     </EuiInputPopover>
   );
@@ -107,6 +111,7 @@ export const EuiAutoRefreshButton: FunctionComponent<
 > = ({
   className,
   onRefreshChange,
+  intervalUnits,
   isDisabled,
   isPaused = true,
   refreshInterval = 1000,
@@ -125,7 +130,11 @@ export const EuiAutoRefreshButton: FunctionComponent<
   const autoRefeshLabelOn = useEuiI18n(
     'euiAutoRefresh.buttonLabelOn',
     'Auto refresh is on and set to {prettyInterval}',
-    { prettyInterval: usePrettyInterval(Boolean(isPaused), refreshInterval) }
+    {
+      prettyInterval: usePrettyInterval(Boolean(isPaused), refreshInterval, {
+        unit: intervalUnits,
+      }),
+    }
   );
 
   return (
@@ -141,7 +150,10 @@ export const EuiAutoRefreshButton: FunctionComponent<
           isDisabled={isDisabled}
           {...rest}
         >
-          {usePrettyInterval(Boolean(isPaused), refreshInterval, shortHand)}
+          {usePrettyInterval(Boolean(isPaused), refreshInterval, {
+            shortHand,
+            unit: intervalUnits,
+          })}
         </EuiButtonEmpty>
       }
       isOpen={isPopoverOpen}
@@ -156,6 +168,7 @@ export const EuiAutoRefreshButton: FunctionComponent<
         onRefreshChange={onRefreshChange}
         isPaused={isPaused}
         refreshInterval={refreshInterval}
+        intervalUnits={intervalUnits}
       />
     </EuiPopover>
   );