chore: Use queryEditorId in SqlEditor child components (#21650)

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

@@ -17,22 +17,24 @@
  * under the License.
  */
 import React from 'react';
-import { mount, shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 import Collapse from 'src/components/Collapse';
 import { IconTooltip } from 'src/components/IconTooltip';
 import TableElement from 'src/SqlLab/components/TableElement';
 import ColumnElement from 'src/SqlLab/components/ColumnElement';
 import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
-import { mockedActions, table } from 'src/SqlLab/fixtures';
+import { initialState, table } from 'src/SqlLab/fixtures';
+
+const middlewares = [thunk];
+const mockStore = configureStore(middlewares);
 
 describe('TableElement', () => {
-  const mockStore = configureStore([]);
-  const store = mockStore({});
+  const store = mockStore(initialState);
   const mockedProps = {
-    actions: mockedActions,
     table,
     timeout: 0,
   };
@@ -57,7 +59,17 @@ describe('TableElement', () => {
     expect(wrapper.find(IconTooltip)).toHaveLength(4);
   });
   it('has 14 columns', () => {
-    const wrapper = shallow(<TableElement {...mockedProps} />);
+    const wrapper = mount(
+      <Provider store={store}>
+        <TableElement {...mockedProps} />
+      </Provider>,
+      {
+        wrappingComponent: ThemeProvider,
+        wrappingComponentProps: {
+          theme: supersetTheme,
+        },
+      },
+    );
     expect(wrapper.find(ColumnElement)).toHaveLength(14);
   });
   it('mounts', () => {
@@ -143,6 +155,7 @@ describe('TableElement', () => {
       },
     );
     wrapper.find('.table-remove').hostNodes().simulate('click');
-    expect(mockedActions.removeDataPreview.called).toBe(true);
+    expect(store.getActions()).toHaveLength(1);
+    expect(store.getActions()[0].type).toEqual('REMOVE_DATA_PREVIEW');
   });
 });

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

@@ -17,12 +17,14 @@
  * under the License.
  */
 import React, { useState, useRef } from 'react';
+import { useDispatch } from 'react-redux';
 import Collapse from 'src/components/Collapse';
 import Card from 'src/components/Card';
 import ButtonGroup from 'src/components/ButtonGroup';
 import { t, styled } from '@superset-ui/core';
 import { debounce } from 'lodash';
 
+import { removeDataPreview, removeTables } from 'src/SqlLab/actions/sqlLab';
 import { Tooltip } from 'src/components/Tooltip';
 import CopyToClipboard from 'src/components/CopyToClipboard';
 import { IconTooltip } from 'src/components/IconTooltip';
@@ -55,10 +57,6 @@ export interface Table {
 
 export interface TableElementProps {
   table: Table;
-  actions: {
-    removeDataPreview: (table: Table) => void;
-    removeTables: (tables: Table[]) => void;
-  };
 }
 
 const StyledSpan = styled.span`
@@ -74,7 +72,9 @@ const Fade = styled.div`
   opacity: ${(props: { hovered: boolean }) => (props.hovered ? 1 : 0)};
 `;
 
-const TableElement = ({ table, actions, ...props }: TableElementProps) => {
+const TableElement = ({ table, ...props }: TableElementProps) => {
+  const dispatch = useDispatch();
+
   const [sortColumns, setSortColumns] = useState(false);
   const [hovered, setHovered] = useState(false);
   const tableNameRef = useRef<HTMLInputElement>(null);
@@ -84,8 +84,8 @@ const TableElement = ({ table, actions, ...props }: TableElementProps) => {
   };
 
   const removeTable = () => {
-    actions.removeDataPreview(table);
-    actions.removeTables([table]);
+    dispatch(removeDataPreview(table));
+    dispatch(removeTables([table]));
   };
 
   const toggleSortColumns = () => {