You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by vi...@apache.org on 2021/01/25 13:11:42 UTC
[superset] 06/38: fix(explore): Scroll only table in Change Dataset
and Edit Dataset Modals (#12598)
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 <60...@users.noreply.github.com>
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>