minor improvements

web-portal/frontend/components/apps/forms/allowedOriginsForm.tsx

@@ -3,12 +3,7 @@ import _ from "lodash";
 import { useForm, matches } from "@mantine/form";
 import { IconPlus } from "@tabler/icons-react";
 import { useUpdateRuleMutation } from "@frontend/utils/hooks";
-import {
-  useParams,
-  usePathname,
-  useRouter,
-  useSearchParams,
-} from "next/navigation";
+import { useParams, useSearchParams } from "next/navigation";
 import { useAtom, useAtomValue } from "jotai";
 import { existingRuleValuesAtom, ruleTypesAtom } from "@frontend/utils/atoms";
 import { IRuleType } from "@frontend/utils/types";
@@ -36,6 +31,9 @@ export default function AllowedOriginsForm() {
         "Enter a valid url that starts with http or https",
       ),
     },
+    initialValues: {
+      url: "",
+    },
   });
 
   const handleValueRemove = (val: string) =>
@@ -75,7 +73,7 @@ export default function AllowedOriginsForm() {
           onClick={() => {
             if (formValidation().hasErrors) return;
             setValue((current: any) => [form.values.url, ...current]),
-              form.setFieldValue("url", "");
+              form.reset();
           }}
         >
           <IconPlus />

web-portal/frontend/components/apps/forms/allowedUserAgentsForm.tsx

@@ -29,6 +29,9 @@ export default function AllowedUserAgentsForm() {
     validate: {
       userAgent: matches(ruleRegex, "Enter a valid url user agent string"),
     },
+    initialValues: {
+      userAgent: "",
+    },
   });
 
   const handleValueRemove = (val: string) =>
@@ -67,7 +70,7 @@ export default function AllowedUserAgentsForm() {
           onClick={() => {
             if (formValidation().hasErrors) return;
             setValue((current: any) => [form.values.userAgent, ...current]),
-              form.setFieldValue("userAgent", "");
+              form.reset();
           }}
         >
           <IconPlus />

web-portal/frontend/components/apps/forms/approvedChainsForm.tsx

@@ -8,13 +8,12 @@ import { IEndpoint } from "@frontend/utils/types";
 import { SearchableMultiSelect } from "@frontend/components/common/SearchableMultiSelect";
 
 import { useUpdateRuleMutation } from "@frontend/utils/hooks";
-import { useSearchParams, useParams, useRouter } from "next/navigation";
+import { useSearchParams, useParams } from "next/navigation";
 
 export default function ApprovedChainForm() {
   const list = useAtomValue(endpointsAtom) as IEndpoint[];
   const items = _.map(list, "name");
 
-  const router = useRouter();
   const appId = useParams()?.app as string;
   const searchParams = useSearchParams();
   const rule = searchParams?.get("rule") as string;

web-portal/frontend/components/apps/forms/rateLimitForm.tsx

@@ -59,6 +59,10 @@ export default function RateLimitForm() {
         return isValid ? null : "Please select a valid period";
       },
     },
+    initialValues: {
+      requests: "",
+      period: "",
+    },
   });
 
   const handleValueRemove = (val: string) =>
@@ -121,7 +125,7 @@ export default function RateLimitForm() {
               form.values.requests + `/` + form.values.period,
               ...current,
             ]),
-              form.setValues({ requests: "", period: "" });
+              form.reset();
           }}
         >
           <IconPlus />

web-portal/frontend/components/common/SearchableMultiSelect.tsx

@@ -39,6 +39,7 @@ export function SearchableMultiSelect({
       onRemove={() => handleValueRemove(item)}
       bg="blue"
       c="#fff"
+      size="lg"
     >
       {item}
     </Pill>