This is an automated email from the ASF dual-hosted git repository.
pkdotson 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 abd4051 catch collapse onchange (#13927)
abd4051 is described below
commit abd4051f7a94b7e1a653ae6c0590645b0fe1dd33
Author: Elizabeth Thompson <[email protected]>
AuthorDate: Sat Apr 3 00:00:34 2021 -0700
catch collapse onchange (#13927)
---
.../javascripts/sqllab/SqlEditorLeftBar_spec.jsx | 51 ++++++++++++++++------
.../spec/javascripts/sqllab/TableElement_spec.jsx | 16 -------
.../src/SqlLab/components/SqlEditorLeftBar.jsx | 13 +++++-
.../src/SqlLab/components/TableElement.jsx | 17 +-------
4 files changed, 50 insertions(+), 47 deletions(-)
diff --git
a/superset-frontend/spec/javascripts/sqllab/SqlEditorLeftBar_spec.jsx
b/superset-frontend/spec/javascripts/sqllab/SqlEditorLeftBar_spec.jsx
index 8430baf..1ba1ac8 100644
--- a/superset-frontend/spec/javascripts/sqllab/SqlEditorLeftBar_spec.jsx
+++ b/superset-frontend/spec/javascripts/sqllab/SqlEditorLeftBar_spec.jsx
@@ -20,7 +20,8 @@ import React from 'react';
import configureStore from 'redux-mock-store';
import fetchMock from 'fetch-mock';
import { shallow } from 'enzyme';
-import { render, screen, act } from '@testing-library/react';
+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';
@@ -56,6 +57,10 @@ describe('SqlEditorLeftBar', () => {
});
});
+ afterEach(() => {
+ wrapper.unmount();
+ });
+
it('is valid', () => {
expect(React.isValidElement(<SqlEditorLeftBar {...mockedProps} />)).toBe(
true,
@@ -68,19 +73,14 @@ describe('SqlEditorLeftBar', () => {
});
describe('Left Panel Expansion', () => {
- beforeEach(async () => {
- await act(async () => {
- render(
- <ThemeProvider theme={supersetTheme}>
- <Provider store={store}>
- <SqlEditorLeftBar {...mockedProps} />
- </Provider>
- </ThemeProvider>,
- );
- });
- });
-
- it('table should be visible when expanded is true', async () => {
+ 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.getByText(/select a database/i);
const schemaSelect = screen.getByText(/select a schema \(0\)/i);
const dropdown = screen.getByText(/Select table/i);
@@ -89,5 +89,28 @@ describe('Left Panel Expansion', () => {
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();
});
});
diff --git a/superset-frontend/spec/javascripts/sqllab/TableElement_spec.jsx
b/superset-frontend/spec/javascripts/sqllab/TableElement_spec.jsx
index d8b5646..aef614fa 100644
--- a/superset-frontend/spec/javascripts/sqllab/TableElement_spec.jsx
+++ b/superset-frontend/spec/javascripts/sqllab/TableElement_spec.jsx
@@ -118,22 +118,6 @@ describe('TableElement', () => {
'active',
);
});
- it('calls the collapseTable action', () => {
- const wrapper = mount(
- <Provider store={store}>
- <TableElement {...mockedProps} />
- </Provider>,
- {
- wrappingComponent: ThemeProvider,
- wrappingComponentProps: {
- theme: supersetTheme,
- },
- },
- );
- expect(mockedActions.collapseTable.called).toBe(false);
- wrapper.find('[data-test="collapse"]').hostNodes().simulate('click');
- expect(mockedActions.collapseTable.called).toBe(true);
- });
it('removes the table', () => {
const wrapper = mount(
<Provider store={store}>
diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx
b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx
index c4751a1..667abde 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx
@@ -59,6 +59,7 @@ export default class SqlEditorLeftBar extends
React.PureComponent {
this.onDbChange = this.onDbChange.bind(this);
this.getDbList = this.getDbList.bind(this);
this.onTableChange = this.onTableChange.bind(this);
+ this.onToggleTable = this.onToggleTable.bind(this);
}
onSchemaChange(schema) {
@@ -91,6 +92,16 @@ export default class SqlEditorLeftBar extends
React.PureComponent {
this.props.actions.addTable(this.props.queryEditor, tableName, schemaName);
}
+ onToggleTable(tables) {
+ this.props.tables.forEach(table => {
+ if (!tables.includes(table.id.toString()) && table.expanded) {
+ this.props.actions.collapseTable(table);
+ } else if (tables.includes(table.id.toString()) && !table.expanded) {
+ this.props.actions.expandTable(table);
+ }
+ });
+ }
+
getDbList(dbs) {
this.props.actions.setDatabases(dbs);
}
@@ -172,13 +183,13 @@ export default class SqlEditorLeftBar extends
React.PureComponent {
`}
expandIconPosition="right"
ghost
+ onChange={this.onToggleTable}
>
{this.props.tables.map(table => (
<TableElement
table={table}
key={table.id}
actions={this.props.actions}
- onClick={this.toggleTable}
/>
))}
</Collapse>
diff --git a/superset-frontend/src/SqlLab/components/TableElement.jsx
b/superset-frontend/src/SqlLab/components/TableElement.jsx
index 13c106c..0811d95 100644
--- a/superset-frontend/src/SqlLab/components/TableElement.jsx
+++ b/superset-frontend/src/SqlLab/components/TableElement.jsx
@@ -79,15 +79,6 @@ class TableElement extends React.PureComponent {
this.props.actions.addQueryEditor(qe);
}
- toggleTable(e) {
- e.preventDefault();
- if (this.props.table.expanded) {
- this.props.actions.collapseTable(this.props.table);
- } else {
- this.props.actions.expandTable(this.props.table);
- }
- }
-
removeTable() {
this.props.actions.removeDataPreview(this.props.table);
this.props.actions.removeTable(this.props.table);
@@ -214,13 +205,7 @@ class TableElement extends React.PureComponent {
title={table.name}
trigger={['hover']}
>
- <StyledSpan
- data-test="collapse"
- className="table-name"
- onClick={e => {
- this.toggleTable(e);
- }}
- >
+ <StyledSpan data-test="collapse" className="table-name">
<strong>{table.name}</strong>
</StyledSpan>
</Tooltip>
