Move addQuery logic to container

ui/src/dashboards/components/CellEditorOverlay.js

@@ -111,10 +111,14 @@ class CellEditorOverlay extends Component {
     e.preventDefault()
   }
 
-  handleAddQuery(options) {
-    const newQuery = Object.assign({}, defaultQueryConfig(uuid.v4()), options)
-    const nextQueries = this.state.queriesWorkingDraft.concat(newQuery)
+  handleAddQuery() {
+    const {queriesWorkingDraft} = this.state
+    const newIndex = queriesWorkingDraft.length
+    const newQuery = {...defaultQueryConfig(uuid.v4())}
+    const nextQueries = queriesWorkingDraft.concat(newQuery)
+
     this.setState({queriesWorkingDraft: nextQueries})
+    this.handleSetActiveQueryIndex(newIndex)
   }
 
   handleDeleteQuery(index) {
@@ -203,7 +207,6 @@ class CellEditorOverlay extends Component {
     } = this.state
 
     const queryActions = {
-      addQuery: this.handleAddQuery,
       editRawTextAsync: this.handleEditRawText,
       ..._.mapValues(queryModifiers, qm => this.queryStateReducer(qm)),
     }
@@ -254,8 +257,8 @@ class CellEditorOverlay extends Component {
                   actions={queryActions}
                   autoRefresh={autoRefresh}
                   timeRange={timeRange}
-                  setActiveQueryIndex={this.handleSetActiveQueryIndex}
                   onDeleteQuery={this.handleDeleteQuery}
+                  onAddQuery={this.handleAddQuery}
                   activeQueryIndex={activeQueryIndex}
                 />}
           </div>

ui/src/dashboards/components/QueryMaker.js

@@ -11,16 +11,11 @@ const QueryMaker = ({
   queries,
   timeRange,
   templates,
+  onAddQuery,
   onDeleteQuery,
   activeQueryIndex,
   setActiveQueryIndex,
 }) => {
-  const handleAddQuery = () => {
-    const newIndex = queries.length
-    actions.addQuery()
-    setActiveQueryIndex(newIndex)
-  }
-
   const getActiveQuery = () => {
     const activeQuery = queries[activeQueryIndex]
     const defaultQuery = queries[0]
@@ -35,7 +30,7 @@ const QueryMaker = ({
       <QueryTabList
         queries={queries}
         timeRange={timeRange}
-        onAddQuery={handleAddQuery}
+        onAddQuery={onAddQuery}
         onDeleteQuery={onDeleteQuery}
         activeQueryIndex={activeQueryIndex}
         setActiveQueryIndex={setActiveQueryIndex}
@@ -48,9 +43,9 @@ const QueryMaker = ({
             actions={actions}
             timeRange={timeRange}
             templates={templates}
-            onAddQuery={handleAddQuery}
+            onAddQuery={onAddQuery}
           />
-        : <EmptyQuery onAddQuery={handleAddQuery} />}
+        : <EmptyQuery onAddQuery={onAddQuery} />}
     </div>
   )
 }