feat: add providers endpoint and enable muxing

src/App.test.tsx

@@ -8,13 +8,17 @@ describe("App", () => {
   it("should render header", async () => {
     render(<App />);
     expect(screen.getByText(/toggle sidebar/i)).toBeVisible();
-    expect(screen.getByText("Certificates")).toBeVisible();
+    expect(screen.getByText("Settings")).toBeVisible();
     expect(screen.getByText("Help")).toBeVisible();
     expect(screen.getByRole("banner", { name: "App header" })).toBeVisible();
     expect(screen.getByRole("heading", { name: /codeGate/i })).toBeVisible();
 
-    await userEvent.click(screen.getByText("Certificates"));
-
+    await userEvent.click(screen.getByText("Settings"));
+    expect(
+      screen.getByRole("menuitem", {
+        name: /providers/i,
+      }),
+    ).toBeVisible();
     expect(
       screen.getByRole("menuitem", {
         name: /certificate security/i,
@@ -26,7 +30,7 @@ describe("App", () => {
       }),
     ).toBeVisible();
 
-    await userEvent.click(screen.getByText("Certificates"));
+    await userEvent.click(screen.getByText("Settings"));
     await userEvent.click(screen.getByText("Help"));
 
     expect(

src/Page.tsx

@@ -8,6 +8,9 @@ import { RouteDashboard } from "./routes/route-dashboard";
 import { RouteCertificateSecurity } from "./routes/route-certificate-security";
 import { RouteWorkspaceCreation } from "./routes/route-workspace-creation";
 import { RouteNotFound } from "./routes/route-not-found";
+import { RouteProvider } from "./routes/route-providers";
+import { RouteProviderCreate } from "./routes/route-provider-create";
+import { RouteProviderUpdate } from "./routes/route-provider-update";
 
 export default function Page() {
   return (
@@ -22,6 +25,15 @@ export default function Page() {
         path="/certificates/security"
         element={<RouteCertificateSecurity />}
       />
+
+      <Route path="providers">
+        <Route index element={<RouteProvider />} />
+        <Route element={<RouteProvider />}>
+          <Route path=":id" element={<RouteProviderUpdate />} />
+          <Route path="new" element={<RouteProviderCreate />} />
+        </Route>
+      </Route>
+
       <Route path="*" element={<RouteNotFound />} />
     </Routes>
   );

src/api/generated/types.gen.ts

@@ -10,6 +10,19 @@ export type ActiveWorkspace = {
   last_updated: unknown;
 };
 
+/**
+ * Represents a request to add a provider endpoint.
+ */
+export type AddProviderEndpointRequest = {
+  id?: string | null;
+  name: string;
+  description?: string;
+  provider_type: ProviderType;
+  endpoint?: string;
+  auth_type?: ProviderAuthType | null;
+  api_key?: string | null;
+};
+
 /**
  * Represents an alert with it's respective conversation.
  */
@@ -100,7 +113,6 @@ export type ModelByProvider = {
  * Represents the different types of matchers we support.
  */
 export enum MuxMatcherType {
-  FILE_REGEX = "file_regex",
   CATCH_ALL = "catch_all",
 }
 
@@ -133,7 +145,7 @@ export type ProviderEndpoint = {
   name: string;
   description?: string;
   provider_type: ProviderType;
-  endpoint: string;
+  endpoint?: string;
   auth_type?: ProviderAuthType | null;
 };
 
@@ -219,7 +231,7 @@ export type V1ListProviderEndpointsResponse = Array<ProviderEndpoint>;
 export type V1ListProviderEndpointsError = HTTPValidationError;
 
 export type V1AddProviderEndpointData = {
-  body: ProviderEndpoint;
+  body: AddProviderEndpointRequest;
 };
 
 export type V1AddProviderEndpointResponse = ProviderEndpoint;

src/api/openapi.json

@@ -92,7 +92,7 @@
           "content": {
             "application/json": {
               "schema": {
-                "$ref": "#/components/schemas/ProviderEndpoint"
+                "$ref": "#/components/schemas/AddProviderEndpointRequest"
               }
             }
           }
@@ -1113,6 +1113,68 @@
         ],
         "title": "ActiveWorkspace"
       },
+      "AddProviderEndpointRequest": {
+        "properties": {
+          "id": {
+            "anyOf": [
+              {
+                "type": "string"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Id",
+            "default": ""
+          },
+          "name": {
+            "type": "string",
+            "title": "Name"
+          },
+          "description": {
+            "type": "string",
+            "title": "Description",
+            "default": ""
+          },
+          "provider_type": {
+            "$ref": "#/components/schemas/ProviderType"
+          },
+          "endpoint": {
+            "type": "string",
+            "title": "Endpoint",
+            "default": ""
+          },
+          "auth_type": {
+            "anyOf": [
+              {
+                "$ref": "#/components/schemas/ProviderAuthType"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "default": "none"
+          },
+          "api_key": {
+            "anyOf": [
+              {
+                "type": "string"
+              },
+              {
+                "type": "null"
+              }
+            ],
+            "title": "Api Key"
+          }
+        },
+        "type": "object",
+        "required": [
+          "name",
+          "provider_type"
+        ],
+        "title": "AddProviderEndpointRequest",
+        "description": "Represents a request to add a provider endpoint."
+      },
       "AlertConversation": {
         "properties": {
           "conversation": {
@@ -1437,7 +1499,6 @@
       "MuxMatcherType": {
         "type": "string",
         "enum": [
-          "file_regex",
           "catch_all"
         ],
         "title": "MuxMatcherType",
@@ -1515,7 +1576,8 @@
           },
           "endpoint": {
             "type": "string",
-            "title": "Endpoint"
+            "title": "Endpoint",
+            "default": ""
           },
           "auth_type": {
             "anyOf": [
@@ -1532,8 +1594,7 @@
         "type": "object",
         "required": [
           "name",
-          "provider_type",
-          "endpoint"
+          "provider_type"
         ],
         "title": "ProviderEndpoint",
         "description": "Represents a provider's endpoint configuration. This\nallows us to persist the configuration for each provider,\nso we can use this for muxing messages."

src/features/header/components/header.tsx

@@ -3,9 +3,9 @@ import { SidebarTrigger } from "../../../components/ui/sidebar";
 import { DropdownMenu } from "../../../components/HoverPopover";
 import { Separator, ButtonDarkMode } from "@stacklok/ui-kit";
 import { WorkspacesSelection } from "@/features/workspace/components/workspaces-selection";
-import { CERTIFICATE_MENU_ITEMS } from "../constants/certificate-menu-items";
 import { HELP_MENU_ITEMS } from "../constants/help-menu-items";
 import { HeaderStatusMenu } from "./header-status-menu";
+import { SETTINGS_MENU_ITEMS } from "../constants/settings-menu-items";
 
 function HomeLink() {
   return (
@@ -39,8 +39,8 @@ export function Header({ hasError }: { hasError?: boolean }) {
       </div>
       <div className="flex items-center gap-1 mr-2">
         <HeaderStatusMenu />
-        <DropdownMenu title="Certificates" items={CERTIFICATE_MENU_ITEMS} />
         <DropdownMenu title="Help" items={HELP_MENU_ITEMS} />
+        <DropdownMenu title="Settings" items={SETTINGS_MENU_ITEMS} />
 
         <ButtonDarkMode />
       </div>

src/features/header/constants/settings-menu-items.tsx

@@ -0,0 +1,39 @@
+import { OptionsSchema } from "@stacklok/ui-kit";
+import {
+  Download01,
+  LayersThree01,
+  ShieldTick,
+} from "@untitled-ui/icons-react";
+
+export const SETTINGS_MENU_ITEMS = [
+  {
+    textValue: "Providers",
+    id: "providers",
+    items: [
+      {
+        icon: <LayersThree01 />,
+        id: "providers",
+        href: "/providers",
+        textValue: "Providers",
+      },
+    ],
+  },
+  {
+    textValue: "Certificates",
+    id: "certificates",
+    items: [
+      {
+        icon: <ShieldTick />,
+        id: "about-certificate-security",
+        href: "/certificates/security",
+        textValue: "About certificate security",
+      },
+      {
+        icon: <Download01 />,
+        id: "download-certificates",
+        href: "/certificates",
+        textValue: "Download certificates",
+      },
+    ],
+  },
+] as const satisfies OptionsSchema<"menu">[];

src/features/providers/components/provider-dialog-footer.tsx

@@ -0,0 +1,17 @@
+import { Button, DialogFooter } from "@stacklok/ui-kit";
+import { useNavigate } from "react-router-dom";
+
+export function ProviderDialogFooter() {
+  const navigate = useNavigate();
+
+  return (
+    <DialogFooter className="justify-end">
+      <Button variant="secondary" onPress={() => navigate("/providers")}>
+        Discard
+      </Button>
+      <Button type="submit" variant="primary">
+        Save
+      </Button>
+    </DialogFooter>
+  );
+}

src/features/providers/components/provider-dialog.tsx

@@ -0,0 +1,39 @@
+import {
+  DialogModalOverlay,
+  DialogModal,
+  Dialog,
+  DialogHeader,
+  DialogTitle,
+  DialogCloseButton,
+} from "@stacklok/ui-kit";
+import { useNavigate } from "react-router-dom";
+
+export function ProviderDialog({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  const navigate = useNavigate();
+
+  return (
+    <DialogModalOverlay
+      isDismissable={false}
+      isOpen
+      onOpenChange={() => {
+        navigate("/providers");
+      }}
+    >
+      <DialogModal>
+        <Dialog width="md" className="">
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+            <DialogCloseButton slot="close" />
+          </DialogHeader>
+          {children}
+        </Dialog>
+      </DialogModal>
+    </DialogModalOverlay>
+  );
+}