diff --git a/web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap b/web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap index 864c763c26b..4b26917d411 100644 --- a/web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap +++ b/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" > this.setState({ historyDialogOpen: true })} onPrettier={() => this.prettyPrintJson()} + loading={loading} /> {this.renderAutoRunSwitch()} {this.renderWrapQueryLimitSelector()} diff --git a/web-console/src/views/query-view/run-button/__snapshots__/run-button.spec.tsx.snap b/web-console/src/views/query-view/run-button/__snapshots__/run-button.spec.tsx.snap index 3b0f1322bcc..824f9c5a378 100644 --- a/web-console/src/views/query-view/run-button/__snapshots__/run-button.spec.tsx.snap +++ b/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`] = ` +
+ + + + + + + + + + +
+`; + +exports[`run button matches snapshot non-loading state 1`] = `
diff --git a/web-console/src/views/query-view/run-button/run-button.spec.tsx b/web-console/src/views/query-view/run-button/run-button.spec.tsx index 79bf79070f4..1c2b6ecf9e2 100644 --- a/web-console/src/views/query-view/run-button/run-button.spec.tsx +++ b/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 = ( {}} + 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 = ( + {}} onEditContext={() => {}} runeMode={false} diff --git a/web-console/src/views/query-view/run-button/run-button.tsx b/web-console/src/views/query-view/run-button/run-button.tsx index 438d6f30e18..51b7025a094 100644 --- a/web-console/src/views/query-view/run-button/run-button.tsx +++ b/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 { } 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 { {onRun ? (