feat: Flow for tables that already have a dataset

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}
+        linkedDatasets={exampleDataset}
+      />,
+    );
+
+    // This is text in the info banner
+    expect(
+      await screen.findByText(
+        /you can only associate one dataset with one table. this table already has a dataset associated with it in preset./i,
+      ),
+    ).toBeVisible();
+  });
 });

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

@@ -19,10 +19,12 @@
 import React from 'react';
 import { supersetTheme, t, styled } 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';
 
@@ -54,8 +56,10 @@ const MARGIN_MULTIPLIER = 3;
 
 const StyledHeader = styled.div<StyledHeaderProps>`
   position: ${(props: StyledHeaderProps) => props.position};
-  margin: ${({ theme }) => theme.gridUnit * MARGIN_MULTIPLIER}px;
-  margin-top: ${({ theme }) => theme.gridUnit * (MARGIN_MULTIPLIER + 1)}px;
+  margin: ${({ theme }) => theme.gridUnit * (MARGIN_MULTIPLIER + 1)}px
+    ${({ theme }) => theme.gridUnit * MARGIN_MULTIPLIER}px
+    ${({ theme }) => theme.gridUnit * MARGIN_MULTIPLIER}px
+    ${({ theme }) => theme.gridUnit * (MARGIN_MULTIPLIER + 3)}px;
   font-size: ${({ theme }) => theme.gridUnit * 6}px;
   font-weight: ${({ theme }) => theme.typography.weights.medium};
   padding-bottom: ${({ theme }) => theme.gridUnit * MARGIN_MULTIPLIER}px;
@@ -74,7 +78,7 @@ const StyledHeader = styled.div<StyledHeaderProps>`
 `;
 
 const StyledTitle = styled.div`
-  margin-left: ${({ theme }) => theme.gridUnit * MARGIN_MULTIPLIER}px;
+  margin-left: ${({ theme }) => theme.gridUnit * (MARGIN_MULTIPLIER + 3)}px;
   margin-bottom: ${({ theme }) => theme.gridUnit * MARGIN_MULTIPLIER}px;
   font-weight: ${({ theme }) => theme.typography.weights.bold};
 `;
@@ -111,6 +115,7 @@ const StyledLoader = styled.div`
 const TableContainer = styled.div`
   position: relative;
   margin: ${({ theme }) => theme.gridUnit * MARGIN_MULTIPLIER}px;
+  margin-left: ${({ theme }) => theme.gridUnit * (MARGIN_MULTIPLIER + 3)}px;
   overflow: scroll;
   height: calc(100% - ${({ theme }) => theme.gridUnit * 36}px);
 `;
@@ -123,6 +128,24 @@ const StyledTable = styled(Table)`
   right: 0;
 `;
 
+const StyledAlert = styled(Alert)`
+  border: 1px solid ${supersetTheme.colors.info.base};
+  padding: ${supersetTheme.gridUnit * 4}px;
+  margin: ${supersetTheme.gridUnit * 6}px ${supersetTheme.gridUnit * 6}px
+    ${supersetTheme.gridUnit * 8}px;
+  .view-dataset-button {
+    position: absolute;
+    top: ${supersetTheme.gridUnit * 4}px;
+    right: ${supersetTheme.gridUnit * 4}px;
+    font-weight: ${supersetTheme.typography.weights.normal};
+
+    &:hover {
+      color: ${supersetTheme.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,15 +191,48 @@ export interface IDatasetPanelProps {
    * Boolean indicating if the component is in a loading state
    */
   loading: boolean;
+  linkedDatasets?: DatasetObject[] | undefined;
 }
 
+const renderExistingDatasetAlert = (linkedDataset: any) => (
+  <StyledAlert
+    closable={false}
+    type="info"
+    showIcon
+    message={t('This table already has a dataset')}
+    description={
+      <>
+        {t(
+          'You can only associate one dataset with one table. This table already has a dataset associated with it in Preset.\n',
+        )}
+        <span
+          role="button"
+          onClick={() => {
+            window.open(
+              linkedDataset.explore_url,
+              '_blank',
+              'noreferer noopener popup=false',
+            );
+          }}
+          tabIndex={0}
+          className="view-dataset-button"
+        >
+          {t('View Dataset')}
+        </span>
+      </>
+    }
+  />
+);
+
 const DatasetPanel = ({
   tableName,
   columnList,
   loading,
   hasError,
+  linkedDatasets,
 }: IDatasetPanelProps) => {
   const hasColumns = columnList?.length > 0 ?? false;
+  const linkedDatasetNames = linkedDatasets?.map(dataset => dataset.table_name);
 
   let component;
   if (loading) {
@@ -217,17 +273,23 @@ const DatasetPanel = ({
   return (
     <>
       {tableName && (
-        <StyledHeader
-          position={
-            !loading && hasColumns ? EPosition.RELATIVE : EPosition.ABSOLUTE
-          }
-          title={tableName || ''}
-        >
-          {tableName && (
-            <Icons.Table iconColor={supersetTheme.colors.grayscale.base} />
-          )}
-          {tableName}
-        </StyledHeader>
+        <>
+          {linkedDatasetNames?.includes(tableName) &&
+            renderExistingDatasetAlert(
+              linkedDatasets?.find(dataset => dataset.table_name === tableName),
+            )}
+          <StyledHeader
+            position={
+              !loading && hasColumns ? EPosition.RELATIVE : EPosition.ABSOLUTE
+            }
+            title={tableName || ''}
+          >
+            {tableName && (
+              <Icons.Table iconColor={supersetTheme.colors.grayscale.base} />
+            )}
+            {tableName}
+          </StyledHeader>
+        </>
       )}
       {component}
     </>

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',
+  },
+];

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,13 +54,15 @@ export interface IDatasetPanelWrapperProps {
    */
   schema?: string | null;
   setHasColumns?: Function;
+  linkedDatasets?: DatasetObject[] | undefined;
 }
 
 const DatasetPanelWrapper = ({
   tableName,
   dbId,
   schema,
   setHasColumns,
+  linkedDatasets,
 }: 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}
+      linkedDatasets={linkedDatasets}
     />
   );
 };

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,17 @@ describe('Footer', () => {
 
     expect(createButton).toBeEnabled();
   });
+
+  test('create button becomes disabled when table already has a dataset', () => {
+    render(
+      <Footer linkedDatasets={['real_info']} {...mockPropsWithDataset} />,
+      { useRedux: true },
+    );
+
+    const createButton = screen.getByRole('button', {
+      name: /Create/i,
+    });
+
+    expect(createButton).toBeDisabled();
+  });
 });

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;
+  linkedDatasets?: (string | null | undefined)[] | undefined;
 }
 
 const INPUT_FIELDS = ['db', 'schema', 'table_name'];
@@ -52,6 +53,7 @@ function Footer({
   datasetObject,
   addDangerToast,
   hasColumns = false,
+  linkedDatasets,
 }: FooterProps) {
   const { createResource } = useSingleViewResource<Partial<DatasetObject>>(
     'dataset',
@@ -113,7 +115,11 @@ function Footer({
       <Button onClick={cancelButtonOnClick}>Cancel</Button>
       <Button
         buttonStyle="primary"
-        disabled={!datasetObject?.table_name || !hasColumns}
+        disabled={
+          !datasetObject?.table_name ||
+          !hasColumns ||
+          linkedDatasets?.includes(datasetObject?.table_name)
+        }
         tooltip={!datasetObject?.table_name ? tooltipText : undefined}
         onClick={onSave}
       >