pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(sql lab): SQL Lab Compile Query Delay (#20206)

This commit is contained in:
Diego Medina 2022-05-27 02:42:01 -04:00 committed by GitHub
parent 75e0fc25eb
commit 653cf773f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 35 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
superset-frontend/src/SqlLab/actions/sqlLab.js
View File

@ -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}`),

6
superset-frontend/src/SqlLab/actions/sqlLab.test.js
View File

@ -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);

2
superset-frontend/src/SqlLab/components/QueryHistory/QueryHistory.test.tsx
View File

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

2
superset-frontend/src/SqlLab/components/QueryHistory/index.tsx
View File

@ -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;

2
superset-frontend/src/SqlLab/components/QuerySearch/index.tsx
View File

@ -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;

8
superset-frontend/src/SqlLab/components/QueryTable/index.tsx
View File

@ -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,
]);

2
superset-frontend/src/SqlLab/components/SouthPane/SouthPane.test.jsx
View File

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

2
superset-frontend/src/SqlLab/components/SouthPane/index.tsx
View File

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

40
superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
View File

@ -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,