From e3d4d192dfffb5afc61d573f4051e6f33c526436 Mon Sep 17 00:00:00 2001 From: Joe Li Date: Mon, 17 Oct 2022 15:10:40 -0700 Subject: [PATCH] Revert "chore(sqllab): refactor addQueryEditor for new tab (#21711)" This reverts commit 0c461497ff0ab3cb5a96d68cc919b73a921cae66. --- .../src/SqlLab/actions/sqlLab.js | 17 ------- .../src/SqlLab/actions/sqlLab.test.js | 22 --------- .../src/SqlLab/components/SqlEditor/index.jsx | 13 ++++- .../TabbedSqlEditors.test.jsx | 47 +++++++------------ .../components/TabbedSqlEditors/index.jsx | 6 ++- 5 files changed, 32 insertions(+), 73 deletions(-) diff --git a/superset-frontend/src/SqlLab/actions/sqlLab.js b/superset-frontend/src/SqlLab/actions/sqlLab.js index 7811c0edd8d75..155e0d08c869a 100644 --- a/superset-frontend/src/SqlLab/actions/sqlLab.js +++ b/superset-frontend/src/SqlLab/actions/sqlLab.js @@ -32,7 +32,6 @@ import { } from 'src/components/MessageToasts/actions'; import { getClientErrorObject } from 'src/utils/getClientErrorObject'; import COMMON_ERR_MESSAGES from 'src/utils/errorMessages'; -import { newQueryTabName } from '../utils/newQueryTabName'; export const RESET_STATE = 'RESET_STATE'; export const ADD_QUERY_EDITOR = 'ADD_QUERY_EDITOR'; @@ -591,22 +590,6 @@ export function addQueryEditor(queryEditor) { }; } -export function addNewQueryEditor(queryEditor) { - return function (dispatch, getState) { - const { - sqlLab: { queryEditors }, - } = getState(); - const name = newQueryTabName(queryEditors || []); - - return dispatch( - addQueryEditor({ - ...queryEditor, - name, - }), - ); - }; -} - export function cloneQueryToNewTab(query, autorun) { return function (dispatch, getState) { const state = getState(); diff --git a/superset-frontend/src/SqlLab/actions/sqlLab.test.js b/superset-frontend/src/SqlLab/actions/sqlLab.test.js index 7792f1da8ad63..b216f17927285 100644 --- a/superset-frontend/src/SqlLab/actions/sqlLab.test.js +++ b/superset-frontend/src/SqlLab/actions/sqlLab.test.js @@ -418,28 +418,6 @@ describe('async actions', () => { expect(store.getActions()).toEqual(expectedActions); }); }); - - describe('addNewQueryEditor', () => { - it('creates new query editor with new tab name', () => { - const store = mockStore(initialState); - const expectedActions = [ - { - type: actions.ADD_QUERY_EDITOR, - queryEditor: { - ...defaultQueryEditor, - id: 'abcd', - name: `Untitled Query ${ - store.getState().sqlLab.queryEditors.length + 1 - }`, - }, - }, - ]; - const request = actions.addNewQueryEditor(defaultQueryEditor); - return request(store.dispatch, store.getState).then(() => { - expect(store.getActions()).toEqual(expectedActions); - }); - }); - }); }); describe('backend sync', () => { diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx index 6ff9877cfb4af..a4c31aaa1abb2 100644 --- a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx +++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx @@ -37,7 +37,7 @@ import { Menu } from 'src/components/Menu'; import Icons from 'src/components/Icons'; import { detectOS } from 'src/utils/common'; import { - addNewQueryEditor, + addQueryEditor, CtasEnum, estimateQueryCost, persistEditorHeight, @@ -84,6 +84,7 @@ import ShareSqlLabQuery from '../ShareSqlLabQuery'; import SqlEditorLeftBar from '../SqlEditorLeftBar'; import AceEditorWrapper from '../AceEditorWrapper'; import RunQueryActionButton from '../RunQueryActionButton'; +import { newQueryTabName } from '../../utils/newQueryTabName'; import QueryLimitSelect from '../QueryLimitSelect'; const appContainer = document.getElementById('app'); @@ -178,6 +179,8 @@ const SqlEditor = ({ }, ); + const queryEditors = useSelector(({ sqlLab }) => sqlLab.queryEditors); + const [height, setHeight] = useState(0); const [autorun, setAutorun] = useState(queryEditor.autorun); const [ctas, setCtas] = useState(''); @@ -271,7 +274,13 @@ const SqlEditor = ({ key: userOS === 'Windows' ? 'ctrl+q' : 'ctrl+t', descr: t('New tab'), func: () => { - dispatch(addNewQueryEditor(queryEditor)); + const name = newQueryTabName(queryEditors || []); + dispatch( + addQueryEditor({ + ...queryEditor, + name, + }), + ); }, }, { diff --git a/superset-frontend/src/SqlLab/components/TabbedSqlEditors/TabbedSqlEditors.test.jsx b/superset-frontend/src/SqlLab/components/TabbedSqlEditors/TabbedSqlEditors.test.jsx index 477f1cbc48b21..c007458252495 100644 --- a/superset-frontend/src/SqlLab/components/TabbedSqlEditors/TabbedSqlEditors.test.jsx +++ b/superset-frontend/src/SqlLab/components/TabbedSqlEditors/TabbedSqlEditors.test.jsx @@ -22,7 +22,6 @@ import thunk from 'redux-thunk'; import URI from 'urijs'; import { Provider } from 'react-redux'; import { shallow, mount } from 'enzyme'; -import { fireEvent, render, waitFor } from 'spec/helpers/testing-library'; import sinon from 'sinon'; import { act } from 'react-dom/test-utils'; import fetchMock from 'fetch-mock'; @@ -102,11 +101,6 @@ describe('TabbedSqlEditors', () => { }, ); }); - const setup = (props = {}, overridesStore) => - render(, { - useRedux: true, - store: overridesStore || store, - }); let wrapper; it('is valid', () => { @@ -169,32 +163,23 @@ describe('TabbedSqlEditors', () => { wrapper.instance().props.actions.removeQueryEditor.getCall(0).args[0], ).toBe(queryEditors[0]); }); - it('should add new query editor', async () => { - const { getAllByLabelText } = setup(mockedProps); - fireEvent.click(getAllByLabelText('Add tab')[0]); - const actions = store.getActions(); - await waitFor(() => - expect(actions).toContainEqual({ - type: 'ADD_QUERY_EDITOR', - queryEditor: expect.objectContaining({ - name: expect.stringMatching(/Untitled Query (\d+)+/), - }), - }), - ); + it('should add new query editor', () => { + wrapper = getWrapper(); + sinon.stub(wrapper.instance().props.actions, 'addQueryEditor'); + + wrapper.instance().newQueryEditor(); + expect( + wrapper.instance().props.actions.addQueryEditor.getCall(0).args[0].name, + ).toContain('Untitled Query'); }); - it('should properly increment query tab name', async () => { - const { getAllByLabelText } = setup(mockedProps); - const newTitle = newQueryTabName(store.getState().sqlLab.queryEditors); - fireEvent.click(getAllByLabelText('Add tab')[0]); - const actions = store.getActions(); - await waitFor(() => - expect(actions).toContainEqual({ - type: 'ADD_QUERY_EDITOR', - queryEditor: expect.objectContaining({ - name: newTitle, - }), - }), - ); + it('should properly increment query tab name', () => { + wrapper = getWrapper(); + sinon.stub(wrapper.instance().props.actions, 'addQueryEditor'); + const newTitle = newQueryTabName(wrapper.instance().props.queryEditors); + wrapper.instance().newQueryEditor(); + expect( + wrapper.instance().props.actions.addQueryEditor.getCall(0).args[0].name, + ).toContain(newTitle); }); it('should duplicate query editor', () => { wrapper = getWrapper(); diff --git a/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.jsx b/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.jsx index aebf8ca487b78..e25f179716ba5 100644 --- a/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.jsx +++ b/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.jsx @@ -29,6 +29,7 @@ import { Tooltip } from 'src/components/Tooltip'; import { detectOS } from 'src/utils/common'; import * as Actions from 'src/SqlLab/actions/sqlLab'; import { EmptyStateBig } from 'src/components/EmptyState'; +import { newQueryTabName } from '../../utils/newQueryTabName'; import SqlEditor from '../SqlEditor'; import SqlEditorTabHeader from '../SqlEditorTabHeader'; @@ -241,7 +242,10 @@ class TabbedSqlEditors extends React.PureComponent { '-- Note: Unless you save your query, these tabs will NOT persist if you clear your cookies or change browsers.\n\n', ); + const newTitle = newQueryTabName(this.props.queryEditors || []); + const qe = { + name: newTitle, dbId: activeQueryEditor && activeQueryEditor.dbId ? activeQueryEditor.dbId @@ -251,7 +255,7 @@ class TabbedSqlEditors extends React.PureComponent { sql: `${warning}SELECT ...`, queryLimit: this.props.defaultQueryLimit, }; - this.props.actions.addNewQueryEditor(qe); + this.props.actions.addQueryEditor(qe); } handleSelect(key) {