fix: fix running workflows list not opening when a workflow is run

Author: OliverDudgeon

src/components/runCards/RunningWorkflowsList.tsx

@@ -0,0 +1,57 @@
+import { type RunningWorkflowSummary } from "@squonk/data-manager-client";
+
+import { Box, List, ListItemButton, ListItemText, Typography } from "@mui/material";
+import A from "next/link";
+
+import { LocalTime } from "../LocalTime";
+
+export interface RunningWorkflowsListProps {
+  runningWorkflows: RunningWorkflowSummary[];
+}
+
+/**
+ * MuiList detailing running workflows.
+ */
+export const RunningWorkflowsList = ({ runningWorkflows }: RunningWorkflowsListProps) => {
+  if (runningWorkflows.length === 0) {
+    return (
+      <Box sx={{ p: 2 }}>
+        <Typography color="text.secondary" variant="body2">
+          No workflows currently exist
+        </Typography>
+      </Box>
+    );
+  }
+
+  // Sort by started descending (most recent first)
+  const sortedRuns = [...runningWorkflows].sort((a, b) => {
+    if (a.started && b.started) {
+      return new Date(b.started).getTime() - new Date(a.started).getTime();
+    }
+    if (a.started) {
+      return -1;
+    }
+    if (b.started) {
+      return 1;
+    }
+    return 0;
+  });
+
+  return (
+    <List dense component="ul">
+      {sortedRuns.map((rw) => (
+        <ListItemButton
+          component={A}
+          href={{ pathname: "/results/workflow/[workflowId]", query: { workflowId: rw.id } }}
+          key={rw.id}
+        >
+          <ListItemText
+            primary={rw.name}
+            secondary={<>{!!rw.started && <LocalTime utcTimestamp={rw.started} />}</>}
+            slotProps={{ primary: { variant: "body1" } }}
+          />
+        </ListItemButton>
+      ))}
+    </List>
+  );
+};

src/components/runCards/WorkflowCard/WorkflowCard.tsx

@@ -1,23 +1,15 @@
-import { type WorkflowSummary } from "@squonk/data-manager-client";
+import { type RunningWorkflowSummary, type WorkflowSummary } from "@squonk/data-manager-client";
 
-import { Box, List, ListItemButton, ListItemText, Typography } from "@mui/material";
-import A from "next/link";
+import { Typography } from "@mui/material";
 
 import { useCurrentProjectId } from "../../../hooks/projectHooks";
 import { BaseCard } from "../../BaseCard";
-import { LocalTime } from "../../LocalTime";
+import { RunningWorkflowsList } from "../RunningWorkflowsList";
 import { RunWorkflowButton } from "./RunWorkflowButton";
 
