discord · tonydelanuez · Jul 1, 2025 · Jun 26, 2025 · Jun 26, 2025 · Jun 26, 2025
diff --git a/src/components/AccessHistory.tsx b/src/components/AccessHistory.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import {OktaUserGroupMember, RoleGroupMap} from '../api/apiSchemas';
+import AccessHistoryTable from './AccessHistoryTable';
+import InfoOutlined from '@mui/icons-material/InfoOutlined';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+type AccessAuditEntry = OktaUserGroupMember | RoleGroupMap;
+
+type SubjectType = 'user' | 'role';
+
+interface AccessHistoryProps {
+  subjectType: SubjectType;
+  subjectName: string;
+  groupName: string;
+  auditHistory: AccessAuditEntry[];
+  alternativeRoleMappings?: RoleGroupMap[];
+}
+
+export default function AccessHistory({
+  subjectType,
+  subjectName,
+  groupName,
+  auditHistory,
+  alternativeRoleMappings,
+}: AccessHistoryProps) {
+  const currentAccess = auditHistory.filter(
+    (audit) => audit.ended_at == null || (audit.ended_at && new Date(audit.ended_at) > new Date()),
+  );
+  const pastAccess = auditHistory.filter((audit) => audit.ended_at != null && new Date(audit.ended_at) <= new Date());
+  // Info card for empty state
+  if (currentAccess.length === 0 && pastAccess.length === 0) {
+    return (
+      <Box>
+        <Paper sx={{p: 2, mt: 1, display: 'flex', alignItems: 'center', gap: 2, backgroundColor: 'background.default'}}>
+          <Box sx={{display: 'flex', alignItems: 'center'}}>
+            <InfoOutlined color="info" sx={{fontSize: 36, mr: 2}} />
+          </Box>
+          <Box>
+            <Typography variant="subtitle1" sx={{fontWeight: 600}}>
+              No prior access history
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              {subjectType === 'user'
+                ? `This user has never had access to this group. Approving this request will grant access for the first time.`
+                : `This role has never had access to this group. Approving this request will grant access for the first time.`}
+            </Typography>
+          </Box>
+        </Paper>
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      <Accordion defaultExpanded sx={{mt: 1}}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography variant="h6" sx={{fontWeight: 600}}>
+            {`${subjectName} Access History to ${groupName}`}
+          </Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          {/* Current Access Section */}
+          <Typography variant="subtitle1" color="success.main" sx={{mb: 1, fontWeight: 500}}>
+            {`Current Access${currentAccess.length > 0 ? ` (${currentAccess.length} active membership${currentAccess.length !== 1 ? 's' : ''})` : ''}`}
+          </Typography>
+          <AccessHistoryTable
+            accessEntries={currentAccess as any}
+            highlightColor="success"
+            showEndedBy={false}
+            emptyMessage="No current access"
+          />
+          <hr />
+          {/* Past Access Section */}
+          <Box sx={{mt: 2}}>
+            <Typography variant="subtitle1" color="text.secondary" sx={{mb: 1, fontWeight: 500}}>
+              {`Past Access${pastAccess.length > 0 ? ` (${pastAccess.length} previous membership${pastAccess.length !== 1 ? 's' : ''})` : ''}`}
+            </Typography>
+            <AccessHistoryTable
+              accessEntries={pastAccess as any}
+              highlightColor="danger"
+              showEndedBy={true}
+              emptyMessage="No previous access"
+            />
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+    </Box>
+  );
+}
diff --git a/src/components/AccessHistoryTable.tsx b/src/components/AccessHistoryTable.tsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import {Link as RouterLink} from 'react-router-dom';
+
+import Link from '@mui/material/Link';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import TablePagination from '@mui/material/TablePagination';
+import Typography from '@mui/material/Typography';
+
+import {OktaUserGroupMember, RoleGroupMap} from '../api/apiSchemas';
+import {displayUserName} from '../helpers';
+import Started from './Started';
+import Ending from './Ending';
+import InlineReason from './InlineReason';
+import AccessMethodChip from './AccessMethodChip';
+import TablePaginationActions from './actions/TablePaginationActions';
+
+// Accept both OktaUserGroupMember[] and RoleGroupMap[]
+type AccessAuditEntry = OktaUserGroupMember | RoleGroupMap;
+
+interface AccessHistoryTableProps {
+  accessEntries: AccessAuditEntry[];
+  highlightColor: 'success' | 'danger';
+  showEndedBy: boolean;
+  emptyMessage?: string;
+}
+
+export default function AccessHistoryTable({
+  accessEntries,
+  highlightColor,
+  showEndedBy,
+  emptyMessage,
+}: AccessHistoryTableProps) {
+  const [page, setPage] = React.useState(0);
+  const rowsPerPage = 20;
+  const handleChangePage = (event: unknown, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const columns = [
+    'Access Type',
+    'Method',
+    'Started',
+    'Ending',
+    showEndedBy ? 'Removed by' : 'Added by',
+    'Access Reason',
+  ];
+
+  if (accessEntries.length === 0) {
+    return (
+      <Typography variant="body2" color="text.secondary" align="center" sx={{my: 2}}>
+        {emptyMessage}
+      </Typography>
+    );
+  }
+
+  return (
+    <>
+      <Table size="small" aria-label="access history">
+        <TableHead>
+          <TableRow>
+            {columns.map((col) => (
+              <TableCell key={col}>{col}</TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {accessEntries.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((access) => (
+            <TableRow
+              key={access.id}
+              sx={{
+                backgroundColor: highlightColor,
+              }}>
+              <TableCell>{access.is_owner ? 'Owner' : 'Member'}</TableCell>
+              <TableCell>
+                <AccessMethodChip roleGroupMapping={(access as any).role_group_mapping} />
+              </TableCell>
+              <TableCell>
+                <Started memberships={[access as any]} />
+              </TableCell>
+              <TableCell>
+                <Ending memberships={[access as any]} />
+              </TableCell>
+              <TableCell>
+                {showEndedBy ? (
+                  (access as any).ended_actor ? (
+                    <Link
+                      to={`/users/${(access as any).ended_actor?.email?.toLowerCase?.()}`}
+                      sx={{textDecoration: 'none', color: 'inherit'}}
+                      component={RouterLink}>
+                      {displayUserName((access as any).ended_actor)}
+                    </Link>
+                  ) : (
+                    'System'
+                  )
+                ) : (access as any).created_actor ? (
+                  <Link
+                    to={`/users/${(access as any).created_actor?.email?.toLowerCase?.()}`}
+                    sx={{textDecoration: 'none', color: 'inherit'}}
+                    component={RouterLink}>
+                    {displayUserName((access as any).created_actor)}
+                  </Link>
+                ) : (
+                  'System'
+                )}
+              </TableCell>
+              <TableCell>
+                {(access as any).created_reason ? (
+                  <InlineReason reason={(access as any).created_reason} />
+                ) : (
+                  <InlineReason />
+                )}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      <TablePagination
+        component="div"
+        count={accessEntries.length}
+        page={page}
+        onPageChange={handleChangePage}
+        ActionsComponent={TablePaginationActions}
+        rowsPerPage={rowsPerPage}
+        rowsPerPageOptions={[]}
+      />
+    </>
+  );
+}
diff --git a/src/components/AccessMethodChip.tsx b/src/components/AccessMethodChip.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import Chip from '@mui/material/Chip';
+import {useNavigate} from 'react-router-dom';
+import {RoleGroupMap} from '../api/apiSchemas';
+
+interface AccessMethodChipProps {
+  roleGroupMapping?: RoleGroupMap | null;
+}
+
+export default function AccessMethodChip({roleGroupMapping}: AccessMethodChipProps) {
+  const navigate = useNavigate();
+
+  if (!roleGroupMapping) {
+    return <Chip label="Direct" color="primary" size="small" />;
+  }
+
+  return (
+    <Chip
+      label={roleGroupMapping.role_group?.name}
+      variant="outlined"
+      color="primary"
+      size="small"
+      onClick={() => navigate(`/roles/${roleGroupMapping.role_group?.name}`)}
+      sx={{cursor: 'pointer'}}
+    />
+  );
+}
diff --git a/src/components/InlineReason.tsx b/src/components/InlineReason.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+
+interface InlineReasonProps {
+  reason?: string;
+}
+
+export default function InlineReason({reason}: InlineReasonProps) {
+  if (!reason) {
+    return (
+      <Typography variant="body2" color="text.secondary">
+        No reason given
+      </Typography>
+    );
+  }
+
+  return (
+    <Box sx={{maxWidth: 300}}>
+      <Typography
+        variant="body2"
+        sx={{
+          wordBreak: 'break-word',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          display: '-webkit-box',
+          WebkitLineClamp: 3,
+          WebkitBoxOrient: 'vertical',
+        }}>
+        {reason}
+      </Typography>
+    </Box>
+  );
+}
diff --git a/src/pages/requests/Read.tsx b/src/pages/requests/Read.tsx
@@ -29,6 +29,7 @@ import TimelineContent from '@mui/lab/TimelineContent';
 import CircularProgress from '@mui/material/CircularProgress';
 import TimelineOppositeContent, {timelineOppositeContentClasses} from '@mui/lab/TimelineOppositeContent';
 import TimelineDot from '@mui/lab/TimelineDot';
+import Chip from '@mui/material/Chip';
 import {
   FormContainer,
   SelectElement,
@@ -56,6 +57,8 @@ import {
   useGetGroupById,
   useGetAppById,
   useResolveRequestById,
+  useGetUserGroupAudits,
+  useGetGroupRoleAudits,
   ResolveRequestByIdError,
   ResolveRequestByIdVariables,
 } from '../../api/apiComponents';
@@ -75,6 +78,7 @@ import ChangeTitle from '../../tab-title';
 import Loading from '../../components/Loading';
 import accessConfig from '../../config/accessConfig';
 import {EmptyListEntry} from '../../components/EmptyListEntry';
+import AccessHistory from '../../components/AccessHistory';
 
 dayjs.extend(RelativeTime);
 dayjs.extend(IsSameOrBefore);
@@ -286,6 +290,25 @@ export default function ReadRequest() {
     (m) => m.active_user?.id,
   );
 
+  const {data: userGroupAudits} = useGetUserGroupAudits({
+    queryParams: {
+      user_id: accessRequest.requester?.id ?? '',
+      group_id: accessRequest.requested_group?.id ?? '',
+      per_page: 50,
+      order_by: 'created_at',
+      order_desc: true,
+    },
+  });
+
+  const {data: groupRoleAudits} = useGetGroupRoleAudits({
+    queryParams: {
+      group_id: accessRequest.requested_group?.id ?? '',
+      per_page: 50,
+      order_by: 'created_at',
+      order_desc: true,
+    },
+  });
+
   if (isError) {
     return <NotFound />;
   }
@@ -326,6 +349,16 @@ export default function ReadRequest() {
     });
   };
 
+  // Filter audit data for the specific group and user
+  const userGroupHistory =
+    userGroupAudits?.results?.filter(
+      (audit) =>
+        audit.group?.id === accessRequest.requested_group?.id && audit.user?.id === accessRequest.requester?.id,
+    ) ?? [];
+
+  // Get alternative role mappings for this group
+  const alternativeRoleMappings = groupRoleAudits?.results ?? [];
+
   return (
     <React.Fragment>
       <ChangeTitle
@@ -465,6 +498,18 @@ export default function ReadRequest() {
               </Grid>
             </Paper>
           </Grid>
+
+          {/* Historical Access Information Section */}
+          <Grid item xs={12}>
+            <AccessHistory
+              subjectType="user"
+              subjectName={displayUserName(accessRequest.requester)}
+              groupName={accessRequest.requested_group?.name ?? ''}
+              auditHistory={userGroupHistory}
+              alternativeRoleMappings={alternativeRoleMappings}
+            />
+          </Grid>
+
           <Grid item xs={12}>
             <Timeline
               sx={{