fix: var objects sorts change

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

@@ -10,31 +10,37 @@ import type { VarType } from '@/app/components/workflow/types'
 type Props = {
   readonly: boolean
   outputs: OutputVar
-  onChange: (payload: OutputVar) => void
+  outputKeyOrders: string[]
+  onChange: (payload: OutputVar, changedIndex?: number, newKey?: string) => void
+  onRemove: (index: number) => void
 }
 
 const OutputVarList: FC<Props> = ({
   readonly,
   outputs,
+  outputKeyOrders,
   onChange,
+  onRemove,
 }) => {
-  const list = (Object.keys(outputs)).map((key) => {
+  const list = outputKeyOrders.map((key) => {
     return {
       variable: key,
-      variable_type: outputs[key].type,
+      variable_type: outputs[key]?.type,
     }
   })
   const handleVarNameChange = useCallback((index: number) => {
     return (e: React.ChangeEvent<HTMLInputElement>) => {
       const oldKey = list[index].variable
+      const newKey = e.target.value
+
       const newOutputs = produce(outputs, (draft) => {
-        const newKey = e.target.value
         draft[newKey] = draft[oldKey]
         delete draft[oldKey]
       })
-      onChange(newOutputs)
+      onChange(newOutputs, index, newKey)
     }
-  }, [list, onChange])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [list, onChange, outputs, outputKeyOrders])
 
   const handleVarTypeChange = useCallback((index: number) => {
     return (value: string) => {
@@ -44,17 +50,14 @@ const OutputVarList: FC<Props> = ({
       })
       onChange(newOutputs)
     }
-  }, [list, onChange])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [list, onChange, outputs, outputKeyOrders])
 
   const handleVarRemove = useCallback((index: number) => {
     return () => {
-      const key = list[index].variable
-      const newOutputs = produce(outputs, (draft) => {
-        delete draft[key]
-      })
-      onChange(newOutputs)
+      onRemove(index)
     }
-  }, [list, onChange])
+  }, [onRemove])
 
   return (
     <div className='space-y-2'>

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

@@ -44,8 +44,8 @@ const VarReferencePicker: FC<Props> = ({
       >
         <PortalToFollowElemTrigger onClick={() => setOpen(!open)} className='w-[120px] cursor-pointer'>
           <div className='flex items-center h-8 justify-between px-2.5 rounded-lg border-0 bg-gray-100 text-gray-900 text-[13px]'>
-            <div className='capitalize'>{value}</div>
-            <ChevronDown className='w-3.5 h-3.5 text-gray-700' />
+            <div className='capitalize grow w-0 truncate' title={value}>{value}</div>
+            <ChevronDown className='shrink-0 w-3.5 h-3.5 text-gray-700' />
           </div>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent style={{

web/app/components/workflow/nodes/_base/hooks/use-output-var-list.ts

@@ -7,35 +7,58 @@ type Params<T> = {
   inputs: T
   setInputs: (newInputs: T) => void
   varKey?: string
+  outputKeyOrders: string[]
+  onOutputKeyOrdersChange: (newOutputKeyOrders: string[]) => void
 }
 function useOutputVarList<T>({
   inputs,
   setInputs,
   varKey = 'outputs',
+  outputKeyOrders = [],
+  onOutputKeyOrdersChange,
 }: Params<T>) {
-  const handleVarsChange = useCallback((newVars: OutputVar) => {
+  const handleVarsChange = useCallback((newVars: OutputVar, changedIndex?: number, newKey?: string) => {
     const newInputs = produce(inputs, (draft: any) => {
       draft[varKey] = newVars
     })
     setInputs(newInputs)
-  }, [inputs, setInputs, varKey])
+
+    if (changedIndex !== undefined) {
+      const newOutputKeyOrders = produce(outputKeyOrders, (draft) => {
+        draft[changedIndex] = newKey!
+      })
+      onOutputKeyOrdersChange(newOutputKeyOrders)
+    }
+  }, [inputs, setInputs, varKey, outputKeyOrders, onOutputKeyOrdersChange])
 
   const handleAddVariable = useCallback(() => {
+    const newKey = `var-${Object.keys((inputs as any)[varKey]).length + 1}`
     const newInputs = produce(inputs, (draft: any) => {
       draft[varKey] = {
         ...draft[varKey],
-        [`var-${Object.keys(draft[varKey]).length + 1}`]: {
+        [newKey]: {
           type: VarType.string,
           children: null,
         },
       }
     })
     setInputs(newInputs)
-  }, [inputs, setInputs, varKey])
+    onOutputKeyOrdersChange([...outputKeyOrders, newKey])
+  }, [inputs, setInputs, varKey, outputKeyOrders, onOutputKeyOrdersChange])
+
+  const handleRemoveVariable = useCallback((index: number) => {
+    const key = outputKeyOrders[index]
+    const newInputs = produce(inputs, (draft: any) => {
+      delete draft[varKey][key]
+    })
+    setInputs(newInputs)
+    onOutputKeyOrdersChange(outputKeyOrders.filter((_, i) => i !== index))
+  }, [inputs, setInputs, varKey, outputKeyOrders, onOutputKeyOrdersChange])
 
   return {
     handleVarsChange,
     handleAddVariable,
+    handleRemoveVariable,
   }
 }
 

web/app/components/workflow/nodes/code/panel.tsx

@@ -35,8 +35,10 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
   const {
     readOnly,
     inputs,
+    outputKeyOrders,
     handleVarListChange,
     handleAddVariable,
+    handleRemoveVariable,
     handleCodeChange,
     handleCodeLanguageChange,
     handleVarsChange,
@@ -94,10 +96,13 @@ const Panel: FC<NodePanelProps<CodeNodeType>> = ({
             <AddButton onClick={handleAddOutputVariable} />
           }
         >
+
           <OutputVarList
             readonly={readOnly}
             outputs={inputs.outputs}
+            outputKeyOrders={outputKeyOrders}
             onChange={handleVarsChange}
+            onRemove={handleRemoveVariable}
           />
         </Field>
       </div>

web/app/components/workflow/nodes/code/use-config.ts

@@ -5,7 +5,7 @@ import useOutputVarList from '../_base/hooks/use-output-var-list'
 import { BlockEnum, VarType } from '../../types'
 import type { Var } from '../../types'
 import { useStore } from '../../store'
-import type { CodeNodeType } from './types'
+import type { CodeNodeType, OutputVar } from './types'
 import { CodeLanguage } from './types'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 import useOneStepRun from '@/app/components/workflow/nodes/_base/hooks/use-one-step-run'
@@ -41,9 +41,17 @@ const useConfig = (id: string, payload: CodeNodeType) => {
     setInputs,
   })
 
+  const [outputKeyOrders, setOutputKeyOrders] = useState<string[]>([])
+  const syncOutputKeyOrders = useCallback((outputs: OutputVar) => {
+    setOutputKeyOrders(Object.keys(outputs))
+  }, [])
   useEffect(() => {
-    if (inputs.code)
+    if (inputs.code) {
+      if (inputs.outputs && Object.keys(inputs.outputs).length > 0)
+        syncOutputKeyOrders(inputs.outputs)
+
       return
+    }
 
     const isReady = defaultConfig && Object.keys(defaultConfig).length > 0
     if (isReady) {
@@ -51,6 +59,7 @@ const useConfig = (id: string, payload: CodeNodeType) => {
         ...inputs,
         ...defaultConfig,
       })
+      syncOutputKeyOrders(defaultConfig.outputs)
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultConfig])
@@ -76,9 +85,11 @@ const useConfig = (id: string, payload: CodeNodeType) => {
     setInputs(newInputs)
   }, [allLanguageDefault, inputs, setInputs])
 
-  const { handleVarsChange, handleAddVariable: handleAddOutputVariable } = useOutputVarList<CodeNodeType>({
+  const { handleVarsChange, handleAddVariable: handleAddOutputVariable, handleRemoveVariable } = useOutputVarList<CodeNodeType>({
     inputs,
     setInputs,
+    outputKeyOrders,
+    onOutputKeyOrdersChange: setOutputKeyOrders,
   })
 
   const filterVar = useCallback((varPayload: Var) => {
@@ -121,8 +132,10 @@ const useConfig = (id: string, payload: CodeNodeType) => {
   return {
     readOnly,
     inputs,
+    outputKeyOrders,
     handleVarListChange,
     handleAddVariable,
+    handleRemoveVariable,
     handleCodeChange,
     handleCodeLanguageChange,
     handleVarsChange,