mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
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 });
|
const blankeStateImgs = screen.getAllByRole('img', { name: /empty/i });
|
||||||
|
|
||||||
// Header
|
// Header
|
||||||
expect(
|
expect(await screen.findByTestId('editable-title')).toBeVisible();
|
||||||
await screen.findByRole('textbox', {
|
|
||||||
name: /dataset name/i,
|
|
||||||
}),
|
|
||||||
).toBeVisible();
|
|
||||||
// Left panel
|
// Left panel
|
||||||
expect(blankeStateImgs[0]).toBeVisible();
|
expect(blankeStateImgs[0]).toBeVisible();
|
||||||
// Footer
|
// Footer
|
||||||
|
@ -16,25 +16,22 @@
|
|||||||
* specific language governing permissions and limitations
|
* specific language governing permissions and limitations
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import userEvent from '@testing-library/user-event';
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { render, screen, waitFor } from 'spec/helpers/testing-library';
|
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', () => {
|
describe('Header', () => {
|
||||||
const mockSetDataset = jest.fn();
|
const mockSetDataset = jest.fn();
|
||||||
|
|
||||||
const waitForRender = (datasetName: string) =>
|
const waitForRender = (props?: any) =>
|
||||||
waitFor(() =>
|
waitFor(() => render(<Header setDataset={mockSetDataset} {...props} />));
|
||||||
render(<Header setDataset={mockSetDataset} datasetName={datasetName} />),
|
|
||||||
);
|
|
||||||
|
|
||||||
it('renders a blank state Header', async () => {
|
test('renders a blank state Header', async () => {
|
||||||
await waitForRender('');
|
await waitForRender();
|
||||||
|
|
||||||
const datasetNameTextbox = screen.getByRole('textbox', {
|
const datasetName = screen.getByTestId('editable-title');
|
||||||
name: /dataset name/i,
|
|
||||||
});
|
|
||||||
const saveButton = screen.getByRole('button', {
|
const saveButton = screen.getByRole('button', {
|
||||||
name: /save save/i,
|
name: /save save/i,
|
||||||
});
|
});
|
||||||
@ -42,38 +39,26 @@ describe('Header', () => {
|
|||||||
name: /menu actions trigger/i,
|
name: /menu actions trigger/i,
|
||||||
});
|
});
|
||||||
|
|
||||||
expect(datasetNameTextbox).toBeVisible();
|
expect(datasetName).toBeVisible();
|
||||||
expect(saveButton).toBeVisible();
|
expect(saveButton).toBeVisible();
|
||||||
expect(saveButton).toBeDisabled();
|
expect(saveButton).toBeDisabled();
|
||||||
expect(menuButton).toBeVisible();
|
expect(menuButton).toBeVisible();
|
||||||
expect(menuButton).toBeDisabled();
|
expect(menuButton).toBeDisabled();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('updates display value of dataset name textbox when Header title is changed', async () => {
|
test('displays "New dataset" when a table is not selected', async () => {
|
||||||
await waitForRender('');
|
await waitForRender();
|
||||||
|
|
||||||
const datasetNameTextbox = screen.getByRole('textbox', {
|
const datasetName = screen.getByTestId('editable-title');
|
||||||
name: /dataset name/i,
|
expect(datasetName.innerHTML).toBe(DEFAULT_TITLE);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Textbox should start with an empty display value and placeholder text
|
test('displays table name when a table is selected', async () => {
|
||||||
expect(datasetNameTextbox).toHaveDisplayValue('');
|
// The schema and table name are passed in through props once selected
|
||||||
expect(
|
await waitForRender({ schema: 'testSchema', title: 'testTable' });
|
||||||
screen.getByPlaceholderText(/add the name of the dataset/i),
|
|
||||||
).toBeVisible();
|
|
||||||
|
|
||||||
// Textbox should update its display value when user inputs a new value
|
const datasetName = screen.getByTestId('editable-title');
|
||||||
userEvent.type(datasetNameTextbox, 'Test name');
|
|
||||||
expect(datasetNameTextbox).toHaveDisplayValue('Test name');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('passes an existing dataset title into the dataset name textbox', async () => {
|
expect(datasetName.innerHTML).toBe('testTable');
|
||||||
await waitForRender('Existing Dataset Name');
|
|
||||||
|
|
||||||
const datasetNameTextbox = screen.getByRole('textbox', {
|
|
||||||
name: /dataset name/i,
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(datasetNameTextbox).toHaveDisplayValue('Existing Dataset Name');
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -32,6 +32,8 @@ import {
|
|||||||
DSReducerActionType,
|
DSReducerActionType,
|
||||||
} from 'src/views/CRUD/data/dataset/AddDataset/types';
|
} from 'src/views/CRUD/data/dataset/AddDataset/types';
|
||||||
|
|
||||||
|
export const DEFAULT_TITLE = t('New dataset');
|
||||||
|
|
||||||
const tooltipProps: { text: string; placement: TooltipPlacement } = {
|
const tooltipProps: { text: string; placement: TooltipPlacement } = {
|
||||||
text: t('Select a database table and create dataset'),
|
text: t('Select a database table and create dataset'),
|
||||||
placement: 'bottomRight',
|
placement: 'bottomRight',
|
||||||
@ -59,21 +61,22 @@ const renderOverlay = () => (
|
|||||||
|
|
||||||
export default function Header({
|
export default function Header({
|
||||||
setDataset,
|
setDataset,
|
||||||
datasetName,
|
title = DEFAULT_TITLE,
|
||||||
}: {
|
}: {
|
||||||
setDataset: React.Dispatch<DSReducerActionType>;
|
setDataset: React.Dispatch<DSReducerActionType>;
|
||||||
datasetName: string;
|
title?: string | null | undefined;
|
||||||
|
schema?: string | null | undefined;
|
||||||
}) {
|
}) {
|
||||||
const editableTitleProps = {
|
const editableTitleProps = {
|
||||||
title: datasetName,
|
title: title ?? DEFAULT_TITLE,
|
||||||
placeholder: t('Add the name of the dataset'),
|
placeholder: DEFAULT_TITLE,
|
||||||
onSave: (newDatasetName: string) => {
|
onSave: (newDatasetName: string) => {
|
||||||
setDataset({
|
setDataset({
|
||||||
type: DatasetActionType.changeDataset,
|
type: DatasetActionType.changeDataset,
|
||||||
payload: { name: 'dataset_name', value: newDatasetName },
|
payload: { name: 'dataset_name', value: newDatasetName },
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
canEdit: true,
|
canEdit: false,
|
||||||
label: t('dataset name'),
|
label: t('dataset name'),
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -41,7 +41,7 @@ import { DatasetActionType } from '../types';
|
|||||||
|
|
||||||
interface LeftPanelProps {
|
interface LeftPanelProps {
|
||||||
setDataset: Dispatch<SetStateAction<object>>;
|
setDataset: Dispatch<SetStateAction<object>>;
|
||||||
schema?: string | undefined | null;
|
schema?: string | null | undefined;
|
||||||
dbId?: number;
|
dbId?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -71,7 +71,7 @@ export default function AddDataset() {
|
|||||||
>(datasetReducer, null);
|
>(datasetReducer, null);
|
||||||
|
|
||||||
const HeaderComponent = () => (
|
const HeaderComponent = () => (
|
||||||
<Header setDataset={setDataset} datasetName={dataset?.dataset_name ?? ''} />
|
<Header setDataset={setDataset} title={dataset?.table_name} />
|
||||||
);
|
);
|
||||||
|
|
||||||
const LeftPanelComponent = () => (
|
const LeftPanelComponent = () => (
|
||||||
|
@ -36,18 +36,12 @@ describe('DatasetLayout', () => {
|
|||||||
const mockSetDataset = jest.fn();
|
const mockSetDataset = jest.fn();
|
||||||
|
|
||||||
const waitForRender = () =>
|
const waitForRender = () =>
|
||||||
waitFor(() =>
|
waitFor(() => render(<Header setDataset={mockSetDataset} />));
|
||||||
render(<Header setDataset={mockSetDataset} datasetName="" />),
|
|
||||||
);
|
|
||||||
|
|
||||||
it('renders a Header when passed in', async () => {
|
it('renders a Header when passed in', async () => {
|
||||||
await waitForRender();
|
await waitForRender();
|
||||||
|
|
||||||
expect(
|
expect(screen.getByTestId('editable-title')).toBeVisible();
|
||||||
screen.getByRole('textbox', {
|
|
||||||
name: /dataset name/i,
|
|
||||||
}),
|
|
||||||
).toBeVisible();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('renders a LeftPanel when passed in', async () => {
|
it('renders a LeftPanel when passed in', async () => {
|
||||||
|
Loading…
Reference in New Issue
Block a user