From 1446df6e514f54fdc5628bc8cb24bc02fdbcde99 Mon Sep 17 00:00:00 2001
From: elijahbenizzy <elijah_ben_izzy@alumni.brown.edu>
Date: Mon, 29 Apr 2024 14:48:31 -0700
Subject: [PATCH] Breadcrumb nav updates

This fixes up the breadcrumb so we have clickable nav.
It's still not running on the runs page but it'll do for now.
---
 .../dashboard/Catalog/SearchTable.tsx         |  1 -
 .../components/dashboard/NavBreadCrumb.tsx    | 28 +++++++++++++------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/ui/frontend/src/components/dashboard/Catalog/SearchTable.tsx b/ui/frontend/src/components/dashboard/Catalog/SearchTable.tsx
index 4ec3f5a2e..2a304b59f 100644
--- a/ui/frontend/src/components/dashboard/Catalog/SearchTable.tsx
+++ b/ui/frontend/src/components/dashboard/Catalog/SearchTable.tsx
@@ -242,7 +242,6 @@ const extractTableData = (
       projectVersionName: "",
       projectId: projectId,
       codeArtifact: codeArtifactsById.get(node.code_artifacts?.[0]),
-
       // runInfo: [],
     };
   });
diff --git a/ui/frontend/src/components/dashboard/NavBreadCrumb.tsx b/ui/frontend/src/components/dashboard/NavBreadCrumb.tsx
index d8aa38eb6..f7ba0d4fa 100644
--- a/ui/frontend/src/components/dashboard/NavBreadCrumb.tsx
+++ b/ui/frontend/src/components/dashboard/NavBreadCrumb.tsx
@@ -1,5 +1,6 @@
 import { ChevronRightIcon, HomeIcon } from "@heroicons/react/20/solid";
 import { DAGTemplateWithoutData, Project } from "../../state/api/friendlyApi";
+import { Link } from "react-router-dom";
 
 export const NavBreadCrumb = (props: {
   project: Project;
@@ -18,19 +19,27 @@ export const NavBreadCrumb = (props: {
             : index == 3
             ? props.dagTemplates[0]?.name
             : pathName;
+        let linkPath =
+          "/dashboard/" +
+          pathNameRelativeToDashboard.slice(0, index + 1).join("/");
+        if (linkPath.endsWith("/project")) {
+          linkPath = "/dashboard/projects";
+        } else if (linkPath.endsWith("/version")) {
+          linkPath = linkPath.replace("/version", "/versions");
+        }
         return (
           // TODO -- enable when we can get this working -- we just need to link for links that exist
           // Should be easy I just don't have time now
-          <span
-            // to={
-            //   "/dashboard/" +
-            //   pathNameRelativeToDashboard.slice(0, index + 1).join("/")
-            // }
+          <Link
+            to={
+              "/dashboard/" +
+              pathNameRelativeToDashboard.slice(0, index + 1).join("/")
+            }
             key={linkName}
-            className="ml-4 font-medium hover:text-gray-800"
+            className="ml-4 font-medium hover:text-gray-800 cursor-pointer hover:scale-105"
           >
             {linkName}
-          </span>
+          </Link>
         );
       }),
     ];
@@ -41,7 +50,10 @@ export const NavBreadCrumb = (props: {
   const elements = getElements();
 
   return (
-    <nav className="flex max-w-full bg-transparent" aria-label="Breadcrumb">
+    <nav
+      className="flex max-w-full bg-transparent z-50"
+      aria-label="Breadcrumb"
+    >
       <ol role="list" className="flex items-center space-x-4 flex-wrap">
         <li>
           <div>