mirror of https://github.com/apache/superset.git
fix: Dataset creation header is now uneditable and holds proper default values (#21557)
Co-authored-by: AAfghahi <arash.afghahi@gmail.com>
This commit is contained in:
parent
b1bf25e98c
commit
df3b5a8305
|
@ -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
|
||||
|
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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'),
|
||||
};
|
||||
|
||||
|
|
|
@ -41,7 +41,7 @@ import { DatasetActionType } from '../types';
|
|||
|
||||
interface LeftPanelProps {
|
||||
setDataset: Dispatch<SetStateAction<object>>;
|
||||
schema?: string | undefined | null;
|
||||
schema?: string | null | undefined;
|
||||
dbId?: number;
|
||||
}
|
||||
|
||||
|
|
|
@ -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 = () => (
|
||||
|
|
|
@ -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 () => {
|
||||
|
|
Loading…
Reference in New Issue