This is an automated email from the ASF dual-hosted git repository.
hugh pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 71bf267307 fix(sqllab): SqlEditorLeftBar listening to database changes
(#21628)
71bf267307 is described below
commit 71bf2673071d5db6688fbaefd4457aeeae3464bb
Author: Antonio Rivero Martinez
<[email protected]>
AuthorDate: Wed Sep 28 20:22:09 2022 -0300
fix(sqllab): SqlEditorLeftBar listening to database changes (#21628)
---
.../SqlEditorLeftBar/SqlEditorLeftBar.test.jsx | 89 ++++++++++++++--------
.../SqlLab/components/SqlEditorLeftBar/index.tsx | 2 +-
2 files changed, 59 insertions(+), 32 deletions(-)
diff --git
a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/SqlEditorLeftBar.test.jsx
b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/SqlEditorLeftBar.test.jsx
index 9d32454899..5f9b140c12 100644
---
a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/SqlEditorLeftBar.test.jsx
+++
b/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();
+ });
});
diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
index b3c1bc9f63..1a24edc657 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
+++ b/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;
