feat: group jobs by their versions

Author: OliverDudgeon

package.json

@@ -52,8 +52,8 @@
     "@rjsf/utils": "5.24.10",
     "@rjsf/validator-ajv8": "5.24.10",
     "@sentry/nextjs": "8.55.0",
-    "@squonk/account-server-client": "4.2.0-rc.8",
-    "@squonk/data-manager-client": "4.0.0-rc.1",
+    "@squonk/account-server-client": "4.2.1",
+    "@squonk/data-manager-client": "4.1.0",
     "@squonk/mui-theme": "5.0.0",
     "@squonk/sdf-parser": "1.3.1",
     "@tanstack/match-sorter-utils": "8.19.4",
@@ -67,6 +67,7 @@
     "@types/prismjs": "1.26.5",
     "@types/react": "19.1.4",
     "@types/react-plotly.js": "2.6.3",
+    "@types/semver": "^7.7.0",
     "axios": "1.9.0",
     "dayjs": "1.11.13",
     "filesize": "10.1.6",
@@ -93,6 +94,7 @@
     "react-dropzone": "14.3.8",
     "react-plotly.js": "2.6.0",
     "react-use-websocket": "4.13.0",
+    "semver": "^7.7.2",
     "sharp": "0.34.1",
     "typescript": "5.8.3",
     "use-immer": "0.11.0",

pnpm-lock.yaml

@@ -86,14 +86,13 @@ export const BaseCard = ({
         />
       )}
       <CardContent>{children}</CardContent>
-      <CardActions disableSpacing sx={{ justifyContent: "right" }}>
+      <CardActions disableSpacing sx={{ justifyContent: "right", display: "flex", alignItems: "flex-start", gap: 1 }}>
         {/* ? should this be a functionCall() or a <ReactElement />
         or should this be separate props with a union and one a never type */}
         {typeof actions === "function" ? actions({ setExpanded }) : actions}
         {collapsed !== undefined && (
           <IconButton
             aria-expanded={expanded}
-            size="large"
             sx={(theme) => ({
               marginLeft: "auto",
               transform: `rotate(${expanded ? 180 : 0}deg)`,

src/components/BaseCard.tsx

@@ -1,23 +1,31 @@
+import { useState } from "react";
+
 import { type JobSummary } from "@squonk/data-manager-client";
 
-import { Alert, Chip, LinearProgress, Link, Typography } from "@mui/material";
+import { Alert, Chip, LinearProgress, Link, MenuItem, TextField, Typography } from "@mui/material";
 import dynamic from "next/dynamic";
+import semver from "semver";
 
 import { BaseCard } from "../../BaseCard";
 import { Chips } from "../../Chips";
 import { type InstancesListProps } from "../InstancesList";
 import { RunJobButton, type RunJobButtonProps } from "./RunJobButton";
 
+const compareJobs = (a: JobSummary, b: JobSummary) => {
+  return -semver.compare(a.version, b.version);
+};
+
+
 const InstancesList = dynamic<InstancesListProps>(
   () => import("../InstancesList").then((mod) => mod.InstancesList),
   { loading: () => <LinearProgress /> },
 );
 
 export interface ApplicationCardProps extends Pick<RunJobButtonProps, "projectId"> {
   /**
-   * the job to be instantiated
+   * the list of jobs (different versions) to be instantiated
    */
-  job: JobSummary;
+  job: JobSummary[];
   /**
    * Whether to disable the button
    */
@@ -28,16 +36,37 @@ export interface ApplicationCardProps extends Pick<RunJobButtonProps, "projectId
  * MuiCard that displays a summary of a job with actions to create new instances and view
  * existing instances.
  */
-export const JobCard = ({ projectId, job, disabled = false }: ApplicationCardProps) => {
+export const JobCard = ({ projectId, job: jobs, disabled = false }: ApplicationCardProps) => {
+  jobs.sort(compareJobs);
+  const [selectedJobId, setSelectedJobId] = useState(jobs[0]?.id || "");
+  const job = jobs.find(j => j.id === selectedJobId) as JobSummary;
+
   return (
     <BaseCard
       actions={({ setExpanded }) => (
-        <RunJobButton
-          disabled={job.disabled || disabled}
-          jobId={job.id}
-          projectId={projectId}
-          onLaunch={() => setExpanded(true)}
-        />
+        <>
+          <TextField
+            select
+            disabled={jobs.length === 1}
+            label="Version"
+            size="small"
+            sx={{ minWidth: 120 }}
+            value={selectedJobId}
+            onChange={(e) => setSelectedJobId(e.target.value)}
+          >
+            {jobs.map((jobVersion) => (
+              <MenuItem key={jobVersion.id} value={jobVersion.id}>
+                {jobVersion.version}
+              </MenuItem>
+            ))}
+          </TextField>
+          <RunJobButton
+            disabled={job.disabled || disabled}
+            jobId={job.id}
+            projectId={projectId}
+            onLaunch={() => setExpanded(true)}
+          />
+        </>
       )}
       collapsed={
         <InstancesList

src/components/runCards/JobCard/JobCard.tsx

@@ -26,7 +26,7 @@ export const TestJobCard = () => {
     <Grid key={job.id} size={{ md: 3, sm: 6, xs: 12 }}>
       <JobCard
         disabled={!hasPermission}
-        job={job as JobSummary} // assertion needed as JSON loader doesn't use string literal types
+        job={[job] as JobSummary[]} // assertion needed as JSON loader doesn't use string literal types
         projectId={currentProject?.project_id}
       />
     </Grid>