diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/AddDataset.test.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/AddDataset.test.tsx index f20c5ae5d1e41..25e7e9cd289ab 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/AddDataset.test.tsx +++ b/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 diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Header/Header.test.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Header/Header.test.tsx index d4058d8ca7bed..edeeac446e423 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Header/Header.test.tsx +++ b/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(
), - ); + const waitForRender = (props?: any) => + waitFor(() => render(
)); - 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(''); - - const datasetNameTextbox = screen.getByRole('textbox', { - name: /dataset name/i, - }); + test('displays "New dataset" when a table is not selected', async () => { + await waitForRender(); - // 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'); }); }); diff --git a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Header/index.tsx b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Header/index.tsx index b4cf81d03272c..7c1e4f51e6d2d 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/Header/index.tsx +++ b/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; - 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'), }; 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 bcc7a4a0dbba5..bb497da7c5a03 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 @@ -41,7 +41,7 @@ import { DatasetActionType } from '../types'; interface LeftPanelProps { setDataset: Dispatch>; - schema?: string | undefined | null; + schema?: string | null | undefined; dbId?: number; } 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 5500d5ded22f0..032a9437e25cb 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/AddDataset/index.tsx +++ b/superset-frontend/src/views/CRUD/data/dataset/AddDataset/index.tsx @@ -71,7 +71,7 @@ export default function AddDataset() { >(datasetReducer, null); const HeaderComponent = () => ( -
+
); const LeftPanelComponent = () => ( diff --git a/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout/DatasetLayout.test.tsx b/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout/DatasetLayout.test.tsx index 42dc3a994b451..2173f83fa0440 100644 --- a/superset-frontend/src/views/CRUD/data/dataset/DatasetLayout/DatasetLayout.test.tsx +++ b/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(
), - ); + waitFor(() => render(
)); 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 () => {