feat(results-page): add title to instance page and make project list item clickable

Author: OliverDudgeon

components/instances/Instance.tsx

@@ -6,19 +6,22 @@ import { captureException } from "@sentry/nextjs";
 
 import { getErrorMessage } from "../../utils/next/orvalError";
 import { CenterLoader } from "../CenterLoader";
+import type { ProjectListItemProps } from "../projects/ProjectListItem";
 import { ResultApplicationCard } from "./ResultApplicationCard";
 import { ResultJobCard } from "./ResultJobCard";
 
 export interface InstanceProps {
   instanceId: InstanceSummary["id"];
   instanceSummary?: InstanceSummary;
+  projectClickAction: ProjectListItemProps["clickAction"];
   collapsedByDefault?: boolean;
 }
 
 export const Instance = ({
   instanceId,
-  collapsedByDefault = true,
+  projectClickAction,
   instanceSummary,
+  collapsedByDefault = true,
 }: InstanceProps) => {
   // The instance summary is sufficient but not always provided. If only the ID is provided, the
   // instance get response is then requested and switched in.
@@ -45,6 +48,7 @@ export const Instance = ({
               collapsedByDefault={collapsedByDefault}
               instance={instance}
               instanceId={instanceId}
+              projectClickAction={projectClickAction}
             />
           </Box>
         );
@@ -54,6 +58,7 @@ export const Instance = ({
             collapsedByDefault={collapsedByDefault}
             instance={instance}
             instanceId={instanceId}
+            projectClickAction={projectClickAction}
           />
         );
       default:

components/instances/ResultApplicationCard.tsx

@@ -21,6 +21,10 @@ export interface ResultApplicationCardProps {
    * Instance of the application
    */
   instance: InstanceSummary | InstanceGetResponse;
+  /**
+   * Action to take when the project is clicked
+   */
+  projectClickAction: "select-project" | "navigate-to-project";
   /**
    * Whether the card should have its collapsed content visible immediately. Defaults to true.
    */
@@ -30,6 +34,7 @@ export interface ResultApplicationCardProps {
 export const ResultApplicationCard = ({
   instance,
   instanceId,
+  projectClickAction,
   collapsedByDefault = true,
 }: ResultApplicationCardProps) => {
   const query = useInstanceRouterQuery();
@@ -78,9 +83,11 @@ export const ResultApplicationCard = ({
       state={instance.phase}
     >
       <ListItem>
-        <ListItemText primary={instance.name} />
+        <ListItemText primary={instance.name} secondary={instance.application_id} />
       </ListItem>
-      <ProjectListItem projectName={associatedProject?.name || "loading..."} />
+      {associatedProject && (
+        <ProjectListItem clickAction={projectClickAction} project={associatedProject} />
+      )}
       <ArchivedStatus archived={instance.archived} />
     </ResultCard>
   );

components/instances/ResultJobCard.tsx

@@ -6,6 +6,7 @@ import { LogsButton } from "../../components/results/LogsButton";
 import { RerunJobButton } from "../../components/results/RerunJobButton";
 import { ResultCard } from "../../components/results/ResultCard";
 import { useIsUserAdminOrEditorOfCurrentProject, useProjectFromId } from "../../hooks/projectHooks";
+import type { ProjectListItemProps } from "../projects/ProjectListItem";
 import { ProjectListItem } from "../projects/ProjectListItem";
 import { ArchivedStatus } from "./ArchivedStatus";
 import { ArchiveInstance } from "./ArchiveInstance";
@@ -25,6 +26,10 @@ export interface ResultJobCardProps {
    * Instance of the job
    */
   instance: InstanceSummary | InstanceGetResponse;
+  /**
+   * Action to take when the project is clicked
+   */
+  projectClickAction: ProjectListItemProps["clickAction"];
   collapsedByDefault?: boolean;
 }
 
@@ -34,6 +39,7 @@ export interface ResultJobCardProps {
 export const ResultJobCard = ({
   instanceId,
   instance,
+  projectClickAction,
   collapsedByDefault = true,
 }: ResultJobCardProps) => {
   const query = useInstanceRouterQuery();
@@ -80,7 +86,9 @@ export const ResultJobCard = ({
       <ListItem>
         <ListItemText primary={instance.name} secondary={instance.job_name} />
       </ListItem>
-      <ProjectListItem projectName={associatedProject?.name || "loading..."} />
+      {associatedProject && (
+        <ProjectListItem clickAction={projectClickAction} project={associatedProject} />
+      )}
       <ArchivedStatus archived={instance.archived} />
     </ResultCard>
   );

components/projects/ProjectListItem.tsx

@@ -1,17 +1,46 @@
+import type { ProjectDetail } from "@squonk/data-manager-client";
+
 import { AccountTreeRounded as AccountTreeRoundedIcon } from "@mui/icons-material";
-import { ListItem, ListItemIcon, ListItemText } from "@mui/material";
+import { ListItemButton, ListItemIcon, ListItemText, Tooltip } from "@mui/material";
+import { useRouter } from "next/router";
+
+import { useCurrentProjectId } from "../../hooks/projectHooks";
+
+type ProjectClickActions = "select-project" | "navigate-to-project";
 
 export interface ProjectListItemProps {
-  projectName: string;
+  project: ProjectDetail;
+  clickAction: ProjectClickActions;
 }
 
-export const ProjectListItem = ({ projectName }: ProjectListItemProps) => {
+export const TOOLTIPS = {
+  "select-project": "Select project",
+  "navigate-to-project": "Go to project",
+} as const satisfies Record<ProjectClickActions, string>;
+
+export const ProjectListItem = ({ project, clickAction }: ProjectListItemProps) => {
+  const { projectId, setCurrentProjectId } = useCurrentProjectId();
+  const { push } = useRouter();
+
+  const action =
+    clickAction === "navigate-to-project" || projectId === project.project_id
+      ? "navigate-to-project"
+      : "select-project";
+
+  const onClick = () => {
+    setCurrentProjectId(project.project_id);
+    if (action === "navigate-to-project") {
+      push("/project");
+    }
+  };
   return (
-    <ListItem>
-      <ListItemIcon sx={{ minWidth: "40px" }}>
-        <AccountTreeRoundedIcon />
-      </ListItemIcon>
-      <ListItemText primary={projectName} />
-    </ListItem>
+    <Tooltip title={TOOLTIPS[action]}>
+      <ListItemButton component="li" sx={{ flexGrow: 0 }} onClick={onClick}>
+        <ListItemIcon sx={{ minWidth: "40px" }}>
+          <AccountTreeRoundedIcon />
+        </ListItemIcon>
+        <ListItemText primary={project.name} />
+      </ListItemButton>
+    </Tooltip>
   );
 };

features/results/ResultCards.tsx

@@ -78,7 +78,11 @@ export const ResultCards = ({ resultTypes, searchValue, instances, tasks }: Resu
       const instance = instanceOrTask;
       return (
         <Grid item key={instance.id} xs={12}>
-          <Instance instanceId={instance.id} instanceSummary={instance} />
+          <Instance
+            instanceId={instance.id}
+            instanceSummary={instance}
+            projectClickAction="select-project"
+          />
         </Grid>
       );
     });

pages/results/instance/[instanceId].tsx

@@ -2,7 +2,7 @@ import { getGetInstanceQueryKey } from "@squonk/data-manager-client/instance";
 
 import { withPageAuthRequired as withPageAuthRequiredCSR } from "@auth0/nextjs-auth0/client";
 import { RefreshRounded as RefreshRoundedIcon } from "@mui/icons-material";
-import { Box, Container, IconButton, Tooltip } from "@mui/material";
+import { Box, Container, IconButton, Tooltip, Typography } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 import NextError from "next/error";
 import { useRouter } from "next/router";
@@ -34,6 +34,9 @@ const Result = () => {
       <RoleRequired roles={AS_ROLES}>
         <Layout>
           <Container maxWidth="md">
+            <Typography component="h1" variant="h1">
+              Instance
+            </Typography>
             <Box alignItems="flex-start" display="flex">
               <EventDebugSwitch />
               <Tooltip title="Refresh Instance">
@@ -49,7 +52,11 @@ const Result = () => {
 
             {instanceId && <InstanceTitle instanceId={instanceId} />}
 
-            <Instance collapsedByDefault={false} instanceId={instanceId} />
+            <Instance
+              collapsedByDefault={false}
+              instanceId={instanceId}
+              projectClickAction="navigate-to-project"
+            />
             <AllResultsButton instanceId={instanceId} />
           </Container>
         </Layout>