fix: clear 'delete' confirmation (#17345)

* fix: clear 'delete' confirmation

* Add tests

superset-frontend/src/components/DeleteModal/DeleteModal.test.tsx

@@ -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('');
 });

superset-frontend/src/components/DeleteModal/index.tsx

@@ -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>