Fix multiple field selection bugs

Before applying this commit, if a user had
a field and func selected and then selected
a new field the new field would not be applied to
the query.

ui/spec/data_explorer/reducers/queryConfigSpec.js

@@ -103,12 +103,50 @@ describe('Chronograf.Reducers.queryConfig', () => {
         expect(state[queryId].fields.length).to.equal(1)
 
         const isKapacitorRule = true
-        const newState = reducer(state, toggleField(queryId, {field: 'a different field', funcs: []}, isKapacitorRule))
+        const newState = reducer(
+          state,
+          toggleField(
+            queryId,
+            {field: 'a different field', funcs: []},
+            isKapacitorRule
+          )
+        )
 
         expect(newState[queryId].fields.length).to.equal(1)
         expect(newState[queryId].fields[0].field).to.equal('a different field')
       })
     })
+
+    describe('TOGGLE_FIELDS', () => {
+      it('can toggle multiple fields', () => {
+        expect(state[queryId].fields.length).to.equal(1)
+
+        const newState = reducer(
+          state,
+          toggleField(queryId, {field: 'a different field', funcs: []})
+        )
+
+        expect(newState[queryId].fields.length).to.equal(2)
+        expect(newState[queryId].fields[1].field).to.equal('a different field')
+      })
+
+      it('applies a func to a field if the there are funcs on previously selected fields', () => {
+        expect(state[queryId].fields.length).to.equal(1)
+
+        const oneFieldOneFunc = reducer(
+          state,
+          applyFuncsToField(queryId, {field: 'a great field', funcs: ['func1']})
+        )
+
+        const newState = reducer(
+          oneFieldOneFunc,
+          toggleField(queryId, {field: 'a different field', funcs: []})
+        )
+
+        expect(newState[queryId].fields[1].funcs.length).to.equal(1)
+        expect(newState[queryId].fields[1].funcs[0]).to.equal('func1')
+      })
+    })
   })
 
   describe('APPLY_FUNCS_TO_FIELD', () => {

ui/src/utils/queryTransitions.js

@@ -38,9 +38,20 @@ export function toggleField(query, {field, funcs}, isKapacitorRule = false) {
       fields: [{field, funcs}],
     })
   }
-  return Object.assign({}, query, {
+
-    fields: query.fields.concat({field, funcs}),
+  const hasFuncs = query.fields.find(f => f.funcs.length)
-  })
+  let newFuncs = []
+  if (hasFuncs) {
+    newFuncs = hasFuncs.funcs
+  }
+
+  return {
+    ...query,
+    fields: query.fields.concat({
+      field,
+      funcs: newFuncs,
+    }),
+  }
 }
 
 export function groupByTime(query, time) {