feat: Integrate ant d table component into DatasetPanel (#21948)

Co-authored-by: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com>
Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

superset-frontend/.storybook/main.js

@@ -24,8 +24,8 @@ module.exports = {
     builder: 'webpack5',
   },
   stories: [
-    '../src/@(components|common|filters|explore)/**/*.stories.@(tsx|jsx)',
-    '../src/@(components|common|filters|explore)/**/*.*.@(mdx)',
+    '../src/@(components|common|filters|explore|views)/**/*.stories.@(tsx|jsx)',
+    '../src/@(components|common|filters|explore|views)/**/*.*.@(mdx)',
   ],
   addons: [
     '@storybook/addon-essentials',

superset-frontend/src/components/EmptyState/index.tsx

@@ -31,7 +31,7 @@ export enum EmptyStateSize {
 export interface EmptyStateSmallProps {
   title: ReactNode;
   description?: ReactNode;
-  image: ReactNode;
+  image?: ReactNode;
 }
 
 export interface EmptyStateProps extends EmptyStateSmallProps {
@@ -156,7 +156,7 @@ export const EmptyStateBig = ({
   className,
 }: EmptyStateProps) => (
   <EmptyStateContainer className={className}>
-    <ImageContainer image={image} size={EmptyStateSize.Big} />
+    {image && <ImageContainer image={image} size={EmptyStateSize.Big} />}
     <TextContainer
       css={(theme: SupersetTheme) =>
         css`
@@ -187,7 +187,7 @@ export const EmptyStateMedium = ({
   buttonText,
 }: EmptyStateProps) => (
   <EmptyStateContainer>
-    <ImageContainer image={image} size={EmptyStateSize.Medium} />
+    {image && <ImageContainer image={image} size={EmptyStateSize.Medium} />}
     <TextContainer
       css={(theme: SupersetTheme) =>
         css`
@@ -216,7 +216,7 @@ export const EmptyStateSmall = ({
   description,
 }: EmptyStateSmallProps) => (
   <EmptyStateContainer>
-    <ImageContainer image={image} size={EmptyStateSize.Small} />
+    {image && <ImageContainer image={image} size={EmptyStateSize.Small} />}
     <TextContainer
       css={(theme: SupersetTheme) =>
         css`

superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/DatasetPanel.stories.tsx

@@ -0,0 +1,44 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { supersetTheme, ThemeProvider } from '@superset-ui/core';
+import DatasetPanel from './DatasetPanel';
+import { exampleColumns } from './fixtures';
+
+export default {
+  title: 'Superset App/views/CRUD/data/dataset/DatasetPanel',
+  component: DatasetPanel,
+} as ComponentMeta<typeof DatasetPanel>;
+
+export const Basic: ComponentStory<typeof DatasetPanel> = args => (
+  <ThemeProvider theme={supersetTheme}>
+    <div style={{ height: '350px' }}>
+      <DatasetPanel {...args} />
+    </div>
+  </ThemeProvider>
+);
+
+Basic.args = {
+  tableName: 'example_table',
+  loading: false,
+  hasError: false,
+  columnList: exampleColumns,
+};

superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/DatasetPanel.test.tsx

@@ -18,24 +18,124 @@
  */
 import React from 'react';
 import { render, screen } from 'spec/helpers/testing-library';
-import DatasetPanel from 'src/views/CRUD/data/dataset/AddDataset/DatasetPanel';
+import DatasetPanel, {
+  REFRESHING,
+  ALT_LOADING,
+  tableColumnDefinition,
+  COLUMN_TITLE,
+} from './DatasetPanel';
+import { exampleColumns } from './fixtures';
+import {
+  SELECT_MESSAGE,
+  CREATE_MESSAGE,
+  VIEW_DATASET_MESSAGE,
+  SELECT_TABLE_TITLE,
+  NO_COLUMNS_TITLE,
+  NO_COLUMNS_DESCRIPTION,
+  ERROR_TITLE,
+  ERROR_DESCRIPTION,
+} from './MessageContent';
+
+jest.mock(
+  'src/components/Icons/Icon',
+  () =>
+    ({ fileName }: { fileName: string }) =>
+      <span role="img" aria-label={fileName.replace('_', '-')} />,
+);
 
 describe('DatasetPanel', () => {
   it('renders a blank state DatasetPanel', () => {
-    render(<DatasetPanel />);
+    render(<DatasetPanel hasError={false} columnList={[]} loading={false} />);
 
     const blankDatasetImg = screen.getByRole('img', { name: /empty/i });
-    const blankDatasetTitle = screen.getByText(/select dataset source/i);
-    const blankDatasetDescription = screen.getByText(
-      /datasets can be created from database tables or sql queries\. select a database table to the left or to open sql lab\. from there you can save the query as a dataset\./i,
-    );
+    expect(blankDatasetImg).toBeVisible();
+    const blankDatasetTitle = screen.getByText(SELECT_TABLE_TITLE);
+    expect(blankDatasetTitle).toBeVisible();
+    const blankDatasetDescription1 = screen.getByText(SELECT_MESSAGE, {
+      exact: false,
+    });
+    expect(blankDatasetDescription1).toBeVisible();
+    const blankDatasetDescription2 = screen.getByText(VIEW_DATASET_MESSAGE, {
+      exact: false,
+    });
+    expect(blankDatasetDescription2).toBeVisible();
     const sqlLabLink = screen.getByRole('button', {
-      name: /create dataset from sql query/i,
+      name: CREATE_MESSAGE,
     });
+    expect(sqlLabLink).toBeVisible();
+  });
+
+  it('renders a no columns screen', () => {
+    render(
+      <DatasetPanel
+        tableName="Name"
+        hasError={false}
+        columnList={[]}
+        loading={false}
+      />,
+    );
 
+    const blankDatasetImg = screen.getByRole('img', { name: /empty/i });
     expect(blankDatasetImg).toBeVisible();
+    const noColumnsTitle = screen.getByText(NO_COLUMNS_TITLE);
+    expect(noColumnsTitle).toBeVisible();
+    const noColumnsDescription = screen.getByText(NO_COLUMNS_DESCRIPTION);
+    expect(noColumnsDescription).toBeVisible();
+  });
+
+  it('renders a loading screen', () => {
+    render(
+      <DatasetPanel
+        tableName="Name"
+        hasError={false}
+        columnList={[]}
+        loading
+      />,
+    );
+
+    const blankDatasetImg = screen.getByAltText(ALT_LOADING);
+    expect(blankDatasetImg).toBeVisible();
+    const blankDatasetTitle = screen.getByText(REFRESHING);
     expect(blankDatasetTitle).toBeVisible();
-    expect(blankDatasetDescription).toBeVisible();
-    expect(sqlLabLink).toBeVisible();
+  });
+
+  it('renders an error screen', () => {
+    render(
+      <DatasetPanel
+        tableName="Name"
+        hasError
+        columnList={[]}
+        loading={false}
+      />,
+    );
+
+    const errorTitle = screen.getByText(ERROR_TITLE);
+    expect(errorTitle).toBeVisible();
+    const errorDescription = screen.getByText(ERROR_DESCRIPTION);
+    expect(errorDescription).toBeVisible();
+  });
+
+  it('renders a table with columns displayed', async () => {
+    const tableName = 'example_name';
+    render(
+      <DatasetPanel
+        tableName={tableName}
+        hasError={false}
+        columnList={exampleColumns}
+        loading={false}
+      />,
+    );
+    expect(await screen.findByText(tableName)).toBeVisible();
+    expect(screen.getByText(COLUMN_TITLE)).toBeVisible();
+    expect(
+      screen.getByText(tableColumnDefinition[0].title as string),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(tableColumnDefinition[1].title as string),
+    ).toBeInTheDocument();
+    exampleColumns.forEach(row => {
+      expect(screen.getByText(row.name)).toBeInTheDocument();
+      expect(screen.getByText(row.type)).toBeInTheDocument();
+    });
   });
 });