feat: implement breadcrumbs according to design (#131)

* move breadcrumbs out of App.tsx

* fix breadcrumbs in chat route

* remove breadcrubms from dashboard route

* add breadcrumbs to workspaces page

* add breadcrumbs to edit workspace page

* extract <BreadcrumbHome /> component

* simplify implementation of visual gaps on routes

* fix breadcrum test on workspace settings page

* add breadcrumbs for test

* add breadcrumbs to certificates

* add breadcrumbs to certificate security

* delete unused code

Author: kantord

src/App.test.tsx

@@ -56,14 +56,4 @@ describe("App", () => {
       ).toBeVisible(),
     );
   });
-
-  it("should render breadcrumb", async () => {
-    render(<App />);
-    await waitFor(() =>
-      expect(
-        screen.getByRole("link", { name: "CodeGate Dashboard" }),
-      ).toBeVisible(),
-    );
-    expect(screen.getByRole("link", { name: "Dashboard" })).toBeVisible();
-  });
 });

src/App.tsx

@@ -1,17 +1,9 @@
 import { Header } from "./components/Header";
 import { PromptList } from "./components/PromptList";
-import { Routes, Route, Link } from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
 import { usePromptsData } from "./hooks/usePromptsData";
 import { Sidebar } from "./components/Sidebar";
 import { useSse } from "./hooks/useSse";
-import {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbSeparator,
-  BreadcrumbPage,
-} from "./components/ui/breadcrumb";
-import { useBreadcrumb } from "./hooks/useBreadcrumb";
 import { RouteWorkspace } from "./routes/route-workspace";
 import { RouteWorkspaces } from "./routes/route-workspaces";
 import { RouteCertificates } from "./routes/route-certificates";
@@ -23,7 +15,6 @@ import { RouteCertificateSecurity } from "./routes/route-certificate-security";
 function App() {
   const { data: prompts, isLoading } = usePromptsData();
   useSse();
-  const breadcrumb = useBreadcrumb();
 
   return (
     <div className="flex w-screen h-screen">
@@ -33,27 +24,7 @@ function App() {
       <div className="flex-1 flex flex-col overflow-hidden">
         <Header />
 
-        <div className="px-6 py-3">
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <Link to="/">Dashboard</Link>
-              </BreadcrumbItem>
-              {breadcrumb && (
-                <>
-                  <BreadcrumbSeparator />
-                  <BreadcrumbItem>
-                    <BreadcrumbPage className="w-96 truncate">
-                      {breadcrumb}
-                    </BreadcrumbPage>
-                  </BreadcrumbItem>
-                </>
-              )}
-            </BreadcrumbList>
-          </Breadcrumb>
-        </div>
-
-        <div className="flex-1 overflow-y-auto p-6">
+        <div className="flex-1 overflow-y-auto p-6 flex flex-col gap-3">
           <Routes>
             <Route path="/" element={<RouteDashboard />} />
             <Route path="/prompt/:id" element={<RouteChat />} />

src/components/BreadcrumbHome.tsx

@@ -0,0 +1,5 @@
+import { Breadcrumb } from "@stacklok/ui-kit";
+
+export function BreadcrumbHome() {
+  return <Breadcrumb href="/">Dashboard</Breadcrumb>;
+}

src/components/ui/breadcrumb.tsx

@@ -0,0 +1,19 @@
+import { render } from "@/lib/test-utils";
+import { screen, within } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { RouteCertificateSecurity } from "../route-certificate-security";
+
+describe("Certificate security", () => {
+  it("has breadcrumbs", () => {
+    render(<RouteCertificateSecurity />);
+
+    const breadcrumbs = screen.getByRole("list", { name: "Breadcrumbs" });
+    expect(breadcrumbs).toBeVisible();
+    expect(
+      within(breadcrumbs).getByRole("link", { name: "Dashboard" }),
+    ).toHaveAttribute("href", "/");
+    expect(
+      within(breadcrumbs).getByText(/certificate security/i),
+    ).toBeVisible();
+  });
+});

src/hooks/__tests__/useBreadcrumb.test.tsx

@@ -1,5 +1,5 @@
 import { render } from "@/lib/test-utils";
-import { screen } from "@testing-library/react";
+import { screen, within } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 import userEvent from "@testing-library/user-event";
 import { RouteCertificates } from "../route-certificates";
@@ -27,6 +27,17 @@ describe("Certificates", () => {
     expect(screen.getByText("Linux")).toBeVisible();
   });
 
+  it("has breadcrumbs", () => {
+    render(<RouteCertificates />);
+
+    const breadcrumbs = screen.getByRole("list", { name: "Breadcrumbs" });
+    expect(breadcrumbs).toBeVisible();
+    expect(
+      within(breadcrumbs).getByRole("link", { name: "Dashboard" }),
+    ).toHaveAttribute("href", "/");
+    expect(within(breadcrumbs).getByText(/certificates/i)).toBeVisible();
+  });
+
   it("should render macOS certificate installation", async () => {
     render(<RouteCertificates />);
 

src/hooks/useBreadcrumb.ts

@@ -49,7 +49,7 @@ vi.mock("@/hooks/usePromptsData", () => ({
 }));
 
 describe("Chat", () => {
-  it("should render secret issue chat", () => {
+  it("render secret issue chat", () => {
     render(<RouteChat />, {
       routeConfig: {
         initialEntries: ["/prompt/chatcmpl-7d87679de7ed41639eb91d8ebbaa6f72"],
@@ -60,9 +60,6 @@ describe("Chat", () => {
     expect(screen.getByText(/REDACTED</i)).toBeVisible();
     expect(screen.getByTestId("avatar-user")).toBeVisible();
     expect(screen.getByTestId("avatar-ai")).toBeVisible();
-    expect(
-      screen.getByText(/do you see any security issue\?\./i),
-    ).toBeVisible();
     expect(
       screen.getByRole("heading", {
         name: /recommendations for security improvements/i,
@@ -76,5 +73,14 @@ describe("Chat", () => {
         .getByRole("code")
         .className.includes("language-tsx"),
     ).toBeTruthy();
+
+    const breadcrumbs = screen.getByRole("list", { name: "Breadcrumbs" });
+    expect(breadcrumbs).toBeVisible();
+    expect(
+      within(breadcrumbs).getByRole("link", { name: "Dashboard" }),
+    ).toHaveAttribute("href", "/");
+    expect(
+      within(breadcrumbs).getByText(/do you see any security issue/i),
+    ).toBeVisible();
   });
 });

src/routes/__tests__/route-certificate-security.test.tsx

@@ -0,0 +1,21 @@
+import { render } from "@/lib/test-utils";
+import { screen, within } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { RouteHelp } from "../route-help";
+
+describe("Help page", () => {
+  it("has breadcrumbs", () => {
+    render(<RouteHelp />, {
+      routeConfig: {
+        initialEntries: ["/help/continue-setup"],
+      },
+      pathConfig: "/help/:id",
+    });
+    const breadcrumbs = screen.getByRole("list", { name: "Breadcrumbs" });
+    expect(breadcrumbs).toBeVisible();
+    expect(
+      within(breadcrumbs).getByRole("link", { name: "Dashboard" }),
+    ).toHaveAttribute("href", "/");
+    expect(within(breadcrumbs).getByText(/help/i)).toBeVisible();
+  });
+});