From db1ca29458d14125e4f32ccad7946893494c9781 Mon Sep 17 00:00:00 2001
From: anteqkois <anteqkois.dev@gmail.com>
Date: Mon, 10 Jun 2024 18:31:45 +0200
Subject: [PATCH] fix(form): fix dynamic secret field for password

---
 apps/web/modules/editor/app-connections/SecretTextAuth.tsx | 5 ++++-
 apps/web/modules/editor/form/PropertyLabel.tsx             | 7 +++----
 apps/web/modules/editor/form/useFieldCustomValidation.tsx  | 5 ++++-
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/apps/web/modules/editor/app-connections/SecretTextAuth.tsx b/apps/web/modules/editor/app-connections/SecretTextAuth.tsx
index 130efa57..cb3d7b7c 100644
--- a/apps/web/modules/editor/app-connections/SecretTextAuth.tsx
+++ b/apps/web/modules/editor/app-connections/SecretTextAuth.tsx
@@ -23,6 +23,7 @@ import { MarkdownBase } from '../../../shared/components/Markdown/MarkdownBase'
 import { AppConnectionsApi } from '../../app-connections'
 import { useReachLimitDialog } from '../../billing/useReachLimitDialog'
 import { SecretTextField } from '../form/Inputs/SecretTextField'
+import { DynamicFieldProvider } from '../form/useFieldCustomValidation'
 
 export interface SecretTextAuthProps extends HTMLAttributes<HTMLElement> {
   onCreateAppConnection: (newConnection: AppConnectionWithoutSensitiveData) => void
@@ -116,7 +117,9 @@ export const SecretTextAuth = ({ onCreateAppConnection, auth, connector, setShow
             </MarkdownBase>
           ) : null}
           <div className="sm:max-w-[380px]">
-            <SecretTextField property={{ ...auth, description: undefined }} name={'secretText'} key={'secretText'} refreshedProperties={[]} />
+            <DynamicFieldProvider property={{ ...auth, description: undefined }} canUseDynamicValue={false}>
+              <SecretTextField property={{ ...auth, description: undefined }} name={'secretText'} key={'secretText'} refreshedProperties={[]} />
+            </DynamicFieldProvider>
           </div>
           <div className="h-1">
             {appConnectionForm.formState.errors.root && <FormMessage>{appConnectionForm.formState.errors.root.message}</FormMessage>}
diff --git a/apps/web/modules/editor/form/PropertyLabel.tsx b/apps/web/modules/editor/form/PropertyLabel.tsx
index afa17047..282068b9 100644
--- a/apps/web/modules/editor/form/PropertyLabel.tsx
+++ b/apps/web/modules/editor/form/PropertyLabel.tsx
@@ -1,17 +1,16 @@
 import { ConnectorProperty } from '@linkerry/connectors-framework'
 import { FormLabel, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@linkerry/ui-components/client'
 import { Icons } from '@linkerry/ui-components/server'
-import { HTMLAttributes, SetStateAction } from 'react'
+import { HTMLAttributes } from 'react'
 import { useDynamicField } from './useFieldCustomValidation'
 
 export interface PropertyLabelProps extends Omit<HTMLAttributes<HTMLElement>, 'property'> {
   refreshedProperties: ConnectorProperty[]
   property: ConnectorProperty
-  setUseDynamicValue?: (value: SetStateAction<boolean>) => void
 }
 
 export const PropertyLabel = ({ property, refreshedProperties }: PropertyLabelProps) => {
-  const { setUseDynamicValue } = useDynamicField()
+  const { setUseDynamicValue, canUseDynamicValue } = useDynamicField()
 
   return (
     <FormLabel className="flex justify-between">
@@ -42,7 +41,7 @@ export const PropertyLabel = ({ property, refreshedProperties }: PropertyLabelPr
           </TooltipProvider>
         ) : null}
 
-        {setUseDynamicValue ? (
+        {canUseDynamicValue ? (
           <TooltipProvider delayDuration={100}>
             <Tooltip>
               <TooltipTrigger onClick={() => setUseDynamicValue(true)} className="opacity-50  hover:opacity-100">
diff --git a/apps/web/modules/editor/form/useFieldCustomValidation.tsx b/apps/web/modules/editor/form/useFieldCustomValidation.tsx
index b88eafb3..4afc52c3 100644
--- a/apps/web/modules/editor/form/useFieldCustomValidation.tsx
+++ b/apps/web/modules/editor/form/useFieldCustomValidation.tsx
@@ -7,6 +7,7 @@ interface DynamicFieldContextValue {
   setUseDynamicValue: React.Dispatch<React.SetStateAction<boolean>>
   validate: Record<string, Validate<any, FieldValues>>
   rules: Omit<RegisterOptions, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'>
+  canUseDynamicValue: boolean
 }
 
 const DynamicFieldContext = createContext<DynamicFieldContextValue | undefined>(undefined)
@@ -14,9 +15,10 @@ const DynamicFieldContext = createContext<DynamicFieldContextValue | undefined>(
 interface DynamicFieldProviderProps {
   children: React.ReactNode
   property: ConnectorProperty
+  canUseDynamicValue?: boolean
 }
 
-export const DynamicFieldProvider = ({ children, property }: DynamicFieldProviderProps) => {
+export const DynamicFieldProvider = ({ children, property, canUseDynamicValue = true }: DynamicFieldProviderProps) => {
   const [useDynamicValue, setUseDynamicValue] = useState(false)
 
   const validate = useMemo(() => {
@@ -49,6 +51,7 @@ export const DynamicFieldProvider = ({ children, property }: DynamicFieldProvide
         setUseDynamicValue,
         validate,
         rules,
+        canUseDynamicValue
       }}
     >
       {children}