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,13 +151,197 @@ export const AddServiceTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
     }
   };
 
+  return !hasServiceToken ? (
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <Controller
+        control={control}
+        name="name"
+        defaultValue=""
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label={t("section.token.add-dialog.name")}
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="Type your token name" />
+          </FormControl>
+        )}
+      />
+      {tokenScopes.map(({ id }, index) => (
+        <div className="mb-3 flex items-end space-x-2" key={id}>
+          <Controller
+            control={control}
+            name={`scopes.${index}.environment`}
+            defaultValue={currentWorkspace?.environments?.[0]?.slug}
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                className="mb-0"
+                label={index === 0 ? "Environment" : undefined}
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                >
+                  {currentWorkspace?.environments.map(({ name, slug }) => (
+                    <SelectItem value={slug} key={slug}>
+                      {name}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name={`scopes.${index}.secretPath`}
+            defaultValue="/"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                className="mb-0 flex-grow"
+                label={index === 0 ? "Secrets Path" : undefined}
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="can be /, /nested/**, /**/deep" />
+              </FormControl>
+            )}
+          />
+          <IconButton
+            className="p-3"
+            ariaLabel="remove"
+            colorSchema="danger"
+            onClick={() => remove(index)}
+          >
+            <FontAwesomeIcon icon={faTrashCan} size="sm" />
+          </IconButton>
+        </div>
+      ))}
+      <div className="my-4 ml-1">
+        <Button
+          variant="outline_bg"
+          onClick={() =>
+            append({
+              environment: currentWorkspace?.environments?.[0]?.slug || "",
+              secretPath: ""
+            })
+          }
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
+        >
+          Add Scope
+        </Button>
+      </div>
+      <Controller
+        control={control}
+        name="expiresIn"
+        defaultValue={String(apiTokenExpiry?.[0]?.value)}
+        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+          <FormControl label="Expiration" errorText={error?.message} isError={Boolean(error)}>
+            <Select
+              defaultValue={field.value}
+              {...field}
+              onValueChange={(e) => onChange(e)}
+              className="w-full"
+            >
+              {apiTokenExpiry.map(({ label, value }) => (
+                <SelectItem value={String(value)} key={label}>
+                  {label}
+                </SelectItem>
+              ))}
+            </Select>
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="permissions"
+        defaultValue={{
+          read: true,
+          readValue: false,
+          write: false
+        }}
+        render={({ field: { onChange, value }, fieldState: { error } }) => {
+          const options = [
+            {
+              label: "Read (default)",
+              value: "read"
+            },
+            {
+              label: "Write (optional)",
+              value: "write"
+            }
+          ] as const;
+
+          return (
+            <FormControl label="Permissions" errorText={error?.message} isError={Boolean(error)}>
+              <>
+                {options.map(({ label, value: optionValue }) => {
+                  return (
+                    <Checkbox
+                      id={String(value[optionValue])}
+                      key={optionValue}
+                      className="data-[state=checked]:bg-primary"
+                      isChecked={value[optionValue]}
+                      isDisabled={optionValue === "read"}
+                      onCheckedChange={(state) => {
+                        onChange({
+                          ...value,
+                          [optionValue]: state
+                        });
+                      }}
+                    >
+                      {label}
+                    </Checkbox>
+                  );
+                })}
+              </>
+            </FormControl>
+          );
+        }}
+      />
+      <div className="mt-8 flex items-center">
+        <Button className="mr-4" type="submit" isDisabled={isSubmitting} isLoading={isSubmitting}>
+          Create
+        </Button>
+        <ModalClose asChild>
+          <Button variant="plain" colorSchema="secondary">
+            Cancel
+          </Button>
+        </ModalClose>
+      </div>
+    </form>
+  ) : (
+    <div className="mb-3 mr-2 mt-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+      <p className="mr-4 break-all">{newToken}</p>
+      <IconButton
+        ariaLabel="copy icon"
+        colorSchema="secondary"
+        className="group relative"
+        onClick={copyTokenToClipboard}
+      >
+        <FontAwesomeIcon icon={isTokenCopied ? faCheck : faCopy} />
+        <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+          {t("common.click-to-copy")}
+        </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);
-        reset();
-        setToken("");
       }}
     >
       <ModalContent
@@ -169,194 +352,7 @@ export const AddServiceTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
         }
         subTitle={t("section.token.add-dialog.description") as string}
       >
