fix: Dataset creation header is now uneditable and holds proper default values (#21557)

Co-authored-by: AAfghahi <arash.afghahi@gmail.com>

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

@@ -27,11 +27,7 @@ describe('AddDataset', () => {
     const blankeStateImgs = screen.getAllByRole('img', { name: /empty/i });
 
     // Header
-    expect(
-      await screen.findByRole('textbox', {
-        name: /dataset name/i,
-      }),
-    ).toBeVisible();
+    expect(await screen.findByTestId('editable-title')).toBeVisible();
     // Left panel
     expect(blankeStateImgs[0]).toBeVisible();
     // Footer

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

@@ -16,25 +16,22 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { render, screen, waitFor } from 'spec/helpers/testing-library';
-import Header from 'src/views/CRUD/data/dataset/AddDataset/Header';
+import Header, {
+  DEFAULT_TITLE,
+} from 'src/views/CRUD/data/dataset/AddDataset/Header';
 
 describe('Header', () => {
   const mockSetDataset = jest.fn();
 
-  const waitForRender = (datasetName: string) =>
-    waitFor(() =>
-      render(<Header setDataset={mockSetDataset} datasetName={datasetName} />),
-    );
+  const waitForRender = (props?: any) =>
+    waitFor(() => render(<Header setDataset={mockSetDataset} {...props} />));
 
-  it('renders a blank state Header', async () => {
-    await waitForRender('');
+  test('renders a blank state Header', async () => {
+    await waitForRender();
 
-    const datasetNameTextbox = screen.getByRole('textbox', {
-      name: /dataset name/i,
-    });
+    const datasetName = screen.getByTestId('editable-title');
     const saveButton = screen.getByRole('button', {
       name: /save save/i,
     });
@@ -42,38 +39,26 @@ describe('Header', () => {
       name: /menu actions trigger/i,
     });
 
-    expect(datasetNameTextbox).toBeVisible();
+    expect(datasetName).toBeVisible();
     expect(saveButton).toBeVisible();
     expect(saveButton).toBeDisabled();
     expect(menuButton).toBeVisible();
     expect(menuButton).toBeDisabled();
   });
 
-  it('updates display value of dataset name textbox when Header title is changed', async () => {
-    await waitForRender('');
+  test('displays "New dataset" when a table is not selected', async () => {
+    await waitForRender();
 
-    const datasetNameTextbox = screen.getByRole('textbox', {
-      name: /dataset name/i,
-    });
-
-    // Textbox should start with an empty display value and placeholder text
-    expect(datasetNameTextbox).toHaveDisplayValue('');
-    expect(
-      screen.getByPlaceholderText(/add the name of the dataset/i),
-    ).toBeVisible();
-
-    // Textbox should update its display value when user inputs a new value
-    userEvent.type(datasetNameTextbox, 'Test name');
-    expect(datasetNameTextbox).toHaveDisplayValue('Test name');
+    const datasetName = screen.getByTestId('editable-title');
+    expect(datasetName.innerHTML).toBe(DEFAULT_TITLE);
   });
 
-  it('passes an existing dataset title into the dataset name textbox', async () => {
-    await waitForRender('Existing Dataset Name');
+  test('displays table name when a table is selected', async () => {
+    // The schema and table name are passed in through props once selected
+    await waitForRender({ schema: 'testSchema', title: 'testTable' });
 
-    const datasetNameTextbox = screen.getByRole('textbox', {
-      name: /dataset name/i,
-    });
+    const datasetName = screen.getByTestId('editable-title');
 
-    expect(datasetNameTextbox).toHaveDisplayValue('Existing Dataset Name');
+    expect(datasetName.innerHTML).toBe('testTable');
   });
 });

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

@@ -32,6 +32,8 @@ import {
   DSReducerActionType,
 } from 'src/views/CRUD/data/dataset/AddDataset/types';
 
+export const DEFAULT_TITLE = t('New dataset');
+
 const tooltipProps: { text: string; placement: TooltipPlacement } = {
   text: t('Select a database table and create dataset'),
   placement: 'bottomRight',
@@ -59,21 +61,22 @@ const renderOverlay = () => (
 
 export default function Header({
   setDataset,
-  datasetName,
+  title = DEFAULT_TITLE,
 }: {
   setDataset: React.Dispatch<DSReducerActionType>;
-  datasetName: string;
+  title?: string | null | undefined;
+  schema?: string | null | undefined;
 }) {
   const editableTitleProps = {
-    title: datasetName,
-    placeholder: t('Add the name of the dataset'),
+    title: title ?? DEFAULT_TITLE,
+    placeholder: DEFAULT_TITLE,
     onSave: (newDatasetName: string) => {
       setDataset({
         type: DatasetActionType.changeDataset,
         payload: { name: 'dataset_name', value: newDatasetName },
       });
     },
-    canEdit: true,
+    canEdit: false,
     label: t('dataset name'),
   };
 

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

@@ -41,7 +41,7 @@ import { DatasetActionType } from '../types';
 
 interface LeftPanelProps {
   setDataset: Dispatch<SetStateAction<object>>;
-  schema?: string | undefined | null;
+  schema?: string | null | undefined;
   dbId?: number;
 }
 

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

@@ -71,7 +71,7 @@ export default function AddDataset() {
   >(datasetReducer, null);
 
   const HeaderComponent = () => (
-    <Header setDataset={setDataset} datasetName={dataset?.dataset_name ?? ''} />
+    <Header setDataset={setDataset} title={dataset?.table_name} />
   );
 
   const LeftPanelComponent = () => (

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

@@ -36,18 +36,12 @@ describe('DatasetLayout', () => {
   const mockSetDataset = jest.fn();
 
   const waitForRender = () =>
-    waitFor(() =>
-      render(<Header setDataset={mockSetDataset} datasetName="" />),
-    );
+    waitFor(() => render(<Header setDataset={mockSetDataset} />));
 
   it('renders a Header when passed in', async () => {
     await waitForRender();
 
-    expect(
-      screen.getByRole('textbox', {
-        name: /dataset name/i,
-      }),
-    ).toBeVisible();
+    expect(screen.getByTestId('editable-title')).toBeVisible();
   });
 
   it('renders a LeftPanel when passed in', async () => {