🐛 ConfirmDeleteDialog: always clear name input value on action (#1479)

`ConfirmDeleteDialog` requires the user to enter the item's name before the delete button is enabled. The user entered text was being cleared on Cancel and Close, but not on Confirm. Action handlers now clear the user entered text on ALL actions. Resolves: #1478 Signed-off-by: Scott J Dickerson <[email protected]> Co-authored-by: Ian Bolton <[email protected]>
konveyor · Oct 17, 2023 · 12d8166 · 12d8166
1 parent 9096dcd
commit 12d8166
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/client/src/app/components/ConfirmDeleteDialog/ConfirmDeleteDialog.css b/client/src/app/components/ConfirmDeleteDialog/ConfirmDeleteDialog.css
@@ -1,8 +1,3 @@
 .confirm-deletion {
   margin-top: var(--pf-v5-global--spacer--xl);
 }
-
-.confirm-deletion-input {
-  margin-top: var(--pf-v5-global--spacer--sm);
-  margin-bottom: var(--pf-v5-global--spacer--sm);
-}
diff --git a/client/src/app/components/ConfirmDeleteDialog/ConfirmDeleteDialog.tsx b/client/src/app/components/ConfirmDeleteDialog/ConfirmDeleteDialog.tsx
@@ -46,14 +46,21 @@ const ConfirmDeleteDialog: FC<ConfirmDeleteDialogProps> = ({
     onClose();
   };
 
+  const handleOnConfirmDelete = () => {
+    if (!isDisabled) {
+      setNameToDeleteInput("");
+      onConfirmDelete();
+    }
+  };
+
   const confirmBtn = (
     <Button
       id="confirm-delete-dialog-button"
       key="confirm"
       aria-label="confirm"
       variant={ButtonVariant.danger}
       isDisabled={isDisabled}
-      onClick={isDisabled ? undefined : onConfirmDelete}
+      onClick={handleOnConfirmDelete}
     >
       {deleteBtnLabel ?? t("actions.delete")}
     </Button>
@@ -70,6 +77,7 @@ const ConfirmDeleteDialog: FC<ConfirmDeleteDialogProps> = ({
       {cancelBtnLabel ?? t("actions.cancel")}
     </Button>
   );
+
   return (
     <Modal
       id="confirm-delete-dialog"
@@ -91,7 +99,7 @@ const ConfirmDeleteDialog: FC<ConfirmDeleteDialogProps> = ({
         </Trans>
       </Text>
       <TextInput
-        className="confirm-deletion-input"
+        id="confirm-deletion-input"
         value={nameToDeleteInput}
         onChange={(_, value) => setNameToDeleteInput(value)}
       />