greptile review comment

frontend/src/hooks/api/pam/constants.ts

@@ -0,0 +1 @@
+export const UNCHANGED_PASSWORD_SENTINEL = "__INFISICAL_UNCHANGED__";

frontend/src/pages/pam/PamAccountsPage/components/PamAccountForm/PostgresAccountForm.tsx

@@ -5,6 +5,7 @@ import { z } from "zod";
 
 import { Button, ModalClose } from "@app/components/v2";
 import { PamResourceType, TPostgresAccount, useGetPamResourceById } from "@app/hooks/api/pam";
+import { UNCHANGED_PASSWORD_SENTINEL } from "@app/hooks/api/pam/constants";
 
 import { BaseSqlAccountSchema } from "./shared/sql-account-schemas";
 import { SqlAccountFields } from "./shared/SqlAccountFields";
@@ -34,7 +35,7 @@ export const PostgresAccountForm = ({ account, resourceId, resourceType, onSubmi
           ...account,
           credentials: {
             ...account.credentials,
-            password: "__INFISICAL_UNCHANGED__"
+            password: UNCHANGED_PASSWORD_SENTINEL
           }
         }
       : undefined

frontend/src/pages/pam/PamAccountsPage/components/PamAccountForm/shared/SqlAccountFields.tsx

@@ -1,11 +1,19 @@
-import { useState } from "react";
-import { Controller, useFormContext } from "react-hook-form";
+import { useEffect, useState } from "react";
+import { Controller, useFormContext, useWatch } from "react-hook-form";
 
 import { FormControl, Input } from "@app/components/v2";
+import { UNCHANGED_PASSWORD_SENTINEL } from "@app/hooks/api/pam/constants";
 
 export const SqlAccountFields = ({ isUpdate }: { isUpdate: boolean }) => {
   const { control } = useFormContext();
   const [showPassword, setShowPassword] = useState(false);
+  const password = useWatch({ control, name: "credentials.password" });
+
+  useEffect(() => {
+    if (password === UNCHANGED_PASSWORD_SENTINEL) {
+      setShowPassword(false);
+    }
+  }, [password]);
 
   return (
     <div className="flex gap-2">
@@ -38,14 +46,14 @@ export const SqlAccountFields = ({ isUpdate }: { isUpdate: boolean }) => {
               type={showPassword ? "text" : "password"}
               autoComplete="new-password"
               onFocus={() => {
-                if (isUpdate && field.value === "__INFISICAL_UNCHANGED__") {
+                if (isUpdate && field.value === UNCHANGED_PASSWORD_SENTINEL) {
                   field.onChange("");
                 }
                 setShowPassword(true);
               }}
               onBlur={() => {
                 if (isUpdate && field.value === "") {
-                  field.onChange("__INFISICAL_UNCHANGED__");
+                  field.onChange(UNCHANGED_PASSWORD_SENTINEL);
                 }
                 setShowPassword(false);
               }}

frontend/src/pages/pam/PamResourcesPage/components/PamResourceForm/PostgresResourceForm.tsx

@@ -5,6 +5,7 @@ import { z } from "zod";
 
 import { Button, ModalClose } from "@app/components/v2";
 import { PamResourceType, TPostgresResource } from "@app/hooks/api/pam";
+import { UNCHANGED_PASSWORD_SENTINEL } from "@app/hooks/api/pam/constants";
 import { BaseSqlAccountSchema } from "@app/pages/pam/PamAccountsPage/components/PamAccountForm/shared/sql-account-schemas";
 
 import { BaseSqlResourceSchema } from "./shared/sql-resource-schemas";
@@ -37,7 +38,7 @@ export const PostgresResourceForm = ({ resource, onSubmit }: Props) => {
           rotationAccountCredentials: resource.rotationAccountCredentials
             ? {
                 ...resource.rotationAccountCredentials,
-                password: "__INFISICAL_UNCHANGED__"
+                password: UNCHANGED_PASSWORD_SENTINEL
               }
             : resource.rotationAccountCredentials
         }

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

@@ -1,5 +1,5 @@
-import { useState } from "react";
-import { Controller, useFormContext } from "react-hook-form";
+import { useEffect, useState } from "react";
+import { Controller, useFormContext, useWatch } from "react-hook-form";
 
 import {
   Accordion,
@@ -9,10 +9,18 @@ import {
   FormControl,
   Input
 } from "@app/components/v2";
+import { UNCHANGED_PASSWORD_SENTINEL } from "@app/hooks/api/pam/constants";
 
 export const SqlRotateAccountFields = ({ isUpdate }: { isUpdate: boolean }) => {
   const { control } = useFormContext();
   const [showPassword, setShowPassword] = useState(false);
+  const password = useWatch({ control, name: "credentials.password" });
+
+  useEffect(() => {
+    if (password === UNCHANGED_PASSWORD_SENTINEL) {
+      setShowPassword(false);
+    }
+  }, [password]);
 
   return (
     <Accordion type="single" collapsible className="w-full">
@@ -55,14 +63,14 @@ export const SqlRotateAccountFields = ({ isUpdate }: { isUpdate: boolean }) => {
                     type={showPassword ? "text" : "password"}
                     autoComplete="new-password"
                     onFocus={() => {
-                      if (isUpdate && field.value === "__INFISICAL_UNCHANGED__") {
+                      if (isUpdate && field.value === UNCHANGED_PASSWORD_SENTINEL) {
                         field.onChange("");
                       }
                       setShowPassword(true);
                     }}
                     onBlur={() => {
                       if (isUpdate && field.value === "") {
-                        field.onChange("__INFISICAL_UNCHANGED__");
+                        field.onChange(UNCHANGED_PASSWORD_SENTINEL);
                       }
                       setShowPassword(false);
                     }}