Merge pull request #4217 from OneCommunityGlobal/peterson-implement-three-improvements-user-permissions-management-modal

Peterson implemented three improvements on the user permissions management modal.

Author: one-community

src/components/PermissionsManagement/UserPermissionsPopUp.jsx

@@ -86,8 +86,12 @@ function UserPermissionsPopUp({
       }
       return;
     }
-    const userId = actualUserProfile?._id;
 
+    if (searchText === '') {
+      toast.error('Please type the name of a user.');
+      return;
+    }
+    const userId = actualUserProfile?._id;
     const url = `${ENDPOINTS.PERMISSION_MANAGEMENT_UPDATE()}/user/${userId}`;
     const permissionData = {
       permissions: {
@@ -134,6 +138,20 @@ function UserPermissionsPopUp({
     }
   }, [modalStatus]);
 
+  const filteredUsers = allUserProfiles
+    // eslint-disable-next-line array-callback-return, consistent-return
+    .filter(user => {
+      if (
+        user.firstName.toLowerCase().includes(searchText.toLowerCase()) ||
+        user.lastName.toLowerCase().includes(searchText.toLowerCase()) ||
+        `${user.firstName} ${user.lastName}`.toLowerCase().includes(searchText.toLowerCase())
+      ) {
+        if (user.isActive) {
+          return user;
+        }
+      }
+    });
+
   return (
     <>
       {modalStatus && (
@@ -207,22 +225,10 @@ function UserPermissionsPopUp({
               }`}
               style={{ marginTop: '0px', width: '100%' }}
             >
-              {allUserProfiles
-                // eslint-disable-next-line array-callback-return, consistent-return
-                .filter(user => {
-                  if (
-                    user.firstName.toLowerCase().includes(searchText.toLowerCase()) ||
-                    user.lastName.toLowerCase().includes(searchText.toLowerCase()) ||
-                    `${user.firstName} ${user.lastName}`
-                      .toLowerCase()
-                      .includes(searchText.toLowerCase())
-                  ) {
-                    if (user.isActive) {
-                      return user;
-                    }
-                  }
-                })
-                .map(user => (
+              {filteredUsers.length === 0 && searchText !== '' ? (
+                <div style={{ padding: '5px' }}>No user found</div>
+              ) : (
+                filteredUsers.map(user => (
                   <div
                     className={styles['user__auto-complete']}
                     key={user._id}
@@ -245,7 +251,8 @@ function UserPermissionsPopUp({
                   >
                     {user.firstName} {user.lastName}
                   </div>
-                ))}
+                ))
+              )}
             </div>
           ) : (
             // eslint-disable-next-line react/jsx-no-useless-fragment