Add delete user button (#541)

* Add frontend

* Add api wrappers

* Add draft of backend endpoint

* Finish backend endpoint

* Fix linter

* Clean code

* Add swal confirmation

Author: vasuchal

backend/routes/api/users.js

@@ -17,7 +17,10 @@ const {
     isRoleValid,
 } = require('../../utils/roleUtils');
 const { requireAdmin } = require('../../middleware/authentication');
-const { ADMIN_ID, DEFAULT_USERS_ON_GET_REQUEST } = require('../../utils/constants');
+const {
+    ADMIN_ID,
+    DEFAULT_USERS_ON_GET_REQUEST,
+} = require('../../utils/constants');
 
 /**
  * Gets information about the user making this request.
@@ -59,7 +62,12 @@ router.get(
             const users = await identityProvider.listUsers(params).promise();
             await sendResponse(res, 200, '', users);
         } catch (error) {
-            await sendResponse(res, 400, 'Please send a proper pagination token.', {});
+            await sendResponse(
+                res,
+                400,
+                'Please send a proper pagination token.',
+                {},
+            );
         }
     }),
 );
@@ -108,7 +116,9 @@ router.delete(
         // Check if user has this role
         const userRoles = await getUserRoles(username);
         const roleIndex = userRoles.indexOf(roleId);
-        if (roleIndex === -1) return sendResponse(res, 400, 'User does not have role');
+        if (roleIndex === -1) {
+            return sendResponse(res, 400, 'User does not have role');
+        }
 
         // Create params for the update in AWS
         userRoles.splice(roleIndex, 1);
@@ -150,4 +160,27 @@ router.put(
     }),
 );
 
+/**
+ * Deletes a user. The URL param is the user's unique
+ * username;
+ */
+router.delete(
+    '/:username',
+    requireAdmin,
+    errorWrap(async (req, res) => {
+        const { username } = req.params;
+
+        // Create the params for the deletion
+        const params = {
+            Username: username,
+            UserPoolId: USER_POOL_ID,
+        };
+
+        // Do the deletion
+        const identityProvider = getIdentityProvider();
+        await identityProvider.adminDeleteUser(params).promise();
+        await sendResponse(res, 200, 'Access updated');
+    }),
+);
+
 module.exports = router;

frontend/src/api/api.js

@@ -205,6 +205,14 @@ export const editRole = async (userId, updatedRoleInfo) => {
     return res.data;
 };
 
+// TODO: test endpoint or create issue for it
+export const deleteUser = async (username) => {
+    const requestString = `/users/${username}`;
+    const res = await instance.delete(requestString);
+    if (!res?.data?.success) throw new Error(res?.data?.message);
+    return res.data;
+};
+
 export const addUserRole = async (username, roleName) => {
     const requestString = `/users/${username}/roles/${roleName}`;
     const res = await instance.put(requestString);

frontend/src/components/EditRoleModal/EditRoleModal.js

@@ -13,18 +13,25 @@ import {
 } from '@material-ui/core';
 import PropTypes from 'prop-types';
 import { trackPromise } from 'react-promise-tracker';
+import swal from 'sweetalert';
 
 import { useErrorWrap } from '../../hooks/useErrorWrap';
 import TextField from '../Fields/TextField';
 import MultiSelectField from '../Fields/MultiSelectField';
 import { ACCESS_LEVELS } from '../../utils/constants';
 import './EditRoleModal.scss';
 import { useTranslations } from '../../hooks/useTranslations';
-import { removeUserRole, setUserAccess, addUserRole } from '../../api/api';
+import {
+    removeUserRole,
+    setUserAccess,
+    addUserRole,
+    deleteUser,
+} from '../../api/api';
 
 const EditRoleModal = ({
     isOpen,
     onUserEdited,
+    onUserDeleted,
     onClose,
     userInfo,
     allRoles,
@@ -78,6 +85,24 @@ const EditRoleModal = ({
         onUserEdited(userData.userId, userData.accessLevel, userData.roles);
     };
 
+    const onDelete = async () => {
+        swal({
+            title: translations.components.modal.deleteTitle,
+            text: translations.components.modal.deleteUserConfirmation,
+            icon: 'warning',
+            buttons: true,
+            dangerMode: true,
+        }).then(async (willDelete) => {
+            if (willDelete) {
+                await errorWrap(async () =>
+                    trackPromise(deleteUser(userData?.userId)),
+                );
+                onClose();
+                onUserDeleted(userData.userId);
+            }
+        });
+    };
+
     const renderAccessDropdown = () => {
         return (
             <Select
@@ -130,6 +155,11 @@ const EditRoleModal = ({
                     </InputLabel>
                     {renderAccessDropdown()}
                 </FormControl>
+                <div>
+                    <Button className="delete-user-button" onClick={onDelete}>
+                        {translations.accountManagement.deleteUser}
+                    </Button>
+                </div>
                 <div>
                     <Button className="save-user-button" onClick={onSave}>
                         {translations.accountManagement.Save}
@@ -147,6 +177,7 @@ EditRoleModal.propTypes = {
     isOpen: PropTypes.bool.isRequired,
     onClose: PropTypes.func.isRequired,
     onUserEdited: PropTypes.func.isRequired,
+    onUserDeleted: PropTypes.func.isRequired,
     allRoles: PropTypes.arrayOf(
         PropTypes.shape({
             _id: PropTypes.string,

frontend/src/components/EditRoleModal/EditRoleModal.scss

@@ -43,6 +43,23 @@
             }
         }
 
+        .delete-user-button {
+            margin-top: 20px;
+            background-color: $deleteRed;
+            color: white;
+            padding: 0 24px 0 24px;
+            height: 38px;
+            width: auto;
+            font-size: 12px;
+            font-weight: bold;
+            transition: all 0.2s;
+            border-radius: 2px;
+            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
+            &:hover {
+                background-color: $buttonHighlight;
+            }
+        }
+
         .text-field {
             margin-bottom: 20px;
         }

frontend/src/components/ManageRoleModal/ManageRoleModal.scss

@@ -46,7 +46,7 @@
         // TODO: find red on styles
         .delete-user-button {
             margin-top: 20px;
-            background-color: red;
+            background-color: $deleteRed;
             color: white;
             padding: 0 24px 0 24px;
             height: 38px;

frontend/src/pages/AccountManagement/AccountManagment.js

@@ -205,6 +205,16 @@ const AccountManagement = () => {
         });
     };
 
+    const onUserDeleted = (username) => {
+        setUserMetaData((metaData) => {
+            const users = _.cloneDeep(metaData);
+            const updatedUsers = users.filter(
+                (user) => user.Username !== username,
+            );
+            return updatedUsers;
+        });
+    };
+
     /**
      * Called when a role's data is deleted
      */
@@ -297,6 +307,7 @@ const AccountManagement = () => {
                 allRoles={memoizedMultiSelectRoles}
                 onClose={() => setSelectedUser(null)}
                 onUserEdited={onUserEdited}
+                onUserDeleted={onUserDeleted}
             />
         );
     };

frontend/src/translations.json

@@ -33,6 +33,8 @@
             },
             "modal": {
                 "deleteTitle": "Are you sure?",
+                "deleteConfirmation": "Once deleted, you will not be able to see this field. However, it can be recovered in the database.",
+                "deleteUserConfirmation": "Once deleted, you will not be able to see this user, and the user will not have access to the site.",
                 "deleteFieldConfirmation": "Once deleted, you will not be able to see this field. However, it can be recovered in the database.",
                 "deleteStepConfirmation": "Once deleted, you will not be able to see this step. However, it can be recovered in the database.",
                 "deletePatientConfirmation": "Once deleted, this patient will be gone forever. It CANNOT be recovered in the database."
@@ -236,7 +238,8 @@
             "Revoked": "Revoked",
             "Pending": "Pending",
             "Save": "Save",
-            "Discard": "Discard"
+            "Discard": "Discard",
+            "deleteUser": "Delete User"
         },
         "roleManagement": {
             "roleDatabase": "Role Database",
@@ -286,6 +289,8 @@
             },
             "modal": {
                 "deleteTitle": "Are you sure?",
+                "deleteConfirmation": "Once deleted, you will not be able to see this field. However, it can be recovered in the database.",
+                "deleteUserConfirmation": "بمجرد الحذف ، لن تتمكن من رؤية هذا المستخدم ولن يتمكن المستخدم من الوصول إلى الموقع.",
                 "deleteFieldConfirmation": "Once deleted, you will not be able to see this field. However, it can be recovered in the database.",
                 "deleteStepConfirmation": "Once deleted, you will not be able to see this step. However, it can be recovered in the database.",
                 "deletePatientConfirmation": "Once deleted, this patient will be gone forever. It CANNOT be recovered in the database."
@@ -489,7 +494,8 @@
             "Save": "يحفظ",
             "Discard": "ينبذ",
             "username": "اسم المستخدم",
-            "email": "بريد إلكتروني"
+            "email": "بريد إلكتروني",
+            "deleteUser": "مسح المستخدم"
         },
         "roleManagement": {
             "roleDatabase": "قاعدة بيانات الدور",