Convert AxesOptions to TS

ui/src/dashboards/components/AxesOptions.tsx

@@ -1,12 +1,10 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
+import React, {PureComponent, MouseEvent} from 'react'
 import {connect} from 'react-redux'
-import {bindActionCreators} from 'redux'
 
-import OptIn from 'shared/components/OptIn'
+import OptIn from 'src/shared/components/OptIn'
 import Input from 'src/dashboards/components/DisplayOptionsInput'
 import {Tabber, Tab} from 'src/dashboards/components/Tabber'
-import FancyScrollbar from 'shared/components/FancyScrollbar'
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import LineGraphColorSelector from 'src/shared/components/LineGraphColorSelector'
 
 import {
@@ -17,80 +15,51 @@ import {GRAPH_TYPES} from 'src/dashboards/graphics/graph'
 
 import {updateAxes} from 'src/dashboards/actions/cellEditorOverlay'
 import {ErrorHandling} from 'src/shared/decorators/errors'
+import {Axes} from 'src/types'
 
 const {LINEAR, LOG, BASE_2, BASE_10} = AXES_SCALE_OPTIONS
 const getInputMin = scale => (scale === LOG ? '0' : null)
 
+interface Props {
+  type: string
+  axes: Axes
+  staticLegend: boolean
+  defaultYLabel: string
+  handleUpdateAxes: (axes: Axes) => void
+  onToggleStaticLegend: (x: boolean) => (e: MouseEvent<HTMLLIElement>) => void
+}
+
 @ErrorHandling
-class AxesOptions extends Component {
-  handleSetPrefixSuffix = e => {
-    const {handleUpdateAxes, axes} = this.props
-    const {prefix, suffix} = e.target.form
-
-    const newAxes = {
-      ...axes,
+class AxesOptions extends PureComponent<Props> {
+  public static defaultProps: Partial<Props> = {
+    axes: {
       y: {
-        ...axes.y,
-        prefix: prefix.value,
-        suffix: suffix.value,
+        bounds: ['', ''],
+        prefix: '',
+        suffix: '',
+        base: BASE_10,
+        scale: LINEAR,
+        label: '',
+      },
+      x: {
+        bounds: ['', ''],
+        prefix: '',
+        suffix: '',
+        base: BASE_10,
+        scale: LINEAR,
+        label: '',
+      },
     },
   }
 
-    handleUpdateAxes(newAxes)
-  }
-
-  handleSetYAxisBoundMin = min => {
-    const {handleUpdateAxes, axes} = this.props
-    const {
-      y: {
-        bounds: [, max],
-      },
-    } = this.props.axes
-    const newAxes = {...axes, y: {...axes.y, bounds: [min, max]}}
-
-    handleUpdateAxes(newAxes)
-  }
-
-  handleSetYAxisBoundMax = max => {
-    const {handleUpdateAxes, axes} = this.props
-    const {
-      y: {
-        bounds: [min],
-      },
-    } = axes
-    const newAxes = {...axes, y: {...axes.y, bounds: [min, max]}}
-
-    handleUpdateAxes(newAxes)
-  }
-
-  handleSetLabel = label => {
-    const {handleUpdateAxes, axes} = this.props
-    const newAxes = {...axes, y: {...axes.y, label}}
-
-    handleUpdateAxes(newAxes)
-  }
-
-  handleSetScale = scale => () => {
-    const {handleUpdateAxes, axes} = this.props
-    const newAxes = {...axes, y: {...axes.y, scale}}
-
-    handleUpdateAxes(newAxes)
-  }
-
-  handleSetBase = base => () => {
-    const {handleUpdateAxes, axes} = this.props
-    const newAxes = {...axes, y: {...axes.y, base}}
-
-    handleUpdateAxes(newAxes)
-  }
-
-  render() {
+  public render() {
     const {
       axes: {
-        y: {bounds, label, prefix, suffix, base, scale, defaultYLabel},
+        y: {bounds, label, prefix, suffix, base, scale},
       },
       type,
       staticLegend,
+      defaultYLabel,
       onToggleStaticLegend,
     } = this.props
 
@@ -109,10 +78,10 @@ class AxesOptions extends Component {
             <div className="form-group col-sm-12">
               <label htmlFor="prefix">Title</label>
               <OptIn
-                customPlaceholder={defaultYLabel || 'y-axis title'}
+                type="text"
                 customValue={label}
                 onSetValue={this.handleSetLabel}
-                type="text"
+                customPlaceholder={defaultYLabel || 'y-axis title'}
               />
             </div>
             <LineGraphColorSelector />
@@ -129,7 +98,7 @@ class AxesOptions extends Component {
             <div className="form-group col-sm-6">
               <label htmlFor="max">Max</label>
               <OptIn
-                customPlaceholder={'max'}
+                customPlaceholder="max"
                 customValue={max}
                 onSetValue={this.handleSetYAxisBoundMax}
                 type="number"
@@ -142,7 +111,6 @@ class AxesOptions extends Component {
               value={prefix}
               labelText="Y-Value's Prefix"
               onChange={this.handleSetPrefixSuffix}
-              maxLength="5"
             />
             <Input
               name="suffix"
@@ -150,11 +118,10 @@ class AxesOptions extends Component {
               value={suffix}
               labelText="Y-Value's Suffix"
               onChange={this.handleSetPrefixSuffix}
-              maxLength="5"
             />
             <Tabber
               labelText="Y-Value's Format"
-              tipID="Y-Values's Format"
+              tipID="Y-Value's Format"
               tipContent={TOOLTIP_Y_VALUE_FORMAT}
             >
               <Tab
@@ -202,38 +169,74 @@ class AxesOptions extends Component {
       </FancyScrollbar>
     )
   }
-}
 
-const {arrayOf, bool, func, shape, string} = PropTypes
+  private handleSetPrefixSuffix = e => {
+    const {handleUpdateAxes, axes} = this.props
+    const {prefix, suffix} = e.target.form
 
-AxesOptions.defaultProps = {
-  axes: {
+    const newAxes = {
+      ...axes,
       y: {
-      bounds: ['', ''],
-      prefix: '',
-      suffix: '',
-      base: BASE_10,
-      scale: LINEAR,
-      defaultYLabel: '',
+        ...axes.y,
+        prefix: prefix.value,
+        suffix: suffix.value,
       },
+    }
+
+    handleUpdateAxes(newAxes)
+  }
+
+  private handleSetYAxisBoundMin = (min: string): void => {
+    const {handleUpdateAxes, axes} = this.props
+    const {
+      y: {
+        bounds: [, max],
       },
+    } = this.props.axes
+
+    const bounds: [string, string] = [min, max]
+    const newAxes = {...axes, y: {...axes.y, bounds}}
+
+    handleUpdateAxes(newAxes)
+  }
+
+  private handleSetYAxisBoundMax = (max: string): void => {
+    const {handleUpdateAxes, axes} = this.props
+    const {
+      y: {
+        bounds: [min],
+      },
+    } = axes
+
+    const bounds: [string, string] = [min, max]
+    const newAxes = {...axes, y: {...axes.y, bounds}}
+
+    handleUpdateAxes(newAxes)
+  }
+
+  private handleSetLabel = label => {
+    const {handleUpdateAxes, axes} = this.props
+    const newAxes = {...axes, y: {...axes.y, label}}
+
+    handleUpdateAxes(newAxes)
+  }
+
+  private handleSetScale = scale => () => {
+    const {handleUpdateAxes, axes} = this.props
+    const newAxes = {...axes, y: {...axes.y, scale}}
+
+    handleUpdateAxes(newAxes)
+  }
+
+  private handleSetBase = base => () => {
+    const {handleUpdateAxes, axes} = this.props
+    const newAxes = {...axes, y: {...axes.y, base}}
+
+    handleUpdateAxes(newAxes)
+  }
 }
 
-AxesOptions.propTypes = {
-  type: string.isRequired,
-  axes: shape({
-    y: shape({
-      bounds: arrayOf(string),
-      label: string,
-      defaultYLabel: string,
-    }),
-  }).isRequired,
-  onToggleStaticLegend: func.isRequired,
-  staticLegend: bool,
-  handleUpdateAxes: func.isRequired,
-}
-
-const mapStateToProps = ({
+const mstp = ({
   cellEditorOverlay: {
     cell: {axes, type},
   },
@@ -242,8 +245,8 @@ const mapStateToProps = ({
   type,
 })
 
-const mapDispatchToProps = dispatch => ({
-  handleUpdateAxes: bindActionCreators(updateAxes, dispatch),
-})
+const mdtp = {
+  handleUpdateAxes: updateAxes,
+}
 
-export default connect(mapStateToProps, mapDispatchToProps)(AxesOptions)
+export default connect(mstp, mdtp)(AxesOptions)

ui/src/dashboards/components/DisplayOptions.tsx

@@ -1,5 +1,6 @@
 import React, {PureComponent} from 'react'
 import {connect} from 'react-redux'
+import _ from 'lodash'
 
 import GraphTypeSelector from 'src/dashboards/components/GraphTypeSelector'
 import GaugeOptions from 'src/dashboards/components/GaugeOptions'
@@ -17,11 +18,11 @@ interface Props {
   queryConfigs: QueryConfig[]
   staticLegend: boolean
   onResetFocus: () => void
-  onToggleStaticLegend: () => void
+  onToggleStaticLegend: (x: boolean) => () => void
 }
 
 interface State {
-  axes: Axes
+  defaultYLabel: string
 }
 
 @ErrorHandling
@@ -29,17 +30,17 @@ class DisplayOptions extends PureComponent<Props, State> {
   constructor(props) {
     super(props)
 
-    const {axes, queryConfigs} = props
-
     this.state = {
-      axes: this.setDefaultLabels(axes, queryConfigs),
+      defaultYLabel: this.defaultYLabel,
     }
   }
 
-  public componentWillReceiveProps(nextProps) {
-    const {axes, queryConfigs} = nextProps
+  public componentDidUpdate(prevProps) {
+    const {queryConfigs} = prevProps
 
-    this.setState({axes: this.setDefaultLabels(axes, queryConfigs)})
+    if (!_.isEqual(queryConfigs[0], this.props.queryConfigs[0])) {
+      this.setState({defaultYLabel: this.defaultYLabel})
+    }
   }
 
   public render() {
@@ -60,6 +61,8 @@ class DisplayOptions extends PureComponent<Props, State> {
       queryConfigs,
     } = this.props
 
+    const {defaultYLabel} = this.state
+
     switch (cell.type) {
       case 'gauge':
         return <GaugeOptions onResetFocus={onResetFocus} />
@@ -75,22 +78,21 @@ class DisplayOptions extends PureComponent<Props, State> {
       default:
         return (
           <AxesOptions
-            onToggleStaticLegend={onToggleStaticLegend}
             staticLegend={staticLegend}
+            defaultYLabel={defaultYLabel}
+            onToggleStaticLegend={onToggleStaticLegend}
           />
         )
     }
   }
 
-  private setDefaultLabels = (axes, queryConfigs): Axes => {
+  private get defaultYLabel(): string {
+    const {queryConfigs} = this.props
     if (queryConfigs.length) {
-      return {
-        ...axes,
-        y: {...axes.y, defaultYLabel: buildDefaultYLabel(queryConfigs[0])},
-      }
+      return buildDefaultYLabel(queryConfigs[0])
     }
 
-    return axes
+    return ''
   }
 }
 

ui/src/dashboards/components/DisplayOptionsInput.tsx

@@ -1,7 +1,16 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {SFC, ChangeEvent} from 'react'
 
-const DisplayOptionsInput = ({
+interface Props {
+  name: string
+  id: string
+  value: string
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void
+  labelText?: string
+  colWidth?: string
+  placeholder?: string
+}
+
+const DisplayOptionsInput: SFC<Props> = ({
   id,
   name,
   value,
@@ -24,22 +33,10 @@ const DisplayOptionsInput = ({
   </div>
 )
 
-const {func, string} = PropTypes
-
 DisplayOptionsInput.defaultProps = {
   value: '',
   colWidth: 'col-sm-6',
   placeholder: '',
 }
 
-DisplayOptionsInput.propTypes = {
-  name: string.isRequired,
-  id: string.isRequired,
-  value: string.isRequired,
-  onChange: func.isRequired,
-  labelText: string,
-  colWidth: string,
-  placeholder: string,
-}
-
 export default DisplayOptionsInput

ui/src/dashboards/components/Tabber.js

@@ -1,36 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import QuestionMarkTooltip from 'src/shared/components/QuestionMarkTooltip'
-
-export const Tabber = ({labelText, children, tipID, tipContent}) => (
-  <div className="form-group col-md-6">
-    <label>
-      {labelText}
-      {tipID ? (
-        <QuestionMarkTooltip tipID={tipID} tipContent={tipContent} />
-      ) : null}
-    </label>
-    <ul className="nav nav-tablist nav-tablist-sm">{children}</ul>
-  </div>
-)
-
-export const Tab = ({isActive, onClickTab, text}) => (
-  <li className={isActive ? 'active' : ''} onClick={onClickTab}>
-    {text}
-  </li>
-)
-
-const {bool, func, node, string} = PropTypes
-
-Tabber.propTypes = {
-  children: node.isRequired,
-  labelText: string,
-  tipID: string,
-  tipContent: string,
-}
-
-Tab.propTypes = {
-  onClickTab: func.isRequired,
-  isActive: bool.isRequired,
-  text: string.isRequired,
-}

ui/src/dashboards/components/Tabber.tsx

@@ -0,0 +1,36 @@
+import React, {SFC, MouseEvent} from 'react'
+import QuestionMarkTooltip from 'src/shared/components/QuestionMarkTooltip'
+
+interface TabberProps {
+  labelText?: string
+  children: JSX.Element[]
+  tipID?: string
+  tipContent?: string
+}
+
+export const Tabber: SFC<TabberProps> = ({
+  children,
+  tipID = '',
+  labelText = '',
+  tipContent = '',
+}) => (
+  <div className="form-group col-md-6">
+    <label>
+      {labelText}
+      {!!tipID && <QuestionMarkTooltip tipID={tipID} tipContent={tipContent} />}
+    </label>
+    <ul className="nav nav-tablist nav-tablist-sm">{children}</ul>
+  </div>
+)
+
+interface TabProps {
+  onClickTab: (e: MouseEvent<HTMLLIElement>) => void
+  isActive: boolean
+  text: string
+}
+
+export const Tab: SFC<TabProps> = ({isActive, onClickTab, text}) => (
+  <li className={isActive ? 'active' : ''} onClick={onClickTab}>
+    {text}
+  </li>
+)

ui/src/shared/components/ClickOutsideInput.tsx

@@ -4,7 +4,7 @@ import onClickOutside from 'src/shared/components/OnClickOutside'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
-  min: string
+  min?: string
   id: string
   type: string
   customPlaceholder: string
@@ -25,7 +25,7 @@ class ClickOutsideInput extends Component<Props> {
   public render() {
     const {
       id,
-      min,
+      min = '',
       type,
       onFocus,
       onChange,

ui/src/shared/components/OptIn.tsx

@@ -7,11 +7,11 @@ import ClickOutsideInput from 'src/shared/components/ClickOutsideInput'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 interface Props {
-  min: string
-  fixedPlaceholder: string
-  fixedValue: string
-  customPlaceholder: string
-  customValue: string
+  min?: string
+  fixedPlaceholder?: string
+  fixedValue?: string
+  customPlaceholder?: string
+  customValue?: string
   onSetValue: (value: string) => void
   type: string | number
 }
@@ -25,10 +25,11 @@ interface State {
 @ErrorHandling
 export default class OptIn extends Component<Props, State> {
   public static defaultProps: Partial<Props> = {
+    min: '',
     fixedValue: '',
-    customPlaceholder: 'Custom Value',
-    fixedPlaceholder: 'auto',
     customValue: '',
+    fixedPlaceholder: 'auto',
+    customPlaceholder: 'Custom Value',
   }
 
   private id: string