From 9e983e24c891c144f370e8f5476de6404ada3a16 Mon Sep 17 00:00:00 2001
From: Vardhaman Bhandari <sbhandari78504@gmail.com>
Date: Mon, 21 Oct 2024 16:38:55 +0530
Subject: [PATCH 1/4] fix: reset form fields in delete dialog on reopen

---
 .../[permissionId]/delete-permission.tsx      | 26 +++++++++++++----
 .../roles/[roleId]/delete-role.tsx            | 29 ++++++++++++++-----
 2 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/delete-permission.tsx b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/delete-permission.tsx
index a19d2efd0f..7d8adccaae 100644
--- a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/delete-permission.tsx
+++ b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/delete-permission.tsx
@@ -44,7 +44,9 @@ export const DeletePermission: React.FC<Props> = ({ trigger, permission }) => {
   const [open, setOpen] = useState(false);
 
   const formSchema = z.object({
-    name: z.string().refine((v) => v === permission.name, "Please confirm the role's name"),
+    name: z
+      .string()
+      .refine((v) => v === permission.name, "Please confirm the role's name"),
   });
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -68,8 +70,13 @@ export const DeletePermission: React.FC<Props> = ({ trigger, permission }) => {
     deletePermission.mutate({ permissionId: permission.id });
   }
 
+  function handleDialogOpenChange(newState: boolean) {
+    setOpen(newState);
+    form.reset();
+  }
+
   return (
-    <Dialog open={open} onOpenChange={(o) => setOpen(o)}>
+    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
       <DialogTrigger asChild>{trigger}</DialogTrigger>
       <DialogContent className="border-alert p-4 max-w-md mx-auto">
         <DialogHeader>
@@ -79,10 +86,15 @@ export const DeletePermission: React.FC<Props> = ({ trigger, permission }) => {
           </DialogDescription>
         </DialogHeader>
         <Form {...form}>
-          <form className="flex flex-col space-y-8" onSubmit={form.handleSubmit(onSubmit)}>
+          <form
+            className="flex flex-col space-y-8"
+            onSubmit={form.handleSubmit(onSubmit)}
+          >
             <Alert variant="alert">
               <AlertTitle>Warning</AlertTitle>
-              <AlertDescription>This action is not reversible. Please be certain.</AlertDescription>
+              <AlertDescription>
+                This action is not reversible. Please be certain.
+              </AlertDescription>
             </Alert>
 
             <FormField
@@ -93,8 +105,10 @@ export const DeletePermission: React.FC<Props> = ({ trigger, permission }) => {
                   <FormLabel className="font-normal text-content-subtle">
                     {" "}
                     Enter the permission's name{" "}
-                    <span className="font-medium text-content break-all">{permission.name}</span> to
-                    continue:
+                    <span className="font-medium text-content break-all">
+                      {permission.name}
+                    </span>{" "}
+                    to continue:
                   </FormLabel>
                   <FormControl>
                     <Input {...field} autoComplete="off" className="w-full" />
diff --git a/apps/dashboard/app/(app)/authorization/roles/[roleId]/delete-role.tsx b/apps/dashboard/app/(app)/authorization/roles/[roleId]/delete-role.tsx
index 5fc71addd7..db159f8ba5 100644
--- a/apps/dashboard/app/(app)/authorization/roles/[roleId]/delete-role.tsx
+++ b/apps/dashboard/app/(app)/authorization/roles/[roleId]/delete-role.tsx
@@ -43,7 +43,9 @@ export const DeleteRole: React.FC<Props> = ({ trigger, role }) => {
   const [open, setOpen] = useState(false);
 
   const formSchema = z.object({
-    name: z.string().refine((v) => v === role.name, "Please confirm the role's name"),
+    name: z
+      .string()
+      .refine((v) => v === role.name, "Please confirm the role's name"),
   });
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -69,22 +71,32 @@ export const DeleteRole: React.FC<Props> = ({ trigger, role }) => {
     deleteRole.mutate({ roleId: role.id });
   }
 
+  function handleDialogOpenChange(newState: boolean) {
+    setOpen(newState);
+    form.reset();
+  }
+
   return (
-    <Dialog open={open} onOpenChange={(o) => setOpen(o)}>
+    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
       <DialogTrigger asChild>{trigger}</DialogTrigger>
       <DialogContent className="border-alert">
         <DialogHeader>
           <DialogTitle>Delete Role</DialogTitle>
           <DialogDescription>
-            This role will be deleted, keys with this role will be disconnected from all permissions
-            granted by this role.
+            This role will be deleted, keys with this role will be disconnected
+            from all permissions granted by this role.
           </DialogDescription>
         </DialogHeader>
         <Form {...form}>
-          <form className="flex flex-col space-y-8" onSubmit={form.handleSubmit(onSubmit)}>
+          <form
+            className="flex flex-col space-y-8"
+            onSubmit={form.handleSubmit(onSubmit)}
+          >
             <Alert variant="alert">
               <AlertTitle>Warning</AlertTitle>
-              <AlertDescription>This action is not reversible. Please be certain.</AlertDescription>
+              <AlertDescription>
+                This action is not reversible. Please be certain.
+              </AlertDescription>
             </Alert>
 
             <FormField
@@ -95,7 +107,10 @@ export const DeleteRole: React.FC<Props> = ({ trigger, role }) => {
                   <FormLabel className="font-normal text-content-subtle">
                     {" "}
                     Enter the role's key{" "}
-                    <span className="font-medium text-content">{role.name}</span> to continue:
+                    <span className="font-medium text-content">
+                      {role.name}
+                    </span>{" "}
+                    to continue:
                   </FormLabel>
                   <FormControl>
                     <Input {...field} autoComplete="off" />

From ecca65668081820b38eef5b1b0ab8b8d1be53114 Mon Sep 17 00:00:00 2001
From: Vardhaman Bhandari <sbhandari78504@gmail.com>
Date: Thu, 24 Oct 2024 14:57:11 +0530
Subject: [PATCH 2/4] fix: remaining dialog form reset

---
 .../permissions/create-new-permission.tsx     | 27 +++++++---
 .../authorization/roles/create-new-role.tsx   | 36 +++++++++----
 .../settings/delete-namespace.tsx             | 51 ++++++++++++++-----
 .../[gatewayId]/settings/delete-gateway.tsx   | 38 +++++++++++---
 4 files changed, 113 insertions(+), 39 deletions(-)

diff --git a/apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx b/apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx
index 089349cd67..8a4fd562a8 100644
--- a/apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx
+++ b/apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx
@@ -75,18 +75,27 @@ export const CreateNewPermission: React.FC<Props> = ({ trigger }) => {
   async function onSubmit(values: z.infer<typeof formSchema>) {
     createPermission.mutate(values);
   }
+  function handleDialogOpenChange(newState: boolean) {
+    setOpen(newState);
+    form.reset();
+  }
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
       <DialogTrigger asChild>{trigger}</DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Create a new permission</DialogTitle>
-          <DialogDescription>Permissions allow your key to do certain actions.</DialogDescription>
+          <DialogDescription>
+            Permissions allow your key to do certain actions.
+          </DialogDescription>
         </DialogHeader>
 
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-8">
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col gap-8"
+          >
             <FormField
               control={form.control}
               name="name"
@@ -97,10 +106,10 @@ export const CreateNewPermission: React.FC<Props> = ({ trigger }) => {
                     <Input placeholder="domain.create" {...field} />
                   </FormControl>
                   <FormDescription>
-                    A unique key to identify your permission. We suggest using <code>.</code> (dot)
-                    separated names, to structure your hierarchy. For example we use{" "}
-                    <code>api.create_key</code> or <code>api.update_api</code> in our own
-                    permissions.
+                    A unique key to identify your permission. We suggest using{" "}
+                    <code>.</code> (dot) separated names, to structure your
+                    hierarchy. For example we use <code>api.create_key</code> or{" "}
+                    <code>api.update_api</code> in our own permissions.
                   </FormDescription>
                   <FormMessage />
                 </FormItem>
@@ -119,7 +128,9 @@ export const CreateNewPermission: React.FC<Props> = ({ trigger }) => {
                   </FormLabel>
                   <FormControl>
                     <Textarea
-                      rows={form.getValues().description?.split("\n").length ?? 3}
+                      rows={
+                        form.getValues().description?.split("\n").length ?? 3
+                      }
                       placeholder="Create a new domain in this account."
                       {...field}
                     />
diff --git a/apps/dashboard/app/(app)/authorization/roles/create-new-role.tsx b/apps/dashboard/app/(app)/authorization/roles/create-new-role.tsx
index b65f6e8e80..ffa880c41e 100644
--- a/apps/dashboard/app/(app)/authorization/roles/create-new-role.tsx
+++ b/apps/dashboard/app/(app)/authorization/roles/create-new-role.tsx
@@ -54,7 +54,7 @@ const formSchema = z.object({
       z.object({
         label: z.string(),
         value: z.string(),
-      }),
+      })
     )
     .optional(),
 });
@@ -92,18 +92,27 @@ export const CreateNewRole: React.FC<Props> = ({ trigger, permissions }) => {
       permissionIds: values.permissionOptions?.map((o) => o.value),
     });
   }
+  function handleDialogOpenChange(newState: boolean) {
+    setOpen(newState);
+    form.reset();
+  }
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
       <DialogTrigger asChild>{trigger}</DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Create a new role</DialogTitle>
-          <DialogDescription>Roles group permissions together.</DialogDescription>
+          <DialogDescription>
+            Roles group permissions together.
+          </DialogDescription>
         </DialogHeader>
 
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-8">
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col gap-8"
+          >
             <FormField
               control={form.control}
               name="name"
@@ -114,8 +123,8 @@ export const CreateNewRole: React.FC<Props> = ({ trigger, permissions }) => {
                     <Input placeholder="domain.manager" {...field} />
                   </FormControl>
                   <FormDescription>
-                    A unique name for your role. You will use this when managing roles through the
-                    API. These are not customer facing.
+                    A unique name for your role. You will use this when managing
+                    roles through the API. These are not customer facing.
                   </FormDescription>
                   <FormMessage />
                 </FormItem>
@@ -134,7 +143,9 @@ export const CreateNewRole: React.FC<Props> = ({ trigger, permissions }) => {
                   </FormLabel>
                   <FormControl>
                     <Textarea
-                      rows={form.getValues().description?.split("\n").length ?? 3}
+                      rows={
+                        form.getValues().description?.split("\n").length ?? 3
+                      }
                       placeholder="Manage domains and DNS records "
                       {...field}
                     />
@@ -164,7 +175,10 @@ export const CreateNewRole: React.FC<Props> = ({ trigger, permissions }) => {
                       selected={field.value ?? []}
                       setSelected={(cb) => {
                         if (typeof cb === "function") {
-                          return form.setValue("permissionOptions", cb(field.value ?? []));
+                          return form.setValue(
+                            "permissionOptions",
+                            cb(field.value ?? [])
+                          );
                         }
                       }}
                     />
@@ -175,7 +189,11 @@ export const CreateNewRole: React.FC<Props> = ({ trigger, permissions }) => {
             ) : null}
             <DialogFooter>
               <Button type="submit">
-                {createRole.isLoading ? <Loading className="w-4 h-4" /> : "Create"}
+                {createRole.isLoading ? (
+                  <Loading className="w-4 h-4" />
+                ) : (
+                  "Create"
+                )}
               </Button>
             </DialogFooter>
           </form>
diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/delete-namespace.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/delete-namespace.tsx
index 2fd3ab462e..320e21bec3 100644
--- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/delete-namespace.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/delete-namespace.tsx
@@ -3,7 +3,13 @@ import { Button } from "@/components/ui/button";
 import type React from "react";
 import { useState } from "react";
 
-import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 
@@ -46,8 +52,12 @@ export const DeleteNamespace: React.FC<Props> = ({ namespace }) => {
   const [open, setOpen] = useState(false);
 
   const formSchema = z.object({
-    name: z.string().refine((v) => v === namespace.name, "Please confirm the namespace name"),
-    intent: z.string().refine((v) => v === intent, "Please confirm your intent"),
+    name: z
+      .string()
+      .refine((v) => v === namespace.name, "Please confirm the namespace name"),
+    intent: z
+      .string()
+      .refine((v) => v === intent, "Please confirm your intent"),
   });
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -58,7 +68,8 @@ export const DeleteNamespace: React.FC<Props> = ({ namespace }) => {
   const deleteNamespace = trpc.ratelimit.namespace.delete.useMutation({
     async onSuccess() {
       toast.message("Namespace Deleted", {
-        description: "Your namespace and all its overridden identifiers have been deleted.",
+        description:
+          "Your namespace and all its overridden identifiers have been deleted.",
       });
 
       await revalidate();
@@ -70,20 +81,26 @@ export const DeleteNamespace: React.FC<Props> = ({ namespace }) => {
     },
   });
 
-  const isValid = form.watch("intent") === intent && form.watch("name") === namespace.name;
+  const isValid =
+    form.watch("intent") === intent && form.watch("name") === namespace.name;
 
   async function onSubmit(_values: z.infer<typeof formSchema>) {
     deleteNamespace.mutate({ namespaceId: namespace.id });
   }
 
+  function handleDialogOpenChange(newState: boolean) {
+    setOpen(newState);
+    form.reset();
+  }
+
   return (
     <>
       <Card className="relative border-2 border-alert">
         <CardHeader>
           <CardTitle>Delete</CardTitle>
           <CardDescription>
-            This namespace will be deleted, along with all of its identifiers and data. This action
-            cannot be undone.
+            This namespace will be deleted, along with all of its identifiers
+            and data. This action cannot be undone.
           </CardDescription>
         </CardHeader>
 
@@ -93,17 +110,20 @@ export const DeleteNamespace: React.FC<Props> = ({ namespace }) => {
           </Button>
         </CardFooter>
       </Card>
-      <Dialog open={open} onOpenChange={(o) => setOpen(o)}>
+      <Dialog open={open} onOpenChange={handleDialogOpenChange}>
         <DialogContent className="border-alert">
           <DialogHeader>
             <DialogTitle>Delete namespace</DialogTitle>
             <DialogDescription>
-              This namespace will be deleted, along with all of its identifiers and data. This
-              action cannot be undone.
+              This namespace will be deleted, along with all of its identifiers
+              and data. This action cannot be undone.
             </DialogDescription>
           </DialogHeader>
           <Form {...form}>
-            <form className="flex flex-col space-y-8" onSubmit={form.handleSubmit(onSubmit)}>
+            <form
+              className="flex flex-col space-y-8"
+              onSubmit={form.handleSubmit(onSubmit)}
+            >
               <Alert variant="alert">
                 <AlertTitle>Warning</AlertTitle>
                 <AlertDescription>
@@ -119,8 +139,10 @@ export const DeleteNamespace: React.FC<Props> = ({ namespace }) => {
                     <FormLabel className="font-normal text-content-subtle">
                       {" "}
                       Enter the namespcae name{" "}
-                      <span className="font-medium text-content">{namespace.name}</span> to
-                      continue:
+                      <span className="font-medium text-content">
+                        {namespace.name}
+                      </span>{" "}
+                      to continue:
                     </FormLabel>
                     <FormControl>
                       <Input {...field} autoComplete="off" />
@@ -136,7 +158,8 @@ export const DeleteNamespace: React.FC<Props> = ({ namespace }) => {
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel className="font-normal text-content-subtle">
-                      To verify, type <span className="font-medium text-content">{intent}</span>{" "}
+                      To verify, type{" "}
+                      <span className="font-medium text-content">{intent}</span>{" "}
                       below:
                     </FormLabel>
                     <FormControl>
diff --git a/apps/dashboard/app/(app)/semantic-cache/[gatewayId]/settings/delete-gateway.tsx b/apps/dashboard/app/(app)/semantic-cache/[gatewayId]/settings/delete-gateway.tsx
index 9ec6c59c0b..96052c6db8 100644
--- a/apps/dashboard/app/(app)/semantic-cache/[gatewayId]/settings/delete-gateway.tsx
+++ b/apps/dashboard/app/(app)/semantic-cache/[gatewayId]/settings/delete-gateway.tsx
@@ -3,7 +3,13 @@ import { Button } from "@/components/ui/button";
 import type React from "react";
 import { useState } from "react";
 
-import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 
@@ -46,8 +52,12 @@ export const DeleteGateway: React.FC<Props> = ({ gateway }) => {
   const [open, setOpen] = useState(false);
 
   const formSchema = z.object({
-    name: z.string().refine((v) => v === gateway.name, "Please confirm the gateway name"),
-    intent: z.string().refine((v) => v === intent, "Please confirm your intent"),
+    name: z
+      .string()
+      .refine((v) => v === gateway.name, "Please confirm the gateway name"),
+    intent: z
+      .string()
+      .refine((v) => v === intent, "Please confirm your intent"),
   });
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -76,11 +86,16 @@ export const DeleteGateway: React.FC<Props> = ({ gateway }) => {
     },
   });
 
-  const isValid = form.watch("intent") === intent && form.watch("name") === gateway.name;
+  const isValid =
+    form.watch("intent") === intent && form.watch("name") === gateway.name;
 
   async function onSubmit(_values: z.infer<typeof formSchema>) {
     deleteGateway.mutate({ gatewayId: gateway.id });
   }
+  function handleDialogOpenChange(newState: boolean) {
+    setOpen(newState);
+    form.reset();
+  }
 
   return (
     <>
@@ -98,7 +113,7 @@ export const DeleteGateway: React.FC<Props> = ({ gateway }) => {
           </Button>
         </CardFooter>
       </Card>
-      <Dialog open={open} onOpenChange={(o) => setOpen(o)}>
+      <Dialog open={open} onOpenChange={handleDialogOpenChange}>
         <DialogContent className="border-alert">
           <DialogHeader>
             <DialogTitle>Delete gateway</DialogTitle>
@@ -107,7 +122,10 @@ export const DeleteGateway: React.FC<Props> = ({ gateway }) => {
             </DialogDescription>
           </DialogHeader>
           <Form {...form}>
-            <form className="flex flex-col space-y-8" onSubmit={form.handleSubmit(onSubmit)}>
+            <form
+              className="flex flex-col space-y-8"
+              onSubmit={form.handleSubmit(onSubmit)}
+            >
               <Alert variant="alert">
                 <AlertTitle>Warning</AlertTitle>
                 <AlertDescription>
@@ -123,7 +141,10 @@ export const DeleteGateway: React.FC<Props> = ({ gateway }) => {
                     <FormLabel className="font-normal text-content-subtle">
                       {" "}
                       Enter the gateway name{" "}
-                      <span className="font-medium text-content">{gateway.name}</span> to continue:
+                      <span className="font-medium text-content">
+                        {gateway.name}
+                      </span>{" "}
+                      to continue:
                     </FormLabel>
                     <FormControl>
                       <Input {...field} autoComplete="off" />
@@ -139,7 +160,8 @@ export const DeleteGateway: React.FC<Props> = ({ gateway }) => {
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel className="font-normal text-content-subtle">
-                      To verify, type <span className="font-medium text-content">{intent}</span>{" "}
+                      To verify, type{" "}
+                      <span className="font-medium text-content">{intent}</span>{" "}
                       below:
                     </FormLabel>
                     <FormControl>

From 8618c059f8525856533342e74512b5aec134d42c Mon Sep 17 00:00:00 2001
From: Vardhaman Bhandari <sbhandari78504@gmail.com>
Date: Thu, 24 Oct 2024 18:00:16 +0530
Subject: [PATCH 3/4] fix: minor typo

---
 .../ratelimits/[namespaceId]/settings/delete-namespace.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/delete-namespace.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/delete-namespace.tsx
index 320e21bec3..5ff8115dec 100644
--- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/delete-namespace.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/delete-namespace.tsx
@@ -138,7 +138,7 @@ export const DeleteNamespace: React.FC<Props> = ({ namespace }) => {
                   <FormItem>
                     <FormLabel className="font-normal text-content-subtle">
                       {" "}
-                      Enter the namespcae name{" "}
+                      Enter the namespace name{" "}
                       <span className="font-medium text-content">
                         {namespace.name}
                       </span>{" "}

From 95df6768f2a01c821f8681bf94abdecccff7a32b Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Mon, 28 Oct 2024 12:51:25 +0000
Subject: [PATCH 4/4] [autofix.ci] apply automated fixes

---
 .../[permissionId]/delete-permission.tsx      | 19 +++-----
 .../permissions/create-new-permission.tsx     | 21 +++------
 .../roles/[roleId]/delete-role.tsx            | 22 +++-------
 .../authorization/roles/create-new-role.tsx   | 30 ++++---------
 .../settings/delete-namespace.tsx             | 44 ++++++-------------
 .../[gatewayId]/settings/delete-gateway.tsx   | 32 +++-----------
 6 files changed, 46 insertions(+), 122 deletions(-)

diff --git a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/delete-permission.tsx b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/delete-permission.tsx
index 7d8adccaae..421309b107 100644
--- a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/delete-permission.tsx
+++ b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/delete-permission.tsx
@@ -44,9 +44,7 @@ export const DeletePermission: React.FC<Props> = ({ trigger, permission }) => {
   const [open, setOpen] = useState(false);
 
   const formSchema = z.object({
-    name: z
-      .string()
-      .refine((v) => v === permission.name, "Please confirm the role's name"),
+    name: z.string().refine((v) => v === permission.name, "Please confirm the role's name"),
   });
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -86,15 +84,10 @@ export const DeletePermission: React.FC<Props> = ({ trigger, permission }) => {
           </DialogDescription>
         </DialogHeader>
         <Form {...form}>
-          <form
-            className="flex flex-col space-y-8"
-            onSubmit={form.handleSubmit(onSubmit)}
-          >
+          <form className="flex flex-col space-y-8" onSubmit={form.handleSubmit(onSubmit)}>
             <Alert variant="alert">
               <AlertTitle>Warning</AlertTitle>
-              <AlertDescription>
-                This action is not reversible. Please be certain.
-              </AlertDescription>
+              <AlertDescription>This action is not reversible. Please be certain.</AlertDescription>
             </Alert>
 
             <FormField
@@ -105,10 +98,8 @@ export const DeletePermission: React.FC<Props> = ({ trigger, permission }) => {
                   <FormLabel className="font-normal text-content-subtle">
                     {" "}
                     Enter the permission's name{" "}
-                    <span className="font-medium text-content break-all">
-                      {permission.name}
-                    </span>{" "}
-                    to continue:
+                    <span className="font-medium text-content break-all">{permission.name}</span> to
+                    continue:
                   </FormLabel>
                   <FormControl>
                     <Input {...field} autoComplete="off" className="w-full" />
diff --git a/apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx b/apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx
index 8a4fd562a8..29dbbe29b8 100644
--- a/apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx
+++ b/apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx
@@ -86,16 +86,11 @@ export const CreateNewPermission: React.FC<Props> = ({ trigger }) => {
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Create a new permission</DialogTitle>
-          <DialogDescription>
-            Permissions allow your key to do certain actions.
-          </DialogDescription>
+          <DialogDescription>Permissions allow your key to do certain actions.</DialogDescription>
         </DialogHeader>
 
         <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="flex flex-col gap-8"
-          >
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-8">
             <FormField
               control={form.control}
               name="name"
@@ -106,10 +101,10 @@ export const CreateNewPermission: React.FC<Props> = ({ trigger }) => {
                     <Input placeholder="domain.create" {...field} />
                   </FormControl>
                   <FormDescription>
-                    A unique key to identify your permission. We suggest using{" "}
-                    <code>.</code> (dot) separated names, to structure your
-                    hierarchy. For example we use <code>api.create_key</code> or{" "}
-                    <code>api.update_api</code> in our own permissions.
+                    A unique key to identify your permission. We suggest using <code>.</code> (dot)
+                    separated names, to structure your hierarchy. For example we use{" "}
+                    <code>api.create_key</code> or <code>api.update_api</code> in our own
+                    permissions.
                   </FormDescription>
                   <FormMessage />
                 </FormItem>
@@ -128,9 +123,7 @@ export const CreateNewPermission: React.FC<Props> = ({ trigger }) => {
                   </FormLabel>
                   <FormControl>
                     <Textarea
-                      rows={
-                        form.getValues().description?.split("\n").length ?? 3
-                      }
+                      rows={form.getValues().description?.split("\n").length ?? 3}
                       placeholder="Create a new domain in this account."
                       {...field}
                     />
diff --git a/apps/dashboard/app/(app)/authorization/roles/[roleId]/delete-role.tsx b/apps/dashboard/app/(app)/authorization/roles/[roleId]/delete-role.tsx
index db159f8ba5..3d8255b197 100644
--- a/apps/dashboard/app/(app)/authorization/roles/[roleId]/delete-role.tsx
+++ b/apps/dashboard/app/(app)/authorization/roles/[roleId]/delete-role.tsx
@@ -43,9 +43,7 @@ export const DeleteRole: React.FC<Props> = ({ trigger, role }) => {
   const [open, setOpen] = useState(false);
 
   const formSchema = z.object({
-    name: z
-      .string()
-      .refine((v) => v === role.name, "Please confirm the role's name"),
+    name: z.string().refine((v) => v === role.name, "Please confirm the role's name"),
   });
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -83,20 +81,15 @@ export const DeleteRole: React.FC<Props> = ({ trigger, role }) => {
         <DialogHeader>
           <DialogTitle>Delete Role</DialogTitle>
           <DialogDescription>
-            This role will be deleted, keys with this role will be disconnected
-            from all permissions granted by this role.
+            This role will be deleted, keys with this role will be disconnected from all permissions
+            granted by this role.
           </DialogDescription>
         </DialogHeader>
         <Form {...form}>
-          <form
-            className="flex flex-col space-y-8"
-            onSubmit={form.handleSubmit(onSubmit)}
-          >
+          <form className="flex flex-col space-y-8" onSubmit={form.handleSubmit(onSubmit)}>
             <Alert variant="alert">
               <AlertTitle>Warning</AlertTitle>
-              <AlertDescription>
-                This action is not reversible. Please be certain.
-              </AlertDescription>
+              <AlertDescription>This action is not reversible. Please be certain.</AlertDescription>
             </Alert>
 
             <FormField
@@ -107,10 +100,7 @@ export const DeleteRole: React.FC<Props> = ({ trigger, role }) => {
                   <FormLabel className="font-normal text-content-subtle">
                     {" "}
                     Enter the role's key{" "}
-                    <span className="font-medium text-content">
-                      {role.name}
-                    </span>{" "}
-                    to continue:
+                    <span className="font-medium text-content">{role.name}</span> to continue:
                   </FormLabel>
                   <FormControl>
                     <Input {...field} autoComplete="off" />
diff --git a/apps/dashboard/app/(app)/authorization/roles/create-new-role.tsx b/apps/dashboard/app/(app)/authorization/roles/create-new-role.tsx
index ffa880c41e..66fda68f60 100644
--- a/apps/dashboard/app/(app)/authorization/roles/create-new-role.tsx
+++ b/apps/dashboard/app/(app)/authorization/roles/create-new-role.tsx
@@ -54,7 +54,7 @@ const formSchema = z.object({
       z.object({
         label: z.string(),
         value: z.string(),
-      })
+      }),
     )
     .optional(),
 });
@@ -103,16 +103,11 @@ export const CreateNewRole: React.FC<Props> = ({ trigger, permissions }) => {
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Create a new role</DialogTitle>
-          <DialogDescription>
-            Roles group permissions together.
-          </DialogDescription>
+          <DialogDescription>Roles group permissions together.</DialogDescription>
         </DialogHeader>
 
         <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="flex flex-col gap-8"
-          >
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-8">
             <FormField
               control={form.control}
               name="name"
@@ -123,8 +118,8 @@ export const CreateNewRole: React.FC<Props> = ({ trigger, permissions }) => {
                     <Input placeholder="domain.manager" {...field} />
                   </FormControl>
                   <FormDescription>
-                    A unique name for your role. You will use this when managing
-                    roles through the API. These are not customer facing.
+                    A unique name for your role. You will use this when managing roles through the
+                    API. These are not customer facing.
                   </FormDescription>
                   <FormMessage />
                 </FormItem>
@@ -143,9 +138,7 @@ export const CreateNewRole: React.FC<Props> = ({ trigger, permissions }) => {
                   </FormLabel>
                   <FormControl>
                     <Textarea
-                      rows={
-                        form.getValues().description?.split("\n").length ?? 3
-                      }
+                      rows={form.getValues().description?.split("\n").length ?? 3}
                       placeholder="Manage domains and DNS records "
                       {...field}
                     />
@@ -175,10 +168,7 @@ export const CreateNewRole: React.FC<Props> = ({ trigger, permissions }) => {
                       selected={field.value ?? []}
                       setSelected={(cb) => {
                         if (typeof cb === "function") {
-                          return form.setValue(
-                            "permissionOptions",
-                            cb(field.value ?? [])
-                          );
+                          return form.setValue("permissionOptions", cb(field.value ?? []));
                         }
                       }}
                     />
@@ -189,11 +179,7 @@ export const CreateNewRole: React.FC<Props> = ({ trigger, permissions }) => {
             ) : null}
             <DialogFooter>
               <Button type="submit">
-                {createRole.isLoading ? (
-                  <Loading className="w-4 h-4" />
-                ) : (
-                  "Create"
-                )}
+                {createRole.isLoading ? <Loading className="w-4 h-4" /> : "Create"}
               </Button>
             </DialogFooter>
           </form>
diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/delete-namespace.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/delete-namespace.tsx
index 5ff8115dec..e2354bfcb1 100644
--- a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/delete-namespace.tsx
+++ b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/delete-namespace.tsx
@@ -3,13 +3,7 @@ import { Button } from "@/components/ui/button";
 import type React from "react";
 import { useState } from "react";
 
-import {
-  Card,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 
@@ -52,12 +46,8 @@ export const DeleteNamespace: React.FC<Props> = ({ namespace }) => {
   const [open, setOpen] = useState(false);
 
   const formSchema = z.object({
-    name: z
-      .string()
-      .refine((v) => v === namespace.name, "Please confirm the namespace name"),
-    intent: z
-      .string()
-      .refine((v) => v === intent, "Please confirm your intent"),
+    name: z.string().refine((v) => v === namespace.name, "Please confirm the namespace name"),
+    intent: z.string().refine((v) => v === intent, "Please confirm your intent"),
   });
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -68,8 +58,7 @@ export const DeleteNamespace: React.FC<Props> = ({ namespace }) => {
   const deleteNamespace = trpc.ratelimit.namespace.delete.useMutation({
     async onSuccess() {
       toast.message("Namespace Deleted", {
-        description:
-          "Your namespace and all its overridden identifiers have been deleted.",
+        description: "Your namespace and all its overridden identifiers have been deleted.",
       });
 
       await revalidate();
@@ -81,8 +70,7 @@ export const DeleteNamespace: React.FC<Props> = ({ namespace }) => {
     },
   });
 
-  const isValid =
-    form.watch("intent") === intent && form.watch("name") === namespace.name;
+  const isValid = form.watch("intent") === intent && form.watch("name") === namespace.name;
 
   async function onSubmit(_values: z.infer<typeof formSchema>) {
     deleteNamespace.mutate({ namespaceId: namespace.id });
@@ -99,8 +87,8 @@ export const DeleteNamespace: React.FC<Props> = ({ namespace }) => {
         <CardHeader>
           <CardTitle>Delete</CardTitle>
           <CardDescription>
-            This namespace will be deleted, along with all of its identifiers
-            and data. This action cannot be undone.
+            This namespace will be deleted, along with all of its identifiers and data. This action
+            cannot be undone.
           </CardDescription>
         </CardHeader>
 
@@ -115,15 +103,12 @@ export const DeleteNamespace: React.FC<Props> = ({ namespace }) => {
           <DialogHeader>
             <DialogTitle>Delete namespace</DialogTitle>
             <DialogDescription>
-              This namespace will be deleted, along with all of its identifiers
-              and data. This action cannot be undone.
+              This namespace will be deleted, along with all of its identifiers and data. This
+              action cannot be undone.
             </DialogDescription>
           </DialogHeader>
           <Form {...form}>
-            <form
-              className="flex flex-col space-y-8"
-              onSubmit={form.handleSubmit(onSubmit)}
-            >
+            <form className="flex flex-col space-y-8" onSubmit={form.handleSubmit(onSubmit)}>
               <Alert variant="alert">
                 <AlertTitle>Warning</AlertTitle>
                 <AlertDescription>
@@ -139,10 +124,8 @@ export const DeleteNamespace: React.FC<Props> = ({ namespace }) => {
                     <FormLabel className="font-normal text-content-subtle">
                       {" "}
                       Enter the namespace name{" "}
-                      <span className="font-medium text-content">
-                        {namespace.name}
-                      </span>{" "}
-                      to continue:
+                      <span className="font-medium text-content">{namespace.name}</span> to
+                      continue:
                     </FormLabel>
                     <FormControl>
                       <Input {...field} autoComplete="off" />
@@ -158,8 +141,7 @@ export const DeleteNamespace: React.FC<Props> = ({ namespace }) => {
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel className="font-normal text-content-subtle">
-                      To verify, type{" "}
-                      <span className="font-medium text-content">{intent}</span>{" "}
+                      To verify, type <span className="font-medium text-content">{intent}</span>{" "}
                       below:
                     </FormLabel>
                     <FormControl>
diff --git a/apps/dashboard/app/(app)/semantic-cache/[gatewayId]/settings/delete-gateway.tsx b/apps/dashboard/app/(app)/semantic-cache/[gatewayId]/settings/delete-gateway.tsx
index 96052c6db8..2e8fdb016c 100644
--- a/apps/dashboard/app/(app)/semantic-cache/[gatewayId]/settings/delete-gateway.tsx
+++ b/apps/dashboard/app/(app)/semantic-cache/[gatewayId]/settings/delete-gateway.tsx
@@ -3,13 +3,7 @@ import { Button } from "@/components/ui/button";
 import type React from "react";
 import { useState } from "react";
 
-import {
-  Card,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 
@@ -52,12 +46,8 @@ export const DeleteGateway: React.FC<Props> = ({ gateway }) => {
   const [open, setOpen] = useState(false);
 
   const formSchema = z.object({
-    name: z
-      .string()
-      .refine((v) => v === gateway.name, "Please confirm the gateway name"),
-    intent: z
-      .string()
-      .refine((v) => v === intent, "Please confirm your intent"),
+    name: z.string().refine((v) => v === gateway.name, "Please confirm the gateway name"),
+    intent: z.string().refine((v) => v === intent, "Please confirm your intent"),
   });
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -86,8 +76,7 @@ export const DeleteGateway: React.FC<Props> = ({ gateway }) => {
     },
   });
 
-  const isValid =
-    form.watch("intent") === intent && form.watch("name") === gateway.name;
+  const isValid = form.watch("intent") === intent && form.watch("name") === gateway.name;
 
   async function onSubmit(_values: z.infer<typeof formSchema>) {
     deleteGateway.mutate({ gatewayId: gateway.id });
@@ -122,10 +111,7 @@ export const DeleteGateway: React.FC<Props> = ({ gateway }) => {
             </DialogDescription>
           </DialogHeader>
           <Form {...form}>
-            <form
-              className="flex flex-col space-y-8"
-              onSubmit={form.handleSubmit(onSubmit)}
-            >
+            <form className="flex flex-col space-y-8" onSubmit={form.handleSubmit(onSubmit)}>
               <Alert variant="alert">
                 <AlertTitle>Warning</AlertTitle>
                 <AlertDescription>
@@ -141,10 +127,7 @@ export const DeleteGateway: React.FC<Props> = ({ gateway }) => {
                     <FormLabel className="font-normal text-content-subtle">
                       {" "}
                       Enter the gateway name{" "}
-                      <span className="font-medium text-content">
-                        {gateway.name}
-                      </span>{" "}
-                      to continue:
+                      <span className="font-medium text-content">{gateway.name}</span> to continue:
                     </FormLabel>
                     <FormControl>
                       <Input {...field} autoComplete="off" />
@@ -160,8 +143,7 @@ export const DeleteGateway: React.FC<Props> = ({ gateway }) => {
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel className="font-normal text-content-subtle">
-                      To verify, type{" "}
-                      <span className="font-medium text-content">{intent}</span>{" "}
+                      To verify, type <span className="font-medium text-content">{intent}</span>{" "}
                       below:
                     </FormLabel>
                     <FormControl>