From 008a5a85ae998c87268642f04afbfb1c65ffd28f Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Fri, 4 Jan 2019 15:00:20 -0700
Subject: [PATCH 1/4] [EuiSuperDatePicker] add showRefreshOnly prop

---
 .../views/date_picker/super_date_picker.js    |  59 +++++---
 .../super_date_picker.test.js.snap            |   2 +
 .../super_date_picker/pretty_interval.js      |  27 ++++
 .../super_date_picker/pretty_interval.test.js |  30 ++++
 .../__snapshots__/quick_select.test.js.snap   |   4 +-
 .../quick_select_popover.test.js.snap         | 135 ++++++++++++++++++
 .../quick_select_popover/quick_select.test.js |   2 +-
 .../quick_select_popover.js                   |  47 +++---
 .../quick_select_popover.test.js              |  50 +++++++
 .../super_date_picker/super_date_picker.js    |  25 +++-
 10 files changed, 344 insertions(+), 37 deletions(-)
 create mode 100644 src/components/date_picker/super_date_picker/pretty_interval.js
 create mode 100644 src/components/date_picker/super_date_picker/pretty_interval.test.js
 create mode 100644 src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap
 create mode 100644 src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.js

diff --git a/src-docs/src/views/date_picker/super_date_picker.js b/src-docs/src/views/date_picker/super_date_picker.js
index 3c9154d47de..09f651537a1 100644
--- a/src-docs/src/views/date_picker/super_date_picker.js
+++ b/src-docs/src/views/date_picker/super_date_picker.js
@@ -15,6 +15,7 @@ export default class extends Component {
     recentlyUsedRanges: [],
     isLoading: false,
     showUpdateButton: true,
+    showRefreshOnly: false,
     start: 'now-30m',
     end: 'now',
   }
@@ -60,6 +61,39 @@ export default class extends Component {
     }));
   }
 
