[EuiSuperDatePicker] add showRefreshOnly prop

CHANGELOG.md

@@ -3,6 +3,7 @@
 - Added `onBlur` prop to `EuiComboBox` ([#1400](https://github.com/elastic/eui/pull/1400))
 - Added `initialFocus` prop typedefs to `EuiModal` and `EuiPopover` ([#1410](https://github.com/elastic/eui/pull/1410))
 - Updated `gisApp` icon ([#1413](https://github.com/elastic/eui/pull/1413))
+- Added `isAutoRefreshOnly` prop to `EuiSuperDatePicker` ([#1412](https://github.com/elastic/eui/pull/1412))
 
 ## [`6.2.0`](https://github.com/elastic/eui/tree/v6.2.0)
 

src-docs/src/views/date_picker/date_picker_example.js

@@ -298,6 +298,10 @@ export const DatePickerExample = {
           to immediately invoke <EuiCode>onTimeChange</EuiCode>{' '}
           for all <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> changes.
         </p>
+        <p>
+          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.
+        </p>
       </div>
     ),
     demo: <SuperDatePicker />,

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

@@ -15,6 +15,7 @@ export default class extends Component {
     recentlyUsedRanges: [],
     isLoading: false,
     showUpdateButton: true,
+    isAutoRefreshOnly: false,
     start: 'now-30m',
     end: 'now',
   }
@@ -60,13 +61,55 @@ export default class extends Component {
     }));
   }
 
+  toggleShowRefreshOnly = () => {
+    this.setState(prevState => ({
+      isAutoRefreshOnly: !prevState.isAutoRefreshOnly,
+    }));
+  }
+
+  renderTimeRange = () => {
+    if (this.state.isAutoRefreshOnly) {
+      return null;
+    }
+
+    return (
+      <Fragment>
+        <EuiFormRow
+          label="start"
+        >
+          <EuiFieldText
+            readOnly
+            value={this.state.start}
+          />
+        </EuiFormRow>
+        <EuiFormRow
+          label="end"
+        >
+          <EuiFieldText
+            readOnly
+            value={this.state.end}
+          />
+        </EuiFormRow>
+      </Fragment>
+    );
+  }
+
   render() {
     return (
       <Fragment>
         <EuiSwitch
           label="Show apply button"
           onChange={this.toggleShowApplyButton}
-          checked={this.state.showUpdateButton}
+          checked={!this.state.isAutoRefreshOnly && this.state.showUpdateButton}
+          disabled={this.state.isAutoRefreshOnly}
+        />
+
+        &emsp;
+
+        <EuiSwitch
+          label="Is auto-refresh only"
+          onChange={this.toggleShowRefreshOnly}
+          checked={this.state.isAutoRefreshOnly}
         />
         <EuiSpacer />
 
@@ -80,24 +123,12 @@ export default class extends Component {
           onRefreshChange={this.onRefreshChange}
           recentlyUsedRanges={this.state.recentlyUsedRanges}
           showUpdateButton={this.state.showUpdateButton}
+          isAutoRefreshOnly={this.state.isAutoRefreshOnly}
         />
 
-        <EuiFormRow
-          label="start"
-        >
-          <EuiFieldText
-            readOnly
-            value={this.state.start}
-          />
-        </EuiFormRow>
-        <EuiFormRow
-          label="end"
-        >
-          <EuiFieldText
-            readOnly
-            value={this.state.end}
-          />
-        </EuiFormRow>
+        <EuiSpacer />
+
+        {this.renderTimeRange()}
       </Fragment>
     );
   }

src/components/date_picker/_date_picker_range.scss

@@ -53,3 +53,7 @@
     padding-right: $euiFormControlPadding / 2;
   }
 }
+
+.euiDatePickerRange--readOnly {
+  background: $euiFormBackgroundDisabledColor;
+}

src/components/date_picker/date_picker_range.js

@@ -18,13 +18,15 @@ export const EuiDatePickerRange = ({
   iconType,
   fullWidth,
   isCustom,
+  readOnly,
   ...rest
 }) => {
 
   const classes = classNames(
     'euiDatePickerRange',
     {
       'euiDatePickerRange--fullWidth': fullWidth,
+      'euiDatePickerRange--readOnly': readOnly,
     },
     className
   );
@@ -47,11 +49,13 @@ export const EuiDatePickerRange = ({
     startControl = cloneElement(startDateControl, {
       showIcon: false,
       fullWidth: fullWidth,
+      readOnly: readOnly,
     });
 
     endControl = cloneElement(endDateControl, {
       showIcon: false,
       fullWidth: fullWidth,
+      readOnly: readOnly,
     });
   }
 

src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.js.snap

@@ -72,6 +72,7 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
           }
           dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
           end="now"
+          isAutoRefreshOnly={false}
           isPaused={true}
           recentlyUsedRanges={Array []}
           refreshInterval={0}
@@ -204,6 +205,7 @@ exports[`EuiSuperDatePicker isLoading 1`] = `
           }
           dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
           end="now"
+          isAutoRefreshOnly={false}
           isPaused={true}
           recentlyUsedRanges={Array []}
           refreshInterval={0}

src/components/date_picker/super_date_picker/pretty_interval.js

@@ -0,0 +1,27 @@
+
+const MS_IN_SECOND = 1000;
+const MS_IN_MINUTE = 60 * MS_IN_SECOND;
+const MS_IN_HOUR = 60 * MS_IN_MINUTE;
+const MS_IN_DAY = 24 * MS_IN_HOUR;
+
+export function prettyInterval(isPaused, intervalInMs) {
+  if (isPaused || intervalInMs === 0) {
+    return 'Off';
+  } else if (intervalInMs < MS_IN_MINUTE) {
+    const intervalInSeconds = Math.round(intervalInMs / MS_IN_SECOND);
+    const units = intervalInSeconds > 1 ? 'seconds' : 'second';
+    return `${intervalInSeconds} ${units}`;
+  } else if (intervalInMs < MS_IN_HOUR) {
+    const intervalInMinutes = Math.round(intervalInMs / MS_IN_MINUTE);
+    const units = intervalInMinutes > 1 ? 'minutes' : 'minute';
+    return `${intervalInMinutes} ${units}`;
+  } else if (intervalInMs < MS_IN_DAY) {
+    const intervalInHours = Math.round(intervalInMs / MS_IN_HOUR);
+    const units = intervalInHours > 1 ? 'hours' : 'hour';
+    return `${intervalInHours} ${units}`;
+  }
+
+  const intervalInDays = Math.round(intervalInMs / MS_IN_DAY);
+  const units = intervalInDays > 1 ? 'days' : 'day';
+  return `${intervalInDays} ${units}`;
+}

src/components/date_picker/super_date_picker/pretty_interval.test.js

@@ -0,0 +1,30 @@
+
+import { prettyInterval } from './pretty_interval';
+
+const IS_NOT_PAUSED = false;
+const IS_PAUSED = true;
+
+test('Off', () => {
+  expect(prettyInterval(IS_NOT_PAUSED, 0)).toBe('Off');
+  expect(prettyInterval(IS_PAUSED, 1000)).toBe('Off');
+});
+
+test('seconds', () => {
+  expect(prettyInterval(IS_NOT_PAUSED, 1000)).toBe('1 second');
+  expect(prettyInterval(IS_NOT_PAUSED, 15000)).toBe('15 seconds');
+});
+
+test('minutes', () => {
+  expect(prettyInterval(IS_NOT_PAUSED, 60000)).toBe('1 minute');
+  expect(prettyInterval(IS_NOT_PAUSED, 1800000)).toBe('30 minutes');
+});
+
+test('hours', () => {
+  expect(prettyInterval(IS_NOT_PAUSED, 3600000)).toBe('1 hour');
+  expect(prettyInterval(IS_NOT_PAUSED, 43200000)).toBe('12 hours');
+});
+
+test('days', () => {
+  expect(prettyInterval(IS_NOT_PAUSED, 86400000)).toBe('1 day');
+  expect(prettyInterval(IS_NOT_PAUSED, 86400000 * 2)).toBe('2 days');
+});

src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiSuperDatePicker is rendered 1`] = `
+exports[`EuiQuickSelect is rendered 1`] = `
 <React.Fragment>
   <EuiFlexGroup
     alignItems="center"
@@ -212,7 +212,7 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
 </React.Fragment>
 `;
 
-exports[`EuiSuperDatePicker prevQuickSelect 1`] = `
+exports[`EuiQuickSelect prevQuickSelect 1`] = `
 <React.Fragment>
   <EuiFlexGroup
     alignItems="center"

src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap

@@ -0,0 +1,135 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiQuickSelectPopover is rendered 1`] = `
+<EuiPopover
+  anchorPosition="downLeft"
+  button={
+    <EuiButtonEmpty
+      aria-label="Date quick select"
+      className="euiFormControlLayout__prepend"
+      color="primary"
+      data-test-subj="superDatePickerToggleQuickMenuButton"
+      iconSide="right"
+      iconType="arrowDown"
+      onClick={[Function]}
+      size="xs"
+      textProps={
+        Object {
+          "className": "euiQuickSelectPopover__buttonText",
+        }
+      }
+      type="button"
+    >
+      <EuiIcon
+        size="m"
+        type="calendar"
+      />
+    </EuiButtonEmpty>
+  }
+  closePopover={[Function]}
+  hasArrow={true}
+  id="QuickSelectPopover"
+  isOpen={false}
+  ownFocus={true}
+  panelPaddingSize="m"
+>
+  <div
+    className="euiQuickSelectPopover__content"
+    data-test-subj="superDatePickerQuickMenu"
+  >
+    <React.Fragment>
+      <EuiQuickSelect
+        applyTime={[Function]}
+        end="now"
+        prevQuickSelect={Object {}}
+        start="now-15m"
+      />
+      <EuiCommonlyUsedTimeRanges
+        applyTime={[Function]}
+        commonlyUsedRanges={
+          Array [
+            Object {
+              "end": "now/d",
+              "label": "Today",
+              "start": "now/d",
+            },
+          ]
+        }
+      />
+      <EuiRecentlyUsed
+        applyTime={[Function]}
+        commonlyUsedRanges={
+          Array [
+            Object {
+              "end": "now/d",
+              "label": "Today",
+              "start": "now/d",
+            },
+          ]
+        }
+        dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
+        recentlyUsedRanges={
+          Array [
+            Object {
+              "end": "now/d",
+              "label": "Today",
+              "start": "now/d",
+            },
+          ]
+        }
+      />
+    </React.Fragment>
+    <EuiRefreshInterval
+      applyRefreshInterval={[Function]}
+      isPaused={true}
+      refreshInterval={0}
+    />
+  </div>
+</EuiPopover>
+`;
+
+exports[`EuiQuickSelectPopover isAutoRefreshOnly 1`] = `
+<EuiPopover
+  anchorPosition="downLeft"
+  button={
+    <EuiButtonEmpty
+      aria-label="Date quick select"
+      className="euiFormControlLayout__prepend"
+      color="primary"
+      data-test-subj="superDatePickerToggleQuickMenuButton"
+      iconSide="right"
+      iconType="arrowDown"
+      onClick={[Function]}
+      size="xs"
+      textProps={
+        Object {
+          "className": "euiQuickSelectPopover__buttonText",
+        }
+      }
+      type="button"
+    >
+      <EuiIcon
+        size="m"
+        type="clock"
+      />
+    </EuiButtonEmpty>
+  }
+  closePopover={[Function]}
+  hasArrow={true}
+  id="QuickSelectPopover"
+  isOpen={false}
+  ownFocus={true}
+  panelPaddingSize="m"
+>
+  <div
+    className="euiQuickSelectPopover__content"
+    data-test-subj="superDatePickerQuickMenu"
+  >
+    <EuiRefreshInterval
+      applyRefreshInterval={[Function]}
+      isPaused={true}
+      refreshInterval={0}
+    />
+  </div>
+</EuiPopover>
+`;

src/components/date_picker/super_date_picker/quick_select_popover/quick_select.test.js

@@ -11,7 +11,7 @@ const defaultProps = {
   start: 'now-15m',
   end: 'now',
 };
-describe('EuiSuperDatePicker', () => {
+describe('EuiQuickSelect', () => {
   test('is rendered', () => {
     const component = shallow(
       <EuiQuickSelect