You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ly...@apache.org on 2022/10/20 20:13:48 UTC
[superset] 01/01: Add table selected visuals
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 <kc...@gmail.com>
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);