fix: data column in SQL lab left panel open by default (#13624)

* fix table expand

* Left Panel Expand

* added tests

Co-authored-by: Elizabeth Thompson <eschutho@gmail.com>

superset-frontend/spec/javascripts/sqllab/SqlEditorLeftBar_spec.jsx

@@ -18,32 +18,36 @@
  */
 import React from 'react';
 import configureStore from 'redux-mock-store';
+import fetchMock from 'fetch-mock';
 import { shallow } from 'enzyme';
-import sinon from 'sinon';
+import { render, screen, act } from '@testing-library/react';
+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,
+  initialState,
+  databases,
+  defaultQueryEditor,
+  mockedActions,
+} from './fixtures';
 
-import { table, defaultQueryEditor, initialState } from './fixtures';
-
+const mockedProps = {
+  actions: mockedActions,
+  tables: [table],
+  queryEditor: defaultQueryEditor,
+  database: databases,
+  height: 0,
+};
+const middlewares = [thunk];
+const mockStore = configureStore(middlewares);
+const store = mockStore(initialState);
+const DATABASE_ENDPOINT = 'glob:*/api/v1/database/?*';
+fetchMock.get(DATABASE_ENDPOINT, []);
 describe('SqlEditorLeftBar', () => {
-  const mockedProps = {
-    actions: {
-      queryEditorSetSchema: sinon.stub(),
-      queryEditorSetDb: sinon.stub(),
-      setDatabases: sinon.stub(),
-      addTable: sinon.stub(),
-      addDangerToast: sinon.stub(),
-    },
-    tables: [table],
-    queryEditor: defaultQueryEditor,
-    database: {},
-    height: 0,
-  };
-  const middlewares = [thunk];
-  const mockStore = configureStore(middlewares);
-  const store = mockStore(initialState);
-
   let wrapper;
 
   beforeEach(() => {
@@ -62,3 +66,28 @@ describe('SqlEditorLeftBar', () => {
     expect(wrapper.find(TableElement)).toExist();
   });
 });
+
+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 () => {
+    const dbSelect = screen.getByText(/select a database/i);
+    const schemaSelect = screen.getByText(/select a schema \(0\)/i);
+    const dropdown = screen.getByText(/Select table/i);
+    const abUser = screen.getByText(/ab_user/i);
+    expect(dbSelect).toBeInTheDocument();
+    expect(schemaSelect).toBeInTheDocument();
+    expect(dropdown).toBeInTheDocument();
+    expect(abUser).toBeInTheDocument();
+  });
+});

superset-frontend/spec/javascripts/sqllab/fixtures.ts

@@ -172,6 +172,7 @@ export const table = {
   ],
   expanded: true,
 };
+
 export const defaultQueryEditor = {
   id: 'dfsadfs',
   autorun: false,

superset-frontend/spec/javascripts/sqllab/reducers/sqlLab_spec.js

@@ -153,6 +153,7 @@ describe('sqlLabReducer', () => {
     it('should add a table', () => {
       // Testing that beforeEach actually added the table
       expect(newState.tables).toHaveLength(1);
+      expect(newState.tables[0].expanded).toBe(true);
     });
     it('should merge the table attributes', () => {
       // Merging the extra attribute

superset-frontend/src/SqlLab/actions/sqlLab.js

@@ -1068,7 +1068,7 @@ export function addTable(query, tableName, schemaName) {
         ...table,
         isMetadataLoading: true,
         isExtraMetadataLoading: true,
-        expanded: false,
+        expanded: true,
       }),
     );
 

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

@@ -147,8 +147,9 @@ export default class SqlEditorLeftBar extends React.PureComponent {
         <StyledScrollbarContainer>
           <StyledScrollbarContent contentHeight={tableMetaDataHeight}>
             <Collapse
-              ghost
-              expandIconPosition="right"
+              activeKey={this.props.tables
+                .filter(({ expanded }) => expanded)
+                .map(({ id }) => id)}
               css={theme => css`
                 .ant-collapse-item {
                   margin-bottom: ${theme.gridUnit * 3}px;
@@ -169,12 +170,15 @@ export default class SqlEditorLeftBar extends React.PureComponent {
                   }
                 }
               `}
+              expandIconPosition="right"
+              ghost
             >
               {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

@@ -283,6 +283,7 @@ class TableElement extends React.PureComponent {
         {...this.props}
         header={this.renderHeader()}
         className="TableElement"
+        forceRender="true"
       >
         {this.renderBody()}
       </Collapse.Panel>