zudoku 0.0.0-feat-bundled-types.71f1034 → 0.0.0-feat-openapi-docs-redesign.dab3fc6a

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

@@ -3,19 +3,17 @@ import {
   useQueryClient,
   useSuspenseQuery,
 } from "@tanstack/react-query";
-import { AnimatePresence } from "framer-motion";
 import {
   CheckIcon,
-  CopyIcon,
-  EyeIcon,
-  EyeOffIcon,
+  CircleSlashIcon,
   PencilLineIcon,
-  RotateCwIcon,
+  RefreshCwIcon,
   TrashIcon,
   XIcon,
 } from "lucide-react";
+import { AnimatePresence } from "motion/react";
 import React, { useState } from "react";
-import { Link } from "react-router";
+import { Alert, AlertTitle } from "zudoku/ui/Alert.js";
 import { Card, CardHeader } from "zudoku/ui/Card.js";
 import {
   Dialog,
@@ -27,12 +25,14 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "zudoku/ui/Dialog.js";
+import { Secret } from "zudoku/ui/Secret.js";
 import { useZudoku } from "../../components/context/ZudokuContext.js";
 import { Slot } from "../../components/Slot.js";
 import { Button } from "../../ui/Button.js";
 import { Input } from "../../ui/Input.js";
 import { cn } from "../../util/cn.js";
-import { ApiConsumer, type ApiKey, type ApiKeyService } from "./index.js";
+import { CreateApiKeyDialog } from "./CreateApiKeyDialog.js";
+import type { ApiConsumer, ApiKey, ApiKeyService } from "./index.js";
 
 export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
   const context = useZudoku();
@@ -47,6 +47,8 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
     retry: false,
   });
 
