Skip to content

Commit

Permalink
feat: Add dataset visuals for when a table is selected (#21893)
Browse files Browse the repository at this point in the history
  • Loading branch information
lyndsiWilliams committed Oct 24, 2022
1 parent a36ab71 commit 175ec85
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,45 @@
* 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';

type DatasetPanelProps = {
tableName?: string | null;
};

const StyledEmptyStateBig = styled(EmptyStateBig)`
p {
width: ${({ theme }) => theme.gridUnit * 115}px;
}
`;

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 ',
Expand All @@ -44,12 +73,21 @@ 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}
</div>
<span>{t('Table columns')}</span>
</StyledDatasetPanel>
) : (
<StyledEmptyStateBig
image="empty-dataset.svg"
title={t('Select dataset source')}
description={renderDescription()}
description={renderEmptyDescription()}
/>
);
}

export default DatasetPanel;
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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} />
Expand All @@ -92,7 +97,7 @@ export default function AddDataset() {
<DatasetLayout
header={HeaderComponent()}
leftPanel={LeftPanelComponent()}
datasetPanel={DatasetPanel()}
datasetPanel={DatasetPanelComponent()}
footer={FooterComponent()}
/>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,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);
Expand Down

0 comments on commit 175ec85

Please sign in to comment.