Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Oct 13, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,64 +16,49 @@
* 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,
});
const menuButton = screen.getByRole('button', {
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');
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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'),
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ import { DatasetActionType } from '../types';

interface LeftPanelProps {
setDataset: Dispatch<SetStateAction<object>>;
schema?: string | undefined | null;
schema?: string | null | undefined;
dbId?: number;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down