From fa4f6a4fd0d54f1b7b1cfa43d551ae4ade0a1c82 Mon Sep 17 00:00:00 2001 From: lyndsiWilliams Date: Wed, 28 Sep 2022 14:48:46 -0500 Subject: [PATCH 1/7] Add client side searching to table list in dataset left panel --- .../CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx index 3b2ef18181bcb..2fe74b0068ffb 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx @@ -19,7 +19,7 @@ import React from 'react'; import fetchMock from 'fetch-mock'; import userEvent from '@testing-library/user-event'; -import { render, screen, waitFor } from 'spec/helpers/testing-library'; +import { render, screen, waitFor, within } from 'spec/helpers/testing-library'; import LeftPanel from 'src/views/CRUD/data/dataset/AddDataset/LeftPanel'; const databasesEndpoint = 'glob:*/api/v1/database/?q*'; From 47bac70a64b86b346afc9e7fc1a6ec23fb9fda60 Mon Sep 17 00:00:00 2001 From: lyndsiWilliams Date: Tue, 11 Oct 2022 11:18:01 -0500 Subject: [PATCH 2/7] Debugging LeftPanel.test.tsx --- .../CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx index 2fe74b0068ffb..3b2ef18181bcb 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx @@ -19,7 +19,7 @@ import React from 'react'; import fetchMock from 'fetch-mock'; import userEvent from '@testing-library/user-event'; -import { render, screen, waitFor, within } from 'spec/helpers/testing-library'; +import { render, screen, waitFor } from 'spec/helpers/testing-library'; import LeftPanel from 'src/views/CRUD/data/dataset/AddDataset/LeftPanel'; const databasesEndpoint = 'glob:*/api/v1/database/?q*'; From ed095c10655120706496fd2589b99426bb7416ef Mon Sep 17 00:00:00 2001 From: lyndsiWilliams Date: Mon, 17 Oct 2022 08:12:31 -0500 Subject: [PATCH 3/7] Add table selected visuals --- .../dataset/AddDataset/DatasetPanel/index.tsx | 59 +++++++++++++++++-- .../dataset/AddDataset/LeftPanel/index.tsx | 14 ++--- .../CRUD/data/dataset/AddDataset/index.tsx | 11 +++- .../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 294637a6f7b50..a36d10aa5ea16 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 ? ( + +
+ + {tableName} + { + console.log( + 'This will refresh table columns once the table component is implemented', + ); + }} + tooltipContent={t('Refresh table columns')} + /> +
+ {t('Table columns')} + + ) : ( ); -} + +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 0a1ed77c863ef..5b4104f782f10 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) => ( +
+ +

{inline}

+
+); + export default function LeftPanel({ setDataset, schema, @@ -223,13 +230,6 @@ export default function LeftPanel({ option?.value?.toLowerCase().includes(searchVal.toLowerCase()), ); - const Loader = (inline: string) => ( -
- -

{inline}

-
- ); - return (

Select database & schema

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 032a9437e25cb..7721c63f8cf51 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 | 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 = () => ( + + ); const FooterComponent = () => (