add import from cURL command of http request node

web/app/components/workflow/nodes/http/components/curl-panel.tsx

@@ -0,0 +1,125 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { BodyType, type HttpNodeType, Method } from '../types'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import { useNodesInteractions } from '@/app/components/workflow/hooks'
+
+type Props = {
+  nodeId: string
+  isShow: boolean
+  onHide: () => void
+  handleCurlImport: (node: HttpNodeType) => void
+}
+
+const parseCurl = (curlCommand: string): HttpNodeType => {
+  const node: Partial<HttpNodeType> = {
+    title: 'HTTP Request',
+    desc: 'Imported from cURL',
+    method: Method.get,
+    url: '',
+    headers: '',
+    params: '',
+    body: { type: BodyType.none, data: '' },
+  }
+  const args = curlCommand.match(/(?:[^\s"']+|"[^"]*"|'[^']*')+/g) || []
+
+  for (let i = 1; i < args.length; i++) {
+    const arg = args[i].replace(/^['"]|['"]$/g, '')
+    switch (arg) {
+      case '-X':
+      case '--request':
+        node.method = (args[++i].replace(/^['"]|['"]$/g, '') as Method) || Method.get
+        break
+      case '-H':
+      case '--header':
+        node.headers += (node.headers ? '\n' : '') + args[++i].replace(/^['"]|['"]$/g, '')
+        break
+      case '-d':
+      case '--data':
+      case '--data-raw':
+      case '--data-binary':
+        node.body = { type: BodyType.rawText, data: args[++i].replace(/^['"]|['"]$/g, '') }
+        break
+      case '-F':
+      case '--form': {
+        if (node.body?.type !== BodyType.formData)
+          node.body = { type: BodyType.formData, data: '' }
+        const formData = args[++i].replace(/^['"]|['"]$/g, '')
+        const [key, ...valueParts] = formData.split('=')
+        let value = valueParts.join('=')
+
+        // To support command like `curl -F "file=@/path/to/file;type=application/zip"`
+        // the `;type=application/zip` should translate to `Content-Type: application/zip`
+        const typeMatch = value.match(/^(.+?);type=(.+)$/)
+        if (typeMatch) {
+          const [, actualValue, mimeType] = typeMatch
+          value = actualValue
+          node.headers += `${node.headers ? '\n' : ''}Content-Type: ${mimeType}`
+        }
+
+        node.body.data += `${node.body.data ? '\n' : ''}${key}:${value}`
+        break
+      }
+      case '--json':
+        node.body = { type: BodyType.json, data: args[++i].replace(/^['"]|['"]$/g, '') }
+        break
+      default:
+        if (arg.startsWith('http') && !node.url)
+          node.url = arg
+        break
+    }
+  }
+
+  // Extract query params from URL
+  const urlParts = node.url?.split('?') || []
+  if (urlParts.length > 1) {
+    node.url = urlParts[0]
+    node.params = urlParts[1].replace(/&/g, '\n').replace(/=/g, ': ')
+  }
+
+  return node as HttpNodeType
+}
+
+const CurlPanel: FC<Props> = ({ nodeId, isShow, onHide, handleCurlImport }) => {
+  const [inputString, setInputString] = useState('')
+  const { handleNodeSelect } = useNodesInteractions()
+  const { t } = useTranslation()
+
+  const handleSave = useCallback(() => {
+    onHide()
+    const node = parseCurl(inputString)
+    handleCurlImport(node)
+    // Close the panel then open it again to make the panel re-render
+    handleNodeSelect(nodeId, true)
+    setTimeout(() => {
+      handleNodeSelect(nodeId)
+    }, 0)
+  }, [onHide, nodeId, inputString, handleNodeSelect, handleCurlImport])
+
+  return (
+    <Modal
+      title="Import From curl"
+      isShow={isShow}
+      onClose={onHide}
+      className='!w-[400px] !max-w-[400px] !p-4'
+    >
+      <div>
+        <textarea
+          value={inputString}
+          className='w-full my-3 p-3 text-sm text-gray-900 border-0 rounded-lg grow bg-gray-100 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200 h-40'
+          onChange={e => setInputString(e.target.value)}
+          placeholder="Paste curl string here"
+        />
+      </div>
+      <div className='mt-4 flex justify-end space-x-2'>
+        <Button className='!w-[95px]' onClick={onHide} >{t('common.operation.cancel')}</Button>
+        <Button className='!w-[95px]' variant='primary' onClick={handleSave} > {t('common.operation.save')}</Button>
+      </div>
+    </Modal>
+  )
+}
+
+export default React.memo(CurlPanel)

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

@@ -8,6 +8,7 @@ import EditBody from './components/edit-body'
 import AuthorizationModal from './components/authorization'
 import type { HttpNodeType } from './types'
 import Timeout from './components/timeout'
+import CurlPanel from './components/curl-panel'
 import cn from '@/utils/classnames'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
@@ -52,6 +53,10 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
     inputVarValues,
     setInputVarValues,
     runResult,
+    isShowCurlPanel,
+    showCurlPanel,
+    hideCurlPanel,
+    handleCurlImport,
   } = useConfig(id, data)
 
   return (
@@ -60,6 +65,7 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
         <Field
           title={t(`${i18nPrefix}.api`)}
           operations={
+            <div className='flex'>
               <div
                 onClick={showAuthorization}
                 className={cn(!readOnly && 'cursor-pointer hover:bg-gray-50', 'flex items-center h-6 space-x-1 px-2 rounded-md ')}
@@ -70,6 +76,16 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
                   <span className='ml-1 text-gray-700'>{t(`${i18nPrefix}.authorization.${inputs.authorization.type}`)}</span>
                 </div>
               </div>
+              <div
+                onClick={showCurlPanel}
+                className={cn(!readOnly && 'cursor-pointer hover:bg-gray-50', 'flex items-center h-6 space-x-1 px-2 rounded-md ')}
+              >
+                {!readOnly && <Settings01 className='w-3 h-3 text-gray-500' />}
+                <div className='text-xs font-medium text-gray-500'>
+                  { '导入curl' }
+                </div>
+              </div>
+            </div>
           }
         >
           <ApiInput
@@ -176,6 +192,14 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
           result={<ResultPanel {...runResult} showSteps={false} />}
         />
       )}
+      {(isShowCurlPanel && !readOnly) && (
+        <CurlPanel
+          nodeId={id}
+          isShow
+          onHide={hideCurlPanel}
+          handleCurlImport={handleCurlImport}
+        />
+      )}
     </div>
   )
 }

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

@@ -143,6 +143,23 @@ const useConfig = (id: string, payload: HttpNodeType) => {
     setRunInputData(newPayload)
   }, [setRunInputData])
 
+  // curl import panel
+  const [isShowCurlPanel, {
+    setTrue: showCurlPanel,
+    setFalse: hideCurlPanel,
+  }] = useBoolean(false)
+
+  const handleCurlImport = useCallback((newNode: HttpNodeType) => {
+    const newInputs = produce(inputs, (draft: HttpNodeType) => {
+      draft.method = newNode.method
+      draft.url = newNode.url
+      draft.headers = newNode.headers
+      draft.params = newNode.params
+      draft.body = newNode.body
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
   return {
     readOnly,
     inputs,
@@ -181,6 +198,11 @@ const useConfig = (id: string, payload: HttpNodeType) => {
     inputVarValues,
     setInputVarValues,
     runResult,
+    // curl import
+    isShowCurlPanel,
+    showCurlPanel,
+    hideCurlPanel,
+    handleCurlImport,
   }
 }