[Apps] New accordion groups, autocomplete search to filter by existing set of all users with App permissions

src/App.tsx

@@ -166,7 +166,7 @@ function Dashboard({setThemeMode}: {setThemeMode: (theme: PaletteMode) => void})
   };
 
   return (
-    <Box sx={{display: 'flex'}}>
+    <Box sx={{display: 'flex', minWidth: '20rem', overflowX: 'hidden'}}>
       <AppBar position="absolute" open={open}>
         <Toolbar
           sx={{

src/components/EmptyListEntry.tsx

@@ -0,0 +1,18 @@
+import {TableRow, TableCell, Typography, TableCellProps} from '@mui/material';
+
+interface EmptyListEntryProps {
+  cellProps?: TableCellProps;
+  customText?: string;
+}
+
+export const EmptyListEntry: React.FC<EmptyListEntryProps> = ({cellProps, customText}) => {
+  return (
+    <TableRow>
+      <TableCell {...cellProps}>
+        <Typography variant="body2" color="grey">
+          {customText || 'None'}
+        </Typography>
+      </TableCell>
+    </TableRow>
+  );
+};

src/helpers.tsx

@@ -1,4 +1,4 @@
-import {PolymorphicGroup, OktaUser, Tag, OktaGroupTagMap} from './api/apiSchemas';
+import {PolymorphicGroup, OktaUser, Tag, OktaGroupTagMap, OktaUserGroupMember} from './api/apiSchemas';
 
 export const perPage: Array<number | {label: string; value: number}> = [5, 10, 20, 50, {label: 'All', value: -1}];
 
@@ -107,3 +107,28 @@ export function ownerCantAddSelf(tags: Tag[] | undefined, owner: boolean) {
 export function ownerCantAddSelfGroups(groups: PolymorphicGroup[], owner: boolean) {
   return ownerCantAddSelf(getActiveTagsFromGroups(groups), owner);
 }
+
+export function sortGroupMembers(
+  [aUserId, aUsers]: [string, Array<OktaUserGroupMember>],
+  [bUserId, bUsers]: [string, Array<OktaUserGroupMember>],
+): number {
+  let aEmail = aUsers[0].active_user?.email ?? '';
+  let bEmail = bUsers[0].active_user?.email ?? '';
+  return aEmail.localeCompare(bEmail);
+}
+
+export function sortGroupMemberRecords(users: Record<string, OktaUser>): OktaUser[] {
+  const usersArray = Object.values(users); // Convert the object to an array
+  usersArray.sort((a, b) => {
+    const nameA = `${a.first_name} ${a.last_name}`;
+    const nameB = `${b.first_name} ${b.last_name}`;
+    return nameA.localeCompare(nameB);
+  });
+  return usersArray;
+}
+
+export function groupMemberships(
+  memberships: Array<OktaUserGroupMember> | undefined,
+): Record<string, Array<OktaUserGroupMember>> {
+  return groupBy(memberships ?? [], () => 'active_user.id');
+}