Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: south pane scrolling issues #12318

Merged
merged 5 commits into from
Jan 8, 2021
Merged

fix: south pane scrolling issues #12318

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
be3497a
remove extra scrollbars
eschutho Dec 18, 2020
5e371c4
fix sql lab south pane bottom margin
eschutho Jan 6, 2021
90f9f21
Update superset-frontend/src/SqlLab/components/SouthPane.jsx
eschutho Jan 8, 2021
8870749
Update superset-frontend/src/SqlLab/components/SouthPane.jsx
eschutho Jan 8, 2021
346230a
move styles to component
eschutho Jan 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions ...s/integration/sqllab/sourcePanel.index.js → ...egration/sqllab/sourcePanel.index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
32 changes: 28 additions & 4 deletions superset-frontend/src/SqlLab/components/SouthPane.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -36,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
Expand All @@ -59,6 +60,29 @@ const defaultProps = {
offline: false,
};

const StyledPane = styled.div`
width: 100%;

.ant-tabs .ant-tabs-content-holder {
rusackas marked this conversation as resolved.
Show resolved Hide resolved
overflow: visible;
}

.SouthPaneTabs {
height: 100%;
display: flex;
flex-direction: column;
}
.tab-content {
.alert {
margin-top: 10px;
eschutho marked this conversation as resolved.
Show resolved Hide resolved
}

button.fetch {
margin-top: 10px;
eschutho marked this conversation as resolved.
Show resolved Hide resolved
}
}
`;

export class SouthPane extends React.PureComponent {
constructor(props) {
super(props);
Expand Down Expand Up @@ -158,7 +182,7 @@ export class SouthPane extends React.PureComponent {
));

return (
<div className="SouthPane" ref={this.southPaneRef}>
<StyledPane className="SouthPane" ref={this.southPaneRef}>
<Tabs
activeKey={this.props.activeSouthPaneTab}
className="SouthPaneTabs"
Expand All @@ -178,7 +202,7 @@ export class SouthPane extends React.PureComponent {
</Tabs.TabPane>
{dataPreviewTabs}
</Tabs>
</div>
</StyledPane>
);
}
}
Expand Down
28 changes: 1 addition & 27 deletions superset-frontend/src/SqlLab/main.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,10 +235,6 @@ div.Workspace {
.ace_content {
height: 100%;
}

.SouthPane {
height: 100%;
}
}

.SqlEditorTabs li {
Expand Down Expand Up @@ -318,7 +314,7 @@ div.Workspace {
.queryPane {
flex: 1 1 auto;
padding-left: 10px;
overflow: auto;
overflow: visible;
}

.schemaPane-enter-done,
Expand Down Expand Up @@ -493,20 +489,6 @@ a.Link {
margin: 3px 5px;
}

.SouthPane {
width: 100%;

.SouthPaneTabs {
height: 100%;
display: flex;
flex-direction: column;
}

.ant-tabs-tabpane {
overflow-y: auto; // scroll the query history pane
}
}

.nav-tabs .ddbtn-tab {
padding: 0;
border: none;
Expand Down Expand Up @@ -537,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;
}
8 changes: 7 additions & 1 deletion superset-frontend/src/components/FilterableTable/FilterableTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -463,6 +467,7 @@ export default class FilterableTable extends PureComponent<
<div
style={{ height }}
className="filterable-table-container Table"
data-test="filterable-table-container"
ref={this.container}
>
<div className="LeftColumn">
Expand Down Expand Up @@ -555,6 +560,7 @@ export default class FilterableTable extends PureComponent<
style={{ height }}
className="filterable-table-container"
ref={this.container}
css={filterableTableStyles}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the css prop approach works, but I kind of lean toward the styled.div implementation like you did with StyledPane. If you did that, you get the bonus win of being able to kill this off from superset-frontend/src/SqlLab/main.less:

.filterable-table-container {
  margin-top: 48px;
}

... and switch it to margin-top: ${({ theme }) => theme.gridUnit * 12}px; for a bonus bonus win ;)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok, great. I didn't see that style in less, that's another win for sure. I was thinking something like if you can utilize the style, use styled.div, etc, otherwise css prop?

>
{this.state.fitted && (
<Table
Expand Down