fix: fix default name for jobs to be usable

Author: OliverDudgeon

src/components/BaseCard.tsx

@@ -48,7 +48,11 @@ export interface BaseCardProps {
    * String values to be displayed in the header section of the card. Only title is required.
    * Missing values are not displayed.
    */
-  header?: { title: string; subtitle?: string; avatar?: string; color?: string };
+  header?: { title: string; subtitle?: string; avatar?: string };
+  /**
+   * Color for the avatar background and top border
+   */
+  accentColor?: string;
 }
 
 /**
@@ -68,16 +72,17 @@ export const BaseCard = ({
   collapsed,
   keepCollapsedMounted = true,
   collapsedByDefault = true,
+  accentColor,
 }: BaseCardProps) => {
   const [hasExpanded, setHasExpanded] = useState(!collapsedByDefault);
   const [expanded, setExpanded] = useState(!collapsedByDefault);
 
   return (
-    <Card sx={{ borderTop: header?.color ? "3px solid" : "none", borderTopColor: header?.color }}>
+    <Card sx={{ borderTop: accentColor ? "3px solid" : "none", borderTopColor: accentColor }}>
       {!!header && (
         <CardHeader
           avatar={
-            <Avatar sx={{ fontFamily: "verdana", backgroundColor: header.color ?? "transparent" }}>
+            <Avatar sx={{ fontFamily: "verdana", backgroundColor: accentColor ?? "transparent" }}>
               {header.avatar?.[0].toUpperCase()}
             </Avatar>
           }

src/components/RunningWorkflowCard/RunningWorkflowCard.tsx

@@ -199,6 +199,7 @@ export const RunningWorkflowCard = ({
 
   return (
     <ResultCard
+      accentColor="#f1c40f"
       actions={() => null}
       collapsed={collapsed}
       collapsedByDefault={collapsedByDefault}

src/components/instances/ResultJobCard.tsx

@@ -53,6 +53,7 @@ export const ResultJobCard = ({
 
   return (
     <ResultCard
+      accentColor="primary.main"
       actions={({ setSlideIn }) => (
         <>
           <TerminateInstance

src/components/results/ResultCard.tsx

@@ -42,13 +42,15 @@ export const ResultCard: FC<ResultCardProps> = ({
   collapsedByDefault = true,
   collapsed,
   children,
+  accentColor,
 }) => {
   const [slideIn, setSlideIn] = useState(true);
 
   return (
     <Slide appear={false} direction="right" in={slideIn}>
       <div>
         <BaseCard
+          accentColor={accentColor}
           actions={(params) => actions({ ...params, slideIn, setSlideIn })}
           collapsed={<CardContent>{collapsed}</CardContent>}
           collapsedByDefault={collapsedByDefault}

src/components/runCards/ApplicationCard/ApplicationCard.tsx

@@ -34,6 +34,7 @@ export const ApplicationCard = ({ app, projectId }: ApplicationCardProps) => {
 
   return (
     <BaseCard
+      accentColor="secondary.dark"
       actions={({ setExpanded }) => (
         <ApplicationModalButton
           applicationId={app.application_id}
@@ -45,12 +46,7 @@ export const ApplicationCard = ({ app, projectId }: ApplicationCardProps) => {
       collapsed={
         <InstancesList predicate={(instance) => instance.application_id === app.application_id} />
       }
-      header={{
-        title: app.kind,
-        subtitle: app.group,
-        avatar: app.kind[0],
-        color: "secondary.dark",
-      }}
+      header={{ title: app.kind, subtitle: app.group, avatar: app.kind[0] }}
     >
       <Typography
         color="text.secondary"

src/components/runCards/JobCard/JobCard.tsx

@@ -53,6 +53,7 @@ export const JobCard = ({ projectId, job: jobs, disabled = false }: ApplicationC
 
   return (
     <BaseCard
+      accentColor="primary.main"
       actions={({ setExpanded }) => (
         <>
           <TextField
@@ -85,7 +86,7 @@ export const JobCard = ({ projectId, job: jobs, disabled = false }: ApplicationC
           }
         />
       }
-      header={{ color: "primary.main", subtitle: job.name, avatar: job.job[0], title: job.job }}
+      header={{ subtitle: job.name, avatar: job.job[0], title: job.job }}
       key={projectId} // Reset state when project changes
     >
       <Typography

src/components/runCards/JobCard/JobModal.tsx

@@ -76,10 +76,10 @@ export const JobModal = ({
   const { data: job } = useGetJob(jobId, undefined, {
     query: { retry: jobId === TEST_JOB_ID ? 1 : 3 },
   });
-  const [nameState, setNameState] = useState(instance?.name ?? "");
+  const [nameState, setNameState] = useState(instance?.job_name ?? "");
   useEffect(() => {
-    job?.name && setNameState(job.name);
-  }, [job?.name]);
+    job?.job && setNameState(job.job);
+  }, [job?.job]);
 
   const spec = instance?.application_specification;
   const specVariables = useMemo(

src/components/runCards/WorkflowCard/WorkflowCard.tsx

@@ -44,6 +44,7 @@ export const WorkflowCard = ({ workflow, runningWorkflows = [] }: WorkflowCardPr
 
   return (
     <BaseCard
+      accentColor="#f1c40f"
       actions={() => (
         <RunWorkflowButton
           disabled={!projectId}
@@ -83,7 +84,6 @@ export const WorkflowCard = ({ workflow, runningWorkflows = [] }: WorkflowCardPr
         )
       }
       header={{
-        color: "#f1c40f",
         subtitle: workflow.name,
         avatar: workflow.name[0],
         title: workflow.workflow_name ?? workflow.name,