+  const [isCreateApiKeyOpen, setIsCreateApiKeyOpen] = useState(false);
+
   const deleteKeyMutation = useMutation({
     mutationFn: ({
       consumerId,
@@ -84,7 +86,7 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
 
       return { previousData };
     },
-    onError: (err, variables, context) => {
+    onError: (_err, _variables, context) => {
       if (context?.previousData) {
         queryClient.setQueryData(["api-keys"], context.previousData);
       }
@@ -130,7 +132,7 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
 
       return { previousData };
     },
-    onError: (err, variables, context) => {
+    onError: (_err, _variables, context) => {
       if (context?.previousData) {
         queryClient.setQueryData(["api-keys"], context.previousData);
       }
@@ -173,23 +175,43 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
   };
 
   return (
-    <div className="max-w-screen-lg h-full pt-(--padding-content-top) pb-(--padding-content-bottom)">
+    <div className="max-w-screen-md h-full pt-(--padding-content-top) pb-(--padding-content-bottom)">
       <Slot.Target name="api-keys-list-page" />
 
       <div className="flex justify-between pb-3">
         <h1 className="font-medium text-2xl">API Keys</h1>
+
         {service.createKey && (
-          <Button asChild>
-            <Link to="/settings/api-keys/new">Create API Key</Link>
-          </Button>
+          <CreateApiKeyDialog
+            service={service}
+            isOpen={isCreateApiKeyOpen}
+            onOpenChange={setIsCreateApiKeyOpen}
+          />
         )}
       </div>
       <p>Create, manage, and monitor your API keys</p>
 
       <Slot.Target name="api-keys-list-page-before-keys" />
-
       <div className="h-8"></div>
-      <div className="grid grid-cols-8">
+      {rollKeyMutation.isError && (
+        <Alert variant="destructive" className="mb-4">
+          <CircleSlashIcon size={16} />
+          <AlertTitle>{rollKeyMutation.error.message}</AlertTitle>
+        </Alert>
+      )}
+      {updateConsumerMutation.isError && (
+        <Alert variant="destructive" className="mb-4">
+          <CircleSlashIcon size={16} />
+          <AlertTitle>{updateConsumerMutation.error.message}</AlertTitle>
+        </Alert>
+      )}
+      {deleteKeyMutation.isError && (
+        <Alert variant="destructive" className="mb-4">
+          <CircleSlashIcon size={16} />
+          <AlertTitle>{deleteKeyMutation.error.message}</AlertTitle>
+        </Alert>
+      )}
+      <div className="">
         {data.length === 0 ? (
           <div className="flex col-span-full flex-col justify-center gap-4 items-center p-8 border rounded-sm bg-muted/30 text-muted-foreground">
             <p className="text-center">
@@ -198,16 +220,17 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
               {service.createKey && "Get started and create your first key."}
             </p>
             {service.createKey && (
-              <Button asChild variant="outline">
-                <Link to="/settings/api-keys/new">Create API Key</Link>
-              </Button>
+              <CreateApiKeyDialog
+                service={service}
+                isOpen={isCreateApiKeyOpen}
+                onOpenChange={setIsCreateApiKeyOpen}
+              />
             )}
           </div>
         ) : (
           <ul
             className={cn(
-              "grid grid-cols-1 divide-y divide-border col-span-6",
-              "lg:grid-cols-[1fr_min-content]",
+              "grid grid-cols-[1fr_min-content] divide-y divide-border col-span-6",
             )}
           >
             {data.map((consumers) => (
@@ -253,7 +276,7 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
                           </div>
                         </div>
                       ) : (
-                        <>{consumers.label}</>
+                        consumers.label
                       )}
                       <div className="text-muted-foreground text-xs">
                         {consumers.createdOn}
@@ -278,35 +301,39 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
                   <div className="flex justify-end">
                     {service.updateConsumer && (
                       <Button
-                        size="icon"
                         variant="ghost"
                         onClick={() =>
                           handleStartEdit(consumers.id, consumers.label)
                         }
                         className={cn(
+                          "flex gap-2",
                           editingConsumerId === consumers.id &&
                             "opacity-0! pointer-events-none",
                         )}
                         disabled={editingConsumerId === consumers.id}
                       >
                         <PencilLineIcon size={16} />
+                        <span className="hidden md:block">Edit label</span>
                       </Button>
                     )}
                     {service.rollKey && (
                       <Dialog>
                         <DialogTrigger asChild>
                           <Button
-                            size="icon"
                             title="Roll this key"
                             variant="ghost"
                             disabled={rollKeyMutation.isPending}
-                            className={
-                              rollKeyMutation.isPending
-                                ? "animate-spin"
-                                : undefined
-                            }
+                            className="flex items-center gap-2"
                           >
-                            <RotateCwIcon size={16} />
+                            <RefreshCwIcon
+                              size={16}
+                              className={
+                                rollKeyMutation.isPending
+                                  ? "animate-spin"
+                                  : undefined
+                              }
+                            />
+                            <span className="hidden md:block">Roll key</span>
                           </Button>
                         </DialogTrigger>
                         <DialogContent>
@@ -397,14 +424,12 @@ const RevealApiKey = ({
   className?: string;
 }) => {
   const [revealed, setRevealed] = useState(false);
-  const [copied, setCopied] = useState(false);
 
   const { key, createdOn, expiresOn } = apiKey;
   const isExpired = expiresOn && new Date(expiresOn) < new Date();
   const daysUntilExpiry = expiresOn
     ? Math.ceil(
-        (new Date(expiresOn).getTime() - new Date().getTime()) /
-          (1000 * 60 * 60 * 24),
+        (new Date(expiresOn).getTime() - Date.now()) / (1000 * 60 * 60 * 24),
       )
     : Infinity;
   const expiresSoon = daysUntilExpiry <= 7 && !isExpired;
@@ -412,44 +437,13 @@ const RevealApiKey = ({
   return (
     <div className={cn("grid col-span-full grid-cols-subgrid p-6", className)}>
       <div className="flex flex-col gap-1">
-        <div className="flex gap-2 items-center text-sm border rounded-md w-fit px-1">
-          <div className="font-mono truncate h-9 items-center flex px-2 text-xs gap-2">
-            <div
-              className={cn(
-                "rounded-full w-2 h-2 bg-emerald-400 mr-2",
-                (expiresSoon || isExpired) && "bg-neutral-200",
-              )}
-            ></div>
-            <span>
-              <span className={revealed ? "" : "opacity-20"}>
-                {revealed
-                  ? key.slice(0, -5)
-                  : "**** ".repeat(key.slice(0, -5).length / 5) +
-                    "*".repeat(key.slice(0, -5).length % 5)}
-              </span>
-              <span>{key.slice(-5)}</span>
-            </span>
-          </div>
-          <Button
-            variant="ghost"
-            onClick={() => setRevealed((prev) => !prev)}
-            size="icon"
-          >
-            {revealed ? <EyeOffIcon size={16} /> : <EyeIcon size={16} />}
-          </Button>
-          <Button
-            variant="ghost"
-            onClick={() => {
-              void navigator.clipboard.writeText(key).then(() => {
-                setCopied(true);
-                setTimeout(() => setCopied(false), 2000);
-              });
-            }}
-            size="icon"
-          >
-            {copied ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
-          </Button>
-        </div>
+        <Secret
+          className="max-w-fit w-full"
+          secret={key}
+          status={isExpired ? "expired" : expiresSoon ? "expiring" : "active"}
+          revealed={revealed}
+          onReveal={setRevealed}
+        />
         <div className="flex gap-1 mt-0.5 text-nowrap">
           {createdOn && (
             <span className="text-xs text-muted-foreground">
@@ -473,7 +467,7 @@ const RevealApiKey = ({
         </div>
       </div>
       <div className="flex justify-end">
-        {isExpired && onDeleteKey && (
+        {expiresOn && onDeleteKey && (
           <Dialog>
             <DialogTrigger asChild>
               <Button variant="ghost" size="icon">

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

@@ -1,11 +1,12 @@
 import { KeyRoundIcon } from "lucide-react";
-import { type RouteObject } from "react-router";
-import { type ZudokuContext } from "../../core/ZudokuContext.js";
-import {
-  type ApiIdentityPlugin,
-  type ProfileMenuPlugin,
-  type ZudokuPlugin,
+import type { RouteObject } from "react-router";
+import type { UseAuthReturn } from "../../authentication/hook.js";
+import type {
+  ApiIdentityPlugin,
+  ProfileMenuPlugin,
+  ZudokuPlugin,
 } from "../../core/plugins.js";
+import type { ZudokuContext } from "../../core/ZudokuContext.js";
 import { RouterError } from "../../errors/RouterError.js";
 import invariant from "../../util/invariant.js";
 import { ProtectedRoute } from "./ProtectedRoute.js";
@@ -26,10 +27,15 @@ export type ApiKeyService = {
     context: ZudokuContext,
   ) => Promise<void>;
   getUsage?: (apiKeys: string[], context: ZudokuContext) => Promise<void>;
-  createKey?: (
-    apiKey: { description: string; expiresOn?: string },
-    context: ZudokuContext,
-  ) => Promise<void>;
+  createKey?: ({
+    apiKey,
+    context,
+    auth,
+  }: {
+    apiKey: { description: string; expiresOn?: string };
+    context: ZudokuContext;
+    auth: UseAuthReturn;
+  }) => Promise<void>;
 };
 
 export type ApiKeyPluginOptions =
@@ -56,7 +62,28 @@ export interface ApiConsumer {
   key?: ApiKey;
 }
 
-const createDefaultHandler = (deploymentName: string): ApiKeyService => {
+const parseJsonSafe = async (response: Response) => {
+  try {
+    return await response.json();
+  } catch {
+    return;
+  }
+};
+
+const throwIfProblemJson = async (response: Response) => {
+  const contentType = response.headers.get("content-type");
+  if (!response.ok && contentType?.includes("application/problem+json")) {
+    const data = await parseJsonSafe(response);
+    if (data.type && data.title) {
+      throw new Error(data.detail ?? data.title);
+    }
+  }
+};
+
+const createDefaultHandler = (
+  deploymentName: string,
+  options: ApiKeyPluginOptions,
+): ApiKeyService => {
   return {
     deleteKey: async (consumerId, keyId, context) => {
       const request = new Request(
@@ -67,8 +94,8 @@ const createDefaultHandler = (deploymentName: string): ApiKeyService => {
         },
       );
       await context.signRequest(request);
-
       const response = await fetch(request);
+      await throwIfProblemJson(response);
       invariant(response.ok, "Failed to delete API key");
     },
     updateConsumer: async (consumer, context) => {
@@ -89,6 +116,7 @@ const createDefaultHandler = (deploymentName: string): ApiKeyService => {
           ),
         ),
       );
+      await throwIfProblemJson(response);
       invariant(response.ok, "Failed to update API key description");
     },
     rollKey: async (consumerId, context) => {
@@ -102,29 +130,30 @@ const createDefaultHandler = (deploymentName: string): ApiKeyService => {
               headers: {
                 "Content-Type": "application/json",
               },
-              body: JSON.stringify({
-                expiresOn: new Date(),
-              }),
+              body: JSON.stringify({}),
             },
           ),
         ),
       );
+      await throwIfProblemJson(response);
       invariant(response.ok, "Failed to delete API key");
     },
     getConsumers: async (context) => {
       const request = new Request(
-        DEFAULT_API_KEY_ENDPOINT + `/${deploymentName}/consumers`,
+        `${DEFAULT_API_KEY_ENDPOINT}/${deploymentName}/consumers`,
       );
       await context.signRequest(request);
 
       const keys = await fetch(request);
+      await throwIfProblemJson(keys);
       invariant(keys.ok, "Failed to fetch API keys");
 
       const data = (await keys.json()) as {
         data: [
           {
             id: string;
-            label: string;
+            label?: string;
+            subject?: string;
             apiKeys: {
               data: ApiKey[];
             };
@@ -134,11 +163,12 @@ const createDefaultHandler = (deploymentName: string): ApiKeyService => {
 
       return data.data.map((consumer) => ({
         id: consumer.id,
-        label: consumer.label || "API Key",
+        label: consumer.label || consumer.subject || "API Key",
         apiKeys: consumer.apiKeys.data,
         key: consumer.apiKeys.data.at(0),
       }));
     },
+    ...options,
   };
 };
 
@@ -150,7 +180,7 @@ export const apiKeyPlugin = (
 ): ZudokuPlugin & ApiIdentityPlugin & ProfileMenuPlugin => {
   const service: ApiKeyService =
     "deploymentName" in options
-      ? createDefaultHandler(options.deploymentName)
+      ? createDefaultHandler(options.deploymentName, options)
       : options;
 
   return {
@@ -176,14 +206,13 @@ export const apiKeyPlugin = (
             return request;
           },
           id: consumer.id,
-          label: consumer.description ?? consumer.id,
+          label: consumer.label,
         }));
       } catch {
         return [];
       }
     },
     getRoutes: (): RouteObject[] => {
-      // TODO: Make lazy
       return [
         {
           element: <ProtectedRoute />,
@@ -193,10 +222,6 @@ export const apiKeyPlugin = (
               path: "/settings/api-keys",
               element: <SettingsApiKeys service={service} />,
             },
-            // {
-            //   path: "/settings/api-keys/new",
-            //   element: <CreateApiKey service={service} />,
-            // },
           ],
         },
       ];

package/src/lib/plugins/custom-pages/index.tsx

@@ -1,24 +1,32 @@
-import { type ComponentType, type ReactNode } from "react";
+import type { ReactNode } from "react";
 import type { RouteObject } from "react-router";
-import type { NavigationPlugin, ZudokuPlugin } from "../../core/plugins.js";
-import type { ExposedComponentProps } from "../../util/useExposedProps.js";
-import { CustomPage } from "./CustomPage.js";
+import type { NavigationItem } from "../../../config/validators/NavigationSchema.js";
+import { traverseNavigation } from "../../components/navigation/utils.js";
+import type { NavigationPlugin } from "../../core/plugins.js";
 
 export type CustomPageConfig = {
   path: string;
-  prose?: boolean;
   element?: ReactNode;
-  render?: ComponentType<ExposedComponentProps>;
 };
 
 export const customPagesPlugin = (
-  config: CustomPageConfig[],
-): ZudokuPlugin & NavigationPlugin => {
-  return {
-    getRoutes: (): RouteObject[] =>
-      config.map(({ path, ...props }) => ({
-        path,
-        element: <CustomPage {...props} />,
-      })),
-  };
-};
+  navigation: NavigationItem[] = [],
+): NavigationPlugin => ({
+  getRoutes: (): RouteObject[] => {
+    const customPages: RouteObject[] = [];
+
+    traverseNavigation(navigation, (item) => {
+      if (item.type === "custom-page") {
+        customPages.push({
+          path: item.path,
+          element: item.element,
+          handle: {
+            layout: item.layout ?? "default",
+          },
+        });
+      }
+    });
+
+    return customPages;
+  },
+});