feat(workspace): add dropdown (#123)

* feat(workspace): add workspace dropdown selection

* fix: invalidate cache should be called only for alerts event

* fix: sse api path

* fix: close dialog

* fix: mock workspaces api

Author: peppescg

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();

src/components/Header.tsx

@@ -2,28 +2,31 @@ 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 (
     <header
       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">

src/features/workspace/components/workspaces-selection.tsx

@@ -0,0 +1,92 @@
+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 [isOpen, setIsOpen] = useState(false);
+  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" });
+    setIsOpen(false);
+  };
+
+  return (
+    <DialogTrigger isOpen={isOpen} onOpenChange={(test) => setIsOpen(test)}>
+      <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"
+            onClick={() => setIsOpen(false)}
+            className="text-secondary pt-3 px-2 gap-2 flex"
+          >
+            <Settings />
+            Manage Workspaces
+          </Link>
+        </div>
+      </Popover>
+    </DialogTrigger>
+  );
+}

src/hooks/useSse.ts

@@ -12,12 +12,12 @@ export function useSse() {
 
   useEffect(() => {
     const eventSource = new EventSource(
-      `${BASE_URL}/dashboard/alerts_notification`,
+      `${BASE_URL}/api/v1/dashboard/alerts_notification`,
     );
 
     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!",
         });

src/mocks/msw/fixtures/GET_WORKSPACES.json

@@ -0,0 +1,10 @@
+[
+    {
+        "name": "workspace-1",
+        "is_active": true
+    },
+    {
+        "name": "workspace-2",
+        "is_active": false
+    }
+]

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);
+  }),
 ];