feat(frontend): display creator name in workflow list

Author: JamesDoingStuff

frontend/relay-workflows-lib/lib/components/BaseWorkflowRelay.tsx

@@ -19,6 +19,9 @@ export const BaseWorkflowRelayFragment = graphql`
       proposalNumber
       number
     }
+    creator {
+      creatorId
+    }
     status {
       __typename
     }
@@ -90,6 +93,7 @@ export default function BaseWorkflowRelay({
           name: data.name,
           instrumentSession: data.visit,
           status: statusText as WorkflowStatus,
+          creator: data.creator.creatorId,
         }}
         workflowLink={workflowLink}
         expanded={expanded}

frontend/workflows-lib/lib/components/workflow/WorkflowAccordion.tsx

@@ -47,7 +47,7 @@ const WorkflowAccordion: React.FC<WorkflowProps> = ({
       onChange={onChange}
     >
       <AccordionSummary expandIcon={<ArrowDropDownIcon />}>
-        <Box sx={{ display: "flex", flexGrow: 1, gap: 2 }}>
+        <Box sx={{ display: "flex", flexBasis: 0, flexGrow: 5, gap: 2 }}>
           {getWorkflowStatusIcon(workflow.status)}
           {workflowLink && (
             <Link
@@ -63,6 +63,11 @@ const WorkflowAccordion: React.FC<WorkflowProps> = ({
             })}
           <Typography>{workflow.name}</Typography>
         </Box>
+        <Box flexBasis={0} flexGrow={1}>
+          <Typography color="grey">
+            Creator: {workflow.creator || "Unknown"}
+          </Typography>
+        </Box>
       </AccordionSummary>
       <AccordionDetails>{children}</AccordionDetails>
     </Accordion>

frontend/workflows-lib/lib/types.ts

@@ -44,6 +44,7 @@ export interface Workflow {
   name: string;
   instrumentSession: Visit;
   status: WorkflowStatus;
+  creator: string;
 }
 
 export interface Visit {

frontend/workflows-lib/stories/common.ts

@@ -216,6 +216,7 @@ export const fakeWorkflowA = {
   status: "Failed" as WorkflowStatus,
   workflow: "workflow1",
   instrumentSession: instrumentSession,
+  creator: "abc73575",
 };
 
 export const numpySchema = {

frontend/workflows-lib/tests/components/WorkflowAccordion.test.tsx

@@ -22,8 +22,11 @@ describe("WorkflowAccordion Component", () => {
     tasks: [
       { id: "Task-1", name: "Task 1", status: "Succeeded" as TaskStatus },
     ],
+    creator: "abc12345",
   };
 
+  const mockNoCreatorWorkflow = { ...mockWorkflow, creator: "" };
+
   const MockChildComponent = <div>Mocked ChildComponent</div>;
   it("should render the workflow name and status icon", () => {
     const { getByText } = render(
@@ -37,6 +40,21 @@ describe("WorkflowAccordion Component", () => {
     expect(getByText("Mocked WorkflowStatusIcon")).toBeInTheDocument();
   });
 
+  test.each([
+    // [test description, expected result, mock workflow]
+    ["should display creator name", "abc12345", mockWorkflow],
+    ["should display unknown if no creator", "Unknown", mockNoCreatorWorkflow],
+  ])("%s", (_, expectedResult, workflow) => {
+    const { getByText } = render(
+      <MemoryRouter>
+        <WorkflowAccordion workflow={workflow}>
+          {MockChildComponent}
+        </WorkflowAccordion>
+      </MemoryRouter>,
+    );
+    expect(getByText(`Creator: ${expectedResult}`)).toBeInTheDocument();
+  });
+
   it("should expand the accordion and render children when clicked", () => {
     const { getByText } = render(
       <MemoryRouter>