From 2c464a7ce20524d3f1a477412adbc75deb8af08f Mon Sep 17 00:00:00 2001
From: Brandon Farmer <bthesorceror@gmail.com>
Date: Wed, 11 Apr 2018 14:02:41 -0700
Subject: [PATCH 1/2] Show valid time in custom time range when now is selected

---
 .../components/CustomTimeRangeDropdown.js     | 71 ---------------
 .../components/CustomTimeRangeDropdown.tsx    | 89 +++++++++++++++++++
 .../CustomTimeRangeDropdown.test.tsx          | 21 +++++
 3 files changed, 110 insertions(+), 71 deletions(-)
 delete mode 100644 ui/src/shared/components/CustomTimeRangeDropdown.js
 create mode 100644 ui/src/shared/components/CustomTimeRangeDropdown.tsx
 create mode 100644 ui/test/shared/components/CustomTimeRangeDropdown.test.tsx

diff --git a/ui/src/shared/components/CustomTimeRangeDropdown.js b/ui/src/shared/components/CustomTimeRangeDropdown.js
deleted file mode 100644
index cb35a4e039..0000000000
--- a/ui/src/shared/components/CustomTimeRangeDropdown.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-import moment from 'moment'
-import classnames from 'classnames'
-import OnClickOutside from 'react-onclickoutside'
-
-import CustomTimeRange from 'shared/components/CustomTimeRange'
-
-class CustomTimeRangeDropdown extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      expanded: false,
-    }
-  }
-
-  handleClickOutside() {
-    this.handleCloseDropdown()
-  }
-
-  handleToggleDropdown = () => {
-    this.setState({expanded: !this.state.expanded})
-  }
-
-  handleCloseDropdown = () => {
-    this.setState({expanded: false})
-  }
-
-  render() {
-    const {timeRange: {upper, lower}, timeRange, onApplyTimeRange} = this.props
-
-    const {expanded} = this.state
-
-    return (
-      <div
-        className={classnames('dropdown dropdown-280 custom-time-range', {
-          open: expanded,
-        })}
-      >
-        <button
-          className="btn btn-sm btn-default dropdown-toggle"
-          onClick={this.handleToggleDropdown}
-        >
-          <span className="icon clock" />
-          <span className="dropdown-selected">{`${moment(lower).format(
-            'MMM Do HH:mm'
-          )} — ${moment(upper).format('MMM Do HH:mm')}`}</span>
-          <span className="caret" />
-        </button>
-        <CustomTimeRange
-          onApplyTimeRange={onApplyTimeRange}
-          timeRange={timeRange}
-          onClose={this.handleCloseDropdown}
-        />
-      </div>
-    )
-  }
-}
-
-const {func, shape, string} = PropTypes
-
-CustomTimeRangeDropdown.propTypes = {
-  onApplyTimeRange: func.isRequired,
-  timeRange: shape({
-    lower: string.isRequired,
-    upper: string,
-  }).isRequired,
-}
-
-export default OnClickOutside(CustomTimeRangeDropdown)
diff --git a/ui/src/shared/components/CustomTimeRangeDropdown.tsx b/ui/src/shared/components/CustomTimeRangeDropdown.tsx
new file mode 100644
index 0000000000..93e261d4be
--- /dev/null
+++ b/ui/src/shared/components/CustomTimeRangeDropdown.tsx
@@ -0,0 +1,89 @@
+import React, {PureComponent} from 'react'
+import moment from 'moment'
+import classnames from 'classnames'
+
+import {ClickOutside} from 'src/shared/components/ClickOutside'
+import CustomTimeRange from 'src/shared/components/CustomTimeRange'
+
+interface State {
+  expanded: boolean
+}
+
+interface Props {
+  timeRange: {
+    upper: string
+    lower: string
+  }
+  onApplyTimeRange: () => void
+}
+
+class CustomTimeRangeDropdown extends PureComponent<Props, State> {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      expanded: false,
+    }
+  }
+
+  public render() {
+    const {timeRange, onApplyTimeRange} = this.props
+
+    const {expanded} = this.state
+
+    return (
+      <ClickOutside onClickOutside={this.handleCloseDropdown}>
+        <div
+          className={classnames('dropdown dropdown-280 custom-time-range', {
+            open: expanded,
+          })}
+        >
+          <button
+            className="btn btn-sm btn-default dropdown-toggle"
+            onClick={this.handleToggleDropdown}
+          >
+            <span className="icon clock" />
+            <span className="dropdown-selected">
+              {this.lowerTimeRange} — {this.upperTimeRange}
+            </span>
+            <span className="caret" />
+          </button>
+          <CustomTimeRange
+            onApplyTimeRange={onApplyTimeRange}
+            timeRange={timeRange}
+            onClose={this.handleCloseDropdown}
+          />
+        </div>
+      </ClickOutside>
+    )
+  }
+
+  private get upperTimeRange(): string {
+    const {timeRange: {upper}} = this.props
+
+    if (upper === 'now()') {
+      return moment().format(this.timeFormat)
+    }
+
+    return moment(upper).format(this.timeFormat)
+  }
+
+  private get lowerTimeRange(): string {
+    const {timeRange: {lower}} = this.props
+    return moment(lower).format(this.timeFormat)
+  }
+
+  private get timeFormat(): string {
+    return 'MMM Do HH:mm'
+  }
+
+  private handleToggleDropdown = () => {
+    this.setState({expanded: !this.state.expanded})
+  }
+
+  private handleCloseDropdown = () => {
+    this.setState({expanded: false})
+  }
+}
+
+export default CustomTimeRangeDropdown
diff --git a/ui/test/shared/components/CustomTimeRangeDropdown.test.tsx b/ui/test/shared/components/CustomTimeRangeDropdown.test.tsx
new file mode 100644
index 0000000000..4fbb3171af
--- /dev/null
+++ b/ui/test/shared/components/CustomTimeRangeDropdown.test.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import {shallow} from 'enzyme'
+import CustomTimeRangeDropdown from 'src/shared/components/CustomTimeRangeDropdown'
+
+const setup = (overrides = {}) => {
+  const props = {
+    timeRange: {upper: 'now()', lower: '2017-10-24'},
+    onApplyTimeRange: () => {},
+    ...overrides,
+  }
+
+  return shallow(<CustomTimeRangeDropdown {...props} />)
+}
+
+describe('CustomTimeRangeDropdown', () => {
+  it('renders correctly', () => {
+    const wrapper = setup()
+
+    expect(wrapper.exists()).toBe(true)
+  })
+})

