From be3497a2e6095b080d27a76aef2f379b6bee9fb0 Mon Sep 17 00:00:00 2001 From: Elizabeth Thompson Date: Fri, 18 Dec 2020 11:45:30 -0800 Subject: [PATCH 1/5] remove extra scrollbars --- .../src/SqlLab/components/SouthPane.jsx | 13 ++++++++++--- superset-frontend/src/SqlLab/main.less | 4 ---- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/superset-frontend/src/SqlLab/components/SouthPane.jsx b/superset-frontend/src/SqlLab/components/SouthPane.jsx index ec79973351c71..f23673a0f8422 100644 --- a/superset-frontend/src/SqlLab/components/SouthPane.jsx +++ b/superset-frontend/src/SqlLab/components/SouthPane.jsx @@ -23,7 +23,8 @@ import { Alert } from 'react-bootstrap'; import Tabs from 'src/common/components/Tabs'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; -import { t } from '@superset-ui/core'; +import { t, styled } from '@superset-ui/core'; + import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags'; import Label from 'src/components/Label'; @@ -59,6 +60,12 @@ const defaultProps = { offline: false, }; +const StyledPane = styled.div` + .div { + overflow: none; + } +`; + export class SouthPane extends React.PureComponent { constructor(props) { super(props); @@ -158,7 +165,7 @@ export class SouthPane extends React.PureComponent { )); return ( -
+ {dataPreviewTabs} -
+ ); } } diff --git a/superset-frontend/src/SqlLab/main.less b/superset-frontend/src/SqlLab/main.less index 7123ed033f9fd..7748cdadd059a 100644 --- a/superset-frontend/src/SqlLab/main.less +++ b/superset-frontend/src/SqlLab/main.less @@ -501,10 +501,6 @@ a.Link { display: flex; flex-direction: column; } - - .ant-tabs-tabpane { - overflow-y: auto; // scroll the query history pane - } } .nav-tabs .ddbtn-tab { From 5e371c43c85a6753451ddfba128df545128d7a6f Mon Sep 17 00:00:00 2001 From: Elizabeth Thompson Date: Wed, 6 Jan 2021 15:49:32 -0800 Subject: [PATCH 2/5] fix sql lab south pane bottom margin --- ...nel.index.js => sourcePanel.index.test.js} | 4 +--- .../src/SqlLab/components/SouthPane.jsx | 23 +++++++++++++++--- superset-frontend/src/SqlLab/main.less | 24 +------------------ .../FilterableTable/FilterableTable.tsx | 8 ++++++- 4 files changed, 29 insertions(+), 30 deletions(-) rename superset-frontend/cypress-base/cypress/integration/sqllab/{sourcePanel.index.js => sourcePanel.index.test.js} (96%) diff --git a/superset-frontend/cypress-base/cypress/integration/sqllab/sourcePanel.index.js b/superset-frontend/cypress-base/cypress/integration/sqllab/sourcePanel.index.test.js similarity index 96% rename from superset-frontend/cypress-base/cypress/integration/sqllab/sourcePanel.index.js rename to superset-frontend/cypress-base/cypress/integration/sqllab/sourcePanel.index.test.js index 011930f3ad348..ac0f5da5cd683 100644 --- a/superset-frontend/cypress-base/cypress/integration/sqllab/sourcePanel.index.js +++ b/superset-frontend/cypress-base/cypress/integration/sqllab/sourcePanel.index.test.js @@ -34,9 +34,7 @@ describe('SqlLab datasource panel', () => { cy.get('.sql-toolbar .Select').should('have.length', 3); cy.get('.sql-toolbar .table-schema').should('not.exist'); - cy.get('.SouthPane .tab-content .filterable-table-container').should( - 'not.exist', - ); + cy.get('[data-test="filterable-table-container"]').should('not.exist'); cy.get('.sql-toolbar .Select') .eq(0) // database select diff --git a/superset-frontend/src/SqlLab/components/SouthPane.jsx b/superset-frontend/src/SqlLab/components/SouthPane.jsx index f23673a0f8422..26b64a436d8fc 100644 --- a/superset-frontend/src/SqlLab/components/SouthPane.jsx +++ b/superset-frontend/src/SqlLab/components/SouthPane.jsx @@ -37,7 +37,7 @@ import { LOCALSTORAGE_MAX_QUERY_AGE_MS, } from '../constants'; -const TAB_HEIGHT = 44; +const TAB_HEIGHT = 64; /* editorQueries are queries executed by users passed from SqlEditor component @@ -61,8 +61,25 @@ const defaultProps = { }; const StyledPane = styled.div` - .div { - overflow: none; + width: 100%; + + .ant-tabs .ant-tabs-content-holder { + overflow: visible; + } + + .SouthPaneTabs { + height: 100%; + display: flex; + flex-direction: column; + } + .tab-content { + .alert { + margin-top: 10px; + } + + button.fetch { + margin-top: 10px; + } } `; diff --git a/superset-frontend/src/SqlLab/main.less b/superset-frontend/src/SqlLab/main.less index 7748cdadd059a..23e6810e75a8a 100644 --- a/superset-frontend/src/SqlLab/main.less +++ b/superset-frontend/src/SqlLab/main.less @@ -235,10 +235,6 @@ div.Workspace { .ace_content { height: 100%; } - - .SouthPane { - height: 100%; - } } .SqlEditorTabs li { @@ -318,7 +314,7 @@ div.Workspace { .queryPane { flex: 1 1 auto; padding-left: 10px; - overflow: auto; + overflow: visible; } .schemaPane-enter-done, @@ -493,16 +489,6 @@ a.Link { margin: 3px 5px; } -.SouthPane { - width: 100%; - - .SouthPaneTabs { - height: 100%; - display: flex; - flex-direction: column; - } -} - .nav-tabs .ddbtn-tab { padding: 0; border: none; @@ -533,14 +519,6 @@ a.Link { } } -.SouthPane .tab-content .alert { - margin-top: 10px; -} - -.SouthPane .tab-content button.fetch { - margin-top: 10px; -} - .cost-estimate { font-size: @font-size-s; } diff --git a/superset-frontend/src/components/FilterableTable/FilterableTable.tsx b/superset-frontend/src/components/FilterableTable/FilterableTable.tsx index 77b27108e5106..ebddf09c25609 100644 --- a/superset-frontend/src/components/FilterableTable/FilterableTable.tsx +++ b/superset-frontend/src/components/FilterableTable/FilterableTable.tsx @@ -29,7 +29,7 @@ import { SortIndicator, Table, } from 'react-virtualized'; -import { getMultipleTextDimensions, t } from '@superset-ui/core'; +import { getMultipleTextDimensions, t, css } from '@superset-ui/core'; import Button from '../Button'; import CopyToClipboard from '../CopyToClipboard'; @@ -83,6 +83,10 @@ const JSON_TREE_THEME = { base0F: '#cc6633', }; +const filterableTableStyles = css` + overflow-x: auto; +`; + // when more than MAX_COLUMNS_FOR_TABLE are returned, switch from table to grid view export const MAX_COLUMNS_FOR_TABLE = 50; @@ -463,6 +467,7 @@ export default class FilterableTable extends PureComponent<
@@ -555,6 +560,7 @@ export default class FilterableTable extends PureComponent< style={{ height }} className="filterable-table-container" ref={this.container} + css={filterableTableStyles} > {this.state.fitted && ( Date: Thu, 7 Jan 2021 17:19:40 -0800 Subject: [PATCH 3/5] Update superset-frontend/src/SqlLab/components/SouthPane.jsx Co-authored-by: Evan Rusackas --- superset-frontend/src/SqlLab/components/SouthPane.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/SqlLab/components/SouthPane.jsx b/superset-frontend/src/SqlLab/components/SouthPane.jsx index 26b64a436d8fc..62b42f4321423 100644 --- a/superset-frontend/src/SqlLab/components/SouthPane.jsx +++ b/superset-frontend/src/SqlLab/components/SouthPane.jsx @@ -74,7 +74,7 @@ const StyledPane = styled.div` } .tab-content { .alert { - margin-top: 10px; + margin-top: ${({ theme }) => theme.gridUnit * 2}px; } button.fetch { From 887074929eaaf8a01241ae89daaae45ada2f1cd2 Mon Sep 17 00:00:00 2001 From: Elizabeth Thompson Date: Thu, 7 Jan 2021 17:19:55 -0800 Subject: [PATCH 4/5] Update superset-frontend/src/SqlLab/components/SouthPane.jsx Co-authored-by: Evan Rusackas --- superset-frontend/src/SqlLab/components/SouthPane.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/SqlLab/components/SouthPane.jsx b/superset-frontend/src/SqlLab/components/SouthPane.jsx index 62b42f4321423..2d1db63bd0e4a 100644 --- a/superset-frontend/src/SqlLab/components/SouthPane.jsx +++ b/superset-frontend/src/SqlLab/components/SouthPane.jsx @@ -78,7 +78,7 @@ const StyledPane = styled.div` } button.fetch { - margin-top: 10px; + margin-top: ${({ theme }) => theme.gridUnit * 2}px; } } `; From 346230a4b3658979adbe7ae596390799500bbeeb Mon Sep 17 00:00:00 2001 From: Elizabeth Thompson Date: Thu, 7 Jan 2021 17:30:54 -0800 Subject: [PATCH 5/5] move styles to component --- superset-frontend/src/SqlLab/main.less | 4 ---- .../src/components/FilterableTable/FilterableTable.tsx | 10 +++++----- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/superset-frontend/src/SqlLab/main.less b/superset-frontend/src/SqlLab/main.less index 23e6810e75a8a..dffc599308f64 100644 --- a/superset-frontend/src/SqlLab/main.less +++ b/superset-frontend/src/SqlLab/main.less @@ -401,10 +401,6 @@ div.tablePopover { padding-top: 16px; } -.filterable-table-container { - margin-top: 48px; -} - .ace_editor.ace_editor { //double class is better than !important border: 1px solid @gray-light; diff --git a/superset-frontend/src/components/FilterableTable/FilterableTable.tsx b/superset-frontend/src/components/FilterableTable/FilterableTable.tsx index ebddf09c25609..5b51f9915b016 100644 --- a/superset-frontend/src/components/FilterableTable/FilterableTable.tsx +++ b/superset-frontend/src/components/FilterableTable/FilterableTable.tsx @@ -29,7 +29,7 @@ import { SortIndicator, Table, } from 'react-virtualized'; -import { getMultipleTextDimensions, t, css } from '@superset-ui/core'; +import { getMultipleTextDimensions, t, styled } from '@superset-ui/core'; import Button from '../Button'; import CopyToClipboard from '../CopyToClipboard'; @@ -83,8 +83,9 @@ const JSON_TREE_THEME = { base0F: '#cc6633', }; -const filterableTableStyles = css` +const StyledFilterableTable = styled.div` overflow-x: auto; + margin-top: ${({ theme }) => theme.gridUnit * 12}px; `; // when more than MAX_COLUMNS_FOR_TABLE are returned, switch from table to grid view @@ -556,11 +557,10 @@ export default class FilterableTable extends PureComponent< const rowGetter = ({ index }: { index: number }) => this.getDatum(sortedAndFilteredList, index); return ( -
{this.state.fitted && (
)} - + ); }