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

src/helpers.tsx

@@ -25,6 +25,14 @@ export function displayUserName(user: OktaUser | undefined) {
   return user.display_name != null ? user.display_name : user.first_name + ' ' + user.last_name;
 }
 
+export function extractEmailFromDisplayName(displayName: string | null) {
+  if (!!displayName) {
+    const emailMatch = displayName.match(/\(([^)]+)\)/);
+    return emailMatch ? emailMatch[1].toLowerCase() : '';
+  }
+  return '';
+}
+
 // https://stackoverflow.com/a/34890276
 export function groupBy<T>(xs: T[] | undefined, keyFn: (item: T) => string | undefined) {
   return (xs ?? []).reduce(

src/pages/apps/components/AppsAccordionListGroup.tsx

@@ -0,0 +1,233 @@
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Divider,
+  Grid,
+  Link,
+  Paper,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableFooter,
+  TableHead,
+  TableRow,
+  Typography,
+} from '@mui/material';
+import {App, AppGroup, OktaUserGroupMember} from '../../../api/apiSchemas';
+import React from 'react';
+import {displayUserName, groupBy, groupMemberships, sortGroupMembers} from '../../../helpers';
+import {EmptyListEntry} from '../../../components/EmptyListEntry';
+import Ending from '../../../components/Ending';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import {Link as RouterLink, useParams} from 'react-router-dom';
+
+interface GroupDetailListProps {
+  member_list: any[];
+  title?: string;
+}
+
+const GroupDetailList: React.FC<GroupDetailListProps> = ({member_list, title}) => {
+  return (
+    <Stack direction="column" spacing={1}>
+      {title && (
+        <Typography variant="body1" component={'div'}>
+          {title}
+        </Typography>
+      )}
+
+      <TableContainer component={Paper}>
+        <Table sx={{minWidth: 325}} size="small" aria-label="app owners">
+          <TableHead>
+            <TableRow>
+              <TableCell>Name</TableCell>
+              <TableCell>Email</TableCell>
+              <TableCell>Ending</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {member_list.length > 0 ? (
+              member_list.map((member: OktaUserGroupMember) => (
+                <TableRow key={member.active_user?.id}>
+                  <TableCell>
+                    <Link
+                      to={`/users/${member.active_user?.email.toLowerCase()}`}
+                      sx={{
+                        textDecoration: 'none',
+                        color: 'inherit',
+                      }}
+                      component={RouterLink}>
+                      {displayUserName(member.active_user)}
+                    </Link>
+                  </TableCell>
+                  <TableCell>
+                    <Link
+                      to={`/users/${member.active_user?.email.toLowerCase()}`}
+                      sx={{
+                        textDecoration: 'none',
+                        color: 'inherit',
+                      }}
+                      component={RouterLink}>
+                      {member.active_user?.email.toLowerCase()}
+                    </Link>
+                  </TableCell>
+                  <TableCell>
+                    <Ending memberships={member_list} />
+                  </TableCell>
+                </TableRow>
+              ))
+            ) : (
+              <EmptyListEntry cellProps={{colSpan: 3}} />
+            )}
+          </TableBody>
+
+          <TableFooter>
+            <TableRow />
+          </TableFooter>
+        </Table>
+      </TableContainer>
+    </Stack>
+  );
+};
+
+interface AppAccordionListGroupProps {
+  app_group: AppGroup[];
+  list_group_title?: string;
+  list_group_description?: string;
+  isExpanded?: boolean;
+}
+
+export const AppsAccordionListGroup: React.FC<AppAccordionListGroupProps> = ({
+  app_group,
+  list_group_title,
+  list_group_description,
+  isExpanded = false,
+}) => {
+  const [expanded, setExpanded] = React.useState<Record<string, boolean>>(() => {
+    if (isExpanded && app_group) {
+      const initialExpanded: Record<string, boolean> = {};
+      app_group.forEach((group) => {
+        initialExpanded[group.name] = true;
+      });
+      return initialExpanded;
+    }
+    return {};
+  });
+
+  // Sync internal state with isExpanded prop changes
+  React.useEffect(() => {
+    if (app_group) {
+      const newExpanded: Record<string, boolean> = {};
+      app_group.forEach((group) => {
+        newExpanded[group.name] = isExpanded;
+      });
+      setExpanded(newExpanded);
+    }
+  }, [isExpanded, app_group]);
+
+  const handleChange = (id: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
+    setExpanded({...expanded, [id]: newExpanded});
+  };
+
+  return (
+    <React.Fragment>
+      <Grid
+        item
+        xs={12}
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1.25rem',
+        }}>
+        {(app_group?.length || 0) > 0 && list_group_title && (
+          <Typography variant="h5" component={'div'}>
+            {list_group_title}
+          </Typography>
+        )}
+        {(app_group?.length || 0) > 0 && list_group_description && (
+          <Typography variant="body1" component={'div'}>
+            {list_group_description}
+          </Typography>
+        )}
+        {app_group &&
+          app_group?.map((appGroup) => {
+            const owners = Object.entries(groupMemberships(appGroup.active_user_ownerships))
+              .sort(sortGroupMembers)
+              .map((memberList) => memberList[1][0]);
+
+            const members = Object.entries(groupMemberships(appGroup.active_user_memberships))
+              .sort(sortGroupMembers)
+              .map((memberList) => memberList[1][0]);
+
+            return (
+              <TableContainer key={appGroup.id} component={Paper}>
+                <Accordion expanded={expanded[appGroup.name] || isExpanded} onChange={handleChange(appGroup.name)}>
+                  <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                    <Box
+                      sx={{
+                        display: 'inline-flex',
+                        flexGrow: 1,
+                      }}>
+                      <Stack
+                        direction="column"
+                        spacing={1}
+                        sx={{
+                          flexGrow: 0.95,
+                        }}>
+                        <Typography variant="h6" color="primary">
+                          <Link
+                            to={`/groups/${appGroup.name}`}
+                            sx={{
+                              textDecoration: 'none',
+                              color: 'inherit',
+                            }}
+                            component={RouterLink}>
+                            {appGroup.name}
+                          </Link>
+                        </Typography>
+                        <Typography variant="body1" color="grey">
+                          {appGroup.description}
+                        </Typography>
+                      </Stack>
+                      <Box
+                        sx={{
+                          display: 'flex',
+                          justifyContent: 'flex-end',
+                          alignItems: 'right',
+                        }}>
+                        <Divider sx={{mx: 2}} orientation="vertical" flexItem />
+                        Owners: {owners.length || 0} <br />
+                        Members: {members.length || 0}
+                      </Box>
+                    </Box>
+                  </AccordionSummary>
+                  <AccordionDetails>
+                    <Table aria-label="app group owners">
+                      <TableBody className="accordion-body">
+                        <TableRow>
+                          <TableCell colSpan={2}>
+                            <Stack
+                              direction="row"
+                              useFlexGap
+                              flexWrap={'wrap'}
+                              justifyContent={'space-between'}
+                              gap={'2rem'}>
+                              <GroupDetailList member_list={owners} title={'Group Owners'} />
+                              <GroupDetailList member_list={members} title={'Members'} />
+                            </Stack>
+                          </TableCell>
+                        </TableRow>
+                      </TableBody>
+                    </Table>
+                  </AccordionDetails>
+                </Accordion>
+              </TableContainer>
+            );
+          })}
+      </Grid>
+    </React.Fragment>
+  );
+};

