From cabb03a773c6caa9f0f4613fd2b02f301ba08a3b Mon Sep 17 00:00:00 2001
From: Giuseppe Scuglia <peppescg@gmail.com>
Date: Mon, 20 Jan 2025 10:49:39 +0100
Subject: [PATCH 1/5] feat(workspace): add workspace dropdown selection

---
 src/components/Header.tsx                     |  9 +-
 .../components/workspaces-selection.tsx       | 89 +++++++++++++++++++
 2 files changed, 95 insertions(+), 3 deletions(-)
 create mode 100644 src/features/workspace/components/workspaces-selection.tsx

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index b4bc5743..2f28839c 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -2,6 +2,7 @@ import { Link } from "react-router-dom";
 import { SidebarTrigger } from "./ui/sidebar";
 import { HoverPopover } from "./HoverPopover";
 import { Separator, ButtonDarkMode } from "@stacklok/ui-kit";
+import { WorkspacesSelection } from "@/features/workspace/components/workspaces-selection";
 
 export function Header({ hasError }: { hasError?: boolean }) {
   return (
@@ -9,21 +10,23 @@ export function Header({ hasError }: { hasError?: boolean }) {
       aria-label="App header"
       className="shrink-0 h-16 px-3 items-center flex w-full bg-gray-25 border-b-gray-200 border-b"
     >
-      <div className="flex items-center flex-1">
+      <div className="flex items-center gap-2 flex-1">
         {!hasError && (
           <>
             <SidebarTrigger />
-            <Separator orientation="vertical" className="h-8 mx-2" />
+            <Separator orientation="vertical" className="h-8" />
           </>
         )}
 
-        <nav className="mr-1 flex ml-2">
+        <nav className="flex ml-2">
           <Link to="/">
             <h1 className="text-2xl text-primary font-title w-max flex font-semibold">
               CodeGate Dashboard
             </h1>
           </Link>
         </nav>
+        <Separator orientation="vertical" className="h-8 ml-4" />
+        <WorkspacesSelection />
       </div>
       <div className="flex items-center gap-4 mr-16">
         <HoverPopover title="Certificates">
diff --git a/src/features/workspace/components/workspaces-selection.tsx b/src/features/workspace/components/workspaces-selection.tsx
new file mode 100644
index 00000000..59088253
--- /dev/null
+++ b/src/features/workspace/components/workspaces-selection.tsx
@@ -0,0 +1,89 @@
+import { useWorkspacesData } from "@/hooks/useWorkspacesData";
+import {
+  Button,
+  DialogTrigger,
+  Input,
+  ListBox,
+  ListBoxItem,
+  Popover,
+  SearchField,
+  Separator,
+} from "@stacklok/ui-kit";
+import { useQueryClient } from "@tanstack/react-query";
+import clsx from "clsx";
+import { ChevronDown, Search, Settings } from "lucide-react";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+
+export function WorkspacesSelection() {
+  const queryClient = useQueryClient();
+  const { data } = useWorkspacesData();
+  const [searchWorkspace, setSearchWorkspace] = useState("");
+  const workspaces = data?.workspaces ?? [];
+  const filteredWorkspaces = workspaces.filter((workspace) =>
+    workspace.name.toLowerCase().includes(searchWorkspace.toLowerCase()),
+  );
+  const activeWorkspace = workspaces.find((workspace) => workspace.is_active);
+
+  const handleWorkspaceClick = () => {
+    queryClient.invalidateQueries({ refetchType: "all" });
+  };
+
+  return (
+    <DialogTrigger>
+      <Button variant="tertiary" className="flex cursor-pointer">
+        Workspace {activeWorkspace?.name ?? "default"}
+        <ChevronDown />
+      </Button>
+
+      <Popover className="w-1/4 p-4" placement="bottom left">
+        <div>
+          <div>
+            <SearchField
+              onChange={setSearchWorkspace}
+              autoFocus
+              aria-label="search"
+            >
+              <Input icon={<Search />} />
+            </SearchField>
+          </div>
+
+          <ListBox
+            className="pb-2 pt-3"
+            aria-label="Workspaces"
+            items={filteredWorkspaces}
+            selectedKeys={activeWorkspace?.name ?? []}
+            renderEmptyState={() => (
+              <p className="text-center">No workspaces found</p>
+            )}
+          >
+            {(item) => (
+              <ListBoxItem
+                id={item.name}
+                onAction={() => handleWorkspaceClick()}
+                className={clsx(
+                  "cursor-pointer py-2 m-1 text-base hover:bg-gray-300",
+                  {
+                    "bg-gray-900 text-white hover:text-secondary":
+                      item.is_active,
+                  },
+                )}
+                key={item.name}
+              >
+                {item.name}
+              </ListBoxItem>
+            )}
+          </ListBox>
+          <Separator className="" />
+          <Link
+            to="/workspaces"
+            className="text-secondary pt-3 px-2 gap-2 flex"
+          >
+            <Settings />
+            Manage Workspaces
+          </Link>
+        </div>
+      </Popover>
+    </DialogTrigger>
+  );
+}

From 5a7016c0839f1a25130b80a22cacc26c0e36db84 Mon Sep 17 00:00:00 2001
From: Giuseppe Scuglia <peppescg@gmail.com>
Date: Mon, 20 Jan 2025 10:50:03 +0100
Subject: [PATCH 2/5] fix: invalidate cache should be called only for alerts
 event

---
 src/hooks/useSse.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useSse.ts b/src/hooks/useSse.ts
index 9ee84483..c72441a5 100644
--- a/src/hooks/useSse.ts
+++ b/src/hooks/useSse.ts
@@ -16,8 +16,8 @@ export function useSse() {
     );
 
     eventSource.onmessage = function (event) {
-      queryClient.invalidateQueries({ refetchType: "all" });
       if (event.data.toLowerCase().includes("new alert detected")) {
+        queryClient.invalidateQueries({ refetchType: "all" });
         sendNotification("CodeGate Dashboard", {
           body: "New Alert detected!",
         });

From b0d16f0628cde8e3c2e2f4ce1d0de42207680703 Mon Sep 17 00:00:00 2001
From: Giuseppe Scuglia <peppescg@gmail.com>
Date: Mon, 20 Jan 2025 10:54:15 +0100
Subject: [PATCH 3/5] fix: sse api path

---
 src/hooks/useSse.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useSse.ts b/src/hooks/useSse.ts
index c72441a5..baf753fc 100644
--- a/src/hooks/useSse.ts
+++ b/src/hooks/useSse.ts
@@ -12,7 +12,7 @@ export function useSse() {
 
   useEffect(() => {
     const eventSource = new EventSource(
-      `${BASE_URL}/dashboard/alerts_notification`,
+      `${BASE_URL}/api/v1/dashboard/alerts_notification`,
     );
 
     eventSource.onmessage = function (event) {

From 7dbc6b67d195e7e3567b10a9fb4c084ba3ab3408 Mon Sep 17 00:00:00 2001
From: Giuseppe Scuglia <peppescg@gmail.com>
Date: Mon, 20 Jan 2025 11:03:14 +0100
Subject: [PATCH 4/5] fix: close dialog

---
 src/features/workspace/components/workspaces-selection.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/features/workspace/components/workspaces-selection.tsx b/src/features/workspace/components/workspaces-selection.tsx
index 59088253..010eac1e 100644
--- a/src/features/workspace/components/workspaces-selection.tsx
+++ b/src/features/workspace/components/workspaces-selection.tsx
@@ -18,6 +18,7 @@ import { Link } from "react-router-dom";
 export function WorkspacesSelection() {
   const queryClient = useQueryClient();
   const { data } = useWorkspacesData();
+  const [isOpen, setIsOpen] = useState(false);
   const [searchWorkspace, setSearchWorkspace] = useState("");
   const workspaces = data?.workspaces ?? [];
   const filteredWorkspaces = workspaces.filter((workspace) =>
@@ -27,10 +28,11 @@ export function WorkspacesSelection() {
 
   const handleWorkspaceClick = () => {
     queryClient.invalidateQueries({ refetchType: "all" });
+    setIsOpen(false);
   };
 
   return (
-    <DialogTrigger>
+    <DialogTrigger isOpen={isOpen} onOpenChange={(test) => setIsOpen(test)}>
       <Button variant="tertiary" className="flex cursor-pointer">
         Workspace {activeWorkspace?.name ?? "default"}
         <ChevronDown />
@@ -77,6 +79,7 @@ export function WorkspacesSelection() {
           <Separator className="" />
           <Link
             to="/workspaces"
+            onClick={() => setIsOpen(false)}
             className="text-secondary pt-3 px-2 gap-2 flex"
           >
             <Settings />

From 4c12354a5f4cb896e349218b1164581f98fdd01e Mon Sep 17 00:00:00 2001
From: Giuseppe Scuglia <peppescg@gmail.com>
Date: Mon, 20 Jan 2025 11:13:51 +0100
Subject: [PATCH 5/5] fix: mock workspaces api

---
 src/App.test.tsx                           |  2 +-
 src/mocks/msw/fixtures/GET_WORKSPACES.json | 10 ++++++++++
 src/mocks/msw/handlers.ts                  |  4 ++++
 3 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 src/mocks/msw/fixtures/GET_WORKSPACES.json

diff --git a/src/App.test.tsx b/src/App.test.tsx
index 298c77b1..8593b0c7 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -61,7 +61,7 @@ describe("App", () => {
     render(<App />);
     await waitFor(() =>
       expect(
-        screen.getByRole("link", { name: /codeGate dashboard/i }),
+        screen.getByRole("link", { name: "CodeGate Dashboard" }),
       ).toBeVisible(),
     );
     expect(screen.getByRole("link", { name: "Dashboard" })).toBeVisible();
diff --git a/src/mocks/msw/fixtures/GET_WORKSPACES.json b/src/mocks/msw/fixtures/GET_WORKSPACES.json
new file mode 100644
index 00000000..e7669999
--- /dev/null
+++ b/src/mocks/msw/fixtures/GET_WORKSPACES.json
@@ -0,0 +1,10 @@
+[
+    {
+        "name": "workspace-1",
+        "is_active": true
+    },
+    {
+        "name": "workspace-2",
+        "is_active": false
+    }
+]
\ No newline at end of file
diff --git a/src/mocks/msw/handlers.ts b/src/mocks/msw/handlers.ts
index 46e62cd6..f202e94f 100644
--- a/src/mocks/msw/handlers.ts
+++ b/src/mocks/msw/handlers.ts
@@ -1,6 +1,7 @@
 import { http, HttpResponse } from "msw";
 import mockedPrompts from "@/mocks/msw/fixtures/GET_MESSAGES.json";
 import mockedAlerts from "@/mocks/msw/fixtures/GET_ALERTS.json";
+import mockedWorkspaces from "@/mocks/msw/fixtures/GET_WORKSPACES.json";
 
 export const handlers = [
   http.get("*/health", () =>
@@ -20,4 +21,7 @@ export const handlers = [
   http.get("*/dashboard/alerts", () => {
     return HttpResponse.json(mockedAlerts);
   }),
+  http.get("*/workspaces", () => {
+    return HttpResponse.json(mockedWorkspaces);
+  }),
 ];