From 3243a8d005c0ac3f85e8450106faea90ccca5706 Mon Sep 17 00:00:00 2001
From: Brandon Farmer <bthesorceror@gmail.com>
Date: Thu, 12 Apr 2018 00:16:03 -0700
Subject: [PATCH 2/2] Update changelog and add more tests around time range

---
 CHANGELOG.md                                  |  1 +
 .../components/CustomTimeRangeDropdown.tsx    |  8 ++++----
 .../CustomTimeRangeDropdown.test.tsx          | 19 +++++++++++++++----
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 67aaebec8c..8f8f51fe5d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -34,6 +34,7 @@
 1.  [#3162](https://github.com/influxdata/chronograf/pull/3162): Only send threshold value to parent on blur
 1.  [#3168](https://github.com/influxdata/chronograf/pull/3168): Require that emails on GitHub & Generic OAuth2 principals be verified & primary, if those fields are provided
 1.  [#3182](https://github.com/influxdata/chronograf/pull/3182): Send notification when rp creation returns a failure
+1.  [#3181](https://github.com/influxdata/chronograf/pull/3181): Show valid time in custom time range when now is selected
 
 ## v1.4.3.1 [2018-04-02]
 
diff --git a/ui/src/shared/components/CustomTimeRangeDropdown.tsx b/ui/src/shared/components/CustomTimeRangeDropdown.tsx
index 93e261d4be..5afb10dd02 100644
--- a/ui/src/shared/components/CustomTimeRangeDropdown.tsx
+++ b/ui/src/shared/components/CustomTimeRangeDropdown.tsx
@@ -11,7 +11,7 @@ interface State {
 
 interface Props {
   timeRange: {
-    upper: string
+    upper?: string
     lower: string
   }
   onApplyTimeRange: () => void
@@ -32,7 +32,7 @@ class CustomTimeRangeDropdown extends PureComponent<Props, State> {
     const {expanded} = this.state
 
     return (
-      <ClickOutside onClickOutside={this.handleCloseDropdown}>
+      <ClickOutside onClickOutside={this.closeDropdown}>
         <div
           className={classnames('dropdown dropdown-280 custom-time-range', {
             open: expanded,
@@ -51,7 +51,7 @@ class CustomTimeRangeDropdown extends PureComponent<Props, State> {
           <CustomTimeRange
             onApplyTimeRange={onApplyTimeRange}
             timeRange={timeRange}
-            onClose={this.handleCloseDropdown}
+            onClose={this.closeDropdown}
           />
         </div>
       </ClickOutside>
@@ -81,7 +81,7 @@ class CustomTimeRangeDropdown extends PureComponent<Props, State> {
     this.setState({expanded: !this.state.expanded})
   }
 
-  private handleCloseDropdown = () => {
+  private closeDropdown = () => {
     this.setState({expanded: false})
   }
 }
diff --git a/ui/test/shared/components/CustomTimeRangeDropdown.test.tsx b/ui/test/shared/components/CustomTimeRangeDropdown.test.tsx
index 4fbb3171af..8d40c859e1 100644
--- a/ui/test/shared/components/CustomTimeRangeDropdown.test.tsx
+++ b/ui/test/shared/components/CustomTimeRangeDropdown.test.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import moment from 'moment'
 import {shallow} from 'enzyme'
 import CustomTimeRangeDropdown from 'src/shared/components/CustomTimeRangeDropdown'
 
@@ -12,10 +13,20 @@ const setup = (overrides = {}) => {
   return shallow(<CustomTimeRangeDropdown {...props} />)
 }
 
-describe('CustomTimeRangeDropdown', () => {
-  it('renders correctly', () => {
-    const wrapper = setup()
+describe('shared.Components.CustomTimeRangeDropdown', () => {
+  describe('rendering', () => {
+    it('renders correct time when now is selected', () => {
+      const wrapper = setup()
 
-    expect(wrapper.exists()).toBe(true)
+      expect(wrapper.exists()).toBe(true)
+      expect(wrapper.dive().text()).toContain(moment().format('MMM Do HH:mm'))
+    })
+
+    it('renders correct time when no upper is provided', () => {
+      const wrapper = setup({timeRange: {lower: '2017-10-24'}})
+
+      expect(wrapper.exists()).toBe(true)
+      expect(wrapper.dive().text()).toContain(moment().format('MMM Do HH:mm'))
+    })
   })
 })