From bf21ec3e17a689f8b2074227e22cca284656a3b8 Mon Sep 17 00:00:00 2001 From: AAfghahi <48933336+AAfghahi@users.noreply.github.com> Date: Thu, 18 Mar 2021 16:28:24 -0400 Subject: [PATCH] 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 --- .../sqllab/SqlEditorLeftBar_spec.jsx | 69 +++++++++++++------ .../spec/javascripts/sqllab/fixtures.ts | 1 + .../sqllab/reducers/sqlLab_spec.js | 1 + .../src/SqlLab/actions/sqlLab.js | 2 +- .../SqlLab/components/SqlEditorLeftBar.jsx | 8 ++- .../src/SqlLab/components/TableElement.jsx | 1 + 6 files changed, 59 insertions(+), 23 deletions(-) diff --git a/superset-frontend/spec/javascripts/sqllab/SqlEditorLeftBar_spec.jsx b/superset-frontend/spec/javascripts/sqllab/SqlEditorLeftBar_spec.jsx index 84ef4a5f62942..8430baf127d93 100644 --- a/superset-frontend/spec/javascripts/sqllab/SqlEditorLeftBar_spec.jsx +++ b/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( + + + + + , + ); + }); + }); + + 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(); + }); +}); diff --git a/superset-frontend/spec/javascripts/sqllab/fixtures.ts b/superset-frontend/spec/javascripts/sqllab/fixtures.ts index 13d126d45e08b..f4ab24dd558ce 100644 --- a/superset-frontend/spec/javascripts/sqllab/fixtures.ts +++ b/superset-frontend/spec/javascripts/sqllab/fixtures.ts @@ -172,6 +172,7 @@ export const table = { ], expanded: true, }; + export const defaultQueryEditor = { id: 'dfsadfs', autorun: false, diff --git a/superset-frontend/spec/javascripts/sqllab/reducers/sqlLab_spec.js b/superset-frontend/spec/javascripts/sqllab/reducers/sqlLab_spec.js index 574aabbdca732..d10542e574730 100644 --- a/superset-frontend/spec/javascripts/sqllab/reducers/sqlLab_spec.js +++ b/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 diff --git a/superset-frontend/src/SqlLab/actions/sqlLab.js b/superset-frontend/src/SqlLab/actions/sqlLab.js index a1bc59eafbd2a..95216b8d06d78 100644 --- a/superset-frontend/src/SqlLab/actions/sqlLab.js +++ b/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, }), ); diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx index 3c46e4cf848df..c4751a1aeeb21 100644 --- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx +++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx @@ -147,8 +147,9 @@ export default class SqlEditorLeftBar extends React.PureComponent { 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 => ( ))} diff --git a/superset-frontend/src/SqlLab/components/TableElement.jsx b/superset-frontend/src/SqlLab/components/TableElement.jsx index abc9b8c7a02d8..13c106ca6fdeb 100644 --- a/superset-frontend/src/SqlLab/components/TableElement.jsx +++ b/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()}