From 35c56237a054db882461a79fa65bbdfd41aa6971 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 27 Feb 2024 18:34:45 +0800
Subject: [PATCH] feat: url selector

---
 .../nodes/http/components/api-input.tsx       | 60 +++++++++++++++++++
 .../nodes/http/hooks/use-key-value-list.ts    | 23 +++++++
 .../components/workflow/nodes/http/panel.tsx  | 12 +++-
 .../components/workflow/nodes/http/types.ts   | 16 ++++-
 .../workflow/nodes/http/use-config.ts         | 27 ++++++++-
 5 files changed, 132 insertions(+), 6 deletions(-)
 create mode 100644 web/app/components/workflow/nodes/http/components/api-input.tsx
 create mode 100644 web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts

diff --git a/web/app/components/workflow/nodes/http/components/api-input.tsx b/web/app/components/workflow/nodes/http/components/api-input.tsx
new file mode 100644
index 0000000000..c158399071
--- /dev/null
+++ b/web/app/components/workflow/nodes/http/components/api-input.tsx
@@ -0,0 +1,60 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import { MethodEnum } from '../types'
+import Selector from '../../_base/components/selector'
+import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
+
+const MethodOptions = [
+  { label: 'GET', value: MethodEnum.get },
+  { label: 'POST', value: MethodEnum.post },
+  { label: 'HEAD', value: MethodEnum.head },
+  { label: 'PATCH', value: MethodEnum.patch },
+  { label: 'PUT', value: MethodEnum.put },
+  { label: 'DELETE', value: MethodEnum.delete },
+]
+type Props = {
+  readonly: boolean
+  method: MethodEnum
+  onMethodChange: (method: MethodEnum) => void
+  url: string
+  onUrlChange: (url: string) => void
+}
+
+const ApiInput: FC<Props> = ({
+  readonly,
+  method,
+  onMethodChange,
+  url,
+  onUrlChange,
+}) => {
+  const handleUrlChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    onUrlChange(e.target.value)
+  }, [onUrlChange])
+  return (
+    <div className='flex items-center h-8 rounded-lg bg-white border border-gray-200 shadow-xs'>
+      <Selector
+        value={method}
+        onChange={onMethodChange}
+        options={MethodOptions}
+        trigger={
+          <div className='h-8 shrink-0 flex items-center px-2.5 cursor-pointer border-r border-black/5'>
+            <div className='w-12 pl-0.5 leading-[18px] text-xs font-medium text-gray-900 uppercase'>{method}</div>
+            <ChevronDown className='ml-1 w-3.5 h-3.5 text-gray-700' />
+          </div>
+        }
+        popupClassName='top-[34px] w-[108px]'
+        showChecked
+        readonly={readonly}
+      />
+      <input
+        type='text'
+        readOnly={readonly}
+        value={url}
+        onChange={handleUrlChange}
+        className='w-0 grow h-6 leading-6 px-2.5 border-0  text-gray-900 text-[13px]  placeholder:text-gray-400 focus:outline-none'
+      />
+    </div>
+  )
+}
+export default React.memo(ApiInput)
diff --git a/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts b/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts
new file mode 100644
index 0000000000..52585ae5be
--- /dev/null
+++ b/web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts
@@ -0,0 +1,23 @@
+import { useCallback, useState } from 'react'
+import type { KeyValue } from '../types'
+
+const strToKeyValueList = (value: string) => {
+  return value.split('\n').map((item) => {
+    const [key, value] = item.split(':')
+    return { key: key.trim(), value: value.trim() }
+  })
+}
+
+const useKeyValueList = (value: string) => {
+  const [list, setList] = useState<KeyValue[]>(value ? strToKeyValueList(value) : [])
+  const addItem = useCallback(() => {
+    setList(prev => [...prev, { key: '', value: '' }])
+  }, [])
+  return {
+    list,
+    setList,
+    addItem,
+  }
+}
+
+export default useKeyValueList
diff --git a/web/app/components/workflow/nodes/http/panel.tsx b/web/app/components/workflow/nodes/http/panel.tsx
index dfb3e356ae..d880bab1e2 100644
--- a/web/app/components/workflow/nodes/http/panel.tsx
+++ b/web/app/components/workflow/nodes/http/panel.tsx
@@ -2,12 +2,12 @@ import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import useConfig from './use-config'
 import { mockData } from './mock'
+import ApiInput from './components/api-input'
 import VarList from '@/app/components/workflow/nodes/_base/components/variable/var-list'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import AddButton from '@/app/components/base/button/add-button'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
-
 const i18nPrefix = 'workflow.nodes.http'
 
 const Panel: FC = () => {
@@ -18,6 +18,8 @@ const Panel: FC = () => {
     inputs,
     handleVarListChange,
     handleAddVariable,
+    handleMethodChange,
+    handleUrlChange,
   } = useConfig(mockData)
 
   return (
@@ -38,7 +40,13 @@ const Panel: FC = () => {
         <Field
           title={t(`${i18nPrefix}.api`)}
         >
-          API
+          <ApiInput
+            readonly={readOnly}
+            method={inputs.method}
+            onMethodChange={handleMethodChange}
+            url={inputs.url}
+            onUrlChange={handleUrlChange}
+          />
         </Field>
         <Field
           title={t(`${i18nPrefix}.headers`)}
diff --git a/web/app/components/workflow/nodes/http/types.ts b/web/app/components/workflow/nodes/http/types.ts
index b7f94506e0..b1a60b34bb 100644
--- a/web/app/components/workflow/nodes/http/types.ts
+++ b/web/app/components/workflow/nodes/http/types.ts
@@ -1,8 +1,22 @@
 import type { CommonNodeType, Variable } from '@/app/components/workflow/types'
 
+export enum MethodEnum {
+  get = 'get',
+  post = 'post',
+  head = 'head',
+  patch = 'patch',
+  put = 'put',
+  delete = 'delete',
+}
+
+export type KeyValue = {
+  key: string
+  value: string
+}
+
 export type HttpNodeType = CommonNodeType & {
   variables: Variable[]
-  method: string
+  method: MethodEnum
   url: string
   headers: string
   params: string
diff --git a/web/app/components/workflow/nodes/http/use-config.ts b/web/app/components/workflow/nodes/http/use-config.ts
index 9f78351be7..0b628d6e35 100644
--- a/web/app/components/workflow/nodes/http/use-config.ts
+++ b/web/app/components/workflow/nodes/http/use-config.ts
@@ -1,7 +1,7 @@
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import useVarList from '../_base/hooks/use-var-list'
-import type { HttpNodeType } from './types'
-
+import type { HttpNodeType, MethodEnum } from './types'
+import useKeyValueList from './hooks/use-key-value-list'
 const useConfig = (initInputs: HttpNodeType) => {
   const [inputs, setInputs] = useState<HttpNodeType>(initInputs)
 
@@ -10,10 +10,31 @@ const useConfig = (initInputs: HttpNodeType) => {
     setInputs,
   })
 
+  const handleMethodChange = useCallback((method: MethodEnum) => {
+    setInputs(prev => ({
+      ...prev,
+      method,
+    }))
+  }, [])
+
+  const handleUrlChange = useCallback((url: string) => {
+    setInputs(prev => ({
+      ...prev,
+      url,
+    }))
+  }, [])
+
+  const { list: headers, setList: setHeaders, addItem: addHeader } = useKeyValueList(inputs.headers)
+
   return {
     inputs,
     handleVarListChange,
     handleAddVariable,
+    handleMethodChange,
+    handleUrlChange,
+    headers,
+    setHeaders,
+    addHeader,
   }
 }