fix(sql lab): SQL Lab Compile Query Delay

superset-frontend/src/SqlLab/actions/sqlLab.js

@@ -917,9 +917,13 @@ export function updateSavedQuery(query) {
 }
 
 export function queryEditorSetSql(queryEditor, sql) {
+  return { type: QUERY_EDITOR_SET_SQL, queryEditor, sql };
+}
+
+export function queryEditorSetAndSaveSql(queryEditor, sql) {
   return function (dispatch) {
     // saved query and set tab state use this action
-    dispatch({ type: QUERY_EDITOR_SET_SQL, queryEditor, sql });
+    dispatch(queryEditorSetSql(queryEditor, sql));
     if (isFeatureEnabled(FeatureFlag.SQLLAB_BACKEND_PERSISTENCE)) {
       return SupersetClient.put({
         endpoint: encodeURI(`/tabstateview/${queryEditor.id}`),

superset-frontend/src/SqlLab/actions/sqlLab.test.js

@@ -635,7 +635,7 @@ describe('async actions', () => {
       });
     });
 
-    describe('queryEditorSetSql', () => {
+    describe('queryEditorSetAndSaveSql', () => {
       const sql = 'SELECT * ';
       const expectedActions = [
         {
@@ -651,7 +651,7 @@ describe('async actions', () => {
           const store = mockStore({});
 
           return store
-            .dispatch(actions.queryEditorSetSql(queryEditor, sql))
+            .dispatch(actions.queryEditorSetAndSaveSql(queryEditor, sql))
             .then(() => {
               expect(store.getActions()).toEqual(expectedActions);
               expect(fetchMock.calls(updateTabStateEndpoint)).toHaveLength(1);
@@ -668,7 +668,7 @@ describe('async actions', () => {
 
           const store = mockStore({});
 
-          store.dispatch(actions.queryEditorSetSql(queryEditor, sql));
+          store.dispatch(actions.queryEditorSetAndSaveSql(queryEditor, sql));
 
           expect(store.getActions()).toEqual(expectedActions);
           expect(fetchMock.calls(updateTabStateEndpoint)).toHaveLength(0);

superset-frontend/src/SqlLab/components/QueryHistory/QueryHistory.test.tsx

@@ -24,7 +24,7 @@ const NOOP = () => {};
 const mockedProps = {
   queries: [],
   actions: {
-    queryEditorSetSql: NOOP,
+    queryEditorSetAndSaveSql: NOOP,
     cloneQueryToNewTab: NOOP,
     fetchQueryResults: NOOP,
     clearQueryResults: NOOP,

superset-frontend/src/SqlLab/components/QueryHistory/index.tsx

@@ -25,7 +25,7 @@ import QueryTable from 'src/SqlLab/components/QueryTable';
 interface QueryHistoryProps {
   queries: Query[];
   actions: {
-    queryEditorSetSql: Function;
+    queryEditorSetAndSaveSql: Function;
     cloneQueryToNewTab: Function;
     fetchQueryResults: Function;
     clearQueryResults: Function;

superset-frontend/src/SqlLab/components/QuerySearch/index.tsx

@@ -37,7 +37,7 @@ interface QuerySearchProps {
   actions: {
     addDangerToast: (msg: string) => void;
     setDatabases: (data: Record<string, any>) => Record<string, any>;
-    queryEditorSetSql: Function;
+    queryEditorSetAndSaveSql: Function;
     cloneQueryToNewTab: Function;
     fetchQueryResults: Function;
     clearQueryResults: Function;

superset-frontend/src/SqlLab/components/QueryTable/index.tsx

@@ -46,7 +46,7 @@ interface QueryTableQuery
 interface QueryTableProps {
   columns?: string[];
   actions: {
-    queryEditorSetSql: Function;
+    queryEditorSetAndSaveSql: Function;
     cloneQueryToNewTab: Function;
     fetchQueryResults: Function;
     clearQueryResults: Function;
@@ -94,7 +94,7 @@ const QueryTable = ({
   const user = useSelector<RootState, User>(state => state.sqlLab.user);
 
   const {
-    queryEditorSetSql,
+    queryEditorSetAndSaveSql,
     cloneQueryToNewTab,
     fetchQueryResults,
     clearQueryResults,
@@ -103,7 +103,7 @@ const QueryTable = ({
 
   const data = useMemo(() => {
     const restoreSql = (query: Query) => {
-      queryEditorSetSql({ id: query.sqlEditorId }, query.sql);
+      queryEditorSetAndSaveSql({ id: query.sqlEditorId }, query.sql);
     };
 
     const openQueryInNewTab = (query: Query) => {
@@ -314,7 +314,7 @@ const QueryTable = ({
     clearQueryResults,
     cloneQueryToNewTab,
     fetchQueryResults,
-    queryEditorSetSql,
+    queryEditorSetAndSaveSql,
     removeQuery,
   ]);
 

superset-frontend/src/SqlLab/components/SouthPane/SouthPane.test.jsx

@@ -80,7 +80,7 @@ const mockedEmptyProps = {
   latestQueryId: '',
   dataPreviewQueries: [],
   actions: {
-    queryEditorSetSql: NOOP,
+    queryEditorSetAndSaveSql: NOOP,
     cloneQueryToNewTab: NOOP,
     fetchQueryResults: NOOP,
     clearQueryResults: NOOP,

superset-frontend/src/SqlLab/components/SouthPane/index.tsx

@@ -46,7 +46,7 @@ interface SouthPanePropTypes {
   latestQueryId?: string;
   dataPreviewQueries: any[];
   actions: {
-    queryEditorSetSql: Function;
+    queryEditorSetAndSaveSql: Function;
     cloneQueryToNewTab: Function;
     fetchQueryResults: Function;
     clearQueryResults: Function;

superset-frontend/src/SqlLab/components/SqlEditor/index.jsx

@@ -45,6 +45,7 @@ import {
   queryEditorSetAutorun,
   queryEditorSetQueryLimit,
   queryEditorSetSql,
+  queryEditorSetAndSaveSql,
   queryEditorSetTemplateParams,
   runQuery,
   saveQuery,
@@ -177,7 +178,6 @@ class SqlEditor extends React.PureComponent {
       ctas: '',
       northPercent: props.queryEditor.northPercent || INITIAL_NORTH_PERCENT,
       southPercent: props.queryEditor.southPercent || INITIAL_SOUTH_PERCENT,
-      sql: props.queryEditor.sql,
       autocompleteEnabled: getItem(
         LocalStorageKeys.sqllab__is_autocomplete_enabled,
         true,
@@ -198,12 +198,13 @@ class SqlEditor extends React.PureComponent {
     this.stopQuery = this.stopQuery.bind(this);
     this.saveQuery = this.saveQuery.bind(this);
     this.onSqlChanged = this.onSqlChanged.bind(this);
-    this.setQueryEditorSql = this.setQueryEditorSql.bind(this);
-    this.setQueryEditorSqlWithDebounce = debounce(
-      this.setQueryEditorSql.bind(this),
+    this.setQueryEditorAndSaveSql = this.setQueryEditorAndSaveSql.bind(this);
+    this.setQueryEditorAndSaveSqlWithDebounce = debounce(
+      this.setQueryEditorAndSaveSql.bind(this),
       SET_QUERY_EDITOR_SQL_DEBOUNCE_MS,
     );
     this.queryPane = this.queryPane.bind(this);
+    this.getHotkeyConfig = this.getHotkeyConfig.bind(this);
     this.renderQueryLimit = this.renderQueryLimit.bind(this);
     this.getAceEditorAndSouthPaneHeights =
       this.getAceEditorAndSouthPaneHeights.bind(this);
@@ -250,12 +251,6 @@ class SqlEditor extends React.PureComponent {
     });
   }
 
-  componentDidUpdate() {
-    if (this.props.queryEditor.sql !== this.state.sql) {
-      this.onSqlChanged(this.props.queryEditor.sql);
-    }
-  }
-
   componentWillUnmount() {
     window.removeEventListener('resize', this.handleWindowResize);
     window.removeEventListener('beforeunload', this.onBeforeUnload);
@@ -290,12 +285,12 @@ class SqlEditor extends React.PureComponent {
   }
 
   onSqlChanged(sql) {
-    this.setState({ sql });
-    this.setQueryEditorSqlWithDebounce(sql);
+    this.props.queryEditorSetSql(this.props.queryEditor, sql);
+    this.setQueryEditorAndSaveSqlWithDebounce(sql);
     // Request server-side validation of the query text
     if (this.canValidateQuery()) {
       // NB. requestValidation is debounced
-      this.requestValidation();
+      this.requestValidation(sql);
     }
   }
 
@@ -330,7 +325,7 @@ class SqlEditor extends React.PureComponent {
         key: 'ctrl+r',
         descr: t('Run query'),
         func: () => {
-          if (this.state.sql.trim() !== '') {
+          if (this.props.queryEditor.sql.trim() !== '') {
             this.runQuery();
           }
         },
@@ -340,7 +335,7 @@ class SqlEditor extends React.PureComponent {
         key: 'ctrl+enter',
         descr: t('Run query'),
         func: () => {
-          if (this.state.sql.trim() !== '') {
+          if (this.props.queryEditor.sql.trim() !== '') {
             this.runQuery();
           }
         },
@@ -383,8 +378,8 @@ class SqlEditor extends React.PureComponent {
     this.setState({ showEmptyState: bool });
   }
 
-  setQueryEditorSql(sql) {
-    this.props.queryEditorSetSql(this.props.queryEditor, sql);
+  setQueryEditorAndSaveSql(sql) {
+    this.props.queryEditorSetAndSaveSql(this.props.queryEditor, sql);
   }
 
   setQueryLimit(queryLimit) {
@@ -396,7 +391,7 @@ class SqlEditor extends React.PureComponent {
       const qe = this.props.queryEditor;
       const query = {
         dbId: qe.dbId,
-        sql: qe.selectedText ? qe.selectedText : this.state.sql,
+        sql: qe.selectedText ? qe.selectedText : this.props.queryEditor.sql,
         sqlEditorId: qe.id,
         schema: qe.schema,
         templateParams: qe.templateParams,
@@ -429,12 +424,12 @@ class SqlEditor extends React.PureComponent {
     };
   }
 
-  requestValidation() {
+  requestValidation(sql) {
     if (this.props.database) {
       const qe = this.props.queryEditor;
       const query = {
         dbId: qe.dbId,
-        sql: this.state.sql,
+        sql,
         sqlEditorId: qe.id,
         schema: qe.schema,
         templateParams: qe.templateParams,
@@ -466,7 +461,7 @@ class SqlEditor extends React.PureComponent {
     const qe = this.props.queryEditor;
     const query = {
       dbId: qe.dbId,
-      sql: qe.selectedText ? qe.selectedText : this.state.sql,
+      sql: qe.selectedText ? qe.selectedText : qe.sql,
       sqlEditorId: qe.id,
       tab: qe.title,
       schema: qe.schema,
@@ -682,7 +677,7 @@ class SqlEditor extends React.PureComponent {
               runQuery={this.runQuery}
               selectedText={qe.selectedText}
               stopQuery={this.stopQuery}
-              sql={this.state.sql}
+              sql={this.props.queryEditor.sql}
               overlayCreateAsMenu={showMenu ? runMenuBtn : null}
             />
           </span>
@@ -854,6 +849,7 @@ function mapDispatchToProps(dispatch) {
       queryEditorSetAutorun,
       queryEditorSetQueryLimit,
       queryEditorSetSql,
+      queryEditorSetAndSaveSql,
       queryEditorSetTemplateParams,
       runQuery,
       saveQuery,