fix(sqllab): invalid table metadata request (#21304)

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

@@ -19,14 +19,12 @@
 import React from 'react';
 import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
-import { shallow } from 'enzyme';
 import { render, screen } 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 TableElement from 'src/SqlLab/components/TableElement';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 import {
   table,
@@ -46,74 +44,86 @@ const mockedProps = {
 const middlewares = [thunk];
 const mockStore = configureStore(middlewares);
 const store = mockStore(initialState);
+
 fetchMock.get('glob:*/api/v1/database/*/schemas/?*', { result: [] });
-describe('SqlEditorLeftBar', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = shallow(<SqlEditorLeftBar {...mockedProps} />, {
-      context: { store },
-    });
-  });
-
-  afterEach(() => {
-    wrapper.unmount();
-  });
-
-  it('is valid', () => {
-    expect(React.isValidElement(<SqlEditorLeftBar {...mockedProps} />)).toBe(
-      true,
-    );
-  });
-
-  it('renders a TableElement', () => {
-    expect(wrapper.find(TableElement)).toExist();
-  });
+fetchMock.get('glob:*/superset/tables/**', {
+  json: {
+    options: [
+      {
+        label: 'ab_user',
+        value: 'ab_user',
+      },
+    ],
+    tableLength: 1,
+  },
 });
 
 describe('Left Panel Expansion', () => {
-  it('table should be visible when expanded is true', () => {
-    const { container } = render(
+  it('is valid', () => {
+    expect(
+      React.isValidElement(
+        <Provider store={store}>
+          <SqlEditorLeftBar {...mockedProps} />
+        </Provider>,
+      ),
+    ).toBe(true);
+  });
+
+  it('renders a TableElement', () => {
+    const { queryAllByTestId } = render(
       <ThemeProvider theme={supersetTheme}>
         <Provider store={store}>
           <SqlEditorLeftBar {...mockedProps} />
         </Provider>
       </ThemeProvider>,
     );
-    const dbSelect = screen.getByRole('combobox', {
-      name: 'Select database or type database name',
-    });
-    const schemaSelect = screen.getByRole('combobox', {
-      name: 'Select schema or type schema name',
-    });
-    const dropdown = screen.getByText(/Select table or type table name/i);
-    const abUser = screen.getByText(/ab_user/i);
-    expect(dbSelect).toBeInTheDocument();
-    expect(schemaSelect).toBeInTheDocument();
-    expect(dropdown).toBeInTheDocument();
-    expect(abUser).toBeInTheDocument();
-    expect(
-      container.querySelector('.ant-collapse-content-active'),
-    ).toBeInTheDocument();
+    expect(queryAllByTestId('table-element').length).toBeGreaterThanOrEqual(1);
   });
 
-  it('should toggle the table when the header is clicked', async () => {
-    const collapseMock = jest.fn();
-    render(
-      <ThemeProvider theme={supersetTheme}>
-        <Provider store={store}>
-          <SqlEditorLeftBar
-            actions={{ ...mockedActions, collapseTable: collapseMock }}
-            tables={[table]}
-            queryEditor={defaultQueryEditor}
-            database={databases}
-            height={0}
-          />
-        </Provider>
-      </ThemeProvider>,
-    );
-    const header = screen.getByText(/ab_user/);
-    userEvent.click(header);
-    expect(collapseMock).toHaveBeenCalled();
+  describe('Left Panel Expansion', () => {
+    it('table should be visible when expanded is true', () => {
+      const { container } = render(
+        <ThemeProvider theme={supersetTheme}>
+          <Provider store={store}>
+            <SqlEditorLeftBar {...mockedProps} />
+          </Provider>
+        </ThemeProvider>,
+      );
+      const dbSelect = screen.getByRole('combobox', {
+        name: 'Select database or type database name',
+      });
+      const schemaSelect = screen.getByRole('combobox', {
+        name: 'Select schema or type schema name',
+      });
+      const dropdown = screen.getByText(/Select table or type table name/i);
+      const abUser = screen.getByText(/ab_user/i);
+      expect(dbSelect).toBeInTheDocument();
+      expect(schemaSelect).toBeInTheDocument();
+      expect(dropdown).toBeInTheDocument();
+      expect(abUser).toBeInTheDocument();
+      expect(
+        container.querySelector('.ant-collapse-content-active'),
+      ).toBeInTheDocument();
+    });
+
+    it('should toggle the table when the header is clicked', async () => {
+      const collapseMock = jest.fn();
+      render(
+        <ThemeProvider theme={supersetTheme}>
+          <Provider store={store}>
+            <SqlEditorLeftBar
+              actions={{ ...mockedActions, collapseTable: collapseMock }}
+              tables={[table]}
+              queryEditor={defaultQueryEditor}
+              database={databases}
+              height={0}
+            />
+          </Provider>
+        </ThemeProvider>,
+      );
+      const header = screen.getByText(/ab_user/);
+      userEvent.click(header);
+      expect(collapseMock).toHaveBeenCalled();
+    });
   });
 });

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

@@ -25,6 +25,7 @@ import React, {
   Dispatch,
   SetStateAction,
 } from 'react';
+import { useSelector } from 'react-redux';
 import querystring from 'query-string';
 import Button from 'src/components/Button';
 import { t, styled, css, SupersetTheme } from '@superset-ui/core';
@@ -32,7 +33,7 @@ import Collapse from 'src/components/Collapse';
 import Icons from 'src/components/Icons';
 import { TableSelectorMultiple } from 'src/components/TableSelector';
 import { IconTooltip } from 'src/components/IconTooltip';
-import { QueryEditor, SchemaOption } from 'src/SqlLab/types';
+import { QueryEditor, SchemaOption, SqlLabRootState } from 'src/SqlLab/types';
 import { DatabaseObject } from 'src/components/DatabaseSelector';
 import { EmptyStateSmall } from 'src/components/EmptyState';
 import {
@@ -116,6 +117,15 @@ export default function SqlEditorLeftBar({
   const [userSelectedDb, setUserSelected] = useState<DatabaseObject | null>(
     null,
   );
+  const schema = useSelector<SqlLabRootState, string>(
+    ({ sqlLab: { unsavedQueryEditor } }) => {
+      const updatedQueryEditor = {
+        ...queryEditor,
+        ...(unsavedQueryEditor.id === queryEditor.id && unsavedQueryEditor),
+      };
+      return updatedQueryEditor.schema;
+    },
+  );
 
   useEffect(() => {
     const bool = querystring.parse(window.location.search).db;
@@ -263,7 +273,7 @@ export default function SqlEditorLeftBar({
         onSchemasLoad={handleSchemasLoad}
         onTableSelectChange={onTablesChange}
         onTablesLoad={handleTablesLoad}
-        schema={queryEditor.schema}
+        schema={schema}
         tableValue={selectedTableNames}
         sqlLabMode
       />