Admin UI - User Deletion Modal - Only Require One Layer of Confirmati…

…on (#4402)
ethyca · Jan 31, 2024 · 65af596 · 65af596
1 parent 5310690
commit 65af596
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,8 +26,10 @@ The types of changes are:
 
 - Delay rendering the nav until all necessary queries are finished loading [#4571](https://github.com/ethyca/fides/pull/4571)
 - Updating return value for crud.get_custom_fields_filtered [#4575](https://github.com/ethyca/fides/pull/4575)
+- Updated user deletion confirmation flow to only require one confirmatory input [#4402](https://github.com/ethyca/fides/pull/4402) 
 - Moved `pymssl` to an optional dependency no longer installed by default with our python package [#4581](https://github.com/ethyca/fides/pull/4581)
 
+
 ### Fixed
 
 - Fixed CORS domain update functionality [#4570](https://github.com/ethyca/fides/pull/4570)

diff --git a/clients/admin-ui/cypress/e2e/user-management.cy.ts b/clients/admin-ui/cypress/e2e/user-management.cy.ts
@@ -211,24 +211,16 @@ describe("User management", () => {
       cy.getByTestId("delete-user-modal");
       cy.getByTestId("submit-btn").should("be.disabled");
 
-      // type mismatching usernames
-      cy.getByTestId("input-username").type("user_1");
+      // type mismatching username
       cy.getByTestId("input-usernameConfirmation").type("user_one");
       // trigger blur event
-      cy.getByTestId("delete-user-modal").click();
-      cy.getByTestId("delete-user-modal").contains("Usernames must match");
+      cy.getByTestId("input-usernameConfirmation").blur();
       cy.getByTestId("submit-btn").should("be.disabled");
-
-      // type matching but incorrect username
-      cy.getByTestId("input-username").clear().type("user_one");
-      cy.getByTestId("input-usernameConfirmation").clear().type("user_one");
-      cy.getByTestId("delete-user-modal").contains(
-        "Username must match this user's"
+      cy.getByTestId("error-usernameConfirmation").contains(
+        "Confirmation input must match the username"
       );
-      cy.getByTestId("submit-btn").should("be.disabled");
 
       // now enter the proper thing
-      cy.getByTestId("input-username").clear().type("user_1");
       cy.getByTestId("input-usernameConfirmation").clear().type("user_1");
       cy.getByTestId("submit-btn").should("be.enabled");
       cy.getByTestId("submit-btn").click();
@@ -249,7 +241,6 @@ describe("User management", () => {
       cy.getByTestId("delete-user-btn").click();
 
       cy.getByTestId("delete-user-modal").within(() => {
-        cy.getByTestId("input-username").type("user_1");
         cy.getByTestId("input-usernameConfirmation").type("user_1");
         cy.getByTestId("submit-btn").should("be.enabled");
         cy.getByTestId("submit-btn").click();

diff --git a/clients/admin-ui/src/features/user-management/DeleteUserModal.tsx b/clients/admin-ui/src/features/user-management/DeleteUserModal.tsx
@@ -1,4 +1,7 @@
 import {
+  Alert,
+  AlertDescription,
+  AlertIcon,
   Button,
   ButtonGroup,
   Modal,
@@ -9,6 +12,7 @@ import {
   ModalHeader,
   ModalOverlay,
   Stack,
+  Text,
   UseDisclosureReturn,
   useToast,
 } from "@fidesui/react";
@@ -54,13 +58,9 @@ const useDeleteUserModal = ({
   };
 
   const validationSchema = Yup.object().shape({
-    username: Yup.string()
-      .required()
-      .oneOf([username], "Username must match this user's")
-      .label("Username"),
     usernameConfirmation: Yup.string()
       .required()
-      .oneOf([Yup.ref("username")], "Usernames must match")
+      .oneOf([username], "Confirmation input must match the username")
       .label("Username confirmation"),
   });
 
@@ -95,11 +95,32 @@ const DeleteUserModal = ({
               <ModalHeader>Delete User</ModalHeader>
               <ModalCloseButton />
               <ModalBody>
+                <Alert status="warning" overflow="visible">
+                  <AlertIcon />
+                  <AlertDescription>
+                    <Text as="span" mb={2}>
+                      You are about to delete the user&nbsp;
+                    </Text>
+                    <Text
+                      as="span"
+                      mb={2}
+                      fontStyle="italic"
+                      fontWeight="semibold"
+                    >
+                      {user.username}.
+                    </Text>
+                    <Text mb={2}>
+                      This action cannot be undone. To confirm, please enter the
+                      user&rsquo;s username below.
+                    </Text>
+                  </AlertDescription>
+                </Alert>
+
                 <Stack direction="column" spacing={4}>
-                  <CustomTextInput name="username" label="Enter username" />
                   <CustomTextInput
                     name="usernameConfirmation"
                     label="Confirm username"
+                    placeholder="Type the username to delete"
                   />
                 </Stack>
               </ModalBody>