From 6c4cb5e08463de6eaca256b2494f2312525736f5 Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Thu, 28 Nov 2024 08:54:27 -0800
Subject: [PATCH] improvements: address feedback

---
 .../components/OrgGroupsSection/OrgGroupsSection.tsx     | 2 +-
 .../components/OrgMembersSection/OrgMembersTable.tsx     | 3 +++
 .../components/MembersTab/components/AddMemberModal.tsx  | 9 ++++++---
 .../components/MembersTab/components/MembersTable.tsx    | 3 +++
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx b/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx
index 7738d1353..f72adf61f 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx
@@ -57,7 +57,7 @@ export const OrgGroupsSection = () => {
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex justify-between">
-        <p className="text-xl font-semibold text-mineshaft-100">User Groups</p>
+        <p className="text-xl font-semibold text-mineshaft-100">Groups</p>
         <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Groups}>
           {(isAllowed) => (
             <Button
diff --git a/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx b/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx
index 942ad549d..cc5217693 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx
@@ -201,6 +201,9 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
               valueTwo = memberTwo.user.firstName;
           }
 
+          if (!valueOne) return 1;
+          if (!valueTwo) return -1;
+
           return valueOne.toLowerCase().localeCompare(valueTwo.toLowerCase());
         }),
     [members, search, orderDirection, orderBy]
diff --git a/frontend/src/views/Project/MembersPage/components/MembersTab/components/AddMemberModal.tsx b/frontend/src/views/Project/MembersPage/components/MembersTab/components/AddMemberModal.tsx
index 389f71868..fd0b13172 100644
--- a/frontend/src/views/Project/MembersPage/components/MembersTab/components/AddMemberModal.tsx
+++ b/frontend/src/views/Project/MembersPage/components/MembersTab/components/AddMemberModal.tsx
@@ -121,9 +121,12 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
     });
     return (orgUsers || [])
       .filter(({ user: u }) => !wsUserUsernames.has(u.username))
-      .map((member) => ({
-        value: member.id,
-        label: `${member.user.firstName} ${member.user.lastName}`
+      .map(({ id, inviteEmail, user: { firstName, lastName, email } }) => ({
+        value: id,
+        label:
+          firstName && lastName
+            ? `${firstName} ${lastName}`
+            : firstName || lastName || email || inviteEmail
       }));
   }, [orgUsers, members]);
 
diff --git a/frontend/src/views/Project/MembersPage/components/MembersTab/components/MembersTable.tsx b/frontend/src/views/Project/MembersPage/components/MembersTab/components/MembersTable.tsx
index d90468620..17d1d523b 100644
--- a/frontend/src/views/Project/MembersPage/components/MembersTab/components/MembersTable.tsx
+++ b/frontend/src/views/Project/MembersPage/components/MembersTab/components/MembersTable.tsx
@@ -118,6 +118,9 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
               valueTwo = memberTwo.user.firstName;
           }
 
+          if (!valueOne) return 1;
+          if (!valueTwo) return -1;
+
           return valueOne.toLowerCase().localeCompare(valueTwo.toLowerCase());
         }),
     [members, search, orderDirection, orderBy]