From 04b7a26365edac524cbeb7336bd64898cdf52835 Mon Sep 17 00:00:00 2001
From: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com>
Date: Mon, 5 Dec 2022 15:43:54 -0600
Subject: [PATCH] feat: Flow for tables that already have a dataset (#22136)

---
 .../DatasetPanel/DatasetPanel.test.tsx        |  31 ++-
 .../AddDataset/DatasetPanel/DatasetPanel.tsx  | 201 +++++++++++++-----
 .../AddDataset/DatasetPanel/fixtures.ts       |  14 ++
 .../dataset/AddDataset/DatasetPanel/index.tsx |   6 +-
 .../dataset/AddDataset/Footer/Footer.test.tsx |  16 +-
 .../data/dataset/AddDataset/Footer/index.tsx  |  12 +-
 .../AddDataset/LeftPanel/LeftPanel.test.tsx   |  45 ++++
 .../dataset/AddDataset/LeftPanel/index.tsx    |  67 ++++--
 .../CRUD/data/dataset/AddDataset/index.tsx    |  44 +++-
 .../CRUD/data/dataset/AddDataset/types.tsx    |   1 +
 .../src/views/CRUD/data/dataset/styles.ts     |   1 +
 .../src/views/CRUD/data/hooks.ts              |  10 +
 12 files changed, 366 insertions(+), 82 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/DatasetPanel.test.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/DatasetPanel.test.tsx
index 6800594bd8eb..4b066eb30b29 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/DatasetPanel.test.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/DatasetPanel.test.tsx
@@ -24,7 +24,7 @@ import DatasetPanel, {
   tableColumnDefinition,
   COLUMN_TITLE,
 } from './DatasetPanel';
-import { exampleColumns } from './fixtures';
+import { exampleColumns, exampleDataset } from './fixtures';
 import {
   SELECT_MESSAGE,
   CREATE_MESSAGE,
@@ -44,7 +44,7 @@ jest.mock(
 );
 
 describe('DatasetPanel', () => {
-  it('renders a blank state DatasetPanel', () => {
+  test('renders a blank state DatasetPanel', () => {
     render(<DatasetPanel hasError={false} columnList={[]} loading={false} />);
 
     const blankDatasetImg = screen.getByRole('img', { name: /empty/i });
@@ -65,7 +65,7 @@ describe('DatasetPanel', () => {
     expect(sqlLabLink).toBeVisible();
   });
 
-  it('renders a no columns screen', () => {
+  test('renders a no columns screen', () => {
     render(
       <DatasetPanel
         tableName="Name"
@@ -83,7 +83,7 @@ describe('DatasetPanel', () => {
     expect(noColumnsDescription).toBeVisible();
   });
 
-  it('renders a loading screen', () => {
+  test('renders a loading screen', () => {
     render(
       <DatasetPanel
         tableName="Name"
@@ -99,7 +99,7 @@ describe('DatasetPanel', () => {
     expect(blankDatasetTitle).toBeVisible();
   });
 
-  it('renders an error screen', () => {
+  test('renders an error screen', () => {
     render(
       <DatasetPanel
         tableName="Name"
@@ -115,7 +115,7 @@ describe('DatasetPanel', () => {
     expect(errorDescription).toBeVisible();
   });
 
-  it('renders a table with columns displayed', async () => {
+  test('renders a table with columns displayed', async () => {
     const tableName = 'example_name';
     render(
       <DatasetPanel
@@ -138,4 +138,23 @@ describe('DatasetPanel', () => {
       expect(screen.getByText(row.type)).toBeInTheDocument();
     });
   });
+
+  test('renders an info banner if table already has a dataset', async () => {
+    render(
+      <DatasetPanel
+        tableName="example_table"
+        hasError={false}
+        columnList={exampleColumns}
+        loading={false}
+        datasets={exampleDataset}
+      />,
+    );
+
+    // This is text in the info banner
+    expect(
+      await screen.findByText(
+        /this table already has a dataset associated with it. you can only associate one dataset with a table./i,
+      ),
+    ).toBeVisible();
+  });
 });
diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/DatasetPanel.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/DatasetPanel.tsx
index 2a5e12cea888..b8d0a469411f 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/DatasetPanel.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/DatasetPanel.tsx
@@ -17,12 +17,14 @@
  * under the License.
  */
 import React from 'react';
-import { supersetTheme, t, styled } from '@superset-ui/core';
+import { t, styled, useTheme } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
+import Alert from 'src/components/Alert';
 import Table, { ColumnsType, TableSize } from 'src/components/Table';
 import { alphabeticalSort } from 'src/components/Table/sorters';
 // @ts-ignore
 import LOADING_GIF from 'src/assets/images/loading.gif';
+import { DatasetObject } from 'src/views/CRUD/data/dataset/AddDataset/types';
 import { ITableColumn } from './types';
 import MessageContent from './MessageContent';
 
@@ -53,43 +55,56 @@ const HALF = 0.5;
 const MARGIN_MULTIPLIER = 3;
 
 const StyledHeader = styled.div<StyledHeaderProps>`
+  ${({ theme }) => `
   position: ${(props: StyledHeaderProps) => props.position};
-  margin: ${({ theme }) => theme.gridUnit * MARGIN_MULTIPLIER}px;
-  margin-top: ${({ theme }) => theme.gridUnit * (MARGIN_MULTIPLIER + 1)}px;
-  font-size: ${({ theme }) => theme.gridUnit * 6}px;
-  font-weight: ${({ theme }) => theme.typography.weights.medium};
-  padding-bottom: ${({ theme }) => theme.gridUnit * MARGIN_MULTIPLIER}px;
+  margin: ${theme.gridUnit * (MARGIN_MULTIPLIER + 1)}px
+    ${theme.gridUnit * MARGIN_MULTIPLIER}px
+    ${theme.gridUnit * MARGIN_MULTIPLIER}px
+    ${theme.gridUnit * (MARGIN_MULTIPLIER + 3)}px;
+  font-size: ${theme.gridUnit * 6}px;
+  font-weight: ${theme.typography.weights.medium};
+  padding-bottom: ${theme.gridUnit * MARGIN_MULTIPLIER}px;
 
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 
   .anticon:first-of-type {
-    margin-right: ${({ theme }) => theme.gridUnit * (MARGIN_MULTIPLIER + 1)}px;
+    margin-right: ${theme.gridUnit * (MARGIN_MULTIPLIER + 1)}px;
   }
 
   .anticon:nth-of-type(2) {
-    margin-left: ${({ theme }) => theme.gridUnit * (MARGIN_MULTIPLIER + 1)}px;
-  }
+    margin-left: ${theme.gridUnit * (MARGIN_MULTIPLIER + 1)}px;
+  `}
 `;
 
 const StyledTitle = styled.div`
-  margin-left: ${({ theme }) => theme.gridUnit * MARGIN_MULTIPLIER}px;
-  margin-bottom: ${({ theme }) => theme.gridUnit * MARGIN_MULTIPLIER}px;
-  font-weight: ${({ theme }) => theme.typography.weights.bold};
+  ${({ theme }) => `
+  margin-left: ${theme.gridUnit * (MARGIN_MULTIPLIER + 3)}px;
+  margin-bottom: ${theme.gridUnit * MARGIN_MULTIPLIER}px;
+  font-weight: ${theme.typography.weights.bold};
+  `}
 `;
 
 const LoaderContainer = styled.div`
-  padding: ${({ theme }) => theme.gridUnit * 8}px
-    ${({ theme }) => theme.gridUnit * 6}px;
-
+  ${({ theme }) => `
+  padding: ${theme.gridUnit * 8}px
+    ${theme.gridUnit * 6}px;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  `}
 `;
 
 const StyledLoader = styled.div`
+  ${({ theme }) => `
   max-width: 50%;
   width: ${LOADER_WIDTH}px;
 
@@ -100,19 +115,23 @@ const StyledLoader = styled.div`
 
   div {
     width: 100%;
-    margin-top: ${({ theme }) => theme.gridUnit * MARGIN_MULTIPLIER}px;
+    margin-top: ${theme.gridUnit * MARGIN_MULTIPLIER}px;
     text-align: center;
-    font-weight: ${({ theme }) => theme.typography.weights.normal};
-    font-size: ${({ theme }) => theme.typography.sizes.l}px;
-    color: ${({ theme }) => theme.colors.grayscale.light1};
+    font-weight: ${theme.typography.weights.normal};
+    font-size: ${theme.typography.sizes.l}px;
+    color: ${theme.colors.grayscale.light1};
   }
+  `}
 `;
 
 const TableContainer = styled.div`
+  ${({ theme }) => `
   position: relative;
-  margin: ${({ theme }) => theme.gridUnit * MARGIN_MULTIPLIER}px;
+  margin: ${theme.gridUnit * MARGIN_MULTIPLIER}px;
+  margin-left: ${theme.gridUnit * (MARGIN_MULTIPLIER + 3)}px;
   overflow: scroll;
-  height: calc(100% - ${({ theme }) => theme.gridUnit * 36}px);
+  height: calc(100% - ${theme.gridUnit * 36}px);
+  `}
 `;
 
 const StyledTable = styled(Table)`
@@ -123,6 +142,26 @@ const StyledTable = styled(Table)`
   right: 0;
 `;
 
+const StyledAlert = styled(Alert)`
+  ${({ theme }) => `
+  border: 1px solid ${theme.colors.info.base};
+  padding: ${theme.gridUnit * 4}px;
+  margin: ${theme.gridUnit * 6}px ${theme.gridUnit * 6}px
+    ${theme.gridUnit * 8}px;
+  .view-dataset-button {
+    position: absolute;
+    top: ${theme.gridUnit * 4}px;
+    right: ${theme.gridUnit * 4}px;
+    font-weight: ${theme.typography.weights.normal};
+
+    &:hover {
+      color: ${theme.colors.secondary.dark3};
+      text-decoration: underline;
+    }
+  }
+  `}
+`;
+
 export const REFRESHING = t('Refreshing columns');
 export const COLUMN_TITLE = t('Table columns');
 export const ALT_LOADING = t('Loading');
@@ -168,19 +207,57 @@ export interface IDatasetPanelProps {
    * Boolean indicating if the component is in a loading state
    */
   loading: boolean;
+  datasets?: DatasetObject[] | undefined;
 }
 
+const EXISTING_DATASET_DESCRIPTION = t(
+  'This table already has a dataset associated with it. You can only associate one dataset with a table.\n',
+);
+const VIEW_DATASET = t('View Dataset');
+
+const renderExistingDatasetAlert = (dataset?: DatasetObject) => (
+  <StyledAlert
+    closable={false}
+    type="info"
+    showIcon
+    message={t('This table already has a dataset')}
+    description={
+      <>
+        {EXISTING_DATASET_DESCRIPTION}
+        <span
+          role="button"
+          onClick={() => {
+            window.open(
+              dataset?.explore_url,
+              '_blank',
+              'noreferrer noopener popup=false',
+            );
+          }}
+          tabIndex={0}
+          className="view-dataset-button"
+        >
+          {VIEW_DATASET}
+        </span>
+      </>
+    }
+  />
+);
+
 const DatasetPanel = ({
   tableName,
   columnList,
   loading,
   hasError,
+  datasets,
 }: IDatasetPanelProps) => {
+  const theme = useTheme();
   const hasColumns = columnList?.length > 0 ?? false;
+  const datasetNames = datasets?.map(dataset => dataset.table_name);
 
   let component;
+  let loader;
   if (loading) {
-    component = (
+    loader = (
       <LoaderContainer>
         <StyledLoader>
           <img alt={ALT_LOADING} src={LOADING_GIF} />
@@ -188,48 +265,58 @@ const DatasetPanel = ({
         </StyledLoader>
       </LoaderContainer>
     );
-  } else if (tableName && hasColumns && !hasError) {
-    component = (
-      <>
-        <StyledTitle>{COLUMN_TITLE}</StyledTitle>
-        <TableContainer>
-          <StyledTable
-            loading={loading}
-            size={TableSize.SMALL}
-            columns={tableColumnDefinition}
-            data={columnList}
-            pageSizeOptions={pageSizeOptions}
-            defaultPageSize={10}
-          />
-        </TableContainer>
-      </>
-    );
-  } else {
-    component = (
-      <MessageContent
-        hasColumns={hasColumns}
-        hasError={hasError}
-        tableName={tableName}
-      />
-    );
+  }
+  if (!loading) {
+    if (!loading && tableName && hasColumns && !hasError) {
+      component = (
+        <>
+          <StyledTitle>{COLUMN_TITLE}</StyledTitle>
+          <TableContainer>
+            <StyledTable
+              loading={loading}
+              size={TableSize.SMALL}
+              columns={tableColumnDefinition}
+              data={columnList}
+              pageSizeOptions={pageSizeOptions}
+              defaultPageSize={10}
+            />
+          </TableContainer>
+        </>
+      );
+    } else {
+      component = (
+        <MessageContent
+          hasColumns={hasColumns}
+          hasError={hasError}
+          tableName={tableName}
+        />
+      );
+    }
   }
 
   return (
     <>
       {tableName && (
-        <StyledHeader
-          position={
-            !loading && hasColumns ? EPosition.RELATIVE : EPosition.ABSOLUTE
-          }
-          title={tableName || ''}
-        >
-          {tableName && (
-            <Icons.Table iconColor={supersetTheme.colors.grayscale.base} />
-          )}
-          {tableName}
-        </StyledHeader>
+        <>
+          {datasetNames?.includes(tableName) &&
+            renderExistingDatasetAlert(
+              datasets?.find(dataset => dataset.table_name === tableName),
+            )}
+          <StyledHeader
+            position={
+              !loading && hasColumns ? EPosition.RELATIVE : EPosition.ABSOLUTE
+            }
+            title={tableName || ''}
+          >
+            {tableName && (
+              <Icons.Table iconColor={theme.colors.grayscale.base} />
+            )}
+            {tableName}
+          </StyledHeader>
+        </>
       )}
       {component}
+      {loader}
     </>
   );
 };
diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/fixtures.ts b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/fixtures.ts
index 2199190c9906..d3ee58da14b9 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/fixtures.ts
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/DatasetPanel/fixtures.ts
@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { DatasetObject } from 'src/views/CRUD/data/dataset/AddDataset/types';
 import { ITableColumn } from './types';
 
 export const exampleColumns: ITableColumn[] = [
@@ -32,3 +33,16 @@ export const exampleColumns: ITableColumn[] = [
     type: 'DATE',
   },
 ];
+
+export const exampleDataset: DatasetObject[] = [
+  {
+    db: {
+      id: 1,
+      database_name: 'test_database',
+      owners: [1],
+    },
+    schema: 'test_schema',
+    dataset_name: 'example_dataset',
+    table_name: 'example_table',
+  },
+];
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 e390c781fd2e..15e6225e5612 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
@@ -18,6 +18,7 @@
  */
 import React, { useEffect, useState, useRef } from 'react';
 import { SupersetClient } from '@superset-ui/core';
+import { DatasetObject } from 'src/views/CRUD/data/dataset/AddDataset/types';
 import DatasetPanel from './DatasetPanel';
 import { ITableColumn, IDatabaseTable, isIDatabaseTable } from './types';
 
@@ -53,6 +54,7 @@ export interface IDatasetPanelWrapperProps {
    */
   schema?: string | null;
   setHasColumns?: Function;
+  datasets?: DatasetObject[] | undefined;
 }
 
 const DatasetPanelWrapper = ({
@@ -60,6 +62,7 @@ const DatasetPanelWrapper = ({
   dbId,
   schema,
   setHasColumns,
+  datasets,
 }: IDatasetPanelWrapperProps) => {
   const [columnList, setColumnList] = useState<ITableColumn[]>([]);
   const [loading, setLoading] = useState(false);
@@ -110,7 +113,7 @@ const DatasetPanelWrapper = ({
     if (tableName && schema && dbId) {
       getTableMetadata({ tableName, dbId, schema });
     }
-    // getTableMetadata is a const and should not be independency array
+    // getTableMetadata is a const and should not be in dependency array
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tableName, dbId, schema]);
 
@@ -120,6 +123,7 @@ const DatasetPanelWrapper = ({
       hasError={hasError}
       loading={loading}
       tableName={tableName}
+      datasets={datasets}
     />
   );
 };
diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Footer/Footer.test.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Footer/Footer.test.tsx
index bb51c4de8644..8fcbd83b15cc 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Footer/Footer.test.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Footer/Footer.test.tsx
@@ -40,7 +40,7 @@ const mockPropsWithDataset = {
 };
 
 describe('Footer', () => {
-  it('renders a Footer with a cancel button and a disabled create button', () => {
+  test('renders a Footer with a cancel button and a disabled create button', () => {
     render(<Footer {...mockedProps} />, { useRedux: true });
 
     const saveButton = screen.getByRole('button', {
@@ -55,7 +55,7 @@ describe('Footer', () => {
     expect(createButton).toBeDisabled();
   });
 
-  it('renders a Create Dataset button when a table is selected', () => {
+  test('renders a Create Dataset button when a table is selected', () => {
     render(<Footer {...mockPropsWithDataset} />, { useRedux: true });
 
     const createButton = screen.getByRole('button', {
@@ -64,4 +64,16 @@ describe('Footer', () => {
 
     expect(createButton).toBeEnabled();
   });
+
+  test('create button becomes disabled when table already has a dataset', () => {
+    render(<Footer datasets={['real_info']} {...mockPropsWithDataset} />, {
+      useRedux: true,
+    });
+
+    const createButton = screen.getByRole('button', {
+      name: /Create/i,
+    });
+
+    expect(createButton).toBeDisabled();
+  });
 });
diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Footer/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Footer/index.tsx
index 7e08f3b9dfcc..8fa4d6976fb4 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Footer/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Footer/index.tsx
@@ -37,6 +37,7 @@ interface FooterProps {
   datasetObject?: Partial<DatasetObject> | null;
   onDatasetAdd?: (dataset: DatasetObject) => void;
   hasColumns?: boolean;
+  datasets?: (string | null | undefined)[] | undefined;
 }
 
 const INPUT_FIELDS = ['db', 'schema', 'table_name'];
@@ -52,6 +53,7 @@ function Footer({
   datasetObject,
   addDangerToast,
   hasColumns = false,
+  datasets,
 }: FooterProps) {
   const { createResource } = useSingleViewResource<Partial<DatasetObject>>(
     'dataset',
@@ -108,16 +110,22 @@ function Footer({
     }
   };
 
+  const CREATE_DATASET_TEXT = t('Create Dataset');
+  const disabledCheck =
+    !datasetObject?.table_name ||
+    !hasColumns ||
+    datasets?.includes(datasetObject?.table_name);
+
   return (
     <>
       <Button onClick={cancelButtonOnClick}>Cancel</Button>
       <Button
         buttonStyle="primary"
-        disabled={!datasetObject?.table_name || !hasColumns}
+        disabled={disabledCheck}
         tooltip={!datasetObject?.table_name ? tooltipText : undefined}
         onClick={onSave}
       >
-        {t('Create Dataset')}
+        {CREATE_DATASET_TEXT}
       </Button>
     </>
   );
diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx
index 3b2ef18181bc..7457f0c25095 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/LeftPanel.test.tsx
@@ -209,6 +209,7 @@ test('searches for a table name', async () => {
     useRedux: true,
   });
 
+  // Click 'test-postgres' database to access schemas
   const databaseSelect = screen.getByRole('combobox', {
     name: /select database or type database name/i,
   });
@@ -221,6 +222,7 @@ test('searches for a table name', async () => {
 
   await waitFor(() => expect(schemaSelect).toBeEnabled());
 
+  // Click 'public' schema to access tables
   userEvent.click(schemaSelect);
   userEvent.click(screen.getAllByText('public')[1]);
 
@@ -238,3 +240,46 @@ test('searches for a table name', async () => {
     expect(screen.queryByText('Sheet3')).not.toBeInTheDocument();
   });
 });
+
+test('renders a warning icon when a table name has a pre-existing dataset', async () => {
+  render(
+    <LeftPanel
+      setDataset={mockFun}
+      schema="schema_a"
+      dbId={1}
+      datasets={['Sheet2']}
+    />,
+    {
+      useRedux: true,
+    },
+  );
+
+  // Click 'test-postgres' database to access schemas
+  const databaseSelect = screen.getByRole('combobox', {
+    name: /select database or type database name/i,
+  });
+  userEvent.click(databaseSelect);
+  userEvent.click(await screen.findByText('test-postgres'));
+
+  const schemaSelect = screen.getByRole('combobox', {
+    name: /select schema or type schema name/i,
+  });
+
+  await waitFor(() => expect(schemaSelect).toBeEnabled());
+
+  // Warning icon should not show yet
+  expect(
+    screen.queryByRole('img', { name: 'warning' }),
+  ).not.toBeInTheDocument();
+
+  // Click 'public' schema to access tables
+  userEvent.click(schemaSelect);
+  userEvent.click(screen.getAllByText('public')[1]);
+
+  await waitFor(() => {
+    expect(screen.getByText('Sheet2')).toBeInTheDocument();
+  });
+
+  // Sheet2 should now show the warning icon
+  expect(screen.getByRole('img', { name: 'warning' })).toBeVisible();
+});
diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx
index 0a5e6ad2980a..05ec47b4c0c7 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx
@@ -17,7 +17,14 @@
  * under the License.
  */
 import React, { useEffect, useState, SetStateAction, Dispatch } from 'react';
-import { SupersetClient, t, styled } from '@superset-ui/core';
+import {
+  SupersetClient,
+  t,
+  styled,
+  css,
+  useTheme,
+  logging,
+} from '@superset-ui/core';
 import { Input } from 'src/components/Input';
 import { Form } from 'src/components/Form';
 import Icons from 'src/components/Icons';
@@ -36,6 +43,7 @@ interface LeftPanelProps {
   setDataset: Dispatch<SetStateAction<object>>;
   schema?: string | null | undefined;
   dbId?: number;
+  datasets?: (string | null | undefined)[] | undefined;
 }
 
 const SearchIcon = styled(Icons.Search)`
@@ -78,6 +86,7 @@ const LeftPanelStyle = styled.div`
       top: ${theme.gridUnit * 92.25}px;
       left: ${theme.gridUnit * 3.25}px;
       right: 0;
+
       .options {
         cursor: pointer;
         padding: ${theme.gridUnit * 1.75}px;
@@ -86,6 +95,7 @@ const LeftPanelStyle = styled.div`
           background-color: ${theme.colors.grayscale.light4}
         }
       }
+
       .options-highlighted {
         cursor: pointer;
         padding: ${theme.gridUnit * 1.75}px;
@@ -93,6 +103,12 @@ const LeftPanelStyle = styled.div`
         background-color: ${theme.colors.primary.dark1};
         color: ${theme.colors.grayscale.light5};
       }
+
+      .options, .options-highlighted {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
     }
     form > span[aria-label="refresh"] {
       position: absolute;
@@ -124,7 +140,10 @@ export default function LeftPanel({
   setDataset,
   schema,
   dbId,
+  datasets,
 }: LeftPanelProps) {
+  const theme = useTheme();
+
   const [tableOptions, setTableOptions] = useState<Array<TableOption>>([]);
   const [resetTables, setResetTables] = useState(false);
   const [loadTables, setLoadTables] = useState(false);
@@ -166,9 +185,9 @@ export default function LeftPanel({
         setResetTables(false);
         setRefresh(false);
       })
-      .catch(e => {
-        console.log('error', e);
-      });
+      .catch(error =>
+        logging.error('There was an error fetching tables', error),
+      );
   };
 
   const setSchema = (schema: string) => {
@@ -212,21 +231,32 @@ export default function LeftPanel({
     </div>
   );
 
+  const SELECT_DATABASE_AND_SCHEMA_TEXT = t('Select database & schema');
+  const TABLE_LOADING_TEXT = t('Table loading');
+  const NO_TABLES_FOUND_TITLE = t('No database tables found');
+  const NO_TABLES_FOUND_DESCRIPTION = t('Try selecting a different schema');
+  const SELECT_DATABASE_TABLE_TEXT = t('Select database table');
+  const REFRESH_TABLE_LIST_TOOLTIP = t('Refresh table list');
+  const REFRESH_TABLES_TEXT = t('Refresh tables');
+  const SEARCH_TABLES_PLACEHOLDER_TEXT = t('Search tables');
+
   return (
     <LeftPanelStyle>
-      <p className="section-title db-schema">Select database & schema</p>
+      <p className="section-title db-schema">
+        {SELECT_DATABASE_AND_SCHEMA_TEXT}
+      </p>
       <DatabaseSelector
         handleError={addDangerToast}
         onDbChange={setDatabase}
         onSchemaChange={setSchema}
       />
-      {loadTables && !refresh && Loader('Table loading')}
+      {loadTables && !refresh && Loader(TABLE_LOADING_TEXT)}
       {schema && !loadTables && !tableOptions.length && !searchVal && (
         <div className="emptystate">
           <EmptyStateMedium
             image="empty-table.svg"
-            title={t('No database tables found')}
-            description={t('Try selecting a different schema')}
+            title={NO_TABLES_FOUND_TITLE}
+            description={NO_TABLES_FOUND_DESCRIPTION}
           />
         </div>
       )}
@@ -234,15 +264,15 @@ export default function LeftPanel({
       {schema && (tableOptions.length > 0 || searchVal.length > 0) && (
         <>
           <Form>
-            <p className="table-title">Select database table</p>
+            <p className="table-title">{SELECT_DATABASE_TABLE_TEXT}</p>
             <RefreshLabel
               onClick={() => {
                 setLoadTables(true);
                 setRefresh(true);
               }}
-              tooltipContent={t('Refresh table list')}
+              tooltipContent={REFRESH_TABLE_LIST_TOOLTIP}
             />
-            {refresh && Loader('Refresh tables')}
+            {refresh && Loader(REFRESH_TABLES_TEXT)}
             {!refresh && (
               <Input
                 value={searchVal}
@@ -251,7 +281,7 @@ export default function LeftPanel({
                   setSearchVal(evt.target.value);
                 }}
                 className="table-form"
-                placeholder={t('Search tables')}
+                placeholder={SEARCH_TABLES_PLACEHOLDER_TEXT}
                 allowClear
               />
             )}
@@ -269,6 +299,19 @@ export default function LeftPanel({
                   onClick={() => setTable(option.value, i)}
                 >
                   {option.label}
+                  {datasets?.includes(option.value) && (
+                    <Icons.Warning
+                      iconColor={
+                        selectedTable === i
+                          ? theme.colors.grayscale.light5
+                          : theme.colors.info.base
+                      }
+                      iconSize="m"
+                      css={css`
+                        margin-right: ${theme.gridUnit * 6}px;
+                      `}
+                    />
+                  )}
                 </div>
               ))}
           </div>
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 9696c4515604..e4dbaa9a699d 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/index.tsx
@@ -16,7 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useReducer, Reducer, useState } from 'react';
+import React, { useReducer, Reducer, useEffect, useState } from 'react';
+import { logging } from '@superset-ui/core';
+import { UseGetDatasetsList } from 'src/views/CRUD/data/hooks';
+import rison from 'rison';
 import Header from './Header';
 import DatasetPanel from './DatasetPanel';
 import LeftPanel from './LeftPanel';
@@ -73,6 +76,36 @@ export default function AddDataset() {
     Reducer<Partial<DatasetObject> | null, DSReducerActionType>
   >(datasetReducer, null);
   const [hasColumns, setHasColumns] = useState(false);
+  const [datasets, setDatasets] = useState<DatasetObject[]>([]);
+  const datasetNames = datasets.map(dataset => dataset.table_name);
+  const encodedSchema = dataset?.schema
+    ? encodeURIComponent(dataset?.schema)
+    : undefined;
+
+  const queryParams = dataset?.schema
+    ? rison.encode_uri({
+        filters: [
+          { col: 'schema', opr: 'eq', value: encodedSchema },
+          { col: 'sql', opr: 'dataset_is_null_or_empty', value: '!t' },
+        ],
+      })
+    : undefined;
+
+  const getDatasetsList = async () => {
+    await UseGetDatasetsList(queryParams)
+      .then(json => {
+        setDatasets(json?.result);
+      })
+      .catch(error =>
+        logging.error('There was an error fetching dataset', error),
+      );
+  };
+
+  useEffect(() => {
+    if (dataset?.schema) {
+      getDatasetsList();
+    }
+  }, [dataset?.schema]);
 
   const HeaderComponent = () => (
     <Header setDataset={setDataset} title={dataset?.table_name} />
@@ -83,6 +116,7 @@ export default function AddDataset() {
       setDataset={setDataset}
       schema={dataset?.schema}
       dbId={dataset?.db?.id}
+      datasets={datasetNames}
     />
   );
 
@@ -92,11 +126,17 @@ export default function AddDataset() {
       dbId={dataset?.db?.id}
       schema={dataset?.schema}
       setHasColumns={setHasColumns}
+      datasets={datasets}
     />
   );
 
   const FooterComponent = () => (
-    <Footer url={prevUrl} datasetObject={dataset} hasColumns={hasColumns} />
+    <Footer
+      url={prevUrl}
+      datasetObject={dataset}
+      hasColumns={hasColumns}
+      datasets={datasetNames}
+    />
   );
 
   return (
diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/types.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/types.tsx
index 2451ea9028bb..dbeef93ead7b 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/types.tsx
+++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/types.tsx
@@ -32,6 +32,7 @@ export interface DatasetObject {
   schema?: string | null;
   dataset_name: string;
   table_name?: string | null;
+  explore_url?: string;
 }
 
 export interface DatasetReducerPayloadType {
diff --git a/superset-frontend/src/views/CRUD/data/dataset/styles.ts b/superset-frontend/src/views/CRUD/data/dataset/styles.ts
index 82461a62f37d..3bc60b72e9cf 100644
--- a/superset-frontend/src/views/CRUD/data/dataset/styles.ts
+++ b/superset-frontend/src/views/CRUD/data/dataset/styles.ts
@@ -82,6 +82,7 @@ export const StyledLayoutLeftPanel = styled.div`
 
 export const StyledLayoutDatasetPanel = styled.div`
   width: 100%;
+  position: relative;
 `;
 
 export const StyledLayoutRightPanel = styled.div`
diff --git a/superset-frontend/src/views/CRUD/data/hooks.ts b/superset-frontend/src/views/CRUD/data/hooks.ts
index 41b514591547..2f2bdd9a2cca 100644
--- a/superset-frontend/src/views/CRUD/data/hooks.ts
+++ b/superset-frontend/src/views/CRUD/data/hooks.ts
@@ -17,6 +17,7 @@
  * under the License.
  */
 import { useState, useEffect } from 'react';
+import { SupersetClient, logging } from '@superset-ui/core';
 
 type BaseQueryObject = {
   id: number;
@@ -73,3 +74,12 @@ export function useQueryPreviewState<D extends BaseQueryObject = any>({
     disableNext,
   };
 }
+
+export const UseGetDatasetsList = (queryParams: string | undefined) =>
+  SupersetClient.get({
+    endpoint: `/api/v1/dataset/?q=${queryParams}`,
+  })
+    .then(({ json }) => json)
+    .catch(error =>
+      logging.error('There was an error fetching dataset', error),
+    );