Add disabled run button during loading state (#9474)

* [IMPLY-1782] add disabled run button during loading state

* jest -u

web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap

@@ -35,6 +35,7 @@ exports[`sql view matches snapshot 1`] = `
         className="control-bar"
       >
         <HotkeysTarget(RunButton)
+          loading={false}
           onEditContext={[Function]}
           onExplain={[Function]}
           onHistory={[Function]}

web-console/src/views/query-view/query-view.tsx

@@ -516,6 +516,7 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
               onExplain={emptyQuery ? undefined : this.handleExplain}
               onHistory={() => this.setState({ historyDialogOpen: true })}
               onPrettier={() => this.prettyPrintJson()}
+              loading={loading}
             />
             {this.renderAutoRunSwitch()}
             {this.renderWrapQueryLimitSelector()}

web-console/src/views/query-view/run-button/__snapshots__/run-button.spec.tsx.snap

@@ -1,6 +1,84 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`run button matches snapshot 1`] = `
+exports[`run button matches snapshot loading state 1`] = `
+<div
+  class="bp3-button-group run-button"
+>
+  <span
+    class="bp3-popover-wrapper"
+  >
+    <span
+      class="bp3-popover-target"
+    >
+      <button
+        class="bp3-button bp3-disabled bp3-intent-primary"
+        disabled=""
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          class="bp3-icon bp3-icon-caret-right"
+          icon="caret-right"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <desc>
+              caret-right
+            </desc>
+            <path
+              d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </span>
+        <span
+          class="bp3-button-text"
+        >
+          Run
+        </span>
+      </button>
+    </span>
+  </span>
+  <span
+    class="bp3-popover-wrapper"
+  >
+    <span
+      class="bp3-popover-target"
+    >
+      <button
+        class="bp3-button bp3-intent-primary"
+        type="button"
+      >
+        <span
+          class="bp3-icon bp3-icon-more"
+          icon="more"
+        >
+          <svg
+            data-icon="more"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <desc>
+              more
+            </desc>
+            <path
+              d="M2 6.03a2 2 0 100 4 2 2 0 100-4zM14 6.03a2 2 0 100 4 2 2 0 100-4zM8 6.03a2 2 0 100 4 2 2 0 100-4z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </span>
+      </button>
+    </span>
+  </span>
+</div>
+`;
+
+exports[`run button matches snapshot non-loading state 1`] = `
 <div
   class="bp3-button-group run-button"
 >

web-console/src/views/query-view/run-button/run-button.spec.tsx

@@ -22,9 +22,29 @@ import React from 'react';
 import { RunButton } from './run-button';
 
 describe('run button', () => {
-  it('matches snapshot', () => {
+  it('matches snapshot non-loading state', () => {
     const runButton = (
       <RunButton
+        loading={false}
+        onHistory={() => {}}
+        onEditContext={() => {}}
+        runeMode={false}
+        queryContext={{ f: 3 }}
+        onQueryContextChange={() => {}}
+        onRun={() => {}}
+        onExplain={() => {}}
+        onPrettier={() => {}}
+      />
+    );
+
+    const { container } = render(runButton);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('matches snapshot loading state', () => {
+    const runButton = (
+      <RunButton
+        loading
         onHistory={() => {}}
         onEditContext={() => {}}
         runeMode={false}

web-console/src/views/query-view/run-button/run-button.tsx

@@ -50,6 +50,7 @@ export interface RunButtonProps {
   queryContext: QueryContext;
   onQueryContextChange: (newQueryContext: QueryContext) => void;
   onRun: (() => void) | undefined;
+  loading: boolean;
   onExplain: (() => void) | undefined;
   onEditContext: () => void;
   onHistory: () => void;
@@ -149,7 +150,7 @@ export class RunButton extends React.PureComponent<RunButtonProps> {
   }
 
   render(): JSX.Element {
-    const { runeMode, onRun } = this.props;
+    const { runeMode, onRun, loading } = this.props;
     const runButtonText = 'Run' + (runeMode ? 'e' : '');
 
     return (
@@ -157,6 +158,7 @@ export class RunButton extends React.PureComponent<RunButtonProps> {
         {onRun ? (
           <Tooltip content="Control + Enter" hoverOpenDelay={900}>
             <Button
+              disabled={loading}
               icon={IconNames.CARET_RIGHT}
               onClick={this.handleRun}
               text={runButtonText}