+  toggleShowRefreshOnly = () => {
+    this.setState(prevState => ({
+      showRefreshOnly: !prevState.showRefreshOnly,
+    }));
+  }
+
+  renderTimeRange = () => {
+    if (this.state.showRefreshOnly) {
+      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>
@@ -68,6 +102,11 @@ export default class extends Component {
           onChange={this.toggleShowApplyButton}
           checked={this.state.showUpdateButton}
         />
+        <EuiSwitch
+          label="Show refresh only"
+          onChange={this.toggleShowRefreshOnly}
+          checked={this.state.showRefreshOnly}
+        />
         <EuiSpacer />
 
         <EuiSuperDatePicker
@@ -80,24 +119,12 @@ export default class extends Component {
           onRefreshChange={this.onRefreshChange}
           recentlyUsedRanges={this.state.recentlyUsedRanges}
           showUpdateButton={this.state.showUpdateButton}
+          showRefreshOnly={this.state.showRefreshOnly}
         />
 
-        <EuiFormRow
-          label="start"
-        >
-          <EuiFieldText
-            readOnly
-            value={this.state.start}
-          />
-        </EuiFormRow>
-        <EuiFormRow
-          label="end"
-        >
-          <EuiFieldText
-            readOnly
-            value={this.state.end}
-          />
-        </EuiFormRow>
+        <EuiSpacer />
+
+        {this.renderTimeRange()}
       </Fragment>
     );
   }
diff --git a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.js.snap b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.js.snap
index ef2a7b9e8fd..29e5604f5c5 100644
--- a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.js.snap
+++ b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.js.snap
@@ -75,6 +75,7 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
           isPaused={true}
           recentlyUsedRanges={Array []}
           refreshInterval={0}
+          showRefreshOnly={false}
           start="now-15m"
         />
       }
@@ -207,6 +208,7 @@ exports[`EuiSuperDatePicker isLoading 1`] = `
           isPaused={true}
           recentlyUsedRanges={Array []}
           refreshInterval={0}
+          showRefreshOnly={false}
           start="now-15m"
         />
       }
diff --git a/src/components/date_picker/super_date_picker/pretty_interval.js b/src/components/date_picker/super_date_picker/pretty_interval.js
new file mode 100644
index 00000000000..fe8db73a50a
--- /dev/null
+++ b/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}`;
+}
diff --git a/src/components/date_picker/super_date_picker/pretty_interval.test.js b/src/components/date_picker/super_date_picker/pretty_interval.test.js
new file mode 100644
index 00000000000..1eb067fdb92
--- /dev/null
+++ b/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');
+});
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap
index 12d0b8b97f2..37fcd8b38a8 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap
+++ b/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"
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap
new file mode 100644
index 00000000000..4852b42d6d8
--- /dev/null
+++ b/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 showRefreshOnly 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"
+  >
+    <EuiRefreshInterval
+      applyRefreshInterval={[Function]}
+      isPaused={true}
+      refreshInterval={0}
+    />
+  </div>
+</EuiPopover>
+`;
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.test.js b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.test.js
index 49733a1b676..3bceebb3a48 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.test.js
+++ b/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
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js
index d4899d372da..7cc1392a624 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js
@@ -1,6 +1,6 @@
 
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { commonlyUsedRangeShape, recentlyUsedRangeShape } from '../types';
 
 import {
@@ -49,6 +49,33 @@ export class EuiQuickSelectPopover extends Component {
     }
   }
 
+  renderDateTimeSections = () => {
+    if (this.props.showRefreshOnly) {
+      return null;
+    }
+
+    return (
+      <Fragment>
+        <EuiQuickSelect
+          applyTime={this.applyTime}
+          start={this.props.start}
+          end={this.props.end}
+          prevQuickSelect={this.state.prevQuickSelect}
+        />
+        <EuiCommonlyUsedTimeRanges
+          applyTime={this.applyTime}
+          commonlyUsedRanges={this.props.commonlyUsedRanges}
+        />
+        <EuiRecentlyUsed
+          applyTime={this.applyTime}
+          commonlyUsedRanges={this.props.commonlyUsedRanges}
+          dateFormat={this.props.dateFormat}
+          recentlyUsedRanges={this.props.recentlyUsedRanges}
+        />
+      </Fragment>
+    );
+  }
+
   render() {
     const quickSelectButton = (
       <EuiButtonEmpty
@@ -78,22 +105,7 @@ export class EuiQuickSelectPopover extends Component {
           className="euiQuickSelectPopover__content"
           data-test-subj="superDatePickerQuickMenu"
         >
-          <EuiQuickSelect
-            applyTime={this.applyTime}
-            start={this.props.start}
-            end={this.props.end}
-            prevQuickSelect={this.state.prevQuickSelect}
-          />
-          <EuiCommonlyUsedTimeRanges
-            applyTime={this.applyTime}
-            commonlyUsedRanges={this.props.commonlyUsedRanges}
-          />
-          <EuiRecentlyUsed
-            applyTime={this.applyTime}
-            commonlyUsedRanges={this.props.commonlyUsedRanges}
-            dateFormat={this.props.dateFormat}
-            recentlyUsedRanges={this.props.recentlyUsedRanges}
-          />
+          {this.renderDateTimeSections()}
           <EuiRefreshInterval
             applyRefreshInterval={this.props.applyRefreshInterval}
             isPaused={this.props.isPaused}
@@ -115,4 +127,5 @@ EuiQuickSelectPopover.propTypes = {
   commonlyUsedRanges: PropTypes.arrayOf(commonlyUsedRangeShape).isRequired,
   dateFormat: PropTypes.string.isRequired,
   recentlyUsedRanges: PropTypes.arrayOf(recentlyUsedRangeShape).isRequired,
+  showRefreshOnly: PropTypes.bool.isRequired,
 };
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.js b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.js
new file mode 100644
index 00000000000..1e77d37b61b
--- /dev/null
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import {
+  EuiQuickSelectPopover,
+} from './quick_select_popover';
+
+const noop = () => {};
+
+const defaultProps = {
+  applyTime: noop,
+  applyRefreshInterval: noop,
+  start: 'now-15m',
+  end: 'now',
+  isPaused: true,
+  refreshInterval: 0,
+  commonlyUsedRanges: [
+    { start: 'now/d', end: 'now/d', label: 'Today' },
+  ],
+  dateFormat: 'MMM D, YYYY @ HH:mm:ss.SSS',
+  recentlyUsedRanges: [
+    { start: 'now/d', end: 'now/d', label: 'Today' },
+  ],
+  showRefreshOnly: false
+};
+
+describe('EuiQuickSelectPopover', () => {
+  test('is rendered', () => {
+    const component = shallow(
+      <EuiQuickSelectPopover
+        {...defaultProps}
+      />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+
+  test('showRefreshOnly', () => {
+    const component = shallow(
+      <EuiQuickSelectPopover
+        {...defaultProps}
+        showRefreshOnly={true}
+      />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});
diff --git a/src/components/date_picker/super_date_picker/super_date_picker.js b/src/components/date_picker/super_date_picker/super_date_picker.js
index 4fc67449caf..a67adae46a7 100644
--- a/src/components/date_picker/super_date_picker/super_date_picker.js
+++ b/src/components/date_picker/super_date_picker/super_date_picker.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { commonlyUsedRangeShape, recentlyUsedRangeShape } from './types';
 import { prettyDuration, showPrettyDuration } from './pretty_duration';
+import { prettyInterval } from './pretty_interval';
 
 import dateMath from '@elastic/datemath';
 
@@ -59,6 +60,10 @@ export class EuiSuperDatePicker extends Component {
      * Set showUpdateButton to false to immediately invoke onTimeChange for all start and end changes.
      */
     showUpdateButton: PropTypes.bool,
+    /**
+     *
+     */
+    showRefreshOnly: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -79,6 +84,7 @@ export class EuiSuperDatePicker extends Component {
     dateFormat: 'MMM D, YYYY @ HH:mm:ss.SSS',
     recentlyUsedRanges: [],
     showUpdateButton: true,
+    showRefreshOnly: false,
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -206,6 +212,22 @@ export class EuiSuperDatePicker extends Component {
       isInvalid,
     } = this.state;
 
+    if (this.props.showRefreshOnly) {
+      return (
+        <EuiDatePickerRange
+          className="euiDatePickerRange--inGroup"
+          iconType={false}
+          isCustom
+          startDateControl={<div/>}
+          endDateControl={<div/>}
+        >
+          <span className="euiSuperDatePicker__prettyFormat">
+            {prettyInterval(this.props.isPaused, this.props.refreshInterval)}
+          </span>
+        </EuiDatePickerRange>
+      );
+    }
+
     if (this.state.showPrettyDuration) {
       return (
         <EuiDatePickerRange
@@ -258,7 +280,7 @@ export class EuiSuperDatePicker extends Component {
   }
 
   renderUpdateButton = () => {
-    if (!this.props.showUpdateButton) {
+    if (!this.props.showUpdateButton || this.props.showRefreshOnly) {
       return;
     }
 
@@ -309,6 +331,7 @@ export class EuiSuperDatePicker extends Component {
         commonlyUsedRanges={this.props.commonlyUsedRanges}
         dateFormat={this.props.dateFormat}
         recentlyUsedRanges={this.props.recentlyUsedRanges}
+        showRefreshOnly={this.props.showRefreshOnly}
       />
     );
     return (

From 80cda428fd483a2e8a1bfd22ae9b0927a36a9ed2 Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Mon, 7 Jan 2019 18:38:04 -0500
Subject: [PATCH 2/4] showRefreshOnly design updates (#4)

---
 src-docs/src/views/date_picker/super_date_picker.js       | 8 ++++++--
 src/components/date_picker/_date_picker_range.scss        | 4 ++++
 src/components/date_picker/date_picker_range.js           | 4 ++++
 .../__snapshots__/quick_select_popover.test.js.snap       | 2 +-
 .../quick_select_popover/quick_select_popover.js          | 2 +-
 .../date_picker/super_date_picker/super_date_picker.js    | 1 +
 6 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src-docs/src/views/date_picker/super_date_picker.js b/src-docs/src/views/date_picker/super_date_picker.js
index 09f651537a1..6427d33f988 100644
--- a/src-docs/src/views/date_picker/super_date_picker.js
+++ b/src-docs/src/views/date_picker/super_date_picker.js
@@ -100,10 +100,14 @@ export default class extends Component {
         <EuiSwitch
           label="Show apply button"
           onChange={this.toggleShowApplyButton}
-          checked={this.state.showUpdateButton}
+          checked={!this.state.showRefreshOnly && this.state.showUpdateButton}
+          disabled={this.state.showRefreshOnly}
         />
+
+        &emsp;
+
         <EuiSwitch
-          label="Show refresh only"
+          label="Is auto-refresh only"
           onChange={this.toggleShowRefreshOnly}
           checked={this.state.showRefreshOnly}
         />
diff --git a/src/components/date_picker/_date_picker_range.scss b/src/components/date_picker/_date_picker_range.scss
index a88f2331894..583562cd5a3 100644
--- a/src/components/date_picker/_date_picker_range.scss
+++ b/src/components/date_picker/_date_picker_range.scss
@@ -53,3 +53,7 @@
     padding-right: $euiFormControlPadding / 2;
   }
 }
+
+.euiDatePickerRange--readOnly {
+  background: $euiFormBackgroundDisabledColor;
+}
diff --git a/src/components/date_picker/date_picker_range.js b/src/components/date_picker/date_picker_range.js
index 8dc3b5e5fd0..b3e20b5e9a3 100644
--- a/src/components/date_picker/date_picker_range.js
+++ b/src/components/date_picker/date_picker_range.js
@@ -18,6 +18,7 @@ export const EuiDatePickerRange = ({
   iconType,
   fullWidth,
   isCustom,
+  readOnly,
   ...rest
 }) => {
 
@@ -25,6 +26,7 @@ export const EuiDatePickerRange = ({
     '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,
     });
   }
 
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap
index 4852b42d6d8..64d1937270d 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap
@@ -110,7 +110,7 @@ exports[`EuiQuickSelectPopover showRefreshOnly 1`] = `
     >
       <EuiIcon
         size="m"
