diff --git a/package-lock.json b/package-lock.json
index a691856d..4f8c739c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,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",
@@ -3898,9 +3898,9 @@
]
},
"node_modules/@stacklok/ui-kit": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/@stacklok/ui-kit/-/ui-kit-1.0.0.tgz",
- "integrity": "sha512-8F7BRzq3n+NU3f51a5VkiVVRiUC1zPmWqdUUjms5rv8ANmVo02bj21wR0bQ6HCDMrfR+OvGnc/nSUvb3eg1BCA==",
+ "version": "1.0.1-0",
+ "resolved": "https://registry.npmjs.org/@stacklok/ui-kit/-/ui-kit-1.0.1-0.tgz",
+ "integrity": "sha512-x4DCvouV5h1Nqq8OUYlx/9Hl5Os8HQA2hOzUDayHqRBzirfJVKQKRwA13z4cPqjXqrZ1jpU9XDfjR2z2m9aMJA==",
"license": "ISC",
"dependencies": {
"@fontsource-variable/figtree": "^5.1.1",
diff --git a/package.json b/package.json
index 57e33139..dbedc5b8 100644
--- a/package.json
+++ b/package.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",
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 289ff567..24dcfe73 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -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: ,
+ id: "about-certificate-security",
+ href: "/certificates/security",
+ textValue: "About certificate security",
+ },
+ {
+ icon: ,
+ id: "download-certificates",
+ href: "/certificates",
+ textValue: "Download certificates",
+ },
+];
+
+const HELP_MENU_ITEMS: OptionsSchema<"menu">[] = [
+ {
+ textValue: "Setup",
+ id: "setup",
+ items: [
+ {
+ icon: ,
+ id: "continue-setup",
+ href: "/help/continue-setup",
+ textValue: "Set up in Continue",
+ },
+ {
+ icon: ,
+ id: "copilot-setup",
+ href: "/help/copilot-setup",
+ textValue: "Set up in Copilot",
+ },
+ ],
+ },
+ {
+ textValue: "Resources",
+ id: "resources",
+ items: [
+ {
+ icon: ,
+ id: "documentation",
+ href: "https://docs.codegate.ai/",
+ textValue: "Documentation",
+ },
+ {
+ icon: ,
+ id: "discord",
+ href: "https://discord.gg/stacklok",
+ textValue: "Discord",
+ },
+ {
+ icon: ,
+ id: "github",
+ href: "https://github.com/stacklok/codegate",
+ textValue: "GitHub",
+ },
+ {
+ icon: ,
+ id: "youtube",
+ href: "https://www.youtube.com/@Stacklok",
+ textValue: "YouTube",
+ },
+ ],
+ },
+];
+
export function Header({ hasError }: { hasError?: boolean }) {
return (
-
- }>
- About certificate security
-
- } href="/certificates">
- Download certificates
-
-
-
-
- }>
-
- Set up in Continue
-
-
- } href="/help/copilot-setup">
-
- Set up in Copilot
-
-
-
- }
- >
- Documentation
-
-
-
-
- }
- >
- Discord
-
-
- }
- >
- GitHub
-
+
- }
- >
- YouTube
-
-
+
diff --git a/src/components/HoverPopover.tsx b/src/components/HoverPopover.tsx
index 5197963c..3b80650f 100644
--- a/src/components/HoverPopover.tsx
+++ b/src/components/HoverPopover.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 ? : ;
}
-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({
- {children}
+
);
diff --git a/src/features/dashboard-codegate-status/components/codegate-status-polling-control.tsx b/src/features/dashboard-codegate-status/components/codegate-status-polling-control.tsx
index b9e01e5c..5b24d8d9 100644
--- a/src/features/dashboard-codegate-status/components/codegate-status-polling-control.tsx
+++ b/src/features/dashboard-codegate-status/components/codegate-status-polling-control.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 };