zudoku 0.0.0-e5559fc → 0.0.0-e57638d

package/src/lib/plugins/api-catalog/index.tsx

@@ -1,6 +1,6 @@
 import slugify from "@sindresorhus/slugify";
 import { matchPath } from "react-router";
-import type { SidebarItem } from "../../../config/validators/SidebarSchema.js";
+import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
 import type { AuthState } from "../../authentication/state.js";
 import type { ZudokuPlugin } from "../../core/plugins.js";
 import { joinUrl } from "../../util/joinUrl.js";
@@ -22,46 +22,46 @@ export type CatalogCategory = {
 };
 
 export type ApiCatalogPluginOptions = {
-  navigationId: string;
+  path: string;
   label: string;
   categories?: CatalogCategory[];
   items: ApiCatalogItem[];
-  filterCatalogItems?: filterCatalogItems;
+  filterCatalogItems?: FilterCatalogItemsFn;
 };
 
 export type CatalogContext<ProviderData = unknown> = {
   auth: AuthState<ProviderData>;
 };
 
-export type filterCatalogItems<ProviderData = unknown> = (
+export type FilterCatalogItemsFn<ProviderData = unknown> = (
   items: ApiCatalogItem[],
   { auth }: CatalogContext<ProviderData>,
 ) => ApiCatalogItem[];
 
 export const apiCatalogPlugin = ({
-  navigationId,
+  path,
   items,
   label,
   categories = [],
   filterCatalogItems,
 }: {
-  navigationId: string;
+  path: string;
   label: string;
   categories?: CatalogCategory[];
   items: ApiCatalogItem[];
-  filterCatalogItems?: filterCatalogItems;
+  filterCatalogItems?: FilterCatalogItemsFn;
 }): ZudokuPlugin => {
   const paths = Object.fromEntries(
     categories.flatMap((category) =>
       [undefined, ...category.tags].map((tag) => [
-        joinUrl(navigationId, tag ? getKey(category.label, tag) : undefined),
+        joinUrl(path, tag ? getKey(category.label, tag) : undefined),
         tag,
       ]),
     ),
   );
 
   return {
-    getSidebar: async (currentPath) => {
+    getNavigation: async (currentPath) => {
       const matches = Object.keys(paths).some((path) =>
         matchPath(path, currentPath),
       );
@@ -70,13 +70,13 @@ export const apiCatalogPlugin = ({
         return [];
       }
 
-      const sidebar: SidebarItem[] = categories.map((category) => ({
-        type: "category" as const,
+      const navigation: NavigationItem[] = categories.map((category) => ({
+        type: "category",
         label: category.label,
         collapsible: false,
         items: category.tags.map((tag) => ({
-          type: "doc" as const,
-          id: joinUrl(navigationId, getKey(category.label, tag)),
+          type: "link",
+          to: joinUrl(path, getKey(category.label, tag)),
           label: tag,
           badge: {
             label: String(
@@ -84,19 +84,19 @@ export const apiCatalogPlugin = ({
                 api.categories.find((c) => c.tags.includes(tag)),
               ).length,
             ),
-            color: "outline" as const,
+            color: "outline",
           },
         })),
       }));
 
-      sidebar.unshift({
-        type: "doc" as const,
-        id: joinUrl(navigationId),
+      navigation.unshift({
+        type: "link",
+        to: joinUrl(path),
         label: "Overview",
-        badge: { label: String(items.length), color: "outline" as const },
+        badge: { label: String(items.length), color: "outline" },
       });
 
-      return sidebar;
+      return navigation;
     },
     getRoutes: () =>
       Object.entries(paths).map(([path, tag]) => ({

package/src/lib/plugins/api-keys/CreateApiKey.tsx

@@ -1,6 +1,8 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useForm } from "react-hook-form";
-import { Link, useNavigate } from "react-router";
+import { useNavigate } from "react-router";
+import { ActionButton } from "zudoku/ui/ActionButton.js";
+import { DialogClose, DialogFooter } from "zudoku/ui/Dialog.js";
 import {
   Select,
   SelectContent,
@@ -12,11 +14,17 @@ import {
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 import { Button } from "../../ui/Button.js";
 import { Input } from "../../ui/Input.js";
-import { ApiKeyService } from "./index.js";
+import { type ApiKeyService } from "./index.js";
 
-type CreateApiKey = { description: string; expiresOn?: string };
+type CreateApiKey = { description?: string; expiresOn?: string };
 
-export const CreateApiKey = ({ service }: { service: ApiKeyService }) => {
+export const CreateApiKey = ({
+  service,
+  onOpenChange,
+}: {
+  service: ApiKeyService;
+  onOpenChange: (open: boolean) => void;
+}) => {
   const context = useZudoku();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
@@ -35,7 +43,7 @@ export const CreateApiKey = ({ service }: { service: ApiKeyService }) => {
         expiresOn !== "never" ? addDaysToDate(Number(expiresOn)) : undefined;
 
       return service.createKey(
-        { description: description, expiresOn: expiresOnDate },
+        { description: description || "Secret Key", expiresOn: expiresOnDate },
         context,
       );
     },
@@ -50,44 +58,48 @@ export const CreateApiKey = ({ service }: { service: ApiKeyService }) => {
   }
 
   return (
-    <div className="max-w-screen-lg pt-[--padding-content-top] pb-[--padding-content-bottom]">
-      <div className="flex justify-between mb-4 border-b pb-1">
-        <h1 className="font-medium text-2xl">New API Key</h1>
+    <form
+      onSubmit={form.handleSubmit((data) =>
+        createKeyMutation.mutate(
+          { ...data },
+          {
+            onSuccess: () => onOpenChange(false),
+          },
+        ),
+      )}
+    >
+      <div className="flex gap-2 flex-col text-sm font-medium">
+        Name
+        <Input {...form.register("description")} />
+        Expiration
+        <Select
+          onValueChange={(value) => form.setValue("expiresOn", value)}
+          defaultValue={form.getValues("expiresOn")}
+        >
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {[7, 30, 60, 90].map((option) => (
+                <SelectItem value={String(option)} key={option}>
+                  {option} days
+                </SelectItem>
+              ))}
+              <SelectItem value="never">Never</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <ActionButton isPending={createKeyMutation.isPending}>
+            Generate Key
+          </ActionButton>
+        </DialogFooter>
       </div>
-      <form
-        onSubmit={form.handleSubmit((data) => createKeyMutation.mutate(data))}
-      >
-        <div className="flex gap-2 flex-col">
-          Note
-          <Input {...form.register("description")} />
-          Expiration
-          <Select
-            onValueChange={(value) => form.setValue("expiresOn", value)}
-            defaultValue={form.getValues("expiresOn")}
-          >
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                {[7, 30, 60, 90].map((option) => (
-                  <SelectItem value={String(option)} key={option}>
-                    {option} days
-                  </SelectItem>
-                ))}
-                <SelectItem value="never">Never</SelectItem>
-              </SelectGroup>
-            </SelectContent>
-          </Select>
-          <div className="flex gap-2">
-            <Button>Generate Key</Button>
-            <Button variant="outline" asChild>
-              <Link to="/settings/api-keys/">Cancel</Link>
-            </Button>
-          </div>
-        </div>
-      </form>
-    </div>
+    </form>
   );
 };