-export interface WorkflowRunListItem {
-  id: string;
-  name: string;
-  version?: string;
-  started?: string;
-}
-
 export interface WorkflowCardProps {
   workflow: WorkflowSummary;
-  runningWorkflows?: WorkflowRunListItem[];
+  runningWorkflows?: RunningWorkflowSummary[];
 }
 
 /**
@@ -26,63 +18,20 @@ export interface WorkflowCardProps {
  */
 export const WorkflowCard = ({ workflow, runningWorkflows = [] }: WorkflowCardProps) => {
   const { projectId } = useCurrentProjectId();
-  const hasRunning = runningWorkflows.length > 0;
-
-  // Sort by started descending (most recent first)
-  const sortedRuns = [...runningWorkflows].sort((a, b) => {
-    if (a.started && b.started) {
-      return new Date(b.started).getTime() - new Date(a.started).getTime();
-    }
-    if (a.started) {
-      return -1;
-    }
-    if (b.started) {
-      return 1;
-    }
-    return 0;
-  });
 
   return (
     <BaseCard
       accentColor="#f1c40f"
-      actions={() => (
+      actions={({ setExpanded }) => (
         <RunWorkflowButton
           disabled={!projectId}
           name={workflow.workflow_name ?? workflow.name}
           projectId={projectId ?? ""}
           workflowId={workflow.id}
+          onLaunch={() => setExpanded(true)}
         />
       )}
-      collapsed={
-        hasRunning ? (
-          <List dense component="ul">
-            {sortedRuns.map((rw) => (
-              <ListItemButton
-                component={A}
-                href={{ pathname: "/results/workflow/[workflowId]", query: { workflowId: rw.id } }}
-                key={rw.id}
-              >
-                <ListItemText
-                  primary={rw.name}
-                  secondary={
-                    <>
-                      <span style={{ marginRight: 8 }}>version: {rw.version ?? "n/a"}</span>
-                      {!!rw.started && <LocalTime utcTimestamp={rw.started} />}
-                    </>
-                  }
-                  slotProps={{ primary: { variant: "body1" } }}
-                />
-              </ListItemButton>
-            ))}
-          </List>
-        ) : (
-          <Box sx={{ p: 2 }}>
-            <Typography color="text.secondary" variant="body2">
-              No workflows currently exist
-            </Typography>
-          </Box>
-        )
-      }
+      collapsed={<RunningWorkflowsList runningWorkflows={runningWorkflows} />}
       header={{
         subtitle: workflow.name,
         avatar: workflow.name[0],

src/components/runCards/WorkflowCard/WorkflowModal.tsx

@@ -16,13 +16,19 @@ export interface WorkflowModalProps {
   projectId: string;
   open: boolean;
   onClose: () => void;
-  onLaunch?: (instanceId: string) => void;
+  onLaunch?: (runningWorkflowId: string) => void;
 }
 
 /**
  * Modal for running a workflow instance. Fetches workflow details and displays the correct form.
  */
-export const WorkflowModal = ({ workflowId, projectId, open, onClose }: WorkflowModalProps) => {
+export const WorkflowModal = ({
+  workflowId,
+  projectId,
+  open,
+  onClose,
+  onLaunch,
+}: WorkflowModalProps) => {
   const { enqueueError, enqueueSnackbar } = useEnqueueError<DmError>();
 
   const { data: workflow } = useGetWorkflow(workflowId);
@@ -45,17 +51,19 @@ export const WorkflowModal = ({ workflowId, projectId, open, onClose }: Workflow
 
   const handleSubmit = async () => {
     try {
-      workflow?.id &&
-        (await runWorkflow({
+      if (workflow?.id) {
+        const { id } = await runWorkflow({
           workflowId: workflow.id,
           data: {
             as_name: nameState,
             debug,
             project_id: projectId,
             variables: JSON.stringify({ ...optionsFormData, ...inputsData }),
           },
-        }));
-      enqueueSnackbar("Workflow instance started successfully", { variant: "success" });
+        });
+        enqueueSnackbar("Workflow instance started successfully", { variant: "success" });
+        onLaunch && onLaunch(id);
+      }
     } catch (error) {
       enqueueError(error);
     } finally {

src/pages/run.tsx

@@ -16,10 +16,7 @@ import { CenterLoader } from "../components/CenterLoader";
 import { ApplicationCard } from "../components/runCards/ApplicationCard";
 import { JobCard } from "../components/runCards/JobCard";
 import { TEST_JOB_ID } from "../components/runCards/TestJob/jobId";
-import {
-  WorkflowCard,
-  type WorkflowRunListItem,
-} from "../components/runCards/WorkflowCard/WorkflowCard";
+import { WorkflowCard } from "../components/runCards/WorkflowCard/WorkflowCard";
 import { SearchTextField } from "../components/SearchTextField";
 import { AS_ROLES, DM_ROLES } from "../constants/auth";
 import { useCurrentProject, useIsUserAdminOrEditorOfCurrentProject } from "../hooks/projectHooks";
@@ -148,9 +145,7 @@ const Run = () => {
     const workflowCards = Object.entries(filteredAndGroupedWorkflows).map(
       ([name, workflowGroup]) => {
         // Find all runs for this workflow definition
-        const runs: WorkflowRunListItem[] = runningWorkflows
-          .filter((rw) => rw.workflow.id === workflowGroup[0].id)
-          .map((rw) => ({ id: rw.id, name: rw.name }));
+        const runs = runningWorkflows.filter((rw) => rw.workflow.id === workflowGroup[0].id);
 
         return (
           <Grid key={name} size={{ md: 3, sm: 6, xs: 12 }}>