From cd6f2a1367992bc4778254777a1ad2b110443e2d Mon Sep 17 00:00:00 2001
From: Michael Silva <michael@unkey.dev>
Date: Wed, 8 Jan 2025 17:00:23 -0500
Subject: [PATCH] fixes UI for update and create key

---
 .../[keyId]/settings/update-key-remaining.tsx | 75 ++++++++++++++++---
 .../[apiId]/keys/[keyAuthId]/new/client.tsx   | 10 ++-
 2 files changed, 71 insertions(+), 14 deletions(-)

diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-remaining.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-remaining.tsx
index 019ebebde..35101c393 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-remaining.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-remaining.tsx
@@ -20,6 +20,13 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
@@ -36,10 +43,12 @@ const formSchema = z.object({
   remaining: z.coerce.number().positive({ message: "Please enter a positive number" }).optional(),
   refill: z
     .object({
+      interval: z.enum(["none", "daily", "monthly"]).optional(),
       amount: z
         .literal("")
         .transform(() => undefined)
-        .or(z.coerce.number().int().positive()),
+        .or(z.coerce.number().int().positive())
+        .optional(),
       refillDay: z
         .literal("")
         .transform(() => undefined)
@@ -67,9 +76,10 @@ export const UpdateKeyRemaining: React.FC<Props> = ({ apiKey }) => {
     delayError: 100,
     defaultValues: {
       keyId: apiKey.id,
-      limitEnabled: Boolean(apiKey.refillAmount),
+      limitEnabled: Boolean(apiKey.remaining) || Boolean(apiKey.refillAmount),
       remaining: apiKey.remaining ? apiKey.remaining : undefined,
       refill: {
+        interval: apiKey.refillDay ? "monthly" : apiKey.refillAmount ? "daily" : "none",
         amount: apiKey.refillAmount ? apiKey.refillAmount : undefined,
         refillDay: apiKey.refillDay ?? undefined,
       },
@@ -94,21 +104,33 @@ export const UpdateKeyRemaining: React.FC<Props> = ({ apiKey }) => {
   });
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
-    if (!values.refill?.amount && values.refill?.refillDay) {
+    if (values.refill?.interval === "none") {
+      delete values.refill;
+    }
+
+    if (!values.refill?.amount && values.refill?.refillDay && values.limitEnabled) {
       form.setError("refill.amount", {
         message: "Please enter the number of uses per interval or remove the refill day",
       });
       return;
     }
-    if (values.remaining === undefined) {
+    if (values.remaining === undefined && values.limitEnabled) {
       form.setError("remaining", { message: "Please enter a value" });
       return;
     }
-    if (values.limitEnabled === false) {
+    if (!values.limitEnabled) {
       delete values.refill;
       delete values.remaining;
     }
-    await updateRemaining.mutateAsync(values);
+    if (values.refill?.interval === "monthly" && !values.refill?.refillDay) {
+      values.refill.refillDay = 1;
+    }
+    await updateRemaining.mutateAsync({
+      keyId: values.keyId,
+      limitEnabled: values.limitEnabled,
+      remaining: values.remaining,
+      refill: values.refill,
+    });
   }
 
   return (
@@ -151,12 +173,38 @@ export const UpdateKeyRemaining: React.FC<Props> = ({ apiKey }) => {
                   </FormItem>
                 )}
               />
+              <FormField
+                control={form.control}
+                name="refill.interval"
+                disabled={
+                  !form.watch("limitEnabled") ||
+                  form.watch("remaining") === undefined ||
+                  form.watch("remaining") === null
+                }
+                render={({ field }) => (
+                  <FormItem className="">
+                    <FormLabel>Refill Rate</FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value || "none"}>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="none">None</SelectItem>
+                        <SelectItem value="daily">Daily</SelectItem>
+                        <SelectItem value="monthly">Monthly</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormDescription>Interval key will be refilled.</FormDescription>
+                  </FormItem>
+                )}
+              />
               <FormField
                 control={form.control}
                 disabled={
                   form.watch("remaining") === undefined ||
                   form.watch("remaining") === null ||
-                  !form.watch("limitEnabled") === true
+                  !form.watch("limitEnabled") === true ||
+                  form.watch("refill.interval") === "none"
                 }
                 name="refill.amount"
                 render={({ field }) => (
@@ -183,7 +231,9 @@ export const UpdateKeyRemaining: React.FC<Props> = ({ apiKey }) => {
                 disabled={
                   form.watch("remaining") === undefined ||
                   form.watch("remaining") === null ||
-                  !form.watch("limitEnabled") === true
+                  !form.watch("limitEnabled") === true ||
+                  form.watch("refill.interval") === "none" ||
+                  form.watch("refill.interval") === "daily"
                 }
                 name="refill.refillDay"
                 render={({ field }) => (
@@ -191,11 +241,16 @@ export const UpdateKeyRemaining: React.FC<Props> = ({ apiKey }) => {
                     <FormLabel>Day of the month to refill uses.</FormLabel>
                     <FormControl>
                       <Input
-                        placeholder="day of the month"
+                        placeholder="1"
                         className="w-full"
                         type="number"
                         {...field}
-                        value={form.getValues("limitEnabled") ? field.value : undefined}
+                        value={
+                          form.getValues("limitEnabled") &&
+                          form.getValues("refill.interval") === "monthly"
+                            ? field.value
+                            : undefined
+                        }
                       />
                     </FormControl>
                     <FormDescription>
diff --git a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/client.tsx b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/client.tsx
index 442d16512..cf2abd4e1 100644
--- a/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/client.tsx
+++ b/apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/client.tsx
@@ -507,8 +507,7 @@ export const CreateKey = ({ apiId, keyAuthId, defaultBytes, defaultPrefix }: Pro
                                     <FormLabel>Refill Rate</FormLabel>
                                     <Select
                                       onValueChange={field.onChange}
-                                      defaultValue="none"
-                                      value={field.value}
+                                      value={field.value || "none"}
                                     >
                                       <SelectTrigger>
                                         <SelectValue />
@@ -527,6 +526,10 @@ export const CreateKey = ({ apiId, keyAuthId, defaultBytes, defaultPrefix }: Pro
                               />
                               <FormField
                                 control={form.control}
+                                disabled={
+                                  form.watch("limit.refill.interval") === "none" ||
+                                  form.watch("limit.refill.interval") === undefined
+                                }
                                 name="limit.refill.amount"
                                 render={({ field }) => (
                                   <FormItem className="mt-4">
@@ -538,7 +541,7 @@ export const CreateKey = ({ apiId, keyAuthId, defaultBytes, defaultPrefix }: Pro
                                         type="number"
                                         {...field}
                                         value={
-                                          form.getValues("limitEnabled") ? field.value : undefined
+                                          form.getValues("limitEnabled") ? field.value : "none"
                                         }
                                       />
                                     </FormControl>
@@ -549,7 +552,6 @@ export const CreateKey = ({ apiId, keyAuthId, defaultBytes, defaultPrefix }: Pro
                                   </FormItem>
                                 )}
                               />
-
                               <FormField
                                 control={form.control}
                                 disabled={