Merge pull request #4727 from Infisical/fix-resource-account-rotation-form

fix: allow rotation account credentials to be removed from resources

frontend/src/pages/pam/PamResourcesPage/components/PamResourceForm/shared/SqlRotateAccountFields.tsx

@@ -1,38 +1,74 @@
 import { useEffect, useState } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  FormControl,
-  Input
-} from "@app/components/v2";
+import { FormControl, Input, Switch } from "@app/components/v2";
 import { UNCHANGED_PASSWORD_SENTINEL } from "@app/hooks/api/pam/constants";
 
 export const SqlRotateAccountFields = ({ isUpdate }: { isUpdate: boolean }) => {
-  const { control } = useFormContext();
+  const { control, setValue, getValues } = useFormContext();
   const [showPassword, setShowPassword] = useState(false);
   const password = useWatch({ control, name: "credentials.password" });
 
+  const rotationUsername = useWatch({ control, name: "rotationAccountCredentials.username" });
+  const rotationPassword = useWatch({ control, name: "rotationAccountCredentials.password" });
+
+  const [enabled, setEnabled] = useState(false);
+  const [wasRotationPasswordSentinelInitially, setWasRotationPasswordSentinelInitially] =
+    useState(false);
+
+  useEffect(() => {
+    const initialRotationPass = getValues("rotationAccountCredentials.password");
+    if (initialRotationPass === UNCHANGED_PASSWORD_SENTINEL) {
+      setWasRotationPasswordSentinelInitially(true);
+    }
+  }, [getValues]);
+
   useEffect(() => {
     if (password === UNCHANGED_PASSWORD_SENTINEL) {
       setShowPassword(false);
     }
   }, [password]);
 
+  useEffect(() => {
+    const isUsernamePopulated = rotationUsername && rotationUsername !== "";
+    const isPasswordPopulated =
+      rotationPassword &&
+      rotationPassword !== "" &&
+      rotationPassword !== UNCHANGED_PASSWORD_SENTINEL;
+
+    if (isUsernamePopulated || isPasswordPopulated) {
+      setEnabled(true);
+    }
+  }, [rotationUsername, rotationPassword]);
+
   return (
-    <Accordion type="single" collapsible className="w-full">
-      <AccordionItem value="advance-settings" className="data-[state=open]:border-none">
-        <AccordionTrigger className="h-fit flex-none pl-1 text-sm">
-          <div className="order-1 ml-3">Rotation Account</div>
-        </AccordionTrigger>
-        <AccordionContent childrenClassName="px-0 py-0">
-          <p className="mb-2 text-xs">
-            Credentials of the privileged account which will be used for rotating other accounts
-            under this resource
-          </p>
+    <div className="flex flex-col gap-2">
+      <Switch
+        id="account-rotation"
+        onCheckedChange={(value) => {
+          setEnabled(value);
+          if (value) {
+            setValue("rotationAccountCredentials.username", "", {
+              shouldDirty: true
+            });
+            setValue("rotationAccountCredentials.password", "", {
+              shouldDirty: true
+            });
+          } else {
+            setValue("rotationAccountCredentials", null, {
+              shouldDirty: true
+            });
+          }
+        }}
+        isChecked={enabled}
+        containerClassName="flex-row-reverse w-fit"
+        className="ml-0"
+      >
+        <p className="ml-2">Credential Rotation</p>
+      </Switch>
+
+      {enabled && (
+        <>
           <div className="flex gap-2">
             <Controller
               name="rotationAccountCredentials.username"
@@ -44,7 +80,9 @@ export const SqlRotateAccountFields = ({ isUpdate }: { isUpdate: boolean }) => {
                   isError={Boolean(error?.message)}
                   label="Username"
                 >
-                  <Input {...field} autoComplete="off" />
+                  <div className="relative">
+                    <Input {...field} autoComplete="off" />
+                  </div>
                 </FormControl>
               )}
             />
@@ -58,29 +96,40 @@ export const SqlRotateAccountFields = ({ isUpdate }: { isUpdate: boolean }) => {
                   isError={Boolean(error?.message)}
                   label="Password"
                 >
-                  <Input
-                    {...field}
-                    type={showPassword ? "text" : "password"}
-                    autoComplete="new-password"
-                    onFocus={() => {
-                      if (isUpdate && field.value === UNCHANGED_PASSWORD_SENTINEL) {
-                        field.onChange("");
-                      }
-                      setShowPassword(true);
-                    }}
-                    onBlur={() => {
-                      if (isUpdate && field.value === "") {
-                        field.onChange(UNCHANGED_PASSWORD_SENTINEL);
-                      }
-                      setShowPassword(false);
-                    }}
-                  />
+                  <div className="relative">
+                    <Input
+                      {...field}
+                      type={showPassword ? "text" : "password"}
+                      autoComplete="new-password"
+                      onFocus={() => {
+                        if (isUpdate && field.value === UNCHANGED_PASSWORD_SENTINEL) {
+                          field.onChange("");
+                        }
+                        setShowPassword(true);
+                      }}
+                      onBlur={() => {
+                        if (
+                          isUpdate &&
+                          field.value === "" &&
+                          wasRotationPasswordSentinelInitially
+                        ) {
+                          field.onChange(UNCHANGED_PASSWORD_SENTINEL);
+                        }
+                        setShowPassword(false);
+                      }}
+                    />
+                  </div>
                 </FormControl>
               )}
             />
           </div>
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
+
+          <p className="mb-2 text-xs text-mineshaft-400">
+            Credentials of the privileged account which will be used for rotating other accounts
+            under this resource
+          </p>
+        </>
+      )}
+    </div>
   );
 };