fix(sqllab): SqlEditorLeftBar listening to database changes (#21628)

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

@@ -19,7 +19,7 @@
 import React from 'react';
 import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, screen, act } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
 import { Provider } from 'react-redux';
 import '@testing-library/jest-dom/extend-expect';
@@ -28,7 +28,6 @@ import SqlEditorLeftBar from 'src/SqlLab/components/SqlEditorLeftBar';
 import {
   table,
   initialState,
-  databases,
   defaultQueryEditor,
   mockedActions,
 } from 'src/SqlLab/fixtures';
@@ -37,7 +36,11 @@ const mockedProps = {
   actions: mockedActions,
   tables: [table],
   queryEditor: defaultQueryEditor,
-  database: databases,
+  database: {
+    id: 1,
+    database_name: 'main',
+    backend: 'mysql',
+  },
   height: 0,
 };
 const middlewares = [thunk];
@@ -46,15 +49,13 @@ const store = mockStore(initialState);
 
 fetchMock.get('glob:*/api/v1/database/*/schemas/?*', { result: [] });
 fetchMock.get('glob:*/superset/tables/**', {
-  json: {
-    options: [
-      {
-        label: 'ab_user',
-        value: 'ab_user',
-      },
-    ],
-    tableLength: 1,
-  },
+  options: [
+    {
+      label: 'ab_user',
+      value: 'ab_user',
+    },
+  ],
+  tableLength: 1,
 });
 
 describe('Left Panel Expansion', () => {
@@ -74,9 +75,7 @@ describe('Left Panel Expansion', () => {
       initialState,
     });
 
-    expect(
-      await screen.findByText(/select database or type database name/i),
-    ).toBeInTheDocument();
+    expect(await screen.findByText(/Database/i)).toBeInTheDocument();
     expect(
       screen.queryAllByTestId('table-element').length,
     ).toBeGreaterThanOrEqual(1);
@@ -94,30 +93,27 @@ describe('Left Panel Expansion', () => {
     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);
+    const dropdown = screen.getByText(/Table/i);
+    const abUser = screen.queryAllByText(/ab_user/i);
 
-    expect(
-      await screen.findByText(/select database or type database name/i),
-    ).toBeInTheDocument();
-    expect(dbSelect).toBeInTheDocument();
-    expect(schemaSelect).toBeInTheDocument();
-    expect(dropdown).toBeInTheDocument();
-    expect(abUser).toBeInTheDocument();
-    expect(
-      container.querySelector('.ant-collapse-content-active'),
-    ).toBeInTheDocument();
+    act(async () => {
+      expect(await screen.findByText(/Database/i)).toBeInTheDocument();
+      expect(dbSelect).toBeInTheDocument();
+      expect(schemaSelect).toBeInTheDocument();
+      expect(dropdown).toBeInTheDocument();
+      expect(abUser).toHaveLength(2);
+      expect(
+        container.querySelector('.ant-collapse-content-active'),
+      ).toBeInTheDocument();
+    });
   });
 
   test('should toggle the table when the header is clicked', async () => {
     const collapseMock = jest.fn();
     render(
       <SqlEditorLeftBar
+        {...mockedProps}
         actions={{ ...mockedActions, collapseTable: collapseMock }}
-        tables={[table]}
-        queryEditor={defaultQueryEditor}
-        database={databases}
-        height={0}
       />,
       {
         useRedux: true,
@@ -130,4 +126,35 @@ describe('Left Panel Expansion', () => {
     userEvent.click(header);
     expect(collapseMock).toHaveBeenCalled();
   });
+
+  test('When changing database the table list must be updated', async () => {
+    const { rerender } = render(<SqlEditorLeftBar {...mockedProps} />, {
+      useRedux: true,
+      initialState,
+    });
+
+    await act(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',
+          backend: 'postgresql',
+        }}
+        queryEditor={{ ...mockedProps.queryEditor, schema: 'new_schema' }}
+        tables={[{ ...mockedProps.tables[0], dbId: 2, name: 'new_table' }]}
+      />,
+      {
+        useRedux: true,
+        initialState,
+      },
+    );
+    expect(await screen.findByText(/new_db/i)).toBeInTheDocument();
+    expect(await screen.findByText(/new_table/i)).toBeInTheDocument();
+  });
 });

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

@@ -138,7 +138,7 @@ export default function SqlEditorLeftBar({
       setUserSelected(userSelected);
       setItem(LocalStorageKeys.db, null);
     } else setUserSelected(database);
-  }, []);
+  }, [database]);
 
   useEffect(() => {
     queryEditorRef.current = queryEditor;