zudoku 0.0.0-feat-openapi-docs-redesign.dab3fc6a → 0.0.0-feat-navigation-at-property.z8cd07fa5

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

@@ -1,5 +1,6 @@
 import { KeyRoundIcon } from "lucide-react";
 import type { RouteObject } from "react-router";
+import type { ApiKeysOptions } from "../../../config/validators/validate.js";
 import type { UseAuthReturn } from "../../authentication/hook.js";
 import type {
   ApiIdentityPlugin,
@@ -7,9 +8,7 @@ import type {
   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";
 import { SettingsApiKeys } from "./SettingsApiKeys.js";
 
 const DEFAULT_API_KEY_ENDPOINT = "https://api.zuploedge.com/v2/client";
@@ -38,9 +37,11 @@ export type ApiKeyService = {
   }) => Promise<void>;
 };
 
-export type ApiKeyPluginOptions =
-  | ApiKeyService
-  | ({ deploymentName: string } & Partial<ApiKeyService>);
+export type ApiKeyPluginOptions = ApiKeyService | DefaultApiKeyServiceOptions;
+
+type DefaultApiKeyServiceOptions = {
+  deploymentName?: string;
+} & Partial<ApiKeyService>;
 
 export interface ApiKey {
   id: string;
@@ -80,12 +81,19 @@ const throwIfProblemJson = async (response: Response) => {
   }
 };
 
