refactor: implement new UIKit options schema (#179)

Author: alex-mcgovern

package-lock.json

@@ -24,7 +24,7 @@
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
-    "@stacklok/ui-kit": "^1.0.0",
+    "@stacklok/ui-kit": "1.0.1-0",
     "@tanstack/react-query": "^5.64.1",
     "@types/prismjs": "^1.26.5",
     "@types/react-syntax-highlighter": "^15.5.13",

package.json

@@ -1,11 +1,77 @@
 import { Link } from "react-router-dom";
 import { SidebarTrigger } from "./ui/sidebar";
-import { HoverPopover } from "./HoverPopover";
-import { Separator, ButtonDarkMode, MenuItem } from "@stacklok/ui-kit";
+import { DropdownMenu } from "./HoverPopover";
+import { Separator, ButtonDarkMode, OptionsSchema } from "@stacklok/ui-kit";
 import { WorkspacesSelection } from "@/features/workspace/components/workspaces-selection";
 import { BookOpenText, Download, ShieldCheck } from "lucide-react";
 import { Continue, Copilot, Discord, Github, Youtube } from "./icons";
 
+const CERTIFICATE_MENU_ITEMS: OptionsSchema<"menu">[] = [
+  {
+    icon: <ShieldCheck />,
+    id: "about-certificate-security",
+    href: "/certificates/security",
+    textValue: "About certificate security",
+  },
+  {
+    icon: <Download />,
+    id: "download-certificates",
+    href: "/certificates",
+    textValue: "Download certificates",
+  },
+];
+
+const HELP_MENU_ITEMS: OptionsSchema<"menu">[] = [
+  {
+    textValue: "Setup",
+    id: "setup",
+    items: [
+      {
+        icon: <Continue />,
+        id: "continue-setup",
+        href: "/help/continue-setup",
+        textValue: "Set up in Continue",
+      },
+      {
+        icon: <Copilot />,
+        id: "copilot-setup",
+        href: "/help/copilot-setup",
+        textValue: "Set up in Copilot",
+      },
+    ],
+  },
+  {
+    textValue: "Resources",
+    id: "resources",
+    items: [
+      {
+        icon: <BookOpenText />,
+        id: "documentation",
+        href: "https://docs.codegate.ai/",
+        textValue: "Documentation",
+      },
+      {
+        icon: <Discord />,
+        id: "discord",
+        href: "https://discord.gg/stacklok",
+        textValue: "Discord",
+      },
+      {
+        icon: <Github />,
+        id: "github",
+        href: "https://github.com/stacklok/codegate",
+        textValue: "GitHub",
+      },
+      {
+        icon: <Youtube />,
+        id: "youtube",
+        href: "https://www.youtube.com/@Stacklok",
+        textValue: "YouTube",
+      },
+    ],
+  },
+];
+
 export function Header({ hasError }: { hasError?: boolean }) {
   return (
     <header
@@ -31,61 +97,9 @@ export function Header({ hasError }: { hasError?: boolean }) {
         <WorkspacesSelection />
       </div>
       <div className="flex items-center gap-4 mr-16">
-        <HoverPopover title="Certificates">
-          <MenuItem href="/certificates/security" icon={<ShieldCheck />}>
-            About certificate security
-          </MenuItem>
-          <MenuItem icon={<Download />} href="/certificates">
-            Download certificates
-          </MenuItem>
-        </HoverPopover>
-
-        <HoverPopover title="Help">
-          <MenuItem href="/help/continue-setup" icon={<Continue />}>
-            <span>
-              Set up in <span className="font-bold">Continue</span>
-            </span>
-          </MenuItem>
-          <MenuItem icon={<Copilot />} href="/help/copilot-setup">
-            <span>
-              Set up in <span className="font-bold">Copilot</span>
-            </span>
-          </MenuItem>
-
-          <MenuItem
-            href="https://docs.codegate.ai/"
-            target="_blank"
-            icon={<BookOpenText />}
-          >
-            Documentation
-          </MenuItem>
-
-          <Separator />
-
-          <MenuItem
-            href="https://discord.gg/stacklok"
-            target="_blank"
-            icon={<Discord />}
-          >
-            Discord
-          </MenuItem>
-
-          <MenuItem
-            href="https://github.com/stacklok/codegate"
-            target="_blank"
-            icon={<Github />}
-          >
-            GitHub
-          </MenuItem>
+        <DropdownMenu title="Certificates" items={CERTIFICATE_MENU_ITEMS} />
 
-          <MenuItem
-            href="https://www.youtube.com/@Stacklok"
-            target="_blank"
-            icon={<Youtube />}
-          >
-            YouTube
-          </MenuItem>
-        </HoverPopover>
+        <DropdownMenu title="Help" items={HELP_MENU_ITEMS} />
 
         <ButtonDarkMode />
       </div>

src/components/Header.tsx

@@ -1,4 +1,10 @@
-import { Button, DropdownMenu, MenuTrigger, Popover } from "@stacklok/ui-kit";
+import {
+  Button,
+  Menu,
+  MenuTrigger,
+  OptionsSchema,
+  Popover,
+} from "@stacklok/ui-kit";
 import { OverlayTriggerStateContext } from "react-aria-components";
 import { ReactNode, useContext } from "react";
 import { ChevronDown, ChevronUp } from "lucide-react";
@@ -9,12 +15,12 @@ function PopoverIcon() {
   return isOpen ? <ChevronUp /> : <ChevronDown />;
 }
 
-export function HoverPopover({
-  children,
+export function DropdownMenu({
+  items,
   title,
 }: {
   title: ReactNode;
-  children: ReactNode;
+  items: OptionsSchema<"menu">[];
   className?: string;
 }) {
   return (
@@ -24,7 +30,7 @@ export function HoverPopover({
         <PopoverIcon />
       </Button>
       <Popover>
-        <DropdownMenu>{children}</DropdownMenu>
+        <Menu items={items} />
       </Popover>
     </MenuTrigger>
   );

src/components/HoverPopover.tsx

@@ -1,10 +1,5 @@
 import { Dispatch, SetStateAction } from "react";
-import {
-  Label,
-  Select,
-  SelectButton,
-  TDropdownItemOrSection,
-} from "@stacklok/ui-kit";
+import { Label, Select, SelectButton, OptionsSchema } from "@stacklok/ui-kit";
 
 // NOTE: We don't poll more than once per minute, as the server depends on
 // Github's public API, which is rate limited to 60reqs per hour.
@@ -14,7 +9,7 @@ export const POLLING_INTERVAl = {
   "10_MIN": { value: 600_000, name: "10 minutes" },
 } as const;
 
-export const INTERVAL_SELECT_ITEMS: TDropdownItemOrSection[] = Object.entries(
+export const INTERVAL_SELECT_ITEMS: OptionsSchema<"listbox">[] = Object.entries(
   POLLING_INTERVAl,
 ).map(([key, { name }]) => {
   return { textValue: name, id: key };