feat: add workspaces page (#128)

* add workspaces route

* add header to page

* make sure table has correct columns

* make sure there are rows for each workspace

* .

* handle data fetching

* add settigns button

* visual adjustments

Author: kantord

src/App.tsx

@@ -18,6 +18,7 @@ import {
 } from "./components/ui/breadcrumb";
 import { useBreadcrumb } from "./hooks/useBreadcrumb";
 import { RouteWorkspace } from "./routes/route-workspace";
+import { Workspaces } from "./components/Workspaces";
 
 function App() {
   const { data: prompts, isLoading } = usePromptsData();
@@ -59,6 +60,7 @@ function App() {
             <Route path="/help/:section" element={<Help />} />
             <Route path="/certificates" element={<Certificates />} />
             <Route path="/workspace/:id" element={<RouteWorkspace />} />
+            <Route path="/workspaces" element={<Workspaces />} />
             <Route
               path="/certificates/security"
               element={<CertificateSecurity />}

src/components/Workspaces.test.tsx

@@ -0,0 +1,44 @@
+import { render } from "@/lib/test-utils";
+import { screen, waitFor, within } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Workspaces } from "./Workspaces";
+
+describe("Workspaces page", () => {
+  beforeEach(() => {
+    render(<Workspaces />);
+  });
+
+  it("has a title", () => {
+    expect(
+      screen.getByRole("heading", { name: /manage workspaces/i }),
+    ).toBeVisible();
+  });
+
+  it("has a table with the correct columns", () => {
+    expect(screen.getByRole("columnheader", { name: /name/i })).toBeVisible();
+    expect(
+      screen.getByRole("columnheader", { name: /configuration/i }),
+    ).toBeVisible();
+  });
+
+  it("has a row for each workspace", async () => {
+    await waitFor(() => {
+      expect(screen.getAllByRole("row").length).toBeGreaterThan(1);
+    });
+
+    expect(
+      screen.getByRole("rowheader", { name: /myworkspace/i }),
+    ).toBeVisible();
+    expect(
+      screen.getByRole("rowheader", { name: /anotherworkspae/i }),
+    ).toBeVisible();
+
+    const firstRow = screen.getByRole("row", { name: /myworkspace/i });
+    const firstButton = within(firstRow).getByRole("link", {
+      name: /settings/i,
+    });
+
+    expect(firstButton).toBeVisible();
+    expect(firstButton).toHaveAttribute("href", "/workspace/myworkspace");
+  });
+});

src/components/Workspaces.tsx

@@ -0,0 +1,54 @@
+import { useWorkspacesData } from "@/hooks/useWorkspacesData";
+import {
+  Cell,
+  Column,
+  Heading,
+  LinkButton,
+  Row,
+  Table,
+  TableBody,
+  TableHeader,
+} from "@stacklok/ui-kit";
+import { Settings } from "lucide-react";
+
+export function Workspaces() {
+  const result = useWorkspacesData();
+  const workspaces = result.data?.workspaces ?? [];
+
+  return (
+    <div>
+      <Heading level={1} className="mb-5">
+        Manage Workspaces
+      </Heading>
+
+      <Table aria-label="List of workspaces">
+        <Row>
+          <TableHeader>
+            <Column id="name" isRowHeader className="w-full">
+              Name
+            </Column>
+            <Column id="configuration" className="w-56">
+              Configuration
+            </Column>
+          </TableHeader>
+        </Row>
+        <TableBody>
+          {workspaces.map((workspace) => (
+            <Row key={workspace.name}>
+              <Cell>{workspace.name}</Cell>
+              <Cell>
+                <LinkButton
+                  href={`/workspace/${workspace.name}`}
+                  variant="tertiary"
+                >
+                  <Settings />
+                  Settings
+                </LinkButton>
+              </Cell>
+            </Row>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

src/mocks/msw/fixtures/GET_WORKSPACES.json

@@ -1,10 +1,20 @@
-[
-    {
-        "name": "workspace-1",
-        "is_active": true
-    },
-    {
-        "name": "workspace-2",
-        "is_active": false
-    }
-]
+{
+    "workspaces": [
+        {
+            "name": "default",
+            "is_active": true
+        },
+        {
+            "name": "myworkspace",
+            "is_active": false
+        },
+        {
+            "name": "anotherworkspae",
+            "is_active": false
+        },
+        {
+            "name": "favoriteworkspace",
+            "is_active": false
+        }
+    ]
+}