fix: Dataset creation header is now uneditable and holds proper default values (#21557)
Co-authored-by: AAfghahi <arash.afghahi@gmail.com>
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 f20c5ae..25e7e9c 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 @@
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 d4058d8..edeeac4 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(<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 @@
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');
});
});
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 b4cf81d..7c1e4f5 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 @@
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 @@
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'),
};
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 bcc7a4a..bb497da 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 @@
interface LeftPanelProps {
setDataset: Dispatch<SetStateAction<object>>;
- 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 5500d5d..032a943 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 @@
>(datasetReducer, null);
const HeaderComponent = () => (
- <Header setDataset={setDataset} datasetName={dataset?.dataset_name ?? ''} />
+ <Header setDataset={setDataset} title={dataset?.table_name} />
);
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 42dc3a9..2173f83 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 @@
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 () => {