-        {!hasServiceToken ? (
-          <form onSubmit={handleSubmit(onFormSubmit)}>
-            <Controller
-              control={control}
-              name="name"
-              defaultValue=""
-              render={({ field, fieldState: { error } }) => (
-                <FormControl
-                  label={t("section.token.add-dialog.name")}
-                  isError={Boolean(error)}
-                  errorText={error?.message}
-                >
-                  <Input {...field} placeholder="Type your token name" />
-                </FormControl>
-              )}
-            />
-            {tokenScopes.map(({ id }, index) => (
-              <div className="mb-3 flex items-end space-x-2" key={id}>
-                <Controller
-                  control={control}
-                  name={`scopes.${index}.environment`}
-                  defaultValue={currentWorkspace?.environments?.[0]?.slug}
-                  render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                    <FormControl
-                      className="mb-0"
-                      label={index === 0 ? "Environment" : undefined}
-                      errorText={error?.message}
-                      isError={Boolean(error)}
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => onChange(e)}
-                        className="w-full"
-                      >
-                        {currentWorkspace?.environments.map(({ name, slug }) => (
-                          <SelectItem value={slug} key={slug}>
-                            {name}
-                          </SelectItem>
-                        ))}
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-                <Controller
-                  control={control}
-                  name={`scopes.${index}.secretPath`}
-                  defaultValue="/"
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      className="mb-0 flex-grow"
-                      label={index === 0 ? "Secrets Path" : undefined}
-                      isError={Boolean(error)}
-                      errorText={error?.message}
-                    >
-                      <Input {...field} placeholder="can be /, /nested/**, /**/deep" />
-                    </FormControl>
-                  )}
-                />
-                <IconButton
-                  className="p-3"
-                  ariaLabel="remove"
-                  colorSchema="danger"
-                  onClick={() => remove(index)}
-                >
-                  <FontAwesomeIcon icon={faTrashCan} size="sm" />
-                </IconButton>
-              </div>
-            ))}
-            <div className="my-4 ml-1">
-              <Button
-                variant="outline_bg"
-                onClick={() =>
-                  append({
-                    environment: currentWorkspace?.environments?.[0]?.slug || "",
-                    secretPath: ""
-                  })
-                }
-                leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                size="xs"
-              >
-                Add Scope
-              </Button>
-            </div>
-            <Controller
-              control={control}
-              name="expiresIn"
-              defaultValue={String(apiTokenExpiry?.[0]?.value)}
-              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                <FormControl label="Expiration" errorText={error?.message} isError={Boolean(error)}>
-                  <Select
-                    defaultValue={field.value}
-                    {...field}
-                    onValueChange={(e) => onChange(e)}
-                    className="w-full"
-                  >
-                    {apiTokenExpiry.map(({ label, value }) => (
-                      <SelectItem value={String(value)} key={label}>
-                        {label}
-                      </SelectItem>
-                    ))}
-                  </Select>
-                </FormControl>
-              )}
-            />
-            <Controller
-              control={control}
-              name="permissions"
-              defaultValue={{
-                read: true,
-                readValue: false,
-                write: false
-              }}
-              render={({ field: { onChange, value }, fieldState: { error } }) => {
-                const options = [
-                  {
-                    label: "Read (default)",
-                    value: "read"
-                  },
-                  {
-                    label: "Write (optional)",
-                    value: "write"
-                  }
-                ] as const;
-
-                return (
-                  <FormControl
-                    label="Permissions"
-                    errorText={error?.message}
-                    isError={Boolean(error)}
-                  >
-                    <>
-                      {options.map(({ label, value: optionValue }) => {
-                        return (
-                          <Checkbox
-                            id={String(value[optionValue])}
-                            key={optionValue}
-                            className="data-[state=checked]:bg-primary"
-                            isChecked={value[optionValue]}
-                            isDisabled={optionValue === "read"}
-                            onCheckedChange={(state) => {
-                              onChange({
-                                ...value,
-                                [optionValue]: state
-                              });
-                            }}
-                          >
-                            {label}
-                          </Checkbox>
-                        );
-                      })}
-                    </>
-                  </FormControl>
-                );
-              }}
-            />
-            <div className="mt-8 flex items-center">
-              <Button
-                className="mr-4"
-                type="submit"
-                isDisabled={isSubmitting}
-                isLoading={isSubmitting}
-              >
-                Create
-              </Button>
-              <ModalClose asChild>
-                <Button variant="plain" colorSchema="secondary">
-                  Cancel
-                </Button>
-              </ModalClose>
-            </div>
-          </form>
-        ) : (
-          <div className="mb-3 mr-2 mt-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-            <p className="mr-4 break-all">{newToken}</p>
-            <IconButton
-              ariaLabel="copy icon"
-              colorSchema="secondary"
-              className="group relative"
-              onClick={copyTokenToClipboard}
-            >
-              <FontAwesomeIcon icon={isTokenCopied ? faCheck : faCopy} />
-              <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-                {t("common.click-to-copy")}
-              </span>
-            </IconButton>
-          </div>
-        )}
+        <ServiceTokenForm />
       </ModalContent>
     </Modal>
   );