Refactor CreateApiKeyDialog to use instance IDs

webui/src/components/apikeys/CreateApiKeyDialog.tsx

@@ -8,9 +8,9 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Loader2 } from "lucide-react";
 import { apiKeysApi } from "@/lib/api";
-import { CreateKeyRequest, PermissionMode, InstancePermission } from "@/types/apiKey";
+import { PermissionMode, type CreateKeyRequest } from "@/types/apiKey";
 import { useInstances } from "@/contexts/InstancesContext";
-import { format, addDays } from "date-fns";
+import { format } from "date-fns";
 
 interface CreateApiKeyDialogProps {
   open: boolean;
@@ -61,22 +61,19 @@ function CreateApiKeyDialog({ open, onOpenChange, onKeyCreated }: CreateApiKeyDi
     }
 
     // Build request
-    const permissions: InstancePermission[] = [];
+    const instanceIds: number[] = [];
     if (permissionMode === PermissionMode.PerInstance) {
-      Object.entries(instancePermissions).forEach(([instanceId, canInfer]) => {
+      Object.entries(instancePermissions).forEach(([instanceId, hasPermission]) => {
-        if (canInfer) {
+        if (hasPermission) {
-          permissions.push({
+          instanceIds.push(parseInt(instanceId));
-            InstanceID: parseInt(instanceId),
-            CanInfer: true,
-          });
         }
       });
     }
 
     const request: CreateKeyRequest = {
-      Name: name.trim(),
+      name: name.trim(),
-      PermissionMode: permissionMode,
+      permission_mode: permissionMode,
-      InstancePermissions: permissions,
+      instance_ids: instanceIds,
     };
 
     // Add expiration if provided
@@ -87,7 +84,7 @@ function CreateApiKeyDialog({ open, onOpenChange, onKeyCreated }: CreateApiKeyDi
         setError("Expiration date must be in the future");
         return;
       }
-      request.ExpiresAt = Math.floor(expirationDate.getTime() / 1000);
+      request.expires_at = Math.floor(expirationDate.getTime() / 1000);
     }
 
     setLoading(true);
@@ -107,10 +104,10 @@ function CreateApiKeyDialog({ open, onOpenChange, onKeyCreated }: CreateApiKeyDi
   };
 
   const handleInstancePermissionChange = (instanceId: number, checked: boolean) => {
-    setInstancePermissions({
+    setInstancePermissions(prev => ({
-      ...instancePermissions,
+      ...prev,
       [instanceId]: checked,
-    });
+    }));
   };
 
   return (
@@ -172,14 +169,19 @@ function CreateApiKeyDialog({ open, onOpenChange, onKeyCreated }: CreateApiKeyDi
                   <p className="text-sm text-muted-foreground">No instances available</p>
                 ) : (
                   <div className="space-y-2">
-                    {instances.map((instance) => (
+                    {instances.map((instance, index) => {
-                      <div key={instance.id} className="flex items-center space-x-2">
+                      const isChecked = !!instancePermissions[instance.id];
+                      return (
+                        <div
+                          key={`${instance.name}-${index}`}
+                          className="flex items-center space-x-2"
+                        >
                           <Checkbox
                             id={`instance-${instance.id}`}
-                          checked={instancePermissions[instance.id] || false}
+                            checked={isChecked}
-                          onCheckedChange={(checked) =>
+                            onCheckedChange={(checked) => {
-                            handleInstancePermissionChange(instance.id, checked as boolean)
+                              handleInstancePermissionChange(instance.id, checked as boolean);
-                          }
+                            }}
                             disabled={loading}
                           />
                           <Label
@@ -188,9 +190,9 @@ function CreateApiKeyDialog({ open, onOpenChange, onKeyCreated }: CreateApiKeyDi
                           >
                             {instance.name}
                           </Label>
-                        <span className="text-sm text-muted-foreground">Can Infer</span>
                         </div>
-                    ))}
+                      );
+                    })}
                   </div>
                 )}
               </div>

webui/src/components/settings/ApiKeysSection.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, Fragment } from "react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Alert, AlertDescription } from "@/components/ui/alert";
@@ -175,9 +175,8 @@ function ApiKeysSection() {
             </thead>
             <tbody>
               {keys.map((key) => (
-                <>
+                <Fragment key={key.id}>
                   <tr
-                    key={key.id}
                     className="border-t hover:bg-muted/50 cursor-pointer"
                     onClick={() => handleRowClick(key)}
                   >
@@ -236,25 +235,15 @@ function ApiKeysSection() {
                           <p className="text-sm text-muted-foreground">Loading permissions...</p>
                         ) : permissions[key.id] ? (
                           <div className="space-y-2">
-                            <p className="text-sm font-semibold">Instance Permissions:</p>
+                            <p className="text-sm font-semibold">Allowed Instances:</p>
-                            <table className="w-full text-sm">
+                            <ul className="text-sm space-y-1">
-                              <thead>
-                                <tr className="border-b">
-                                  <th className="text-left py-2">Instance Name</th>
-                                  <th className="text-left py-2">Can Infer</th>
-                                </tr>
-                              </thead>
-                              <tbody>
                               {permissions[key.id].map((perm) => (
-                                  <tr key={perm.instance_id} className="border-b">
+                                <li key={perm.instance_id} className="flex items-center gap-2">
-                                    <td className="py-2">{perm.instance_name}</td>
+                                  <Check className="h-3 w-3 text-green-600" />
-                                    <td className="py-2">
+                                  {perm.instance_name}
-                                      <Check className="h-4 w-4 text-green-600" />
+                                </li>
-                                    </td>
-                                  </tr>
                               ))}
-                              </tbody>
+                            </ul>
-                            </table>
                           </div>
                         ) : (
                           <p className="text-sm text-muted-foreground">No permissions data</p>
@@ -262,7 +251,7 @@ function ApiKeysSection() {
                       </td>
                     </tr>
                   )}
-                </>
+                </Fragment>
               ))}
             </tbody>
           </table>