feat: improve design of app, job and workflow cards

Author: OliverDudgeon

src/components/BaseCard.tsx

@@ -59,6 +59,7 @@ export interface BaseCardProps {
  * * optional actions that are always displayed - {@link actions}
  * * an optional collapsed view that can be enabled by default
  * * children are passed into the main area (unexpanded view) of the component
+ * * coloured top border using the header color
  */
 export const BaseCard = ({
   children,
@@ -72,7 +73,7 @@ export const BaseCard = ({
   const [expanded, setExpanded] = useState(!collapsedByDefault);
 
   return (
-    <Card>
+    <Card sx={{ borderTop: header?.color ? "3px solid" : "none", borderTopColor: header?.color }}>
       {!!header && (
         <CardHeader
           avatar={

src/components/runCards/ApplicationCard/ApplicationCard.tsx

@@ -1,6 +1,6 @@
 import { type ApplicationSummary } from "@squonk/data-manager-client";
 
-import { CircularProgress, LinearProgress } from "@mui/material";
+import { CircularProgress, LinearProgress, Typography } from "@mui/material";
 import dynamic from "next/dynamic";
 
 import { useIsUserAdminOrEditorOfCurrentProject } from "../../../hooks/projectHooks";
@@ -51,6 +51,14 @@ export const ApplicationCard = ({ app, projectId }: ApplicationCardProps) => {
         avatar: app.kind[0],
         color: "secondary.dark",
       }}
-    />
+    >
+      <Typography
+        color="text.secondary"
+        sx={{ textTransform: "uppercase", fontWeight: "bold" }}
+        variant="caption"
+      >
+        Application
+      </Typography>
+    </BaseCard>
   );
 };

src/components/runCards/JobCard/JobCard.tsx

@@ -2,7 +2,18 @@ import { useState } from "react";
 
 import { type JobSummary } from "@squonk/data-manager-client";
 
-import { Alert, Chip, LinearProgress, Link, MenuItem, TextField, Typography } from "@mui/material";
+import { Launch as LaunchIcon } from "@mui/icons-material";
+import {
+  Alert,
+  Box,
+  Chip,
+  IconButton,
+  LinearProgress,
+  MenuItem,
+  TextField,
+  Tooltip,
+  Typography,
+} from "@mui/material";
 import dynamic from "next/dynamic";
 import semver from "semver";
 
@@ -77,24 +88,57 @@ export const JobCard = ({ projectId, job: jobs, disabled = false }: ApplicationC
       header={{ color: "primary.main", subtitle: job.name, avatar: job.job[0], title: job.job }}
       key={projectId} // Reset state when project changes
     >
-      <Typography gutterBottom>{job.description}</Typography>
-      <Typography variant="body2">
-        <Link href={job.doc_url} rel="noopener noreferrer" target="_blank">
-          docs
-        </Link>
+      <Typography
+        color="text.secondary"
+        sx={{ textTransform: "uppercase", fontWeight: "bold" }}
+        variant="caption"
+      >
+        Job
       </Typography>
-      <Typography gutterBottom>
-        {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
-        <em>{job.category || "<none>"}</em> : {job.collection}
-      </Typography>
-      <Chips>
-        {job.keywords?.map((word) => (
-          <Chip color="primary" key={word} label={word} size="small" variant="outlined" />
-        ))}
-      </Chips>
+
+      {!!job.description && (
+        <Typography sx={{ mt: 1, mb: 2, textWrap: "pretty" }} variant="body1">
+          {job.description}
+          {!!job.doc_url && (
+            <Tooltip title="View documentation">
+              <IconButton
+                href={job.doc_url}
+                rel="noopener noreferrer"
+                size="small"
+                sx={{ ml: 0.5, p: 0.25, verticalAlign: "middle" }}
+                target="_blank"
+              >
+                <LaunchIcon sx={{ fontSize: "0.875rem" }} />
+              </IconButton>
+            </Tooltip>
+          )}
+        </Typography>
+      )}
+
+      <Box sx={{ mb: 2 }}>
+        <Typography gutterBottom color="text.secondary" variant="body2">
+          Category & Collection:
+        </Typography>
+        <Typography variant="body1">
+          <em>{job.category ?? "No category"}</em> • {job.collection}
+        </Typography>
+      </Box>
+
+      {!!job.keywords && job.keywords.length > 0 && (
+        <Box sx={{ mb: 2 }}>
+          <Typography gutterBottom color="text.secondary" variant="body2">
+            Keywords:
+          </Typography>
+          <Chips>
+            {job.keywords.map((word) => (
+              <Chip color="primary" key={word} label={word} size="small" variant="outlined" />
+            ))}
+          </Chips>
+        </Box>
+      )}
 
       {!!job.disabled_reason && (
-        <Alert severity="warning" sx={{ mt: 1, mb: -2 }}>
+        <Alert severity="warning" sx={{ mt: 1 }}>
           {job.disabled_reason}
         </Alert>
       )}

src/components/runCards/WorkflowCard/WorkflowCard.tsx

@@ -90,21 +90,19 @@ export const WorkflowCard = ({ workflow, runningWorkflows = [] }: WorkflowCardPr
       }}
       key={workflow.id}
     >
+      <Typography
+        color="text.secondary"
+        sx={{ textTransform: "uppercase", fontWeight: "bold" }}
+        variant="caption"
+      >
+        Workflow
+      </Typography>
       <Typography gutterBottom>
         {workflow.workflow_description ?? <em>No description</em>}
       </Typography>
       <Typography gutterBottom variant="body2">
         Version: {workflow.version ?? <em>n/a</em>}
       </Typography>
-      <Typography gutterBottom variant="body2">
-        Scope: {workflow.scope}
-        {workflow.scope_id ? ` (${workflow.scope_id})` : null}
-      </Typography>
-      {!!workflow.source_id && (
-        <Typography gutterBottom variant="body2">
-          Source Workflow ID: {workflow.source_id}
-        </Typography>
-      )}
     </BaseCard>
   );
 };