feat(schemaExplorer): separate TimeRangeLabel

ui/src/shared/components/TimeRangeDropdown.js

@@ -2,8 +2,6 @@ import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import moment from 'moment'
-import {connect} from 'react-redux'
-import _ from 'lodash'
 
 import OnClickOutside from 'shared/components/OnClickOutside'
 import FancyScrollbar from 'shared/components/FancyScrollbar'
@@ -12,17 +10,8 @@ import CustomTimeRangeOverlay from 'shared/components/CustomTimeRangeOverlay'
 import {timeRanges} from 'shared/data/timeRanges'
 import {DROPDOWN_MENU_MAX_HEIGHT} from 'shared/constants/index'
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import {TimeZones} from 'src/types'
-
-const dateFormat = 'YYYY-MM-DD HH:mm'
+import TimeRangeLabel from './TimeRangeLabel'
 const emptyTime = {lower: '', upper: ''}
-const format = (t, timeZone) => {
-  const m = moment(t.replace(/'/g, ''))
-  if (timeZone === TimeZones.UTC) {
-    m.utc()
-  }
-  return m.format(dateFormat)
-}
 
 class TimeRangeDropdown extends Component {
   constructor(props) {
@@ -40,22 +29,6 @@ class TimeRangeDropdown extends Component {
     }
   }
 
-  findTimeRangeInputValue = ({upper, lower}) => {
-    if (upper && lower) {
-      if (upper === 'now()') {
-        return `${format(lower, this.props.timeZone)} - Now`
-      }
-
-      return `${format(lower, this.props.timeZone)} - ${format(
-        upper,
-        this.props.timeZone
-      )}`
-    }
-
-    const selected = timeRanges.find(range => range.lower === lower)
-    return selected ? selected.inputValue : 'Custom'
-  }
-
   handleClickOutside = () => {
     this.setState({isOpen: false})
   }
@@ -111,7 +84,7 @@ class TimeRangeDropdown extends Component {
           >
             <span className="icon clock" />
             <span className="dropdown-selected">
-              {this.findTimeRangeInputValue(selected)}
+              <TimeRangeLabel timeRange={selected} />
             </span>
             <span className="caret" />
           </div>
@@ -181,10 +154,6 @@ TimeRangeDropdown.propTypes = {
   onChooseTimeRange: func.isRequired,
   preventCustomTimeRange: bool,
   page: string,
-  timeZone: string,
 }
 
-const mstp = state => ({
-  timeZone: _.get(state, ['app', 'persisted', 'timeZone']),
-})
-export default connect(mstp)(OnClickOutside(ErrorHandling(TimeRangeDropdown)))
+export default OnClickOutside(ErrorHandling(TimeRangeDropdown))

ui/src/shared/components/TimeRangeLabel.tsx

@@ -0,0 +1,37 @@
+import moment from 'moment'
+import {connect} from 'react-redux'
+
+import {timeRanges} from 'src/shared/data/timeRanges'
+import {TimeRange, TimeZones} from 'src/types'
+import _ from 'lodash'
+
+const dateFormat = 'YYYY-MM-DD HH:mm'
+const format = (t: string, timeZone: string) => {
+  const m = moment(t.replace(/'/g, ''))
+  if (timeZone === TimeZones.UTC) {
+    m.utc()
+  }
+  return m.format(dateFormat)
+}
+
+interface PassedProps {
+  timeRange: TimeRange
+}
+type Props = PassedProps & ReturnType<typeof mstp>
+
+const TimeRangeLabel = ({timeRange: {upper, lower}, timeZone}: Props) => {
+  if (upper && lower) {
+    if (upper === 'now()') {
+      return `${format(lower, timeZone)} - Now`
+    }
+
+    return `${format(lower, timeZone)} - ${format(upper, timeZone)}`
+  }
+  const selected = timeRanges.find(range => range.lower === lower)
+  return selected ? selected.inputValue : 'Custom'
+}
+
+const mstp = (state: any) => ({
+  timeZone: _.get(state, ['app', 'persisted', 'timeZone']) as TimeZones,
+})
+export default connect(mstp)(TimeRangeLabel)