feat: Add dataset visuals for when a table is selected (#21893)

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 ? (
+    <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;

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()}
     />
   );

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(<DatasetLayout datasetPanel={DatasetPanel()} />);
+    render(<DatasetLayout datasetPanel={<DatasetPanel />} />);
 
     const blankDatasetImg = screen.getByRole('img', { name: /empty/i });
     const blankDatasetTitle = screen.getByText(/select dataset source/i);