Show valid time in custom time range when now is selected

ui/src/shared/components/CustomTimeRangeDropdown.js

@@ -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)

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

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)
+  })
+})