mirror of
https://github.com/apache/superset.git
synced 2026-04-21 17:14:57 +00:00
perf(sqllab): Rendering perf improvement using immutable state (#20877)
* perf(sqllab): Rendering perf improvement using immutable state - keep queryEditors immutable during active state - add unsavedQueryEditor to store all active changes - refactor each component to subscribe the related unsaved editor state only * revert ISaveableDatasource type cast * missing trigger prop * a default of an empty object and optional operator
This commit is contained in:
JUST.in DO IT
@@ -0,0 +1,220 @@
|
||||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import configureStore from 'redux-mock-store';
|
||||
import thunk from 'redux-thunk';
|
||||
import {
|
||||
fireEvent,
|
||||
screen,
|
||||
render,
|
||||
waitFor,
|
||||
} from 'spec/helpers/testing-library';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { QueryEditor } from 'src/SqlLab/types';
|
||||
import {
|
||||
initialState,
|
||||
defaultQueryEditor,
|
||||
extraQueryEditor1,
|
||||
extraQueryEditor2,
|
||||
} from 'src/SqlLab/fixtures';
|
||||
import { Store } from 'redux';
|
||||
import {
|
||||
REMOVE_QUERY_EDITOR,
|
||||
QUERY_EDITOR_SET_TITLE,
|
||||
ADD_QUERY_EDITOR,
|
||||
QUERY_EDITOR_TOGGLE_LEFT_BAR,
|
||||
} from 'src/SqlLab/actions/sqlLab';
|
||||
import SqlEditorTabHeader from 'src/SqlLab/components/SqlEditorTabHeader';
|
||||
|
||||
jest.mock('src/components/Select', () => () => (
|
||||
<div data-test="mock-deprecated-select" />
|
||||
));
|
||||
jest.mock('src/components/Select/Select', () => () => (
|
||||
<div data-test="mock-deprecated-select-select" />
|
||||
));
|
||||
jest.mock('src/components/Select/AsyncSelect', () => () => (
|
||||
<div data-test="mock-async-select" />
|
||||
));
|
||||
|
||||
const middlewares = [thunk];
|
||||
const mockStore = configureStore(middlewares);
|
||||
const setup = (queryEditor: QueryEditor, store?: Store) =>
|
||||
render(<SqlEditorTabHeader queryEditor={queryEditor} />, {
|
||||
useRedux: true,
|
||||
...(store && { store }),
|
||||
});
|
||||
|
||||
describe('SqlEditorTabHeader', () => {
|
||||
it('renders name', () => {
|
||||
const { queryByText } = setup(defaultQueryEditor, mockStore(initialState));
|
||||
expect(queryByText(defaultQueryEditor.name)).toBeTruthy();
|
||||
expect(queryByText(extraQueryEditor1.name)).toBeFalsy();
|
||||
expect(queryByText(extraQueryEditor2.name)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('renders name from unsaved changes', () => {
|
||||
const expectedTitle = 'updated title';
|
||||
const { queryByText } = setup(
|
||||
defaultQueryEditor,
|
||||
mockStore({
|
||||
...initialState,
|
||||
sqlLab: {
|
||||
...initialState.sqlLab,
|
||||
unsavedQueryEditor: {
|
||||
id: defaultQueryEditor.id,
|
||||
name: expectedTitle,
|
||||
},
|
||||
},
|
||||
}),
|
||||
);
|
||||
expect(queryByText(expectedTitle)).toBeTruthy();
|
||||
expect(queryByText(defaultQueryEditor.name)).toBeFalsy();
|
||||
expect(queryByText(extraQueryEditor1.name)).toBeFalsy();
|
||||
expect(queryByText(extraQueryEditor2.name)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('renders current name for unrelated unsaved changes', () => {
|
||||
const unrelatedTitle = 'updated title';
|
||||
const { queryByText } = setup(
|
||||
defaultQueryEditor,
|
||||
mockStore({
|
||||
...initialState,
|
||||
sqlLab: {
|
||||
...initialState.sqlLab,
|
||||
unsavedQueryEditor: {
|
||||
id: `${defaultQueryEditor.id}-other`,
|
||||
name: unrelatedTitle,
|
||||
},
|
||||
},
|
||||
}),
|
||||
);
|
||||
expect(queryByText(defaultQueryEditor.name)).toBeTruthy();
|
||||
expect(queryByText(unrelatedTitle)).toBeFalsy();
|
||||
expect(queryByText(extraQueryEditor1.name)).toBeFalsy();
|
||||
expect(queryByText(extraQueryEditor2.name)).toBeFalsy();
|
||||
});
|
||||
|
||||
describe('with dropdown menus', () => {
|
||||
let store = mockStore();
|
||||
beforeEach(async () => {
|
||||
store = mockStore(initialState);
|
||||
const { getByTestId } = setup(defaultQueryEditor, store);
|
||||
const dropdown = getByTestId('dropdown-trigger');
|
||||
|
||||
userEvent.click(dropdown);
|
||||
});
|
||||
|
||||
it('should dispatch removeQueryEditor action', async () => {
|
||||
await waitFor(() =>
|
||||
expect(screen.getByTestId('close-tab-menu-option')).toBeInTheDocument(),
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByTestId('close-tab-menu-option'));
|
||||
|
||||
const actions = store.getActions();
|
||||
await waitFor(() =>
|
||||
expect(actions[0]).toEqual({
|
||||
type: REMOVE_QUERY_EDITOR,
|
||||
queryEditor: defaultQueryEditor,
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
it('should dispatch queryEditorSetTitle action', async () => {
|
||||
await waitFor(() =>
|
||||
expect(screen.getByTestId('close-tab-menu-option')).toBeInTheDocument(),
|
||||
);
|
||||
const expectedTitle = 'typed text';
|
||||
const mockPrompt = jest
|
||||
.spyOn(window, 'prompt')
|
||||
.mockImplementation(() => expectedTitle);
|
||||
fireEvent.click(screen.getByTestId('rename-tab-menu-option'));
|
||||
|
||||
const actions = store.getActions();
|
||||
await waitFor(() =>
|
||||
expect(actions[0]).toEqual({
|
||||
type: QUERY_EDITOR_SET_TITLE,
|
||||
name: expectedTitle,
|
||||
queryEditor: expect.objectContaining({
|
||||
id: defaultQueryEditor.id,
|
||||
}),
|
||||
}),
|
||||
);
|
||||
mockPrompt.mockClear();
|
||||
});
|
||||
|
||||
it('should dispatch toggleLeftBar action', async () => {
|
||||
await waitFor(() =>
|
||||
expect(screen.getByTestId('close-tab-menu-option')).toBeInTheDocument(),
|
||||
);
|
||||
fireEvent.click(screen.getByTestId('toggle-menu-option'));
|
||||
|
||||
const actions = store.getActions();
|
||||
await waitFor(() =>
|
||||
expect(actions[0]).toEqual({
|
||||
type: QUERY_EDITOR_TOGGLE_LEFT_BAR,
|
||||
hideLeftBar: !defaultQueryEditor.hideLeftBar,
|
||||
queryEditor: expect.objectContaining({
|
||||
id: defaultQueryEditor.id,
|
||||
}),
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
it('should dispatch removeAllOtherQueryEditors action', async () => {
|
||||
await waitFor(() =>
|
||||
expect(screen.getByTestId('close-tab-menu-option')).toBeInTheDocument(),
|
||||
);
|
||||
fireEvent.click(screen.getByTestId('close-all-other-menu-option'));
|
||||
|
||||
const actions = store.getActions();
|
||||
await waitFor(() =>
|
||||
expect(actions).toEqual([
|
||||
{
|
||||
type: REMOVE_QUERY_EDITOR,
|
||||
queryEditor: initialState.sqlLab.queryEditors[1],
|
||||
},
|
||||
{
|
||||
type: REMOVE_QUERY_EDITOR,
|
||||
queryEditor: initialState.sqlLab.queryEditors[2],
|
||||
},
|
||||
]),
|
||||
);
|
||||
});
|
||||
|
||||
it('should dispatch cloneQueryToNewTab action', async () => {
|
||||
await waitFor(() =>
|
||||
expect(screen.getByTestId('close-tab-menu-option')).toBeInTheDocument(),
|
||||
);
|
||||
fireEvent.click(screen.getByTestId('clone-tab-menu-option'));
|
||||
|
||||
const actions = store.getActions();
|
||||
await waitFor(() =>
|
||||
expect(actions[0]).toEqual({
|
||||
type: ADD_QUERY_EDITOR,
|
||||
queryEditor: expect.objectContaining({
|
||||
name: `Copy of ${defaultQueryEditor.name}`,
|
||||
sql: defaultQueryEditor.sql,
|
||||
autorun: false,
|
||||
}),
|
||||
}),
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,147 @@
|
||||
/**
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React, { useMemo } from 'react';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { useSelector, useDispatch, shallowEqual } from 'react-redux';
|
||||
import { Dropdown } from 'src/components/Dropdown';
|
||||
import { Menu } from 'src/components/Menu';
|
||||
import { styled, t, QueryState } from '@superset-ui/core';
|
||||
import {
|
||||
removeQueryEditor,
|
||||
removeAllOtherQueryEditors,
|
||||
queryEditorSetTitle,
|
||||
cloneQueryToNewTab,
|
||||
toggleLeftBar,
|
||||
} from 'src/SqlLab/actions/sqlLab';
|
||||
import { QueryEditor, SqlLabRootState } from 'src/SqlLab/types';
|
||||
import TabStatusIcon from '../TabStatusIcon';
|
||||
|
||||
const TabTitleWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
const TabTitle = styled.span`
|
||||
margin-right: ${({ theme }) => theme.gridUnit * 2}px;
|
||||
text-transform: none;
|
||||
`;
|
||||
|
||||
interface Props {
|
||||
queryEditor: QueryEditor;
|
||||
}
|
||||
|
||||
const SqlEditorTabHeader: React.FC<Props> = ({ queryEditor }) => {
|
||||
const qe = useSelector<SqlLabRootState, QueryEditor>(
|
||||
({ sqlLab: { unsavedQueryEditor } }) => ({
|
||||
...queryEditor,
|
||||
...(queryEditor.id === unsavedQueryEditor.id && unsavedQueryEditor),
|
||||
}),
|
||||
shallowEqual,
|
||||
);
|
||||
const queryStatus = useSelector<SqlLabRootState, QueryState>(
|
||||
({ sqlLab }) => sqlLab.queries[qe.latestQueryId || '']?.state || '',
|
||||
);
|
||||
const dispatch = useDispatch();
|
||||
const actions = useMemo(
|
||||
() =>
|
||||
bindActionCreators(
|
||||
{
|
||||
removeQueryEditor,
|
||||
removeAllOtherQueryEditors,
|
||||
queryEditorSetTitle,
|
||||
cloneQueryToNewTab,
|
||||
toggleLeftBar,
|
||||
},
|
||||
dispatch,
|
||||
),
|
||||
[dispatch],
|
||||
);
|
||||
|
||||
function renameTab() {
|
||||
const newTitle = prompt(t('Enter a new title for the tab'));
|
||||
if (newTitle) {
|
||||
actions.queryEditorSetTitle(qe, newTitle);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<TabTitleWrapper>
|
||||
<Dropdown
|
||||
trigger={['click']}
|
||||
overlay={
|
||||
<Menu style={{ width: 176 }}>
|
||||
<Menu.Item
|
||||
className="close-btn"
|
||||
key="1"
|
||||
onClick={() => actions.removeQueryEditor(qe)}
|
||||
data-test="close-tab-menu-option"
|
||||
>
|
||||
<div className="icon-container">
|
||||
<i className="fa fa-close" />
|
||||
</div>
|
||||
{t('Close tab')}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
key="2"
|
||||
onClick={renameTab}
|
||||
data-test="rename-tab-menu-option"
|
||||
>
|
||||
<div className="icon-container">
|
||||
<i className="fa fa-i-cursor" />
|
||||
</div>
|
||||
{t('Rename tab')}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
key="3"
|
||||
onClick={() => actions.toggleLeftBar(qe)}
|
||||
data-test="toggle-menu-option"
|
||||
>
|
||||
<div className="icon-container">
|
||||
<i className="fa fa-cogs" />
|
||||
</div>
|
||||
{qe.hideLeftBar ? t('Expand tool bar') : t('Hide tool bar')}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
key="4"
|
||||
onClick={() => actions.removeAllOtherQueryEditors(qe)}
|
||||
data-test="close-all-other-menu-option"
|
||||
>
|
||||
<div className="icon-container">
|
||||
<i className="fa fa-times-circle-o" />
|
||||
</div>
|
||||
{t('Close all other tabs')}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
key="5"
|
||||
onClick={() => actions.cloneQueryToNewTab(qe, false)}
|
||||
data-test="clone-tab-menu-option"
|
||||
>
|
||||
<div className="icon-container">
|
||||
<i className="fa fa-files-o" />
|
||||
</div>
|
||||
{t('Duplicate tab')}
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
}
|
||||
/>
|
||||
<TabTitle>{qe.name}</TabTitle> <TabStatusIcon tabState={queryStatus} />{' '}
|
||||
</TabTitleWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default SqlEditorTabHeader;
|
||||
Reference in New Issue
Block a user