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..d4065ba359 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,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 ? (
+
+
+
+ {tableName}
+
+ {t('Table columns')}
+
+ ) : (
);
-}
+
+export default DatasetPanel;
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 032a9437e2..7721c63f8c 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 = () => (
@@ -92,7 +97,7 @@ export default function AddDataset() {
);
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 2173f83fa0..78ac80fb50 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
@@ -57,7 +57,7 @@ describe('DatasetLayout', () => {
});
it('renders a DatasetPanel when passed in', () => {
- render();
+ render(} />);
const blankDatasetImg = screen.getByRole('img', { name: /empty/i });
const blankDatasetTitle = screen.getByText(/select dataset source/i);