move write form display state out of redux and into component state

ui/src/data_explorer/actions/view/index.js

@@ -23,14 +23,6 @@ export function deleteQuery(queryID) {
   }
 }
 
-export const showWriteForm = () => {
-  return {type: 'SHOW_WRITE_FORM'}
-}
-
-export const hideWriteForm = () => {
-  return {type: 'HIDE_WRITE_FORM'}
-}
-
 export function toggleField(queryId, fieldFunc, isKapacitorRule) {
   return {
     type: 'TOGGLE_FIELD',

ui/src/data_explorer/containers/DataExplorer.js

@@ -39,7 +39,7 @@ const DataExplorer = React.createClass({
     }).isRequired,
     setTimeRange: func.isRequired,
     hideWriteFormAction: func.isRequired,
-    showWriteFormAction: func.isRequired,
+    showWriteForm: func.isRequired,
     dataExplorer: shape({
       showWriteForm: bool.isRequired,
       queryIDs: arrayOf(string).isRequired,
@@ -62,6 +62,7 @@ const DataExplorer = React.createClass({
   getInitialState() {
     return {
       activeQueryIndex: 0,
+      showWriteForm: false,
     }
   },
 
@@ -84,24 +85,24 @@ const DataExplorer = React.createClass({
       queryConfigs,
       queryConfigActions,
       source,
-      hideWriteFormAction,
-      showWriteFormAction,
-      dataExplorer: {showWriteForm},
     } = this.props
-    const {activeQueryIndex} = this.state
+    const {activeQueryIndex, showWriteForm} = this.state
 
     return (
       <div className="data-explorer">
         {showWriteForm
           ? <OverlayTechnologies>
-              <WriteDataForm onClose={hideWriteFormAction} source={source} />
+              <WriteDataForm
+                onClose={() => this.setState({showWriteForm: false})}
+                source={source}
+              />
             </OverlayTechnologies>
           : null}
         <Header
           actions={{handleChooseAutoRefresh, setTimeRange}}
           autoRefresh={autoRefresh}
           timeRange={timeRange}
-          showWriteFormAction={showWriteFormAction}
+          showWriteForm={() => this.setState({showWriteForm: true})}
         />
         <ResizeContainer
           containerClass="page-contents"
@@ -157,14 +158,6 @@ function mapDispatchToProps(dispatch) {
   return {
     handleChooseAutoRefresh: bindActionCreators(setAutoRefresh, dispatch),
     setTimeRange: bindActionCreators(viewActions.setTimeRange, dispatch),
-    showWriteFormAction: bindActionCreators(
-      viewActions.showWriteForm,
-      dispatch
-    ),
-    hideWriteFormAction: bindActionCreators(
-      viewActions.hideWriteForm,
-      dispatch
-    ),
     queryConfigActions: bindActionCreators(viewActions, dispatch),
   }
 }

ui/src/data_explorer/containers/Header.js

@@ -15,7 +15,7 @@ const Header = React.createClass({
       setTimeRange: func.isRequired,
     }),
     autoRefresh: number.isRequired,
-    showWriteFormAction: func.isRequired,
+    showWriteForm: func.isRequired,
     timeRange: shape({
       lower: string,
       upper: string,
@@ -36,7 +36,7 @@ const Header = React.createClass({
     const {
       autoRefresh,
       actions: {handleChooseAutoRefresh},
-      showWriteFormAction,
+      showWriteForm,
       timeRange,
     } = this.props
 
@@ -51,7 +51,7 @@ const Header = React.createClass({
           <div className="page-header__right">
             <GraphTips />
             <SourceIndicator sourceName={this.context.source.name} />
-            <div className="btn btn-sm btn-info" onClick={showWriteFormAction}>
+            <div className="btn btn-sm btn-info" onClick={showWriteForm}>
               <span className="icon pencil" />
               Write Data
             </div>

ui/src/data_explorer/reducers/ui.js

@@ -21,14 +21,6 @@ export default function ui(state = initialState, action) {
 
       return {...state, ...newState}
     }
-
-    case 'SHOW_WRITE_FORM': {
-      return {...state, showWriteForm: true}
-    }
-
-    case 'HIDE_WRITE_FORM': {
-      return {...state, showWriteForm: false}
-    }
   }
 
   return state