chore: Use queryEditorId in SqlEditor child components

superset-frontend/src/SqlLab/components/EstimateQueryCostButton/EstimateQueryCostButton.test.tsx

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

superset-frontend/src/SqlLab/components/EstimateQueryCostButton/index.tsx

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

superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx

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

superset-frontend/src/SqlLab/components/RunQueryActionButton/RunQueryActionButton.test.tsx

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

superset-frontend/src/SqlLab/components/RunQueryActionButton/index.tsx

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

superset-frontend/src/SqlLab/components/SaveQuery/index.tsx

@@ -72,14 +72,14 @@ const Styles = styled.span`
   }
 `;
 
-export default function SaveQuery({
+const SaveQuery = ({
   queryEditorId,
   onSave = () => {},
   onUpdate,
   saveQueryWarning = null,
   database,
   columns,
-}: SaveQueryProps) {
+}: SaveQueryProps) => {
   const queryEditor = useQueryEditor(queryEditorId, [
     'autorun',
     'name',
@@ -238,4 +238,6 @@ export default function SaveQuery({
       </Modal>
     </Styles>
   );
-}
+};
+
+export default SaveQuery;

superset-frontend/src/SqlLab/components/ShareSqlLabQuery/index.tsx

@@ -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;
 }
@@ -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(
@@ -120,6 +120,6 @@ function ShareSqlLabQuery({
       )}
     </>
   );
-}
+};
 
 export default withToasts(ShareSqlLabQuery);

superset-frontend/src/SqlLab/components/SqlEditor/index.jsx

@@ -477,7 +477,7 @@ const SqlEditor = ({
               onChange={params => {
                 dispatch(queryEditorSetTemplateParams(qe, params));
               }}
-              queryEditor={qe}
+              queryEditorId={qe.id}
             />
           </Menu.Item>
         )}
@@ -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>
@@ -666,9 +666,8 @@ const SqlEditor = ({
             >
               <SqlEditorLeftBar
                 database={database}
-                queryEditor={queryEditor}
+                queryEditorId={queryEditor.id}
                 tables={tables}
-                actions={actions}
                 setEmptyState={bool => setShowEmptyState(bool)}
               />
             </StyledSidebar>

superset-frontend/src/SqlLab/components/SqlEditorLeftBar/SqlEditorLeftBar.test.jsx

@@ -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',
@@ -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) =>
+    waitFor(async () => setup(props, store));
+
   test('is valid', () => {
     expect(
       React.isValidElement(
@@ -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(
@@ -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',
@@ -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();
@@ -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',