From 1b79933cfb74f2dad950443a6093b2a4b7fbcf11 Mon Sep 17 00:00:00 2001
From: Michael Kimberlin <mkimberlin@gmail.com>
Date: Thu, 11 Apr 2024 12:34:37 -0500
Subject: [PATCH] Fix some styles, filter add user list, and fix add user
 handler

---
 web-ui/src/components/admin/roles/Roles.css   |  6 +-
 web-ui/src/components/admin/roles/Roles.jsx   | 76 +++++++++----------
 .../roles/__snapshots__/Roles.test.jsx.snap   |  8 +-
 3 files changed, 46 insertions(+), 44 deletions(-)

diff --git a/web-ui/src/components/admin/roles/Roles.css b/web-ui/src/components/admin/roles/Roles.css
index d010c43d37..57beadb291 100644
--- a/web-ui/src/components/admin/roles/Roles.css
+++ b/web-ui/src/components/admin/roles/Roles.css
@@ -139,8 +139,12 @@
 }
 
 .roles-content .roles .roles-top-search-fields .role-select {
+  width: 50%;
   margin-right: 2rem;
-  margin-top: 12px;
+}
+
+.roles-content .roles .roles-top-search-fields .member-role-search {
+  width: 50%;
 }
 
 @media screen and (max-width: 600px) {
diff --git a/web-ui/src/components/admin/roles/Roles.jsx b/web-ui/src/components/admin/roles/Roles.jsx
index d597fac978..4a5d34c80f 100644
--- a/web-ui/src/components/admin/roles/Roles.jsx
+++ b/web-ui/src/components/admin/roles/Roles.jsx
@@ -1,6 +1,6 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, {useContext, useEffect, useState} from "react";
 
-import { AppContext } from "../../../context/AppContext";
+import {AppContext} from "../../../context/AppContext";
 import {
   SET_ROLES,
   SET_USER_ROLES,
@@ -41,15 +41,15 @@ import PersonAddIcon from "@mui/icons-material/PersonAdd";
 import SearchIcon from "@mui/icons-material/Search";
 import AddIcon from "@mui/icons-material/Add";
 
-import { isArrayPresent } from './../../../helpers/checks';
+import {isArrayPresent} from './../../../helpers/checks';
 
 import "./Roles.css";
 import {selectProfile} from "../../../context/selectors";
 import EditIcon from "@mui/icons-material/Edit";
 
 const Roles = () => {
-  const { state, dispatch } = useContext(AppContext);
-  const { csrf, memberProfiles, roles, userRoles } = state;
+  const {state, dispatch} = useContext(AppContext);
+  const {csrf, memberProfiles, roles, userRoles} = state;
 
   const [showAddUser, setShowAddUser] = useState(false);
   const [showEditRole, setShowEditRole] = useState(false);
@@ -69,30 +69,28 @@ const Roles = () => {
   }, [roles]);
 
   useEffect(() => {
-      const memberMap = {};
-      if(memberProfiles && memberProfiles.length > 0) {
-        for (const member of memberProfiles) {
-          memberMap[member.id] = member;
-        }
+    const memberMap = {};
+    if (memberProfiles && memberProfiles.length > 0) {
+      for (const member of memberProfiles) {
+        memberMap[member.id] = member;
       }
+    }
 
-      const newRoleToMemberMap = {};
-      for (const userRole of userRoles || []) {
-        const role = roles.find((role) => role.id === userRole?.memberRoleId?.roleId);
-        if(role) {
-          let memberList = newRoleToMemberMap[role.role];
-          if (!memberList) {
-            memberList = newRoleToMemberMap[role.role] = [];
-          }
-          if (memberMap[userRole?.memberRoleId?.memberId] !== undefined) {
-            memberList.push({ ...memberMap[userRole?.memberRoleId?.memberId], roleId: role.id });
-          }
+    const newRoleToMemberMap = {};
+    for (const userRole of userRoles || []) {
+      const role = roles.find((role) => role.id === userRole?.memberRoleId?.roleId);
+      if (role) {
+        let memberList = newRoleToMemberMap[role.role];
+        if (!memberList) {
+          memberList = newRoleToMemberMap[role.role] = [];
+        }
+        if (memberMap[userRole?.memberRoleId?.memberId] !== undefined) {
+          memberList.push({...memberMap[userRole?.memberRoleId?.memberId], roleId: role.id});
         }
       }
-      setRoleToMemberMap(newRoleToMemberMap);
-    }, [userRoles, memberProfiles, roles]);
-
-  const uniqueRoles = Object.keys(roleToMemberMap);
+    }
+    setRoleToMemberMap(newRoleToMemberMap);
+  }, [userRoles, memberProfiles, roles]);
 
   const getRoleStats = (role) => {
     let members = roleToMemberMap[role];
@@ -101,7 +99,7 @@ const Roles = () => {
 
   const removeFromRole = async (member, role) => {
     const members = roleToMemberMap[role];
-    const { roleId } = members.find((m) => member.id === m.id);
+    const {roleId} = members.find((m) => member.id === m.id);
     let res = await removeUserFromRole(roleId, member.id, csrf);
     let data =
       res.payload && res.payload.status === 200 && !res.error
@@ -125,7 +123,7 @@ const Roles = () => {
   };
 
   const addToRole = async (member) => {
-    const role = roles.find((role) => role.role === currentRole);
+    const role = roles.find((role) => role.role === currentRole.role);
     let res = await addUserToRole(role.id, member.id, csrf);
     let data =
       res.payload && res.payload.data && !res.error ? res.payload.data : null;
@@ -176,11 +174,11 @@ const Roles = () => {
   };
 
   const setRoleName = (event) => {
-    setEditedRole({ ...editedRole, role: event?.target?.value });
+    setEditedRole({...editedRole, role: event?.target?.value});
   }
 
   const setRoleDescription = (event) => {
-    setEditedRole({ ...editedRole, description: event?.target?.value });
+    setEditedRole({...editedRole, description: event?.target?.value});
   }
 
   return (
@@ -189,7 +187,7 @@ const Roles = () => {
         <div className="roles-top">
           <div className="roles-top-left">
             <div className="roles-top-search-fields">
-              <FormControl size="small" className="role-select">
+              <FormControl className="role-select">
                 <InputLabel id="roles-select-label">Roles</InputLabel>
                 <Select
                   labelId="roles-select-label"
@@ -229,7 +227,7 @@ const Roles = () => {
             <Button
               className="role-add"
               color="primary"
-              endIcon={<AddIcon />}
+              endIcon={<AddIcon/>}
               onClick={() => {
                 setShowEditRole(true);
                 setEditedRole({});
@@ -243,7 +241,7 @@ const Roles = () => {
           <div className="role-modal">
             <Autocomplete
               options={memberProfiles?.filter((member) => {
-                return !currentRole.memberIds?.includes(member.id);
+                return !roleToMemberMap[currentRole.role]?.find((m)=>m.id === member.id);
               }) || []}
               value={selectedMember}
               onChange={(event, newValue) =>
@@ -270,11 +268,11 @@ const Roles = () => {
         <div className="roles-bot">
           {roles?.map((roleObj) =>
             selectedRoles.includes(roleObj.role) ? (
-              <Card className="role" key={`${roleObj.role}-card`} >
+              <Card className="role" key={`${roleObj.role}-card`}>
                 <CardContent className="role-card">
-                  <List style={{ paddingTop: 0 }}>
+                  <List style={{paddingTop: 0}}>
                     <div>
-                      <ListSubheader style={{ padding: 0 }}>
+                      <ListSubheader style={{padding: 0}}>
                         <div className="role-header">
                           <div className="role-header-title">
                             <Typography variant="h4" color="black">
@@ -284,10 +282,10 @@ const Roles = () => {
                               whiteSpace: "nowrap",
                               overflow: "hidden",
                               textOverflow: "ellipsis",
-                            }} >
+                            }}>
                               {roleObj.description || ""}
                             </Typography>
-                            <Typography variant="subtitle2" style={{ fontSize: "0.75rem" }}>
+                            <Typography variant="subtitle2" style={{fontSize: "0.75rem"}}>
                               {getRoleStats(roleObj.role)} Users
                             </Typography>
                           </div>
@@ -310,11 +308,11 @@ const Roles = () => {
                                 setEditedRole(roleObj);
                               }}
                             >
-                              <EditIcon />
+                              <EditIcon/>
                             </Button>
                           </div>
                         </div>
-                        <Divider />
+                        <Divider/>
                       </ListSubheader>
                       <RoleUserCards
                         roleMembers={roleToMemberMap[roleObj.role]}
diff --git a/web-ui/src/components/admin/roles/__snapshots__/Roles.test.jsx.snap b/web-ui/src/components/admin/roles/__snapshots__/Roles.test.jsx.snap
index 71ce6d27cb..b23dd48c92 100644
--- a/web-ui/src/components/admin/roles/__snapshots__/Roles.test.jsx.snap
+++ b/web-ui/src/components/admin/roles/__snapshots__/Roles.test.jsx.snap
@@ -21,21 +21,21 @@ exports[`renders correctly 1`] = `
               class="MuiFormControl-root role-select css-1nrlq1o-MuiFormControl-root"
             >
               <label
-                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined css-1jy569b-MuiFormLabel-root-MuiInputLabel-root"
+                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined css-1jy569b-MuiFormLabel-root-MuiInputLabel-root"
                 data-shrink="true"
                 id="roles-select-label"
               >
                 Roles
               </label>
               <div
-                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall css-9ddj71-MuiInputBase-root-MuiOutlinedInput-root"
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-9ddj71-MuiInputBase-root-MuiOutlinedInput-root"
               >
                 <div
                   aria-controls=":r0:"
                   aria-expanded="false"
                   aria-haspopup="listbox"
                   aria-labelledby="roles-select-label"
-                  class="MuiSelect-select MuiSelect-outlined MuiSelect-multiple MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall css-jedpe8-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
+                  class="MuiSelect-select MuiSelect-outlined MuiSelect-multiple MuiInputBase-input MuiOutlinedInput-input css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
                   role="combobox"
                   tabindex="0"
                 >
@@ -73,7 +73,7 @@ exports[`renders correctly 1`] = `
                 </fieldset>
               </div>
               <p
-                class="MuiFormHelperText-root MuiFormHelperText-sizeSmall MuiFormHelperText-contained MuiFormHelperText-filled css-k4qjio-MuiFormHelperText-root"
+                class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained MuiFormHelperText-filled css-1wc848c-MuiFormHelperText-root"
               >
                 Showing 2/2 roles
               </p>