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:47 UTC
[superset] branch lyndsi/table-selected-visuals created (now 1857cf3129)
This is an automated email from the ASF dual-hosted git repository.
lyndsi pushed a change to branch lyndsi/table-selected-visuals
in repository https://gitbox.apache.org/repos/asf/superset.git
at 1857cf3129 Add table selected visuals
This branch includes the following new commits:
new 1857cf3129 Add table selected visuals
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[superset] 01/01: Add table selected visuals
Posted by ly...@apache.org.
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);