Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Use queryEditorId in SqlEditor child components #21650

Merged
merged 11 commits into from
Nov 16, 2022
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,11 @@ import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { render } from 'spec/helpers/testing-library';
import { Store } from 'redux';
import { initialState, defaultQueryEditor } from 'src/SqlLab/fixtures';
import {
initialState,
defaultQueryEditor,
extraQueryEditor1,
} from 'src/SqlLab/fixtures';

import EstimateQueryCostButton, {
EstimateQueryCostButtonProps,
Expand All @@ -43,7 +47,7 @@ jest.mock('src/components/Select/AsyncSelect', () => () => (
const setup = (props: Partial<EstimateQueryCostButtonProps>, store?: Store) =>
render(
<EstimateQueryCostButton
queryEditor={defaultQueryEditor}
queryEditorId={defaultQueryEditor.id}
getEstimate={jest.fn()}
{...props}
/>,
Expand All @@ -61,12 +65,8 @@ describe('EstimateQueryCostButton', () => {
});

it('renders label for selected query', async () => {
const queryEditorWithSelectedText = {
...defaultQueryEditor,
selectedText: 'SELECT',
};
const { queryByText } = setup(
{ queryEditor: queryEditorWithSelectedText },
{ queryEditorId: extraQueryEditor1.id },
mockStore(initialState),
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,43 +17,37 @@
* under the License.
*/
import React, { useMemo } from 'react';
import Alert from 'src/components/Alert';
import { useSelector } from 'react-redux';
import { t } from '@superset-ui/core';

import Alert from 'src/components/Alert';
import TableView from 'src/components/TableView';
import Button from 'src/components/Button';
import Loading from 'src/components/Loading';
import ModalTrigger from 'src/components/ModalTrigger';
import { EmptyWrapperType } from 'src/components/TableView/TableView';
import {
SqlLabRootState,
QueryCostEstimate,
QueryEditor,
} from 'src/SqlLab/types';
import { getUpToDateQuery } from 'src/SqlLab/actions/sqlLab';
import { useSelector } from 'react-redux';
import useQueryEditor from 'src/SqlLab/hooks/useQueryEditor';
import { SqlLabRootState, QueryCostEstimate } from 'src/SqlLab/types';

export interface EstimateQueryCostButtonProps {
getEstimate: Function;
queryEditor: QueryEditor;
queryEditorId: string;
tooltip?: string;
disabled?: boolean;
}

const EstimateQueryCostButton = ({
getEstimate,
queryEditor,
queryEditorId,
tooltip = '',
disabled = false,
}: EstimateQueryCostButtonProps) => {
const queryCostEstimate = useSelector<
SqlLabRootState,
QueryCostEstimate | undefined
>(state => state.sqlLab.queryCostEstimates?.[queryEditor.id]);
const selectedText = useSelector<SqlLabRootState, string | undefined>(
rootState =>
(getUpToDateQuery(rootState, queryEditor) as unknown as QueryEditor)
.selectedText,
);
>(state => state.sqlLab.queryCostEstimates?.[queryEditorId]);

const { selectedText } = useQueryEditor(queryEditorId, ['selectedText']);
const { cost } = queryCostEstimate || {};
const tableData = useMemo(() => (Array.isArray(cost) ? cost : []), [cost]);
const columns = useMemo(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
import React from 'react';
import { useDispatch } from 'react-redux';
import { styled, useTheme } from '@superset-ui/core';

import { AntdDropdown } from 'src/components';
import { Menu } from 'src/components/Menu';
import Icons from 'src/components/Icons';
Expand Down Expand Up @@ -83,12 +84,13 @@ const QueryLimitSelect = ({
maxRow,
defaultQueryLimit,
}: QueryLimitSelectProps) => {
const theme = useTheme();
const dispatch = useDispatch();

const queryEditor = useQueryEditor(queryEditorId, ['id', 'queryLimit']);
const queryLimit = queryEditor.queryLimit || defaultQueryLimit;
const dispatch = useDispatch();
const setQueryLimit = (updatedQueryLimit: number) =>
dispatch(queryEditorSetQueryLimit(queryEditor, updatedQueryLimit));
const theme = useTheme();

return (
<LimitSelectStyled>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import { Store } from 'redux';
import { render, fireEvent, waitFor } from 'spec/helpers/testing-library';
import { initialState, defaultQueryEditor } from 'src/SqlLab/fixtures';
import RunQueryActionButton, {
Props,
RunQueryActionButtonProps,
} from 'src/SqlLab/components/RunQueryActionButton';

const middlewares = [thunk];
Expand All @@ -51,7 +51,7 @@ const defaultProps = {
overlayCreateAsMenu: null,
};

const setup = (props?: Partial<Props>, store?: Store) =>
const setup = (props?: Partial<RunQueryActionButtonProps>, store?: Store) =>
render(<RunQueryActionButton {...defaultProps} {...props} />, {
useRedux: true,
...(store && { store }),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import { detectOS } from 'src/utils/common';
import { QueryButtonProps } from 'src/SqlLab/types';
import useQueryEditor from 'src/SqlLab/hooks/useQueryEditor';

export interface Props {
export interface RunQueryActionButtonProps {
queryEditorId: string;
allowAsync: boolean;
queryState?: string;
Expand Down Expand Up @@ -81,14 +81,14 @@ const StyledButton = styled.span`
}
`;

const RunQueryActionButton: React.FC<Props> = ({
const RunQueryActionButton = ({
allowAsync = false,
queryEditorId,
queryState,
overlayCreateAsMenu,
runQuery,
stopQuery,
}) => {
}: RunQueryActionButtonProps) => {
const theme = useTheme();
const userOS = detectOS();

Expand Down
8 changes: 5 additions & 3 deletions superset-frontend/src/SqlLab/components/SaveQuery/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -72,14 +72,14 @@ const Styles = styled.span`
}
`;

export default function SaveQuery({
const SaveQuery = ({
queryEditorId,
onSave = () => {},
onUpdate,
saveQueryWarning = null,
database,
columns,
}: SaveQueryProps) {
}: SaveQueryProps) => {
EugeneTorap marked this conversation as resolved.
Show resolved Hide resolved
const queryEditor = useQueryEditor(queryEditorId, [
'autorun',
'name',
Expand Down Expand Up @@ -238,4 +238,6 @@ export default function SaveQuery({
</Modal>
</Styles>
);
}
};

export default SaveQuery;
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import { getClientErrorObject } from 'src/utils/getClientErrorObject';
import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
import useQueryEditor from 'src/SqlLab/hooks/useQueryEditor';

interface ShareSqlLabQueryPropTypes {
interface ShareSqlLabQueryProps {
queryEditorId: string;
addDangerToast: (msg: string) => void;
}
Expand All @@ -42,10 +42,10 @@ const StyledIcon = styled(Icons.Link)`
}
`;

function ShareSqlLabQuery({
const ShareSqlLabQuery = ({
queryEditorId,
addDangerToast,
}: ShareSqlLabQueryPropTypes) {
}: ShareSqlLabQueryProps) => {
const theme = useTheme();

const { dbId, name, schema, autorun, sql, remoteId } = useQueryEditor(
Expand Down Expand Up @@ -120,6 +120,6 @@ function ShareSqlLabQuery({
)}
</>
);
}
};

export default withToasts(ShareSqlLabQuery);
7 changes: 3 additions & 4 deletions superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -477,7 +477,7 @@ const SqlEditor = ({
onChange={params => {
dispatch(queryEditorSetTemplateParams(qe, params));
}}
queryEditor={qe}
queryEditorId={qe.id}
/>
</Menu.Item>
)}
Expand Down Expand Up @@ -553,7 +553,7 @@ const SqlEditor = ({
<span>
<EstimateQueryCostButton
getEstimate={getQueryCostEstimate}
queryEditor={queryEditor}
queryEditorId={queryEditor.id}
tooltip={t('Estimate the cost before running a query')}
/>
</span>
Expand Down Expand Up @@ -666,9 +666,8 @@ const SqlEditor = ({
>
<SqlEditorLeftBar
database={database}
queryEditor={queryEditor}
queryEditorId={queryEditor.id}
tables={tables}
actions={actions}
setEmptyState={bool => setShowEmptyState(bool)}
/>
</StyledSidebar>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,23 +19,17 @@
import React from 'react';
import configureStore from 'redux-mock-store';
import fetchMock from 'fetch-mock';
import { render, screen, act } from 'spec/helpers/testing-library';
import { render, screen, waitFor } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import { Provider } from 'react-redux';
import '@testing-library/jest-dom/extend-expect';
import thunk from 'redux-thunk';
import SqlEditorLeftBar from 'src/SqlLab/components/SqlEditorLeftBar';
import {
table,
initialState,
defaultQueryEditor,
mockedActions,
} from 'src/SqlLab/fixtures';
import { table, initialState, defaultQueryEditor } from 'src/SqlLab/fixtures';

const mockedProps = {
actions: mockedActions,
tables: [table],
queryEditor: defaultQueryEditor,
queryEditorId: defaultQueryEditor.id,
database: {
id: 1,
database_name: 'main',
Expand All @@ -58,7 +52,16 @@ fetchMock.get('glob:*/superset/tables/**', {
tableLength: 1,
});

const setup = (props, store) =>
render(<SqlEditorLeftBar {...props} />, {
useRedux: true,
...(store && { store }),
});

describe('Left Panel Expansion', () => {
const renderAndWait = (props, store) =>
EugeneTorap marked this conversation as resolved.
Show resolved Hide resolved
waitFor(async () => setup(props, store));

test('is valid', () => {
expect(
React.isValidElement(
Expand All @@ -70,10 +73,7 @@ describe('Left Panel Expansion', () => {
});

test('renders a TableElement', async () => {
render(<SqlEditorLeftBar {...mockedProps} />, {
useRedux: true,
initialState,
});
await renderAndWait(mockedProps, store);

expect(await screen.findByText(/Database/i)).toBeInTheDocument();
expect(
Expand All @@ -82,10 +82,7 @@ describe('Left Panel Expansion', () => {
});

test('table should be visible when expanded is true', async () => {
const { container } = render(<SqlEditorLeftBar {...mockedProps} />, {
useRedux: true,
initialState,
});
const { container } = await renderAndWait(mockedProps, store);

const dbSelect = screen.getByRole('combobox', {
name: 'Select database or type database name',
Expand All @@ -96,7 +93,7 @@ describe('Left Panel Expansion', () => {
const dropdown = screen.getByText(/Table/i);
const abUser = screen.queryAllByText(/ab_user/i);

act(async () => {
waitFor(async () => {
expect(await screen.findByText(/Database/i)).toBeInTheDocument();
expect(dbSelect).toBeInTheDocument();
expect(schemaSelect).toBeInTheDocument();
Expand All @@ -109,38 +106,29 @@ describe('Left Panel Expansion', () => {
});

test('should toggle the table when the header is clicked', async () => {
const collapseMock = jest.fn();
render(
<SqlEditorLeftBar
{...mockedProps}
actions={{ ...mockedActions, collapseTable: collapseMock }}
/>,
{
useRedux: true,
initialState,
},
);
const store = mockStore(initialState);
await renderAndWait(mockedProps, store);

expect(await screen.findByText(/ab_user/)).toBeInTheDocument();
const header = screen.getByText(/ab_user/);
userEvent.click(header);
expect(collapseMock).toHaveBeenCalled();

await waitFor(() => {
expect(store.getActions()).toHaveLength(1);
expect(store.getActions()[0].type).toEqual('COLLAPSE_TABLE');
});
});

test('When changing database the table list must be updated', async () => {
const { rerender } = render(<SqlEditorLeftBar {...mockedProps} />, {
useRedux: true,
initialState,
});
const { rerender } = await renderAndWait(mockedProps, store);

await act(async () => {
await waitFor(async () => {
expect(await screen.findByText(/main/i)).toBeInTheDocument();
expect(await screen.findByText(/ab_user/i)).toBeInTheDocument();
});
rerender(
<SqlEditorLeftBar
{...mockedProps}
actions={{ ...mockedActions }}
database={{
id: 2,
database_name: 'new_db',
Expand Down
Loading