-const createDefaultHandler = (
-  deploymentName: string,
-  options: ApiKeyPluginOptions,
-): ApiKeyService => {
+const developerHintOptions = {
+  developerHint:
+    "This project is not linked to a Zuplo deployment. Run `zuplo link` to get started with API Keys.",
+  title: "Not linked to a Zuplo deployment",
+};
+
+const createZuploService = ({
+  deploymentName,
+  ...options
+}: DefaultApiKeyServiceOptions): ApiKeyService => {
   return {
     deleteKey: async (consumerId, keyId, context) => {
+      invariant(deploymentName, "Cannot delete API key.", developerHintOptions);
       const request = new Request(
         DEFAULT_API_KEY_ENDPOINT +
           `/${deploymentName}/consumers/${consumerId}/keys/${keyId}`,
@@ -93,17 +101,20 @@ const createDefaultHandler = (
           method: "DELETE",
         },
       );
-      await context.signRequest(request);
-      const response = await fetch(request);
+      const response = await fetch(await context.signRequest(request));
       await throwIfProblemJson(response);
       invariant(response.ok, "Failed to delete API key");
     },
     updateConsumer: async (consumer, context) => {
+      invariant(
+        deploymentName,
+        "Cannot update API key description.",
+        developerHintOptions,
+      );
       const response = await fetch(
         await context.signRequest(
           new Request(
-            DEFAULT_API_KEY_ENDPOINT +
-              `/${deploymentName}/consumers/${consumer.id}`,
+            `${DEFAULT_API_KEY_ENDPOINT}/${deploymentName}/consumers/${consumer.id}`,
             {
               method: "PATCH",
               headers: {
@@ -120,11 +131,11 @@ const createDefaultHandler = (
       invariant(response.ok, "Failed to update API key description");
     },
     rollKey: async (consumerId, context) => {
+      invariant(deploymentName, "Cannot roll API key.", developerHintOptions);
       const response = await fetch(
         await context.signRequest(
           new Request(
-            DEFAULT_API_KEY_ENDPOINT +
-              `/${deploymentName}/consumers/${consumerId}/roll-key`,
+            `${DEFAULT_API_KEY_ENDPOINT}/${deploymentName}/consumers/${consumerId}/roll-key`,
             {
               method: "POST",
               headers: {
@@ -136,9 +147,10 @@ const createDefaultHandler = (
         ),
       );
       await throwIfProblemJson(response);
-      invariant(response.ok, "Failed to delete API key");
+      invariant(response.ok, "Failed to roll API key");
     },
     getConsumers: async (context) => {
+      invariant(deploymentName, "Cannot get API keys.", developerHintOptions);
       const request = new Request(
         `${DEFAULT_API_KEY_ENDPOINT}/${deploymentName}/consumers`,
       );
@@ -154,6 +166,9 @@ const createDefaultHandler = (
             id: string;
             label?: string;
             subject?: string;
+            createdOn?: string;
+            updatedOn?: string;
+            expiresOn?: string;
             apiKeys: {
               data: ApiKey[];
             };
@@ -163,6 +178,9 @@ const createDefaultHandler = (
 
       return data.data.map((consumer) => ({
         id: consumer.id,
+        createdOn: consumer.createdOn,
+        updatedOn: consumer.updatedOn,
+        expiresOn: consumer.expiresOn,
         label: consumer.label || consumer.subject || "API Key",
         apiKeys: consumer.apiKeys.data,
         key: consumer.apiKeys.data.at(0),
@@ -175,13 +193,40 @@ const createDefaultHandler = (
 export const createApiKeyService = <T extends ApiKeyService>(service: T): T =>
   service;
 
-export const apiKeyPlugin = (
-  options: ApiKeyPluginOptions,
-): ZudokuPlugin & ApiIdentityPlugin & ProfileMenuPlugin => {
-  const service: ApiKeyService =
-    "deploymentName" in options
-      ? createDefaultHandler(options.deploymentName, options)
-      : options;
+type InternalApiKeyPluginOptions = {
+  // The name of the Zuplo deployment
+  deploymentName?: string;
+  // Indicates that the plugin is running in Zuplo "mode"
+  isZuplo?: boolean;
+};
+
+export const apiKeyPlugin = ({
+  deploymentName,
+  isZuplo,
+  ...options
+}: Omit<ApiKeysOptions, "enabled"> &
+  InternalApiKeyPluginOptions): ZudokuPlugin &
+  ApiIdentityPlugin &
+  ProfileMenuPlugin => {
+  if (isZuplo && !deploymentName) {
+    // biome-ignore lint/suspicious/noConsole: Important warning
+    console.warn(
+      "This project is not linked to a Zuplo deployment. Run `zuplo link` to get started.",
+    );
+  }
+
+  const service = isZuplo
+    ? createZuploService({ deploymentName, ...options })
+    : options;
+
+  if (!service.getConsumers) {
+    throw new Error("getConsumers is required when using the apiKeyPlugin");
+  }
+
+  const verifiedService: ApiKeyService = {
+    ...service,
+    getConsumers: service.getConsumers,
+  };
 
   return {
     getProfileMenuItems: () => [
@@ -195,7 +240,7 @@ export const apiKeyPlugin = (
 
     getIdentities: async (context) => {
       try {
-        const consumers = await service.getConsumers(context);
+        const consumers = await verifiedService.getConsumers(context);
 
         return consumers.map((consumer) => ({
           authorizeRequest: (request) => {
@@ -212,19 +257,18 @@ export const apiKeyPlugin = (
         return [];
       }
     },
+
     getRoutes: (): RouteObject[] => {
       return [
         {
-          element: <ProtectedRoute />,
-          errorElement: <RouterError />,
-          children: [
-            {
-              path: "/settings/api-keys",
-              element: <SettingsApiKeys service={service} />,
-            },
-          ],
+          path: "/settings/api-keys",
+          element: <SettingsApiKeys service={verifiedService} />,
         },
       ];
     },
+
+    getProtectedRoutes: () => {
+      return ["/settings/api-keys"];
+    },
   };
 };

package/src/lib/plugins/api-keys/settings/ApiKeyItem.tsx

@@ -0,0 +1,342 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  CheckIcon,
+  CircleSlashIcon,
+  PencilLineIcon,
+  RefreshCwIcon,
+  XIcon,
+} from "lucide-react";
+import { AnimatePresence } from "motion/react";
+import { useState } from "react";
+import { Alert, AlertTitle } from "zudoku/ui/Alert.js";
+import { Button } from "zudoku/ui/Button.js";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "zudoku/ui/Dialog.js";
+import {
+  Frame,
+  FrameDescription,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from "zudoku/ui/Frame.js";
+import { Input } from "zudoku/ui/Input.js";
+import { useZudoku } from "../../../components/context/ZudokuContext.js";
+import type { ZudokuContext } from "../../../core/ZudokuContext.js";
+import { cn } from "../../../util/cn.js";
+import type { ApiConsumer } from "../index.js";
+import { RevealApiKey } from "./RevealApiKey.js";
+
+const ApiKeyItem = ({
+  consumer,
+  onUpdate,
+  onRollKey,
+  onDeleteKey,
+}: {
+  consumer: ApiConsumer;
+  onUpdate?: (
+    data: { label: string; id: string },
+    context: ZudokuContext,
+  ) => Promise<void>;
+  onRollKey?: (consumerId: string, context: ZudokuContext) => Promise<void>;
+  onDeleteKey?: (
+    consumerId: string,
+    keyId: string,
+    context: ZudokuContext,
+  ) => Promise<void>;
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editingLabel, setEditingLabel] = useState(consumer.label);
+  const queryClient = useQueryClient();
+  const context = useZudoku();
+
+  const rollKeyMutation = useMutation({
+    mutationFn: async (id: string) => {
+      if (!onRollKey) {
+        throw new Error("rollKey not implemented");
+      }
+
+      return await onRollKey?.(id, context);
+    },
+    onSuccess: () =>
+      void queryClient.invalidateQueries({ queryKey: ["api-keys"] }),
+  });
+
+  const deleteKeyMutation = useMutation({
+    mutationFn: ({
+      consumerId,
+      keyId,
+    }: {
+      consumerId: string;
+      keyId: string;
+    }) => {
+      if (!onDeleteKey) {
+        throw new Error("deleteKey not implemented");
+      }
+
+      return onDeleteKey(consumerId, keyId, context);
+    },
+    onMutate: async ({ consumerId, keyId }) => {
+      await queryClient.cancelQueries({ queryKey: ["api-keys"] });
+      const previousData = queryClient.getQueryData<ApiConsumer[]>([
+        "api-keys",
+      ]);
+      queryClient.setQueryData<ApiConsumer[]>(["api-keys"], (old) => {
+        if (!old) {
+          return old;
+        }
+
+        return old.map((consumer) => {
+          if (consumer.id === consumerId) {
+            return {
+              ...consumer,
+              apiKeys: consumer.apiKeys.filter((key) => key.id !== keyId),
+            };
+          }
+          return consumer;
+        });
+      });
+
+      return { previousData };
+    },
+    onError: (_err, _variables, context) => {
+      if (context?.previousData) {
+        queryClient.setQueryData(["api-keys"], context.previousData);
+      }
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["api-keys"] });
+    },
+  });
+
+  const updateConsumerMutation = useMutation({
+    mutationFn: ({
+      consumerId,
+      label,
+    }: {
+      consumerId: string;
+      label: string;
+    }) => {
+      if (!onUpdate) {
+        throw new Error("updateConsumer not implemented");
+      }
+
+      return onUpdate({ id: consumerId, label }, context);
+    },
+    onMutate: async ({ consumerId, label }) => {
+      await queryClient.cancelQueries({ queryKey: ["api-keys"] });
+
+      const previousData = queryClient.getQueryData(["api-keys"]);
+      queryClient.setQueryData<ApiConsumer[]>(["api-keys"], (old) => {
+        if (!old) {
+          return old;
+        }
+
+        return old.map((consumer) => {
+          if (consumer.id === consumerId) {
+            return {
+              ...consumer,
+              label,
+            };
+          }
+          return consumer;
+        });
+      });
+
+      return { previousData };
+    },
+    onError: (_err, _variables, context) => {
+      if (context?.previousData) {
+        queryClient.setQueryData(["api-keys"], context.previousData);
+      }
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["api-keys"] });
+    },
+  });
+
+  const handleStartEdit = () => {
+    setIsEditing(true);
+    setEditingLabel(consumer.label);
+  };
+
+  const handleSaveEdit = () => {
+    if (editingLabel.trim()) {
+      updateConsumerMutation.mutate({
+        label: editingLabel.trim(),
+        consumerId: consumer.id,
+      });
+    }
+    setIsEditing(false);
+  };
+
+  return (
+    <>
+      {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>
+      )}
+      <Frame
+        className="grid grid-cols-subgrid col-span-full items-center mb-4 group"
+        key={consumer.id}
+      >
+        <FrameHeader className="col-span-full flex-row items-start justify-between gap-4">
+          <div className="flex flex-col gap-1">
+            {isEditing ? (
+              <div className="flex items-center gap-2">
+                <Input
+                  maxLength={32}
+                  value={editingLabel}
+                  onChange={(e) => setEditingLabel(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      handleSaveEdit();
+                    } else if (e.key === "Escape") {
+                      setIsEditing(false);
+                    }
+                  }}
+                  autoFocus
+                />
+                <div className="flex items-center">
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    onClick={handleSaveEdit}
+                    disabled={!editingLabel.trim()}
+                  >
+                    <CheckIcon size={16} />
+                  </Button>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    onClick={() => setIsEditing(false)}
+                  >
+                    <XIcon size={16} />
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              <FrameTitle>{consumer.label}</FrameTitle>
+            )}
+            <FrameDescription>
+              {consumer.createdOn && (
+                <div>
+                  Created on {new Date(consumer.createdOn).toLocaleDateString()}
+                </div>
+              )}
+              {consumer.expiresOn && (
+                <div>
+                  Expires on {new Date(consumer.expiresOn).toLocaleDateString()}
+                </div>
+              )}
+            </FrameDescription>
+          </div>
+
+          <div className="flex gap-1">
+            {onUpdate && (
+              <Button
+                variant="ghost"
+                onClick={handleStartEdit}
+                className={cn(
+                  "flex gap-2",
+                  isEditing && "opacity-0! pointer-events-none",
+                )}
+                disabled={isEditing}
+              >
+                <PencilLineIcon size={16} />
+                <span className="hidden md:block">Edit label</span>
+              </Button>
+            )}
+            {onRollKey && (
+              <Dialog>
+                <DialogTrigger asChild>
+                  <Button
+                    title="Roll this key"
+                    variant="ghost"
+                    disabled={rollKeyMutation.isPending}
+                    className="flex items-center gap-2"
+                  >
+                    <RefreshCwIcon
+                      size={16}
+                      className={
+                        rollKeyMutation.isPending ? "animate-spin" : undefined
+                      }
+                    />
+                    <span className="hidden md:block">Roll key</span>
+                  </Button>
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogHeader>
+                    <DialogTitle>Roll API Key</DialogTitle>
+                    <DialogDescription>
+                      Are you sure you want to roll this API key?
+                    </DialogDescription>
+                  </DialogHeader>
+                  <DialogFooter>
+                    <DialogClose asChild>
+                      <Button variant="outline">Cancel</Button>
+                    </DialogClose>
+                    <DialogClose asChild>
+                      <Button
+                        onClick={() => {
+                          rollKeyMutation.mutate(consumer.id);
+                        }}
+                      >
+                        Roll Key
+                      </Button>
+                    </DialogClose>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            )}
+          </div>
+        </FrameHeader>
+        <FramePanel className="p-0 grid grid-cols-subgrid col-span-full divide-y divide-border">
+          <AnimatePresence>
+            {consumer.apiKeys.map((apiKey) => (
+              <RevealApiKey
+                key={apiKey.id}
+                apiKey={apiKey}
+                onDeleteKey={() => {
+                  deleteKeyMutation.mutate({
+                    consumerId: consumer.id,
+                    keyId: apiKey.id,
+                  });
+                }}
+                className={
+                  deleteKeyMutation.variables?.keyId === apiKey.id &&
+                  deleteKeyMutation.isPending
+                    ? "opacity-10!"
+                    : undefined
+                }
+              />
+            ))}
+          </AnimatePresence>
+        </FramePanel>
+      </Frame>
+    </>
+  );
+};
+
+export default ApiKeyItem;

package/src/lib/plugins/api-keys/settings/ApiKeyList.tsx

@@ -0,0 +1,67 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import { useZudoku } from "../../../components/context/ZudokuContext.js";
+import { cn } from "../../../util/cn.js";
+import { ZudokuError } from "../../../util/invariant.js";
+import { CreateApiKeyDialog } from "../CreateApiKeyDialog.js";
+import type { ApiKeyService } from "../index.js";
+import ApiKeyItem from "./ApiKeyItem.js";
+
+export const ApiKeyList = ({ service }: { service: ApiKeyService }) => {
+  const context = useZudoku();
+
+  const { data } = useSuspenseQuery({
+    queryFn: async () => {
+      try {
+        return await service.getConsumers(context);
+      } catch (error) {
+        if (error instanceof ZudokuError) {
+          throw error;
+        }
+        throw new ZudokuError("Cannot get API keys", {
+          cause: error,
+          title: "Error getting API keys",
+          developerHint:
+            "Check the response of the API request for more information.",
+        });
+      }
+    },
+    queryKey: ["api-keys"],
+    retry: false,
+  });
+
+  const [isCreateApiKeyOpen, setIsCreateApiKeyOpen] = useState(false);
+
+  return (
+    <div className="mt-8">
+      {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">
+            You have no API keys yet.
+            <br />
+            {service.createKey && "Get started and create your first key."}
+          </p>
+          {service.createKey && (
+            <CreateApiKeyDialog
+              service={service}
+              isOpen={isCreateApiKeyOpen}
+              onOpenChange={setIsCreateApiKeyOpen}
+            />
+          )}
+        </div>
+      ) : (
+        <ul className={cn("grid grid-cols-[1fr_min-content] col-span-6")}>
+          {data.map((consumer) => (
+            <ApiKeyItem
+              key={consumer.id}
+              consumer={consumer}
+              onUpdate={service.updateConsumer}
+              onRollKey={service.rollKey}
+              onDeleteKey={service.deleteKey}
+            />
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};