This is an automated email from the ASF dual-hosted git repository. villebro pushed a commit to branch 1.0 in repository https://gitbox.apache.org/repos/asf/superset.git
commit 2641a65feb6b748887bc4dd3897ff1f96eda63d9 Author: Geido <[email protected]> AuthorDate: Thu Jan 21 19:34:41 2021 +0100 fix(explore): Scroll only table in Change Dataset and Edit Dataset Modals (#12598) --- superset-frontend/src/CRUD/CollectionTable.tsx | 65 ++++++++++++++++------ .../src/common/components/Modal/Modal.tsx | 1 + .../src/components/TableView/TableView.tsx | 10 ++++ .../src/datasource/ChangeDatasourceModal.tsx | 3 + .../src/datasource/DatasourceEditor.jsx | 31 ++++++++--- 5 files changed, 83 insertions(+), 27 deletions(-) diff --git a/superset-frontend/src/CRUD/CollectionTable.tsx b/superset-frontend/src/CRUD/CollectionTable.tsx index 72370c8..480e593 100644 --- a/superset-frontend/src/CRUD/CollectionTable.tsx +++ b/superset-frontend/src/CRUD/CollectionTable.tsx @@ -18,7 +18,7 @@ */ import React, { ReactNode } from 'react'; import shortid from 'shortid'; -import { t } from '@superset-ui/core'; +import { t, styled } from '@superset-ui/core'; import Button from 'src/components/Button'; import Fieldset from './Fieldset'; import { recurseReactClone } from './utils'; @@ -41,6 +41,7 @@ interface CRUDCollectionProps { ) => ReactNode)[]; onChange?: (arg0: any) => void; tableColumns: Array<any>; + stickyHeader?: boolean; } interface CRUDCollectionState { @@ -60,6 +61,27 @@ function createKeyedCollection(arr: Array<object>) { return map; } +const CrudTableWrapper = styled.div<{ stickyHeader?: boolean }>` + ${({ stickyHeader }) => + stickyHeader && + ` + height: 350px; + overflow: auto; + + thead th { + background: #fff; + position: sticky; + top: 0; + z-index: 9; + } + `} +`; + +const CrudButtonWrapper = styled.div` + text-align: right; + ${({ theme }) => `margin-bottom: ${theme.gridUnit * 2}px`} +`; + export default class CRUDCollection extends React.PureComponent< CRUDCollectionProps, CRUDCollectionState @@ -281,25 +303,32 @@ export default class CRUDCollection extends React.PureComponent< render() { return ( - <div className="CRUD"> - <span className="float-right m-t-10 m-r-10"> + <> + <CrudButtonWrapper> {this.props.allowAddItem && ( - <Button - buttonSize="sm" - buttonStyle="primary" - onClick={this.onAddItem} - data-test="add-item-button" - > - <i data-test="crud-add-table-item" className="fa fa-plus" />{' '} - {t('Add Item')} - </Button> + <span className="m-t-10 m-r-10"> + <Button + buttonSize="sm" + buttonStyle="primary" + onClick={this.onAddItem} + data-test="add-item-button" + > + <i data-test="crud-add-table-item" className="fa fa-plus" />{' '} + {t('Add Item')} + </Button> + </span> )} - </span> - <table data-test="crud-table" className="table"> - {this.renderHeaderRow()} - {this.renderTableBody()} - </table> - </div> + </CrudButtonWrapper> + <CrudTableWrapper + className="CRUD" + stickyHeader={this.props.stickyHeader} + > + <table data-test="crud-table" className="table"> + {this.renderHeaderRow()} + {this.renderTableBody()} + </table> + </CrudTableWrapper> + </> ); } } diff --git a/superset-frontend/src/common/components/Modal/Modal.tsx b/superset-frontend/src/common/components/Modal/Modal.tsx index 64fad2b..d81dc85 100644 --- a/superset-frontend/src/common/components/Modal/Modal.tsx +++ b/superset-frontend/src/common/components/Modal/Modal.tsx @@ -48,6 +48,7 @@ interface StyledModalProps extends SupersetThemeProps { maxWidth?: string; responsive?: boolean; height?: string; + hideFooter?: boolean; } export const StyledModal = styled(BaseModal)<StyledModalProps>` diff --git a/superset-frontend/src/components/TableView/TableView.tsx b/superset-frontend/src/components/TableView/TableView.tsx index 10dc4b2..a6c441d 100644 --- a/superset-frontend/src/components/TableView/TableView.tsx +++ b/superset-frontend/src/components/TableView/TableView.tsx @@ -43,6 +43,7 @@ export interface TableViewProps { className?: string; isPaginationSticky?: boolean; showRowCount?: boolean; + scrollTable?: boolean; } const EmptyWrapper = styled.div` @@ -51,7 +52,16 @@ const EmptyWrapper = styled.div` const TableViewStyles = styled.div<{ isPaginationSticky?: boolean; + scrollTable?: boolean; }>` + ${({ scrollTable, theme }) => + scrollTable && + ` + height: 300px; + margin-bottom: ${theme.gridUnit * 4}px; + overflow: auto; + `} + .table-cell.table-cell { vertical-align: top; } diff --git a/superset-frontend/src/datasource/ChangeDatasourceModal.tsx b/superset-frontend/src/datasource/ChangeDatasourceModal.tsx index 2e5937f..c2b43eb 100644 --- a/superset-frontend/src/datasource/ChangeDatasourceModal.tsx +++ b/superset-frontend/src/datasource/ChangeDatasourceModal.tsx @@ -222,6 +222,8 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({ responsive title={t('Change Dataset')} width={confirmChange ? '432px' : ''} + height={confirmChange ? 'auto' : '480px'} + hideFooter={!confirmChange} footer={ <> {confirmChange && ( @@ -267,6 +269,7 @@ const ChangeDatasourceModal: FunctionComponent<ChangeDatasourceModalProps> = ({ pageSize={20} className="table-condensed" emptyWrapperType={EmptyWrapperType.Small} + scrollTable /> )} </> diff --git a/superset-frontend/src/datasource/DatasourceEditor.jsx b/superset-frontend/src/datasource/DatasourceEditor.jsx index 347947a..4427b22 100644 --- a/superset-frontend/src/datasource/DatasourceEditor.jsx +++ b/superset-frontend/src/datasource/DatasourceEditor.jsx @@ -22,9 +22,8 @@ import { Alert, Col, Radio, Well } from 'react-bootstrap'; import Badge from 'src/common/components/Badge'; import shortid from 'shortid'; import { styled, SupersetClient, t, supersetTheme } from '@superset-ui/core'; - -import Tabs from 'src/common/components/Tabs'; import Button from 'src/components/Button'; +import Tabs from 'src/common/components/Tabs'; import CertifiedIconWithTooltip from 'src/components/CertifiedIconWithTooltip'; import DatabaseSelector from 'src/components/DatabaseSelector'; import Icon from 'src/components/Icon'; @@ -78,6 +77,11 @@ const EditLockContainer = styled.div` } `; +const ColumnButtonWrapper = styled.div` + text-align: right; + ${({ theme }) => `margin-bottom: ${theme.gridUnit * 2}px`} +`; + const checkboxGenerator = (d, onChange) => ( <CheckboxControl value={d} onChange={onChange} /> ); @@ -121,6 +125,7 @@ function ColumnCollectionTable({ allowDeletes allowAddItem={allowAddItem} itemGenerator={itemGenerator} + stickyHeader expandFieldset={ <FormContainer> <Fieldset compact> @@ -943,6 +948,7 @@ class DatasourceEditor extends React.PureComponent { ), }} allowDeletes + stickyHeader /> ); } @@ -991,19 +997,26 @@ class DatasourceEditor extends React.PureComponent { key={2} > <div> + <ColumnButtonWrapper> + <span className="m-t-10 m-r-10"> + <Button + buttonSize="sm" + buttonStyle="primary" + onClick={this.syncMetadata} + className="sync-from-source" + > + <i className="fa fa-database" />{' '} + {t('Sync columns from source')} + </Button> + </span> + </ColumnButtonWrapper> <ColumnCollectionTable + className="columns-table" columns={this.state.databaseColumns} onChange={databaseColumns => this.setColumns({ databaseColumns }) } /> - <Button - buttonStyle="primary" - onClick={this.syncMetadata} - className="sync-from-source" - > - {t('Sync columns from source')} - </Button> {this.state.metadataLoading && <Loading />} </div> </Tabs.TabPane>
