zudoku 0.3.0-dev.81 → 0.3.0-dev.83

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

@@ -34,6 +34,17 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
     },
   });
 
+  const rollKeyMutation = useMutation({
+    mutationFn: (id: string) => {
+      if (!service.rollKey) {
+        throw new Error("rollKey not implemented");
+      }
+
+      return service.rollKey(id, context);
+    },
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["api-keys"] }),
+  });
+
   return (
     <div className="max-w-screen-lg h-full pt-[--padding-content-top] pb-[--padding-content-bottom]">
       <Slotlet name="api-keys-list-page" />
@@ -50,14 +61,14 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
       <Slotlet name="api-keys-list-page-before-keys" />
 
       {data.length === 0 ? (
-        <div className="flex flex-col justify-center gap-4 items-center h-1/2 my-8">
-          <div className="text-center">
+        <div className="flex flex-col justify-center gap-4 items-center p-8 border rounded bg-muted/30 text-muted-foreground">
+          <p className="text-center">
             No API keys created yet.
             <br />
-            Get started and create the first one now
-          </div>
+            Get started and create your first key.
+          </p>
           {service.createKey && (
-            <Button asChild>
+            <Button asChild variant="outline">
               <Link to="/settings/api-keys/new">Create API Key</Link>
             </Button>
           )}
@@ -94,7 +105,18 @@ export const SettingsApiKeys = ({ service }: { service: ApiKeyService }) => {
               </div>
               <div className="flex gap-2">
                 {service.rollKey && (
-                  <Button size="icon">
+                  <Button
+                    size="icon"
+                    title="Roll this key"
+                    variant="ghost"
+                    onClick={() => {
+                      if (!confirm("Do you want to roll this key?")) {
+                        return;
+                      }
+
+                      rollKeyMutation.mutate(key.id);
+                    }}
+                  >
                     <RotateCwIcon size={16} />
                   </Button>
                 )}
@@ -128,10 +150,9 @@ const RevealApiKey = ({ apiKey }: { apiKey: string }) => {
 
   return (
     <div className="flex gap-2 items-center text-sm w-full">
-      <input
-        className="border rounded bg-gray-100 dark:bg-gray-950 p-1 font-mono max-w-min"
-        value={revealed ? apiKey : "•".repeat(apiKey.length)}
-      />
+      <div className="border rounded bg-gray-100 dark:bg-gray-950 p-1 font-mono w-fit overflow-x-scroll h-9 items-center flex px-2">
+        {revealed ? apiKey : "•".repeat(apiKey.length)}
+      </div>
       <Button
         variant="outline"
         onClick={() => setRevealed((prev) => !prev)}

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

@@ -54,6 +54,16 @@ const createDefaultHandler = (endpoint: string): ApiKeyService => {
       const response = await fetch(request);
       invariant(response.ok, "Failed to delete API key");
     },
+    rollKey: async (id, context) => {
+      const response = await fetch(
+        await context.signRequest(
+          new Request(endpoint + `/v1/developer/api-keys/${id}/key`, {
+            method: "DELETE",
+          }),
+        ),
+      );
+      invariant(response.ok, "Failed to delete API key");
+    },
     createKey: async (apiKey, context) => {
       const request = new Request(endpoint + `/v1/developer/api-keys`, {
         method: "POST",

package/src/lib/plugins/openapi/playground/Playground.tsx

@@ -234,7 +234,7 @@ export const Playground = ({
             >
               <div className="flex justify-between">
                 <TabsList>
-                  {pathParams.length > 0 && (
+                  {queryParams.length + pathParams.length > 0 && (
                     <TabsTrigger value="parameters">Parameters</TabsTrigger>
                   )}
                   <TabsTrigger value="headers">