-        type="calendar"
+        type="clock"
       />
     </EuiButtonEmpty>
   }
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js
index 7cc1392a624..4f0fc3c7240 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js
@@ -88,7 +88,7 @@ export class EuiQuickSelectPopover extends Component {
         iconSide="right"
         data-test-subj="superDatePickerToggleQuickMenuButton"
       >
-        <EuiIcon type={this.props.isPaused ? 'calendar' : 'clock'} />
+        <EuiIcon type={!this.props.showRefreshOnly && this.props.isPaused ? 'calendar' : 'clock'} />
       </EuiButtonEmpty>
     );
 
diff --git a/src/components/date_picker/super_date_picker/super_date_picker.js b/src/components/date_picker/super_date_picker/super_date_picker.js
index a67adae46a7..1c516aa614b 100644
--- a/src/components/date_picker/super_date_picker/super_date_picker.js
+++ b/src/components/date_picker/super_date_picker/super_date_picker.js
@@ -220,6 +220,7 @@ export class EuiSuperDatePicker extends Component {
           isCustom
           startDateControl={<div/>}
           endDateControl={<div/>}
+          readOnly
         >
           <span className="euiSuperDatePicker__prettyFormat">
             {prettyInterval(this.props.isPaused, this.props.refreshInterval)}

From 72a209d25bb19c7b320fe242459bf37e014f3055 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Mon, 7 Jan 2019 16:56:46 -0700
Subject: [PATCH 3/4] rename showRefreshOnly to isAutoRefreshOnly, add
 description for prop

---
 .../src/views/date_picker/date_picker_example.js   |  4 ++++
 .../src/views/date_picker/super_date_picker.js     | 14 +++++++-------
 .../__snapshots__/super_date_picker.test.js.snap   |  4 ++--
 .../quick_select_popover.test.js.snap              |  2 +-
 .../quick_select_popover/quick_select_popover.js   |  6 +++---
 .../quick_select_popover.test.js                   |  6 +++---
 .../super_date_picker/super_date_picker.js         | 12 ++++++------
 7 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/src-docs/src/views/date_picker/date_picker_example.js b/src-docs/src/views/date_picker/date_picker_example.js
index 59d6e087a31..7c8da550319 100644
--- a/src-docs/src/views/date_picker/date_picker_example.js
+++ b/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 />,
diff --git a/src-docs/src/views/date_picker/super_date_picker.js b/src-docs/src/views/date_picker/super_date_picker.js
index 6427d33f988..b9bd254b90f 100644
--- a/src-docs/src/views/date_picker/super_date_picker.js
+++ b/src-docs/src/views/date_picker/super_date_picker.js
@@ -15,7 +15,7 @@ export default class extends Component {
     recentlyUsedRanges: [],
     isLoading: false,
     showUpdateButton: true,
-    showRefreshOnly: false,
+    isAutoRefreshOnly: false,
     start: 'now-30m',
     end: 'now',
   }
@@ -63,12 +63,12 @@ export default class extends Component {
 
   toggleShowRefreshOnly = () => {
     this.setState(prevState => ({
-      showRefreshOnly: !prevState.showRefreshOnly,
+      isAutoRefreshOnly: !prevState.isAutoRefreshOnly,
     }));
   }
 
   renderTimeRange = () => {
-    if (this.state.showRefreshOnly) {
+    if (this.state.isAutoRefreshOnly) {
       return null;
     }
 
@@ -100,8 +100,8 @@ export default class extends Component {
         <EuiSwitch
           label="Show apply button"
           onChange={this.toggleShowApplyButton}
-          checked={!this.state.showRefreshOnly && this.state.showUpdateButton}
-          disabled={this.state.showRefreshOnly}
+          checked={!this.state.isAutoRefreshOnly && this.state.showUpdateButton}
+          disabled={this.state.isAutoRefreshOnly}
         />
 
         &emsp;
@@ -109,7 +109,7 @@ export default class extends Component {
         <EuiSwitch
           label="Is auto-refresh only"
           onChange={this.toggleShowRefreshOnly}
-          checked={this.state.showRefreshOnly}
+          checked={this.state.isAutoRefreshOnly}
         />
         <EuiSpacer />
 
@@ -123,7 +123,7 @@ export default class extends Component {
           onRefreshChange={this.onRefreshChange}
           recentlyUsedRanges={this.state.recentlyUsedRanges}
           showUpdateButton={this.state.showUpdateButton}
-          showRefreshOnly={this.state.showRefreshOnly}
+          isAutoRefreshOnly={this.state.isAutoRefreshOnly}
         />
 
         <EuiSpacer />
diff --git a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.js.snap b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.js.snap
index 29e5604f5c5..47989b90535 100644
--- a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.js.snap
+++ b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.js.snap
@@ -72,10 +72,10 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
           }
           dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
           end="now"
+          isAutoRefreshOnly={false}
           isPaused={true}
           recentlyUsedRanges={Array []}
           refreshInterval={0}
-          showRefreshOnly={false}
           start="now-15m"
         />
       }
@@ -205,10 +205,10 @@ exports[`EuiSuperDatePicker isLoading 1`] = `
           }
           dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
           end="now"
+          isAutoRefreshOnly={false}
           isPaused={true}
           recentlyUsedRanges={Array []}
           refreshInterval={0}
-          showRefreshOnly={false}
           start="now-15m"
         />
       }
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap
index 64d1937270d..45db5f6c09b 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap
@@ -88,7 +88,7 @@ exports[`EuiQuickSelectPopover is rendered 1`] = `
 </EuiPopover>
 `;
 
-exports[`EuiQuickSelectPopover showRefreshOnly 1`] = `
+exports[`EuiQuickSelectPopover isAutoRefreshOnly 1`] = `
 <EuiPopover
   anchorPosition="downLeft"
   button={
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js
index 4f0fc3c7240..1efb1a30370 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js
@@ -50,7 +50,7 @@ export class EuiQuickSelectPopover extends Component {
   }
 
   renderDateTimeSections = () => {
-    if (this.props.showRefreshOnly) {
+    if (this.props.isAutoRefreshOnly) {
       return null;
     }
 
@@ -88,7 +88,7 @@ export class EuiQuickSelectPopover extends Component {
         iconSide="right"
         data-test-subj="superDatePickerToggleQuickMenuButton"
       >
-        <EuiIcon type={!this.props.showRefreshOnly && this.props.isPaused ? 'calendar' : 'clock'} />
+        <EuiIcon type={!this.props.isAutoRefreshOnly && this.props.isPaused ? 'calendar' : 'clock'} />
       </EuiButtonEmpty>
     );
 
@@ -127,5 +127,5 @@ EuiQuickSelectPopover.propTypes = {
   commonlyUsedRanges: PropTypes.arrayOf(commonlyUsedRangeShape).isRequired,
   dateFormat: PropTypes.string.isRequired,
   recentlyUsedRanges: PropTypes.arrayOf(recentlyUsedRangeShape).isRequired,
-  showRefreshOnly: PropTypes.bool.isRequired,
+  isAutoRefreshOnly: PropTypes.bool.isRequired,
 };
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.js b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.js
index 1e77d37b61b..f5cfef001f1 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.js
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.js
@@ -21,7 +21,7 @@ const defaultProps = {
   recentlyUsedRanges: [
     { start: 'now/d', end: 'now/d', label: 'Today' },
   ],
-  showRefreshOnly: false
+  isAutoRefreshOnly: false
 };
 
 describe('EuiQuickSelectPopover', () => {
@@ -36,11 +36,11 @@ describe('EuiQuickSelectPopover', () => {
       .toMatchSnapshot();
   });
 
-  test('showRefreshOnly', () => {
+  test('isAutoRefreshOnly', () => {
     const component = shallow(
       <EuiQuickSelectPopover
         {...defaultProps}
-        showRefreshOnly={true}
+        isAutoRefreshOnly={true}
       />
     );
 
diff --git a/src/components/date_picker/super_date_picker/super_date_picker.js b/src/components/date_picker/super_date_picker/super_date_picker.js
index 1c516aa614b..444bc7dcf37 100644
--- a/src/components/date_picker/super_date_picker/super_date_picker.js
+++ b/src/components/date_picker/super_date_picker/super_date_picker.js
@@ -61,9 +61,9 @@ export class EuiSuperDatePicker extends Component {
      */
     showUpdateButton: PropTypes.bool,
     /**
-     *
+     * Set isAutoRefreshOnly to true to limit the component to only display auto refresh content.
      */
-    showRefreshOnly: PropTypes.bool,
+    isAutoRefreshOnly: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -84,7 +84,7 @@ export class EuiSuperDatePicker extends Component {
     dateFormat: 'MMM D, YYYY @ HH:mm:ss.SSS',
     recentlyUsedRanges: [],
     showUpdateButton: true,
-    showRefreshOnly: false,
+    isAutoRefreshOnly: false,
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -212,7 +212,7 @@ export class EuiSuperDatePicker extends Component {
       isInvalid,
     } = this.state;
 
-    if (this.props.showRefreshOnly) {
+    if (this.props.isAutoRefreshOnly) {
       return (
         <EuiDatePickerRange
           className="euiDatePickerRange--inGroup"
@@ -281,7 +281,7 @@ export class EuiSuperDatePicker extends Component {
   }
 
   renderUpdateButton = () => {
-    if (!this.props.showUpdateButton || this.props.showRefreshOnly) {
+    if (!this.props.showUpdateButton || this.props.isAutoRefreshOnly) {
       return;
     }
 
@@ -332,7 +332,7 @@ export class EuiSuperDatePicker extends Component {
         commonlyUsedRanges={this.props.commonlyUsedRanges}
         dateFormat={this.props.dateFormat}
         recentlyUsedRanges={this.props.recentlyUsedRanges}
-        showRefreshOnly={this.props.showRefreshOnly}
+        isAutoRefreshOnly={this.props.isAutoRefreshOnly}
       />
     );
     return (

From adfe619f4fbdcb6c3e41b31f21e3026c56882bc9 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Tue, 8 Jan 2019 09:00:05 -0700
Subject: [PATCH 4/4] changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e174eeffec2..42301c7382e 100644
--- a/CHANGELOG.md
+++ b/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)