From 43f4ab845a9d0c5b70a58b1596319b638081ce54 Mon Sep 17 00:00:00 2001
From: Beto Dealmeida <roberto@dealmeida.net>
Date: Thu, 4 Nov 2021 16:26:38 -0700
Subject: [PATCH] fix: clear 'delete' confirmation (#17345)

* fix: clear 'delete' confirmation

* Add tests
---
 .../DeleteModal/DeleteModal.test.tsx          | 15 +++++++-
 .../src/components/DeleteModal/index.tsx      | 34 +++++++++++++++----
 2 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/superset-frontend/src/components/DeleteModal/DeleteModal.test.tsx b/superset-frontend/src/components/DeleteModal/DeleteModal.test.tsx
index 61c4a9a514..6cec92e2a8 100644
--- a/superset-frontend/src/components/DeleteModal/DeleteModal.test.tsx
+++ b/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('');
 });
diff --git a/superset-frontend/src/components/DeleteModal/index.tsx b/superset-frontend/src/components/DeleteModal/index.tsx
index 98639cddc0..f11390342e 100644
--- a/superset-frontend/src/components/DeleteModal/index.tsx
+++ b/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>