mirror of https://github.com/apache/superset.git
fix: clear 'delete' confirmation (#17345)
* fix: clear 'delete' confirmation * Add tests
This commit is contained in:
parent
1fbce88a46
commit
43f4ab845a
|
@ -44,13 +44,23 @@ test('Calling "onHide"', () => {
|
||||||
onHide: jest.fn(),
|
onHide: jest.fn(),
|
||||||
open: true,
|
open: true,
|
||||||
};
|
};
|
||||||
render(<DeleteModal {...props} />);
|
const modal = <DeleteModal {...props} />;
|
||||||
|
render(modal);
|
||||||
expect(props.onHide).toBeCalledTimes(0);
|
expect(props.onHide).toBeCalledTimes(0);
|
||||||
expect(props.onConfirm).toBeCalledTimes(0);
|
expect(props.onConfirm).toBeCalledTimes(0);
|
||||||
|
|
||||||
|
// type "del" in the input
|
||||||
|
userEvent.type(screen.getByTestId('delete-modal-input'), 'del');
|
||||||
|
expect(screen.getByTestId('delete-modal-input')).toHaveValue('del');
|
||||||
|
|
||||||
|
// close the modal
|
||||||
expect(screen.getByText('×')).toBeVisible();
|
expect(screen.getByText('×')).toBeVisible();
|
||||||
userEvent.click(screen.getByText('×'));
|
userEvent.click(screen.getByText('×'));
|
||||||
expect(props.onHide).toBeCalledTimes(1);
|
expect(props.onHide).toBeCalledTimes(1);
|
||||||
expect(props.onConfirm).toBeCalledTimes(0);
|
expect(props.onConfirm).toBeCalledTimes(0);
|
||||||
|
|
||||||
|
// confirm input has been cleared
|
||||||
|
expect(screen.getByTestId('delete-modal-input')).toHaveValue('');
|
||||||
});
|
});
|
||||||
|
|
||||||
test('Calling "onConfirm" only after typing "delete" in the input', () => {
|
test('Calling "onConfirm" only after typing "delete" in the input', () => {
|
||||||
|
@ -75,4 +85,7 @@ test('Calling "onConfirm" only after typing "delete" in the input', () => {
|
||||||
userEvent.type(screen.getByTestId('delete-modal-input'), 'delete');
|
userEvent.type(screen.getByTestId('delete-modal-input'), 'delete');
|
||||||
userEvent.click(screen.getByText('delete'));
|
userEvent.click(screen.getByText('delete'));
|
||||||
expect(props.onConfirm).toBeCalledTimes(1);
|
expect(props.onConfirm).toBeCalledTimes(1);
|
||||||
|
|
||||||
|
// confirm input has been cleared
|
||||||
|
expect(screen.getByTestId('delete-modal-input')).toHaveValue('');
|
||||||
});
|
});
|
||||||
|
|
|
@ -52,12 +52,35 @@ export default function DeleteModal({
|
||||||
title,
|
title,
|
||||||
}: DeleteModalProps) {
|
}: DeleteModalProps) {
|
||||||
const [disableChange, setDisableChange] = useState(true);
|
const [disableChange, setDisableChange] = useState(true);
|
||||||
|
const [confirmation, setConfirmation] = useState<string>('');
|
||||||
|
|
||||||
|
const hide = () => {
|
||||||
|
setConfirmation('');
|
||||||
|
onHide();
|
||||||
|
};
|
||||||
|
|
||||||
|
const confirm = () => {
|
||||||
|
setConfirmation('');
|
||||||
|
onConfirm();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const targetValue = event.target.value ?? '';
|
||||||
|
setDisableChange(targetValue.toUpperCase() !== t('DELETE'));
|
||||||
|
setConfirmation(targetValue);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onPressEnter = () => {
|
||||||
|
if (!disableChange) {
|
||||||
|
confirm();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
disablePrimaryButton={disableChange}
|
disablePrimaryButton={disableChange}
|
||||||
onHide={onHide}
|
onHide={hide}
|
||||||
onHandledPrimaryAction={onConfirm}
|
onHandledPrimaryAction={confirm}
|
||||||
primaryButtonName={t('delete')}
|
primaryButtonName={t('delete')}
|
||||||
primaryButtonType="danger"
|
primaryButtonType="danger"
|
||||||
show={open}
|
show={open}
|
||||||
|
@ -73,10 +96,9 @@ export default function DeleteModal({
|
||||||
type="text"
|
type="text"
|
||||||
id="delete"
|
id="delete"
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
value={confirmation}
|
||||||
const targetValue = event.target.value ?? '';
|
onChange={onChange}
|
||||||
setDisableChange(targetValue.toUpperCase() !== t('DELETE'));
|
onPressEnter={onPressEnter}
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</StyledDiv>
|
</StyledDiv>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
Loading…
Reference in New Issue