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

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,