refactor: harmonize route/ folder structure (#129)

* refactor: move workspaces route under routes/

* refactor: move a bunch of routes to the routes/ folder

* refactor: move all remainig routes under routes/

Author: kantord

src/App.tsx

@@ -1,14 +1,9 @@
 import { Header } from "./components/Header";
 import { PromptList } from "./components/PromptList";
-import { Dashboard } from "./components/Dashboard";
 import { Routes, Route, Link } from "react-router-dom";
-import { Chat } from "./components/Chat";
 import { usePromptsData } from "./hooks/usePromptsData";
 import { Sidebar } from "./components/Sidebar";
 import { useSse } from "./hooks/useSse";
-import { Help } from "./components/Help";
-import { Certificates } from "./components/Certificates";
-import { CertificateSecurity } from "./components/CertificateSecurity";
 import {
   Breadcrumb,
   BreadcrumbList,
@@ -18,7 +13,12 @@ import {
 } from "./components/ui/breadcrumb";
 import { useBreadcrumb } from "./hooks/useBreadcrumb";
 import { RouteWorkspace } from "./routes/route-workspace";
-import { Workspaces } from "./components/Workspaces";
+import { RouteWorkspaces } from "./routes/route-workspaces";
+import { RouteCertificates } from "./routes/route-certificates";
+import { RouteHelp } from "./routes/route-help";
+import { RouteChat } from "./routes/route-chat";
+import { RouteDashboard } from "./routes/route-dashboard";
+import { RouteCertificateSecurity } from "./routes/route-certificate-security";
 
 function App() {
   const { data: prompts, isLoading } = usePromptsData();
@@ -55,15 +55,15 @@ function App() {
 
         <div className="flex-1 overflow-y-auto p-6">
           <Routes>
-            <Route path="/" element={<Dashboard />} />
-            <Route path="/prompt/:id" element={<Chat />} />
-            <Route path="/help/:section" element={<Help />} />
-            <Route path="/certificates" element={<Certificates />} />
+            <Route path="/" element={<RouteDashboard />} />
+            <Route path="/prompt/:id" element={<RouteChat />} />
+            <Route path="/help/:section" element={<RouteHelp />} />
+            <Route path="/certificates" element={<RouteCertificates />} />
             <Route path="/workspace/:id" element={<RouteWorkspace />} />
-            <Route path="/workspaces" element={<Workspaces />} />
+            <Route path="/workspaces" element={<RouteWorkspaces />} />
             <Route
               path="/certificates/security"
-              element={<CertificateSecurity />}
+              element={<RouteCertificateSecurity />}
             />
           </Routes>
         </div>

src/components/__tests__/Certificates.test.tsx renamed to src/routes/__tests__/route-certificates.test.tsx

@@ -1,12 +1,12 @@
 import { render } from "@/lib/test-utils";
 import { screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
-import { Certificates } from "../Certificates";
 import userEvent from "@testing-library/user-event";
+import { RouteCertificates } from "../route-certificates";
 
 describe("Certificates", () => {
   it("should render download certificate", () => {
-    render(<Certificates />);
+    render(<RouteCertificates />);
     expect(
       screen.getByRole("heading", { name: "CodeGate CA certificate" }),
     ).toBeVisible();
@@ -28,7 +28,7 @@ describe("Certificates", () => {
   });
 
   it("should render macOS certificate installation", async () => {
-    render(<Certificates />);
+    render(<RouteCertificates />);
 
     expect(
       screen.getByText(
@@ -43,7 +43,7 @@ describe("Certificates", () => {
   });
 
   it("should render Windows certificate installation", async () => {
-    render(<Certificates />);
+    render(<RouteCertificates />);
 
     await userEvent.click(screen.getByText("Windows"));
 
@@ -58,7 +58,7 @@ describe("Certificates", () => {
   });
 
   it("should render Linux certificate installation", async () => {
-    render(<Certificates />);
+    render(<RouteCertificates />);
 
     await userEvent.click(screen.getByText("Linux"));
 

src/components/__tests__/Chat.test.tsx renamed to src/routes/__tests__/route-chat.test.tsx

@@ -1,7 +1,7 @@
 import { render } from "@/lib/test-utils";
-import { Chat } from "../Chat";
 import { screen, within } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
+import { RouteChat } from "../route-chat";
 
 vi.mock("@stacklok/ui-kit", async (importOriginal) => {
   return {
@@ -50,7 +50,7 @@ vi.mock("@/hooks/usePromptsData", () => ({
 
 describe("Chat", () => {
   it("should render secret issue chat", () => {
-    render(<Chat />, {
+    render(<RouteChat />, {
       routeConfig: {
         initialEntries: ["/prompt/chatcmpl-7d87679de7ed41639eb91d8ebbaa6f72"],
       },

src/components/__tests__/Dashboard.test.tsx renamed to src/routes/__tests__/route-dashboard.test.tsx

@@ -1,13 +1,13 @@
 import { render } from "@/lib/test-utils";
 import { screen, waitFor, within } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
-import { Dashboard } from "../Dashboard";
 import { faker } from "@faker-js/faker";
 import React from "react";
 import { server } from "@/mocks/msw/node";
 import { HttpResponse, http } from "msw";
 import mockedAlerts from "@/mocks/msw/fixtures/GET_ALERTS.json";
 import userEvent from "@testing-library/user-event";
+import { RouteDashboard } from "../route-dashboard";
 
 vi.mock("recharts", async (importOriginal) => {
   const originalModule = (await importOriginal()) as Record<string, unknown>;
@@ -113,7 +113,7 @@ function mockManyAlerts() {
 
 describe("Dashboard", () => {
   it("should render charts and table", async () => {
-    render(<Dashboard />);
+    render(<RouteDashboard />);
     expect(screen.getByText(/security issues detected/i)).toBeVisible();
     expect(screen.getByText(/malicious packages by type/i)).toBeVisible();
     expect(screen.getByText(/alerts by date/i)).toBeVisible();
@@ -192,7 +192,7 @@ describe("Dashboard", () => {
 
   it("should render malicious pkg", async () => {
     mockAlertsWithMaliciousPkg();
-    render(<Dashboard />);
+    render(<RouteDashboard />);
 
     expect(
       (await screen.findAllByTestId(/mock-responsive-container/i)).length,
@@ -224,7 +224,7 @@ describe("Dashboard", () => {
 
   it("should filter by malicious pkg", async () => {
     mockAlertsWithMaliciousPkg();
-    render(<Dashboard />);
+    render(<RouteDashboard />);
 
     expect(
       (await screen.findAllByTestId(/mock-responsive-container/i)).length,
@@ -269,7 +269,7 @@ describe("Dashboard", () => {
 
   it("should search by secrets alert", async () => {
     mockAlertsWithMaliciousPkg();
-    render(<Dashboard />);
+    render(<RouteDashboard />);
 
     expect(
       (await screen.findAllByTestId(/mock-responsive-container/i)).length,
@@ -300,7 +300,7 @@ describe("Dashboard", () => {
   });
 
   it("should sort alerts by date desc", async () => {
-    render(<Dashboard />);
+    render(<RouteDashboard />);
     expect(
       (await screen.findAllByTestId(/mock-responsive-container/i)).length,
     ).toEqual(1);
@@ -319,7 +319,7 @@ describe("Dashboard", () => {
   it("only displays a limited number of items in the table", async () => {
     mockManyAlerts();
 
-    render(<Dashboard />);
+    render(<RouteDashboard />);
 
     await waitFor(() => {
       expect(
@@ -331,7 +331,7 @@ describe("Dashboard", () => {
   it("allows pagination", async () => {
     mockManyAlerts();
 
-    render(<Dashboard />);
+    render(<RouteDashboard />);
 
     await waitFor(
       async () => {

src/components/Workspaces.test.tsx renamed to src/routes/__tests__/route-workspaces.test.tsx

@@ -1,11 +1,11 @@
 import { render } from "@/lib/test-utils";
 import { screen, waitFor, within } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
-import { Workspaces } from "./Workspaces";
+import { RouteWorkspaces } from "../route-workspaces";
 
 describe("Workspaces page", () => {
   beforeEach(() => {
-    render(<Workspaces />);
+    render(<RouteWorkspaces />);
   });
 
   it("has a title", () => {

src/components/CertificateSecurity.tsx renamed to src/routes/route-certificate-security.tsx

@@ -57,7 +57,7 @@ const OpenSourceIcon = () => (
   </svg>
 );
 
-export function CertificateSecurity() {
+export function RouteCertificateSecurity() {
   return (
     <div className="flex flex-col h-full">
       <div className="max-w-4xl mx-auto mb-4">

src/components/Certificates.tsx renamed to src/routes/route-certificates.tsx

@@ -34,10 +34,7 @@ function InstructionStep({ number, text }: { number: number; text: string }) {
 }
 
 const CheckIcon = () => (
-  <svg
-    viewBox="0 0 24 24"
-    className="size-5 text-brand-700 shrink-0 mt-1"
-  >
+  <svg viewBox="0 0 24 24" className="size-5 text-brand-700 shrink-0 mt-1">
     <path
       fill="none"
       stroke="currentColor"
@@ -75,7 +72,7 @@ const ArrowIcon = () => (
   </svg>
 );
 
-export function Certificates() {
+export function RouteCertificates() {
   const [activeOS, setActiveOS] = useState<OS>("macos");
   const [activeAction, setActiveAction] = useState<Action>("install");
 
@@ -172,24 +169,25 @@ export function Certificates() {
               <CheckIcon />
               <p className="text-secondary">
                 <strong>Local-only:</strong> CodeGate runs entirely on your
-                machine within an isolated container, ensuring all data processing
-                stays local without any external transmissions.
+                machine within an isolated container, ensuring all data
+                processing stays local without any external transmissions.
               </p>
             </div>
             <div className="flex gap-3">
               <CheckIcon />
               <p className="text-secondary">
                 <strong>Secure certificate handling:</strong> this custom CA is
-                locally generated and managed. CodeGate developers have no access
-                to it.
+                locally generated and managed. CodeGate developers have no
+                access to it.
               </p>
             </div>
             <div className="flex gap-3">
               <CheckIcon />
               <p className="text-secondary">
-                <strong>No external communications:</strong> CodeGate is designed
-                with no capability to call home or communicate with external
-                servers, outside of those requested by the IDE or Agent.
+                <strong>No external communications:</strong> CodeGate is
+                designed with no capability to call home or communicate with
+                external servers, outside of those requested by the IDE or
+                Agent.
               </p>
             </div>
           </div>

src/components/Chat.tsx renamed to src/routes/route-chat.tsx

@@ -1,15 +1,15 @@
+import { useParams } from "react-router-dom";
+import { usePromptsData } from "@/hooks/usePromptsData";
+import { sanitizeQuestionPrompt } from "@/lib/utils";
+import { ChatMessageList } from "@/components/ui/chat/chat-message-list";
 import {
   ChatBubble,
   ChatBubbleAvatar,
   ChatBubbleMessage,
-} from "./ui/chat/chat-bubble";
-import { ChatMessageList } from "./ui/chat/chat-message-list";
-import { useParams } from "react-router-dom";
-import { usePromptsData } from "@/hooks/usePromptsData";
-import { Markdown } from "./Markdown";
-import { sanitizeQuestionPrompt } from "@/lib/utils";
+} from "@/components/ui/chat/chat-bubble";
+import { Markdown } from "@/components/Markdown";
 
-export function Chat() {
+export function RouteChat() {
   const { id } = useParams();
   const { data: prompts } = usePromptsData();
   const chat = prompts?.find((prompt) => prompt.chat_id === id);

src/components/Dashboard.tsx renamed to src/routes/route-dashboard.tsx

@@ -10,9 +10,9 @@ import {
   useMaliciousPackagesChartData,
 } from "@/hooks/useAlertsData";
 import { useAlertSearch } from "@/hooks/useAlertSearch";
-import { AlertsTable } from "./AlertsTable";
+import { AlertsTable } from "@/components/AlertsTable";
 
-export function Dashboard() {
+export function RouteDashboard() {
   const [searchParams] = useSearchParams();
 
   const { setIsMaliciousFilterActive, setSearch } = useAlertSearch();

src/components/Help.tsx renamed to src/routes/route-help.tsx

@@ -1,15 +1,15 @@
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
-import { Markdown } from "./Markdown";
 import Prism from "prismjs";
 import "prismjs/themes/prism-tomorrow.css";
 import "prismjs/components/prism-bash";
 import "prismjs/components/prism-javascript";
 import "prismjs/components/prism-python";
 import "prismjs/components/prism-json";
 import "prismjs/components/prism-yaml";
+import { Markdown } from "@/components/Markdown";
 
-export function Help() {
+export function RouteHelp() {
   const { section } = useParams();
   const [content, setContent] = useState<string>("");
 

src/components/Workspaces.tsx renamed to src/routes/route-workspaces.tsx

@@ -11,7 +11,7 @@ import {
 } from "@stacklok/ui-kit";
 import { Settings } from "lucide-react";
 
-export function Workspaces() {
+export function RouteWorkspaces() {
   const result = useWorkspacesData();
   const workspaces = result.data?.workspaces ?? [];