Fix run query bug where query text wasn’t changing (#821)

frontend/components/forms/queries/QueryForm/QueryForm.jsx

@@ -95,6 +95,16 @@ class QueryForm extends Component {
     });
   }
 
+  onRunQuery = (queryText) => {
+    return (evt) => {
+      evt.preventDefault();
+
+      const { onRunQuery: handleRunQuery } = this.props;
+
+      return handleRunQuery(queryText);
+    };
+  }
+
   onUpdate = (evt) => {
     evt.preventDefault();
 
@@ -130,12 +140,11 @@ class QueryForm extends Component {
       fields,
       formData,
       handleSubmit,
-      onRunQuery,
       onStopQuery,
       queryIsRunning,
       queryType,
     } = this.props;
-    const { onCancel, onUpdate } = this;
+    const { onCancel, onRunQuery, onUpdate } = this;
 
     const dropdownBtnOptions = [{
       disabled: !canSaveChanges(fields, formData),
@@ -163,7 +172,7 @@ class QueryForm extends Component {
       runQueryButton = (
         <Button
           className={`${baseClass}__run-query-btn`}
-          onClick={onRunQuery}
+          onClick={onRunQuery(fields.query.value)}
           variant="brand"
         >
           Run Query

frontend/components/forms/queries/QueryForm/QueryForm.tests.jsx

@@ -174,13 +174,13 @@ describe('QueryForm - component', () => {
     });
   });
 
-  it('calls the onRunQuery prop when "Run Query" is clicked and the form is valid', () => {
+  it('calls the onRunQuery prop with the query text when "Run Query" is clicked and the form is valid', () => {
     const onRunQuerySpy = createSpy();
     const form = mount(<QueryForm formData={{ ...query, query: queryText }} onRunQuery={onRunQuerySpy} />);
     const runQueryBtn = form.find('.query-form__run-query-btn');
 
     runQueryBtn.simulate('click');
 
-    expect(onRunQuerySpy).toHaveBeenCalled();
+    expect(onRunQuerySpy).toHaveBeenCalledWith(query.query);
   });
 });

frontend/pages/queries/QueryPage/QueryPage.jsx

@@ -70,11 +70,9 @@ class QueryPage extends Component {
     return false;
   }
 
-  onRunQuery = debounce((evt) => {
-    evt.preventDefault();
-
-    const { dispatch, query, selectedTargets } = this.props;
-    const { error } = validateQuery(query.query);
+  onRunQuery = debounce((queryText) => {
+    const { dispatch, selectedTargets } = this.props;
+    const { error } = validateQuery(queryText);
 
     if (error) {
       dispatch(renderFlash('error', error));
@@ -89,7 +87,7 @@ class QueryPage extends Component {
     removeSocket();
     destroyCampaign();
 
-    dispatch(create({ query: query.query, selected }))
+    dispatch(create({ query: queryText, selected }))
       .then((campaignResponse) => {
         return Kolide.runQueryWebsocket(campaignResponse.id)
           .then((socket) => {