feat: user delete modal shows username and requires confirmation (#2779)

The delete user modal will now show the user that is being deleted and the delete button will now
ask you to confirm deletion similar to the delete request button.

cypress/e2e/user/user-list.cy.ts

@@ -54,7 +54,10 @@ describe('User List', () => {
       .contains('Delete')
       .click();
 
-    cy.get('[data-testid=modal-title]').should('contain', 'Delete User');
+    cy.get('[data-testid=modal-title]').should(
+      'contain',
+      `Delete ${testUser.displayName}`
+    );
 
     cy.intercept('/api/v1/user?take=10&skip=0&sort=displayname').as('user');
 

src/components/UserList/index.tsx

@@ -49,7 +49,7 @@ const messages = defineMessages({
   owner: 'Owner',
   admin: 'Admin',
   plexuser: 'Plex User',
-  deleteuser: 'Delete User',
+  deleteuser: 'Delete {username}',
   userdeleted: 'User deleted successfully!',
   userdeleteerror: 'Something went wrong while deleting the user.',
   deleteconfirm:
@@ -246,7 +246,9 @@ const UserList = () => {
           okDisabled={isDeleting}
           okButtonType="danger"
           onCancel={() => setDeleteModal({ isOpen: false })}
-          title={intl.formatMessage(messages.deleteuser)}
+          title={intl.formatMessage(messages.deleteuser, {
+            username: `${deleteModal.user?.username}`,
+          })}
           iconSvg={<TrashIcon />}
         >
           {intl.formatMessage(messages.deleteconfirm)}

src/i18n/locale/en.json

@@ -855,7 +855,7 @@
   "components.UserList.createlocaluser": "Create Local User",
   "components.UserList.creating": "Creating…",
   "components.UserList.deleteconfirm": "Are you sure you want to delete this user? All of their request data will be permanently removed.",
-  "components.UserList.deleteuser": "Delete User",
+  "components.UserList.deleteuser": "Delete {username}",
   "components.UserList.displayName": "Display Name",
   "components.UserList.edituser": "Edit User Permissions",
   "components.UserList.email": "Email Address",