src/pages/apps/components/AppsAdminActionGroup.tsx

@@ -0,0 +1,92 @@
+import {Autocomplete, Button, Grid, Paper, Stack, TextField} from '@mui/material';
+import CreateUpdateGroup from '../../groups/CreateUpdate';
+import {OktaUser, App, AppGroup} from '../../../api/apiSchemas';
+import {renderUserOption} from '../../../components/TableTopBar';
+import {displayUserName, extractEmailFromDisplayName, sortGroupMemberRecords, sortGroupMembers} from '../../../helpers';
+import React from 'react';
+
+interface AppsAdminActionGroupProps {
+  currentUser: OktaUser;
+  app: App;
+  onSearchSubmit?: (appGroup: AppGroup[]) => void;
+  onToggleExpand?: (expanded: boolean) => void;
+  isExpanded?: boolean;
+}
+
+export const AppsAdminActionGroup: React.FC<AppsAdminActionGroupProps> = ({
+  currentUser,
+  app,
+  onSearchSubmit,
+  onToggleExpand,
+  isExpanded = true,
+}) => {
+  const allMembers: Record<string, OktaUser> = {};
+  const memberGroups: Record<string, AppGroup[]> = {};
+  (app.active_non_owner_app_groups ?? []).forEach((appGroup) => {
+    [appGroup.active_user_ownerships, appGroup.active_user_memberships].forEach((memberList) => {
+      (memberList ?? []).forEach((member) => {
+        const activeUser = member.active_user;
+        if (activeUser) {
+          allMembers[activeUser.id] = activeUser;
+          const groups = (memberGroups[activeUser.email.toLowerCase()] ||= []);
+          if (
+            !groups.find((g) => {
+              return g.id === appGroup.id;
+            })
+          ) {
+            groups.push(appGroup);
+          }
+        }
+      });
+    });
+  });
+
+  const handleSearchSubmit = (_: unknown, newValue: string | null) => {
+    const email = extractEmailFromDisplayName(newValue);
+    const appGroups = memberGroups[email] ?? app.active_non_owner_app_groups;
+    if (!!onSearchSubmit) {
+      onSearchSubmit(appGroups);
+    }
+  };
+
+  const handleToggleExpand = () => {
+    if (!!onToggleExpand) {
+      onToggleExpand(!isExpanded);
+    }
+  };
+
+  return (
+    <Grid item xs={12} className={'app-detail app-detail-admin-action-group'}>
+      <Paper
+        sx={{
+          p: 2,
+          display: 'flex',
+          alignItems: 'center',
+        }}>
+        <Stack direction="row" width="100%" justifyContent="space-between" alignItems="center">
+          <CreateUpdateGroup defaultGroupType={'app_group'} currentUser={currentUser} app={app} />
+          <Stack direction="row" spacing={2} alignItems="center">
+            <Autocomplete
+              size="small"
+              sx={{width: 320}}
+              renderInput={(params) => <TextField {...params} label="Search" />}
+              options={sortGroupMemberRecords(allMembers).map(
+                (row) => `${displayUserName(row)} (${row.email.toLowerCase()})`,
+              )}
+              onChange={handleSearchSubmit}
+              renderOption={renderUserOption}
+              autoHighlight
+              autoSelect
+              clearOnEscape
+              freeSolo
+              autoFocus
+            />
+            <Button variant="outlined" size="small" onClick={handleToggleExpand}>
+              {isExpanded ? 'Collapse All' : 'Expand All'}
+            </Button>
+          </Stack>
+        </Stack>
+      </Paper>
+    </Grid>
+  );
+};