Skip to content

Commit

Permalink
fix(sql lab): SQL Lab Compile Query Delay (#20206)
Browse files Browse the repository at this point in the history
  • Loading branch information
diegomedina248 authored May 27, 2022
1 parent 75e0fc2 commit 653cf77
Show file tree
Hide file tree
Showing 9 changed files with 35 additions and 35 deletions.
6 changes: 5 additions & 1 deletion superset-frontend/src/SqlLab/actions/sqlLab.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}`),
Expand Down
6 changes: 3 additions & 3 deletions superset-frontend/src/SqlLab/actions/sqlLab.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -635,7 +635,7 @@ describe('async actions', () => {
});
});

describe('queryEditorSetSql', () => {
describe('queryEditorSetAndSaveSql', () => {
const sql = 'SELECT * ';
const expectedActions = [
{
Expand All @@ -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);
Expand All @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const NOOP = () => {};
const mockedProps = {
queries: [],
actions: {
queryEditorSetSql: NOOP,
queryEditorSetAndSaveSql: NOOP,
cloneQueryToNewTab: NOOP,
fetchQueryResults: NOOP,
clearQueryResults: NOOP,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions superset-frontend/src/SqlLab/components/QueryTable/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ interface QueryTableQuery
interface QueryTableProps {
columns?: string[];
actions: {
queryEditorSetSql: Function;
queryEditorSetAndSaveSql: Function;
cloneQueryToNewTab: Function;
fetchQueryResults: Function;
clearQueryResults: Function;
Expand Down Expand Up @@ -94,7 +94,7 @@ const QueryTable = ({
const user = useSelector<RootState, User>(state => state.sqlLab.user);

const {
queryEditorSetSql,
queryEditorSetAndSaveSql,
cloneQueryToNewTab,
fetchQueryResults,
clearQueryResults,
Expand All @@ -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) => {
Expand Down Expand Up @@ -314,7 +314,7 @@ const QueryTable = ({
clearQueryResults,
cloneQueryToNewTab,
fetchQueryResults,
queryEditorSetSql,
queryEditorSetAndSaveSql,
removeQuery,
]);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ const mockedEmptyProps = {
latestQueryId: '',
dataPreviewQueries: [],
actions: {
queryEditorSetSql: NOOP,
queryEditorSetAndSaveSql: NOOP,
cloneQueryToNewTab: NOOP,
fetchQueryResults: NOOP,
clearQueryResults: NOOP,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ interface SouthPanePropTypes {
latestQueryId?: string;
dataPreviewQueries: any[];
actions: {
queryEditorSetSql: Function;
queryEditorSetAndSaveSql: Function;
cloneQueryToNewTab: Function;
fetchQueryResults: Function;
clearQueryResults: Function;
Expand Down
40 changes: 18 additions & 22 deletions superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ import {
queryEditorSetAutorun,
queryEditorSetQueryLimit,
queryEditorSetSql,
queryEditorSetAndSaveSql,
queryEditorSetTemplateParams,
runQuery,
saveQuery,
Expand Down Expand Up @@ -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,
Expand All @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
}
}

Expand Down Expand Up @@ -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();
}
},
Expand All @@ -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();
}
},
Expand Down Expand Up @@ -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) {
Expand All @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -854,6 +849,7 @@ function mapDispatchToProps(dispatch) {
queryEditorSetAutorun,
queryEditorSetQueryLimit,
queryEditorSetSql,
queryEditorSetAndSaveSql,
queryEditorSetTemplateParams,
runQuery,
saveQuery,
Expand Down

0 comments on commit 653cf77

Please sign in to comment.