mirror of
https://github.com/apache/superset.git
synced 2024-09-06 13:57:40 -04:00
feat: Add dataset visuals for when a table is selected (#21893)
This commit is contained in:
parent
a36ab71a27
commit
175ec854b9
@ -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 ',
|
||||
@ -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;
|
||||
|
@ -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()}
|
||||
/>
|
||||
);
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user