improve: code upgrade (#4231)

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

@@ -0,0 +1,36 @@
+import type { FC } from 'react'
+import React from 'react'
+import RemoveButton from '../_base/components/remove-button'
+import type { CodeDependency } from './types'
+import DependencyPicker from './dependency-picker'
+
+type Props = {
+  available_dependencies: CodeDependency[]
+  dependencies: CodeDependency[]
+  handleRemove: (index: number) => void
+  handleChange: (index: number, dependency: CodeDependency) => void
+}
+
+const Dependencies: FC<Props> = ({
+  available_dependencies, dependencies, handleRemove, handleChange,
+}) => {
+  return (
+    <div className='space-y-2'>
+      {dependencies.map((dependency, index) => (
+        <div className='flex items-center space-x-1' key={index}>
+          <DependencyPicker
+            value={dependency}
+            available_dependencies={available_dependencies}
+            onChange={dependency => handleChange(index, dependency)}
+          />
+          <RemoveButton
+            className='!p-2 !bg-gray-100 hover:!bg-gray-200'
+            onClick={() => handleRemove(index)}
+          />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default React.memo(Dependencies)