More PropTypes conversion

ui/src/CheckSources.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {withRouter} from 'react-router'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'

ui/src/admin/components/ChangePassRow.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import OnClickOutside from 'shared/components/OnClickOutside'
 import ConfirmButtons from 'shared/components/ConfirmButtons'

ui/src/admin/components/FilterBar.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 class FilterBar extends Component {
   constructor(props) {

ui/src/admin/components/RoleEditingRow.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import {ROLES_TABLE} from 'src/admin/constants/tableSizing'
 

ui/src/admin/components/UserEditName.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import {USERS_TABLE} from 'src/admin/constants/tableSizing'
 

ui/src/admin/components/UserNewPassword.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import {USERS_TABLE} from 'src/admin/constants/tableSizing'
 

ui/src/admin/components/chronograf/AllUsersTable.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import uuid from 'uuid'
 

ui/src/admin/components/chronograf/AllUsersTableRowNew.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import Dropdown from 'shared/components/Dropdown'
 

ui/src/admin/components/chronograf/OrganizationsTable.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import uuid from 'uuid'
 

ui/src/admin/components/chronograf/OrganizationsTableRow.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 import {withRouter} from 'react-router'

ui/src/admin/components/chronograf/OrganizationsTableRowNew.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import ConfirmButtons from 'shared/components/ConfirmButtons'
 import Dropdown from 'shared/components/Dropdown'

ui/src/admin/components/chronograf/ProvidersTable.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import uuid from 'uuid'
 import ProvidersTableRow from 'src/admin/components/chronograf/ProvidersTableRow'

ui/src/admin/components/chronograf/ProvidersTableRow.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import ConfirmButtons from 'shared/components/ConfirmButtons'
 import Dropdown from 'shared/components/Dropdown'

ui/src/admin/components/chronograf/UsersTable.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import uuid from 'uuid'
 

ui/src/admin/components/chronograf/UsersTableHeader.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 class UsersTableHeader extends Component {
   constructor(props) {

ui/src/admin/components/chronograf/UsersTableRowNew.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import Dropdown from 'shared/components/Dropdown'
 

ui/src/admin/containers/AdminInfluxDBPage.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 import {

ui/src/admin/containers/ProvidersPage.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/admin/containers/chronograf/AllUsersPage.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/admin/containers/chronograf/OrganizationsPage.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/admin/containers/chronograf/UsersPage.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/alerts/components/AlertsTable.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import _ from 'lodash'
 import classnames from 'classnames'

ui/src/dashboards/components/AxesOptions.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/dashboards/components/CellEditorOverlay.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import _ from 'lodash'
 import uuid from 'uuid'

ui/src/dashboards/components/DashboardSwitcher.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {Link} from 'react-router'
 import _ from 'lodash'
 import classnames from 'classnames'

ui/src/dashboards/components/DisplayOptions.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 
 import GraphTypeSelector from 'src/dashboards/components/GraphTypeSelector'

ui/src/dashboards/components/GaugeOptions.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/dashboards/components/SingleStatOptions.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/dashboards/components/TableOptions.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/dashboards/components/Threshold.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import ColorDropdown from 'shared/components/ColorDropdown'
 

ui/src/dashboards/components/VisualizationName.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/dashboards/components/template_variables/Manager.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import uuid from 'uuid'
 

ui/src/data_explorer/components/WriteDataForm.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
 import OnClickOutside from 'shared/components/OnClickOutside'

ui/src/kapacitor/components/HandlerOptions.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {
   PostHandler,
   TcpHandler,

ui/src/kapacitor/components/NameSection.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {DEFAULT_RULE_ID} from 'src/kapacitor/constants'
 
 class NameSection extends Component {

ui/src/kapacitor/components/RuleDetailsText.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 class RuleDetailsText extends Component {
   constructor(props) {

ui/src/kapacitor/components/RuleHandlers.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import _ from 'lodash'
 
 import HandlerOptions from 'src/kapacitor/components/HandlerOptions'

ui/src/kapacitor/components/RuleMessage.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import RuleMessageText from 'src/kapacitor/components/RuleMessageText'
 import RuleMessageTemplates from 'src/kapacitor/components/RuleMessageTemplates'

ui/src/kapacitor/components/RuleMessageTemplates.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import _ from 'lodash'
 import ReactTooltip from 'react-tooltip'
 

ui/src/shared/components/AnnotationInput.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import onClickOutside from 'react-onclickoutside'
 
 class AnnotationInput extends Component {

ui/src/shared/components/AnnotationTooltip.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import moment from 'moment'
 import classnames from 'classnames'

ui/src/shared/components/ClickOutsideInput.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import onClickOutside from 'shared/components/OnClickOutside'
 

ui/src/shared/components/ColorDropdown.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import classnames from 'classnames'
 import OnClickOutside from 'shared/components/OnClickOutside'

ui/src/shared/components/Dygraph.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-magic-numbers */
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import shallowCompare from 'react-addons-shallow-compare'
 import _ from 'lodash'

ui/src/shared/components/FillQuery.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import Dropdown from 'shared/components/Dropdown'
 
 import {NULL_STRING, NUMBER} from 'shared/constants/queryFillOptions'

ui/src/shared/components/FunctionSelector.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import _ from 'lodash'
 import {INFLUXQL_FUNCTIONS} from 'src/data_explorer/constants'

ui/src/shared/components/Gauge.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import _ from 'lodash'
 
 import {GAUGE_SPECS} from 'shared/constants/gaugeSpecs'

ui/src/shared/components/InfiniteScroll.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {Scrollbars} from 'react-custom-scrollbars'
 import _ from 'lodash'

ui/src/shared/components/InputClickToEdit.js

@@ -0,0 +1,108 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+
+class InputClickToEdit extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      isEditing: null,
+      value: this.props.value,
+    }
+  }
+
+  handleCancel = () => {
+    this.setState({
+      isEditing: false,
+      value: this.props.value,
+    })
+  }
+
+  handleInputClick = () => {
+    this.setState({isEditing: true})
+  }
+
+  handleInputBlur = e => {
+    const {onUpdate, value} = this.props
+
+    if (value !== e.target.value) {
+      onUpdate(e.target.value)
+    }
+
+    this.setState({isEditing: false, value: e.target.value})
+  }
+
+  handleKeyDown = e => {
+    if (e.key === 'Enter') {
+      this.handleInputBlur(e)
+    }
+    if (e.key === 'Escape') {
+      this.handleCancel()
+    }
+  }
+
+  handleFocus = e => {
+    e.target.select()
+  }
+
+  render() {
+    const {isEditing, value} = this.state
+    const {
+      wrapperClass: wrapper,
+      disabled,
+      tabIndex,
+      placeholder,
+      appearAsNormalInput,
+    } = this.props
+
+    const wrapperClass = `${wrapper}${appearAsNormalInput
+      ? ' input-cte__normal'
+      : ''}`
+    const defaultStyle = value ? 'input-cte' : 'input-cte__empty'
+
+    return disabled
+      ? <div className={wrapperClass}>
+          <div className="input-cte__disabled">
+            {value}
+          </div>
+        </div>
+      : <div className={wrapperClass}>
+          {isEditing
+            ? <input
+                type="text"
+                className="form-control input-sm provider--input"
+                defaultValue={value}
+                onBlur={this.handleInputBlur}
+                onKeyDown={this.handleKeyDown}
+                autoFocus={true}
+                onFocus={this.handleFocus}
+                ref={r => (this.inputRef = r)}
+                tabIndex={tabIndex}
+                spellCheck={false}
+              />
+            : <div
+                className={defaultStyle}
+                onClick={this.handleInputClick}
+                onFocus={this.handleInputClick}
+                tabIndex={tabIndex}
+              >
+                {value || placeholder}
+                {appearAsNormalInput || <span className="icon pencil" />}
+              </div>}
+        </div>
+  }
+}
+
+const {func, bool, number, string} = PropTypes
+
+InputClickToEdit.propTypes = {
+  wrapperClass: string.isRequired,
+  value: string,
+  onUpdate: func.isRequired,
+  disabled: bool,
+  tabIndex: number,
+  placeholder: string,
+  appearAsNormalInput: bool,
+}
+
+export default InputClickToEdit

ui/src/shared/components/Layout.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import WidgetCell from 'shared/components/WidgetCell'
 import LayoutCell from 'shared/components/LayoutCell'
 import RefreshingGraph from 'shared/components/RefreshingGraph'

ui/src/shared/components/LayoutCell.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import _ from 'lodash'
 
 import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'

ui/src/shared/components/LayoutCellMenu.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/shared/components/LayoutRenderer.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import ReactGridLayout, {WidthProvider} from 'react-grid-layout'
 import Resizeable from 'react-component-resizable'
 

ui/src/shared/components/MenuTooltipButton.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import OnClickOutside from 'react-onclickoutside'
 import classnames from 'classnames'
 

ui/src/shared/components/MultiSelectDropdown.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 import classnames from 'classnames'
 import _ from 'lodash'

ui/src/shared/components/NewAnnotation.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {connect} from 'react-redux'
 import uuid from 'uuid'

ui/src/shared/components/Notifications.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {withRouter} from 'react-router'
 import {connect} from 'react-redux'

ui/src/shared/components/OptIn.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
 import uuid from 'uuid'

ui/src/shared/components/ResizeContainer.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
 import ResizeHandle from 'shared/components/ResizeHandle'

ui/src/shared/components/SlideToggle.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 
 class SlideToggle extends Component {
   constructor(props) {

ui/src/shared/components/TimeRangeDropdown.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import moment from 'moment'
 

ui/src/sources/containers/ManageSources.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/status/components/NewsFeed.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 

ui/src/status/containers/StatusPage.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 
 import SourceIndicator from 'shared/components/SourceIndicator'