catch collapse onchange (#13927)

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();
   });
 });

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}>

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>

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>