fix: move service token form to separate component to prevent reset issue

frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/AddServiceTokenModal.tsx

@@ -67,13 +67,12 @@ type Props = {
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["createAPIToken"]>, state?: boolean) => void;
 };
 
-export const AddServiceTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
+const ServiceTokenForm = () => {
   const { t } = useTranslation();
 
   const { currentWorkspace } = useWorkspace();
   const {
     control,
-    reset,
     handleSubmit,
     formState: { isSubmitting }
   } = useForm<FormData>({
@@ -152,24 +151,7 @@ export const AddServiceTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
     }
   };
 
-  return (
+  return !hasServiceToken ? (
-    <Modal
-      isOpen={popUp?.createAPIToken?.isOpen}
-      onOpenChange={(open) => {
-        handlePopUpToggle("createAPIToken", open);
-        reset();
-        setToken("");
-      }}
-    >
-      <ModalContent
-        title={
-          t("section.token.add-dialog.title", {
-            target: currentWorkspace?.name
-          }) as string
-        }
-        subTitle={t("section.token.add-dialog.description") as string}
-      >
-        {!hasServiceToken ? (
     <form onSubmit={handleSubmit(onFormSubmit)}>
       <Controller
         control={control}
@@ -295,11 +277,7 @@ export const AddServiceTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
           ] as const;
 
           return (
-                  <FormControl
+            <FormControl label="Permissions" errorText={error?.message} isError={Boolean(error)}>
-                    label="Permissions"
-                    errorText={error?.message}
-                    isError={Boolean(error)}
-                  >
               <>
                 {options.map(({ label, value: optionValue }) => {
                   return (
@@ -326,12 +304,7 @@ export const AddServiceTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
         }}
       />
       <div className="mt-8 flex items-center">
-              <Button
+        <Button className="mr-4" type="submit" isDisabled={isSubmitting} isLoading={isSubmitting}>
-                className="mr-4"
-                type="submit"
-                isDisabled={isSubmitting}
-                isLoading={isSubmitting}
-              >
           Create
         </Button>
         <ModalClose asChild>
@@ -356,7 +329,30 @@ export const AddServiceTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
         </span>
       </IconButton>
     </div>
-        )}
+  );
+};
+
+export const AddServiceTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const { t } = useTranslation();
+
+  const { currentWorkspace } = useWorkspace();
+
+  return (
+    <Modal
+      isOpen={popUp?.createAPIToken?.isOpen}
+      onOpenChange={(open) => {
+        handlePopUpToggle("createAPIToken", open);
+      }}
+    >
+      <ModalContent
+        title={
+          t("section.token.add-dialog.title", {
+            target: currentWorkspace?.name
+          }) as string
+        }
+        subTitle={t("section.token.add-dialog.description") as string}
+      >
+        <ServiceTokenForm />
       </ModalContent>
     </Modal>
   );