feat: rename var name sync to used jinjia code (#3964)

web/app/components/workflow/nodes/_base/components/variable/var-list.tsx

@@ -13,6 +13,7 @@ type Props = {
   readonly: boolean
   list: Variable[]
   onChange: (list: Variable[]) => void
+  onVarNameChange?: (oldName: string, newName: string) => void
   isSupportConstantValue?: boolean
   onlyLeafNodeVar?: boolean
   filterVar?: (payload: Var, valueSelector: ValueSelector) => boolean
@@ -23,6 +24,7 @@ const VarList: FC<Props> = ({
   readonly,
   list,
   onChange,
+  onVarNameChange,
   isSupportConstantValue,
   onlyLeafNodeVar,
   filterVar,
@@ -31,12 +33,13 @@ const VarList: FC<Props> = ({
 
   const handleVarNameChange = useCallback((index: number) => {
     return (e: React.ChangeEvent<HTMLInputElement>) => {
+      onVarNameChange?.(list[index].variable, e.target.value)
       const newList = produce(list, (draft) => {
         draft[index].variable = e.target.value
       })
       onChange(newList)
     }
-  }, [list, onChange])
+  }, [list, onVarNameChange, onChange])
 
   const handleVarReferenceChange = useCallback((index: number) => {
     return (value: ValueSelector | string, varKindType: VarKindType) => {

web/app/components/workflow/nodes/template-transform/panel.tsx

@@ -27,6 +27,7 @@ const Panel: FC<NodePanelProps<TemplateTransformNodeType>> = ({
     readOnly,
     inputs,
     handleVarListChange,
+    handleVarNameChange,
     handleAddVariable,
     handleAddEmptyVariable,
     handleCodeChange,
@@ -58,6 +59,7 @@ const Panel: FC<NodePanelProps<TemplateTransformNodeType>> = ({
             readonly={readOnly}
             list={inputs.variables}
             onChange={handleVarListChange}
+            onVarNameChange={handleVarNameChange}
             filterVar={filterVar}
           />
         </Field>

web/app/components/workflow/nodes/template-transform/use-config.ts

@@ -22,11 +22,18 @@ const useConfig = (id: string, payload: TemplateTransformNodeType) => {
     inputsRef.current = newPayload
   }, [doSetInputs])
 
-  const { handleVarListChange, handleAddVariable: handleAddEmptyVariable } = useVarList<TemplateTransformNodeType>({
+  const { handleAddVariable: handleAddEmptyVariable } = useVarList<TemplateTransformNodeType>({
     inputs,
     setInputs,
   })
 
+  const handleVarListChange = useCallback((newList: Variable[]) => {
+    const newInputs = produce(inputsRef.current, (draft: any) => {
+      draft.variables = newList
+    })
+    setInputs(newInputs)
+  }, [setInputs])
+
   const handleAddVariable = useCallback((payload: Variable) => {
     const newInputs = produce(inputsRef.current, (draft: any) => {
       draft.variables.push(payload)
@@ -34,6 +41,14 @@ const useConfig = (id: string, payload: TemplateTransformNodeType) => {
     setInputs(newInputs)
   }, [setInputs])
 
+  // rename var in code
+  const handleVarNameChange = useCallback((oldName: string, newName: string) => {
+    const newInputs = produce(inputsRef.current, (draft: any) => {
+      draft.template = draft.template.replaceAll(`{{ ${oldName} }}`, `{{ ${newName} }}`)
+    })
+    setInputs(newInputs)
+  }, [setInputs])
+
   useEffect(() => {
     if (inputs.template)
       return
@@ -94,6 +109,7 @@ const useConfig = (id: string, payload: TemplateTransformNodeType) => {
     readOnly,
     inputs,
     handleVarListChange,
+    handleVarNameChange,
     handleAddVariable,
     handleAddEmptyVariable,
     handleCodeChange,