This is an automated email from the ASF dual-hosted git repository. lyndsi pushed a commit to branch lyndsi/table-selected-visuals in repository https://gitbox.apache.org/repos/asf/superset.git
commit 1857cf31296c05d5fe5c6e0fd324e2613aa3d055 Author: lyndsiWilliams <[email protected]> AuthorDate: Mon Oct 17 08:12:31 2022 -0500 Add table selected visuals --- .../data/dataset/AddDataset/DatasetPanel/index.tsx | 59 +++++++++++++++++++--- .../data/dataset/AddDataset/LeftPanel/index.tsx | 14 ++--- .../views/CRUD/data/dataset/AddDataset/index.tsx | 11 ++-- .../dataset/DatasetLayout/DatasetLayout.test.tsx | 2 +- 4 files changed, 69 insertions(+), 17 deletions(-) diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/index.tsx index 294637a6f7..a36d10aa5e 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/index.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/index.tsx @@ -17,8 +17,14 @@ * under the License. */ import React from 'react'; -import { t, styled } from '@superset-ui/core'; +import { supersetTheme, t, styled } from '@superset-ui/core'; +import Icons from 'src/components/Icons'; import { EmptyStateBig } from 'src/components/EmptyState'; +import RefreshLabel from 'src/components/RefreshLabel'; + +type DatasetPanelProps = { + tableName?: string | null | undefined; +}; const StyledEmptyStateBig = styled(EmptyStateBig)` p { @@ -26,7 +32,31 @@ const StyledEmptyStateBig = styled(EmptyStateBig)` } `; -const renderDescription = () => ( +const StyledDatasetPanel = styled.div` + padding: ${({ theme }) => theme.gridUnit * 8}px + ${({ theme }) => theme.gridUnit * 6}px; + + .table-name { + font-size: ${({ theme }) => theme.gridUnit * 6}px; + font-weight: ${({ theme }) => theme.typography.weights.medium}; + padding-bottom: ${({ theme }) => theme.gridUnit * 20}px; + margin: 0; + + .anticon:first-of-type { + margin-right: ${({ theme }) => theme.gridUnit * 4}px; + } + + .anticon:nth-of-type(2) { + margin-left: ${({ theme }) => theme.gridUnit * 4}px; + } + } + + span { + font-weight: ${({ theme }) => theme.typography.weights.bold}; + } +`; + +const renderEmptyDescription = () => ( <> {t( 'Datasets can be created from database tables or SQL queries. Select a database table to the left or ', @@ -44,12 +74,29 @@ const renderDescription = () => ( </> ); -export default function DatasetPanel() { - return ( +const DatasetPanel = ({ tableName }: DatasetPanelProps) => + tableName ? ( + <StyledDatasetPanel> + <div className="table-name"> + <Icons.Table iconColor={supersetTheme.colors.grayscale.base} /> + {tableName} + <RefreshLabel + onClick={() => { + console.log( + 'This will refresh table columns once the table component is implemented', + ); + }} + tooltipContent={t('Refresh table columns')} + /> + </div> + <span>{t('Table columns')}</span> + </StyledDatasetPanel> + ) : ( <StyledEmptyStateBig image="empty-dataset.svg" title={t('Select dataset source')} - description={renderDescription()} + description={renderEmptyDescription()} /> ); -} + +export default DatasetPanel; diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx index 03c865ddcb..9c39f22828 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx @@ -127,6 +127,13 @@ const LeftPanelStyle = styled.div` `} `; +export const Loader = (inline: string) => ( + <div className="loading-container"> + <Loading position="inline" /> + <p>{inline}</p> + </div> +); + export default function LeftPanel({ setDataset, schema, @@ -223,13 +230,6 @@ export default function LeftPanel({ option?.value?.toLowerCase().includes(searchVal.toLowerCase()), ); - const Loader = (inline: string) => ( - <div className="loading-container"> - <Loading position="inline" /> - <p>{inline}</p> - </div> - ); - return ( <LeftPanelStyle> <p className="section-title db-schema">Select database & schema</p> diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/index.tsx index 5500d5ded2..679230198d 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/index.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/index.tsx @@ -65,6 +65,9 @@ export function datasetReducer( } } +const prevUrl = + '/tablemodelview/list/?pageIndex=0&sortColumn=changed_on_delta_humanized&sortOrder=desc'; + export default function AddDataset() { const [dataset, setDataset] = useReducer< Reducer<Partial<DatasetObject> | null, DSReducerActionType> @@ -81,8 +84,10 @@ export default function AddDataset() { dbId={dataset?.db?.id} /> ); - const prevUrl = - '/tablemodelview/list/?pageIndex=0&sortColumn=changed_on_delta_humanized&sortOrder=desc'; + + const DatasetPanelComponent = () => ( + <DatasetPanel tableName={dataset?.table_name} /> + ); const FooterComponent = () => ( <Footer url={prevUrl} datasetObject={dataset} /> @@ -92,7 +97,7 @@ export default function AddDataset() { <DatasetLayout header={HeaderComponent()} leftPanel={LeftPanelComponent()} - datasetPanel={DatasetPanel()} + datasetPanel={DatasetPanelComponent()} footer={FooterComponent()} /> ); diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout/DatasetLayout.test.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout/DatasetLayout.test.tsx index 42dc3a994b..f887af9c88 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout/DatasetLayout.test.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout/DatasetLayout.test.tsx @@ -63,7 +63,7 @@ describe('DatasetLayout', () => { }); it('renders a DatasetPanel when passed in', () => { - render(<DatasetLayout datasetPanel={DatasetPanel()} />); + render(<DatasetLayout datasetPanel={<DatasetPanel />} />); const blankDatasetImg = screen.getByRole('img', { name: /empty/i }); const blankDatasetTitle = screen.getByText(/select dataset source/i);
