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(),
|
||||
open: true,
|
||||
};
|
||||
render(<DeleteModal {...props} />);
|
||||
const modal = <DeleteModal {...props} />;
|
||||
render(modal);
|
||||
expect(props.onHide).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();
|
||||
userEvent.click(screen.getByText('×'));
|
||||
expect(props.onHide).toBeCalledTimes(1);
|
||||
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', () => {
|
||||
|
@ -75,4 +85,7 @@ test('Calling "onConfirm" only after typing "delete" in the input', () => {
|
|||
userEvent.type(screen.getByTestId('delete-modal-input'), 'delete');
|
||||
userEvent.click(screen.getByText('delete'));
|
||||
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,
|
||||
}: DeleteModalProps) {
|
||||
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 (
|
||||
<Modal
|
||||
disablePrimaryButton={disableChange}
|
||||
onHide={onHide}
|
||||
onHandledPrimaryAction={onConfirm}
|
||||
onHide={hide}
|
||||
onHandledPrimaryAction={confirm}
|
||||
primaryButtonName={t('delete')}
|
||||
primaryButtonType="danger"
|
||||
show={open}
|
||||
|
@ -73,10 +96,9 @@ export default function DeleteModal({
|
|||
type="text"
|
||||
id="delete"
|
||||
autoComplete="off"
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const targetValue = event.target.value ?? '';
|
||||
setDisableChange(targetValue.toUpperCase() !== t('DELETE'));
|
||||
}}
|
||||
value={confirmation}
|
||||
onChange={onChange}
|
||||
onPressEnter={onPressEnter}
|
||||
/>
|
||||
</StyledDiv>
|
||||
</Modal>
|
||||
|
|
Loading…
Reference in New Issue