From 46317c8a8256b11184b876766dfc558928066f59 Mon Sep 17 00:00:00 2001 From: Diego Medina Date: Thu, 26 May 2022 18:37:52 -0300 Subject: [PATCH] fix(sql lab): SQL Lab Compile Query Delay --- .../src/SqlLab/actions/sqlLab.js | 6 ++- .../src/SqlLab/actions/sqlLab.test.js | 6 +-- .../QueryHistory/QueryHistory.test.tsx | 2 +- .../SqlLab/components/QueryHistory/index.tsx | 2 +- .../SqlLab/components/QuerySearch/index.tsx | 2 +- .../SqlLab/components/QueryTable/index.tsx | 8 ++-- .../components/SouthPane/SouthPane.test.jsx | 2 +- .../src/SqlLab/components/SouthPane/index.tsx | 2 +- .../src/SqlLab/components/SqlEditor/index.jsx | 40 +++++++++---------- 9 files changed, 35 insertions(+), 35 deletions(-) diff --git a/superset-frontend/src/SqlLab/actions/sqlLab.js b/superset-frontend/src/SqlLab/actions/sqlLab.js index b950d0e37737f..be968b2ec99cc 100644 --- a/superset-frontend/src/SqlLab/actions/sqlLab.js +++ b/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}`), diff --git a/superset-frontend/src/SqlLab/actions/sqlLab.test.js b/superset-frontend/src/SqlLab/actions/sqlLab.test.js index f2d56caee4d33..440df74bf937f 100644 --- a/superset-frontend/src/SqlLab/actions/sqlLab.test.js +++ b/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); diff --git a/superset-frontend/src/SqlLab/components/QueryHistory/QueryHistory.test.tsx b/superset-frontend/src/SqlLab/components/QueryHistory/QueryHistory.test.tsx index e63de3fdca869..8d25fca910124 100644 --- a/superset-frontend/src/SqlLab/components/QueryHistory/QueryHistory.test.tsx +++ b/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, diff --git a/superset-frontend/src/SqlLab/components/QueryHistory/index.tsx b/superset-frontend/src/SqlLab/components/QueryHistory/index.tsx index 6820e19d49deb..c41ace1ead01b 100644 --- a/superset-frontend/src/SqlLab/components/QueryHistory/index.tsx +++ b/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; diff --git a/superset-frontend/src/SqlLab/components/QuerySearch/index.tsx b/superset-frontend/src/SqlLab/components/QuerySearch/index.tsx index 762f35e89880e..be13dc8e592e3 100644 --- a/superset-frontend/src/SqlLab/components/QuerySearch/index.tsx +++ b/superset-frontend/src/SqlLab/components/QuerySearch/index.tsx @@ -37,7 +37,7 @@ interface QuerySearchProps { actions: { addDangerToast: (msg: string) => void; setDatabases: (data: Record) => Record; - queryEditorSetSql: Function; + queryEditorSetAndSaveSql: Function; cloneQueryToNewTab: Function; fetchQueryResults: Function; clearQueryResults: Function; diff --git a/superset-frontend/src/SqlLab/components/QueryTable/index.tsx b/superset-frontend/src/SqlLab/components/QueryTable/index.tsx index a50779d6eb9c1..5e42d213810e0 100644 --- a/superset-frontend/src/SqlLab/components/QueryTable/index.tsx +++ b/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(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, ]); diff --git a/superset-frontend/src/SqlLab/components/SouthPane/SouthPane.test.jsx b/superset-frontend/src/SqlLab/components/SouthPane/SouthPane.test.jsx index 1786a6cf313a6..6dfca33dbc06b 100644 --- a/superset-frontend/src/SqlLab/components/SouthPane/SouthPane.test.jsx +++ b/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, diff --git a/superset-frontend/src/SqlLab/components/SouthPane/index.tsx b/superset-frontend/src/SqlLab/components/SouthPane/index.tsx index 767b608f3b7d2..94db283edf76f 100644 --- a/superset-frontend/src/SqlLab/components/SouthPane/index.tsx +++ b/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; diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx index 06cb87e4f0340..a01ff33a969d1 100644 --- a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx +++ b/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} /> @@ -854,6 +849,7 @@ function mapDispatchToProps(dispatch) { queryEditorSetAutorun, queryEditorSetQueryLimit, queryEditorSetSql, + queryEditorSetAndSaveSql, queryEditorSetTemplateParams, runQuery, saveQuery,