Feat/attachments (#9526)

Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: JzoNg <jzongcode@gmail.com>
2024-10-21 10:32:37 +08:00
parent 4fd2743efa
commit 7a1d6fe509
445 changed files with 11759 additions and 6922 deletions
--- a/web/app/components/workflow/nodes/http/components/key-value/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/index.tsx
@@ -10,6 +10,7 @@ type Props = {
  list: KeyValue[]
  onChange: (newList: KeyValue[]) => void
  onAdd: () => void
+  isSupportFile?: boolean
  // toggleKeyValueEdit: () => void
 }

@@ -19,6 +20,7 @@ const KeyValueList: FC<Props> = ({
  list,
  onChange,
  onAdd,
+  isSupportFile,
  // toggleKeyValueEdit,
 }) => {
  // const handleBulkValueChange = useCallback((value: string) => {
@@ -48,6 +50,7 @@ const KeyValueList: FC<Props> = ({
    list={list}
    onChange={onChange}
    onAdd={onAdd}
+    isSupportFile={isSupportFile}
  // onSwitchToBulkEdit={toggleKeyValueEdit}
  />
  // : <BulkEdit
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
@@ -5,8 +5,7 @@ import produce from 'immer'
 import { useTranslation } from 'react-i18next'
 import type { KeyValue } from '../../../types'
 import KeyValueItem from './item'
-// import TooltipPlus from '@/app/components/base/tooltip-plus'
-// import { EditList } from '@/app/components/base/icons/src/vender/solid/communication'
+import cn from '@/utils/classnames'

 const i18nPrefix = 'workflow.nodes.http'

@@ -16,6 +15,7 @@ type Props = {
  list: KeyValue[]
  onChange: (newList: KeyValue[]) => void
  onAdd: () => void
+  isSupportFile?: boolean
  // onSwitchToBulkEdit: () => void
  keyNotSupportVar?: boolean
  insertVarTipToLeft?: boolean
@@ -27,6 +27,7 @@ const KeyValueList: FC<Props> = ({
  list,
  onChange,
  onAdd,
+  isSupportFile,
  // onSwitchToBulkEdit,
  keyNotSupportVar,
  insertVarTipToLeft,
@@ -55,23 +56,11 @@ const KeyValueList: FC<Props> = ({
    return null

  return (
-    <div className='border border-gray-200 rounded-lg overflow-hidden'>
-      <div className='flex items-center h-7 leading-7 text-xs font-medium text-gray-500 uppercase'>
-        <div className='w-1/2 h-full pl-3 border-r border-gray-200'>{t(`${i18nPrefix}.key`)}</div>
-        <div className='flex w-1/2 h-full pl-3 pr-1 items-center justify-between'>
-          <div>{t(`${i18nPrefix}.value`)}</div>
-          {/* {!readonly && (
-            <TooltipPlus
-              popupContent={t(`${i18nPrefix}.bulkEdit`)}
-            >
-              <div
-                className='p-1 cursor-pointer rounded-md hover:bg-black/5 text-gray-500 hover:text-gray-800'
-                onClick={onSwitchToBulkEdit}
-              >
-                <EditList className='w-3 h-3' />
-              </div>
-            </TooltipPlus>)} */}
-        </div>
+    <div className='border border-divider-regular rounded-lg overflow-hidden'>
+      <div className={cn('flex items-center h-7 leading-7 text-text-tertiary system-xs-medium-uppercase')}>
+        <div className={cn('h-full pl-3 border-r border-divider-regular', isSupportFile ? 'w-[140px]' : 'w-1/2')}>{t(`${i18nPrefix}.key`)}</div>
+        {isSupportFile && <div className='shrink-0 w-[70px] h-full pl-3 border-r border-divider-regular'>{t(`${i18nPrefix}.type`)}</div>}
+        <div className={cn('h-full pl-3 pr-1 items-center justify-between', isSupportFile ? 'grow' : 'w-1/2')}>{t(`${i18nPrefix}.value`)}</div>
      </div>
      {
        list.map((item, index) => (
@@ -86,6 +75,7 @@ const KeyValueList: FC<Props> = ({
            onAdd={onAdd}
            readonly={readonly}
            canRemove={list.length > 1}
+            isSupportFile={isSupportFile}
            keyNotSupportVar={keyNotSupportVar}
            insertVarTipToLeft={insertVarTipToLeft}
          />
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
@@ -18,6 +18,7 @@ type Props = {
  onRemove?: () => void
  placeholder?: string
  readOnly?: boolean
+  isSupportFile?: boolean
  insertVarTipToLeft?: boolean
 }

@@ -31,6 +32,7 @@ const InputItem: FC<Props> = ({
  onRemove,
  placeholder,
  readOnly,
+  isSupportFile,
  insertVarTipToLeft,
 }) => {
  const { t } = useTranslation()
@@ -41,7 +43,11 @@ const InputItem: FC<Props> = ({
  const { availableVars, availableNodesWithParent } = useAvailableVarList(nodeId, {
    onlyLeafNodeVar: false,
    filterVar: (varPayload: Var) => {
-      return [VarType.string, VarType.number, VarType.secret].includes(varPayload.type)
+      const supportVarTypes = [VarType.string, VarType.number, VarType.secret]
+      if (isSupportFile)
+        supportVarTypes.push(...[VarType.file, VarType.arrayFile])
+
+      return supportVarTypes.includes(varPayload.type)
    },
  })

--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
@@ -4,9 +4,13 @@ import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import produce from 'immer'
 import type { KeyValue } from '../../../types'
+import VarReferencePicker from '../../../../_base/components/variable/var-reference-picker'
 import InputItem from './input-item'
 import cn from '@/utils/classnames'
-import Input from '@/app/components/base/input'
+import { PortalSelect } from '@/app/components/base/select'
+import type { ValueSelector, Var } from '@/app/components/workflow/types'
+import { VarType } from '@/app/components/workflow/types'
+// import Input from '@/app/components/base/input'

 const i18nPrefix = 'workflow.nodes.http'

@@ -21,6 +25,7 @@ type Props = {
  onRemove: () => void
  isLastItem: boolean
  onAdd: () => void
+  isSupportFile?: boolean
  keyNotSupportVar?: boolean
  insertVarTipToLeft?: boolean
 }
@@ -36,26 +41,29 @@ const KeyValueItem: FC<Props> = ({
  onRemove,
  isLastItem,
  onAdd,
+  isSupportFile,
  keyNotSupportVar,
  insertVarTipToLeft,
 }) => {
  const { t } = useTranslation()

  const handleChange = useCallback((key: string) => {
-    return (value: string) => {
+    return (value: string | ValueSelector) => {
      const newPayload = produce(payload, (draft: any) => {
        draft[key] = value
      })
      onChange(newPayload)
-      if (key === 'value' && isLastItem)
-        onAdd()
    }
-  }, [onChange, onAdd, isLastItem, payload])
+  }, [onChange, payload])
+
+  const filterOnlyFileVariable = (varPayload: Var) => {
+    return [VarType.file, VarType.arrayFile].includes(varPayload.type)
+  }

  return (
    // group class name is for hover row show remove button
    <div className={cn(className, 'group flex h-min-7 border-t border-gray-200')}>
-      <div className='w-1/2 border-r border-gray-200'>
+      <div className={cn('shrink-0 border-r border-divider-regular', isSupportFile ? 'w-[140px]' : 'w-1/2')}>
        {!keyNotSupportVar
          ? (
            <InputItem
@@ -70,25 +78,56 @@ const KeyValueItem: FC<Props> = ({
            />
          )
          : (
-            <Input
-              className='rounded-none bg-white border-none system-sm-regular focus:ring-0 focus:bg-gray-100! hover:bg-gray-50'
+            <input
+              className='appearance-none outline-none rounded-none bg-white border-none system-sm-regular focus:ring-0 focus:bg-gray-100! hover:bg-gray-50'
              value={payload.key}
              onChange={e => handleChange('key')(e.target.value)}
            />
          )}
      </div>
-      <div className='w-1/2'>
-        <InputItem
-          instanceId={`http-value-${instanceId}`}
-          nodeId={nodeId}
-          value={payload.value}
-          onChange={handleChange('value')}
-          hasRemove={!readonly && canRemove}
-          onRemove={onRemove}
-          placeholder={t(`${i18nPrefix}.value`)!}
-          readOnly={readonly}
-          insertVarTipToLeft={insertVarTipToLeft}
-        />
+      {isSupportFile && (
+        <div className='shrink-0 w-[70px] border-r border-divider-regular'>
+          <PortalSelect
+            value={payload.type!}
+            onSelect={item => handleChange('type')(item.value as string)}
+            items={[
+              { name: 'text', value: 'text' },
+              { name: 'file', value: 'file' },
+            ]}
+            readonly={readonly}
+            triggerClassName='rounded-none h-7'
+            triggerClassNameFn={isOpen => isOpen ? 'bg-state-base-hover' : 'bg-transparent'}
+            popupClassName='w-[80px] h-7'
+          />
+        </div>)}
+      <div className={cn(isSupportFile ? 'grow' : 'w-1/2')} onClick={() => isLastItem && onAdd()}>
+        {(isSupportFile && payload.type === 'file')
+          ? (
+            <VarReferencePicker
+              nodeId={nodeId}
+              readonly={readonly}
+              value={payload.file || []}
+              onChange={handleChange('file')}
+              filterVar={filterOnlyFileVariable}
+              isInTable
+              onRemove={onRemove}
+            />
+          )
+          : (
+            <InputItem
+              instanceId={`http-value-${instanceId}`}
+              nodeId={nodeId}
+              value={payload.value}
+              onChange={handleChange('value')}
+              hasRemove={!readonly && canRemove}
+              onRemove={onRemove}
+              placeholder={t(`${i18nPrefix}.value`)!}
+              readOnly={readonly}
+              isSupportFile={isSupportFile}
+              insertVarTipToLeft={insertVarTipToLeft}
+            />
+          )}
+
      </div>
    </div>
  )