use ProjectHistoryLog drawer

src/scenes/Projects/Overview/ProjectOverview.graphql

@@ -94,7 +94,11 @@ fragment ProjectOverview on Project {
     ...ProjectChangeRequestSummary
   }
 
-  # We're including this in order to update the engagament status
+  workflowEvents {
+    ...StatusWorkflowEvent
+  }
+
+  # We're including this in order to update the engagement status
   # when the project step changes.
   engagements {
     items {

src/scenes/Projects/Overview/ProjectOverview.tsx

@@ -6,12 +6,14 @@ import {
   Event as EventIcon,
   TravelExplore as GlobalSearchIcon,
   Public as GlobeIcon,
+  History as HistoryIcon,
   Place as MapPinIcon,
   Publish,
   Timeline as TimelineIcon,
 } from '@mui/icons-material';
 import { Chip, Grid, Skeleton, Tooltip, Typography } from '@mui/material';
 import { Many } from '@seedcompany/common';
+import { useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { Helmet } from 'react-helmet-async';
 import { makeStyles } from 'tss-react/mui';
@@ -52,6 +54,7 @@ import { CreateLanguageEngagement } from '../../Engagement/LanguageEngagement/Cr
 import { DeleteProject } from '../Delete';
 import { useProjectCurrentDirectory, useUploadProjectFiles } from '../Files';
 import { ProjectListQueryVariables } from '../List/projects.graphql';
+import { StatusHistoryDrawer } from '../StatusHistory/StatusHistoryDrawer';
 import { EditableProjectField, UpdateProjectDialog } from '../Update';
 import { ProjectWorkflowDialog } from '../Update/ProjectWorkflowDialog';
 import { useProjectId } from '../useProjectId';
@@ -117,6 +120,7 @@ export const ProjectOverview = () => {
   const { projectId, changesetId } = useProjectId();
   const beta = useBetaFeatures();
   const formatNumber = useNumberFormatter();
+  const [openHistory, setOpenHistory] = useState(false);
 
   const [editState, editField, fieldsBeingEdited] =
     useDialog<Many<EditableProjectField>>();
@@ -243,6 +247,17 @@ export const ProjectOverview = () => {
               }
             />
             {project && <DeleteProject project={project} />}
+            {project && (
+              <Tooltip title="View Status History Log">
+                <IconButton
+                  aria-label="view status history log"
+                  onClick={() => setOpenHistory(true)}
+                  loading={!project}
+                >
+                  <HistoryIcon />
+                </IconButton>
+              </Tooltip>
+            )}
           </header>
 
           <div className={classes.subheader}>
@@ -573,6 +588,13 @@ export const ProjectOverview = () => {
       {project && (
         <CreateEngagement project={project} {...createEngagementState} />
       )}
+      {project && (
+        <StatusHistoryDrawer
+          workflowEvents={project.workflowEvents}
+          open={openHistory}
+          setOpen={setOpenHistory}
+        />
+      )}
     </main>
   );
 };