mirror of https://github.com/langgenius/dify.git
feat: http attr support selct keys
This commit is contained in:
Joel
parent
589ac9b22c
commit
83651a038f
|
|
@ -6,6 +6,7 @@ import KeyValueEdit from './key-value-edit'
|
|||
|
||||
type Props = {
|
||||
readonly: boolean
|
||||
nodeId: string
|
||||
list: KeyValue[]
|
||||
onChange: (newList: KeyValue[]) => void
|
||||
onAdd: () => void
|
||||
|
|
@ -14,6 +15,7 @@ type Props = {
|
|||
|
||||
const KeyValueList: FC<Props> = ({
|
||||
readonly,
|
||||
nodeId,
|
||||
list,
|
||||
onChange,
|
||||
onAdd,
|
||||
|
|
@ -42,6 +44,7 @@ const KeyValueList: FC<Props> = ({
|
|||
// })()
|
||||
return <KeyValueEdit
|
||||
readonly={readonly}
|
||||
nodeId={nodeId}
|
||||
list={list}
|
||||
onChange={onChange}
|
||||
onAdd={onAdd}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ const i18nPrefix = 'workflow.nodes.http'
|
|||
|
||||
type Props = {
|
||||
readonly: boolean
|
||||
nodeId: string
|
||||
list: KeyValue[]
|
||||
onChange: (newList: KeyValue[]) => void
|
||||
onAdd: () => void
|
||||
|
|
@ -20,6 +21,7 @@ type Props = {
|
|||
|
||||
const KeyValueList: FC<Props> = ({
|
||||
readonly,
|
||||
nodeId,
|
||||
list,
|
||||
onChange,
|
||||
onAdd,
|
||||
|
|
@ -68,6 +70,7 @@ const KeyValueList: FC<Props> = ({
|
|||
list.map((item, index) => (
|
||||
<KeyValueItem
|
||||
key={index}
|
||||
nodeId={nodeId}
|
||||
payload={item}
|
||||
onChange={handleChange(index)}
|
||||
onRemove={handleRemove(index)}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,14 @@ import type { FC } from 'react'
|
|||
import React, { useCallback, useState } from 'react'
|
||||
import cn from 'classnames'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import useAvailableVarList from '../../../../_base/hooks/use-available-var-list'
|
||||
import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
|
||||
import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
|
||||
|
||||
import type { Var } from '@/app/components/workflow/types'
|
||||
import { VarType } from '@/app/components/workflow/types'
|
||||
type Props = {
|
||||
className?: string
|
||||
nodeId: string
|
||||
value: string
|
||||
onChange: (newValue: string) => void
|
||||
hasRemove: boolean
|
||||
|
|
@ -18,6 +21,7 @@ type Props = {
|
|||
|
||||
const InputItem: FC<Props> = ({
|
||||
className,
|
||||
nodeId,
|
||||
value,
|
||||
onChange,
|
||||
hasRemove,
|
||||
|
|
@ -30,6 +34,12 @@ const InputItem: FC<Props> = ({
|
|||
const hasValue = !!value
|
||||
|
||||
const [isFocus, setIsFocus] = useState(false)
|
||||
const availableVarList = useAvailableVarList(nodeId, {
|
||||
onlyLeafNodeVar: false,
|
||||
filterVar: (varPayload: Var) => {
|
||||
return [VarType.string, VarType.number].includes(varPayload.type)
|
||||
},
|
||||
})
|
||||
|
||||
const handleRemove = useCallback((e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
|
|
@ -55,9 +65,9 @@ const InputItem: FC<Props> = ({
|
|||
value={value}
|
||||
onChange={onChange}
|
||||
readOnly={readOnly}
|
||||
nodesOutputVars={[]}
|
||||
nodesOutputVars={availableVarList}
|
||||
onFocusChange={setIsFocus}
|
||||
placeholder={t('workflow.nodes.http.apiPlaceholder')!}
|
||||
placeholder={t('workflow.nodes.http.insertVarPlaceholder')!}
|
||||
placeholderClassName='!leading-[21px]'
|
||||
/>
|
||||
)
|
||||
|
|
@ -71,9 +81,9 @@ const InputItem: FC<Props> = ({
|
|||
value={value}
|
||||
onChange={onChange}
|
||||
readOnly={readOnly}
|
||||
nodesOutputVars={[]}
|
||||
nodesOutputVars={availableVarList}
|
||||
onFocusChange={setIsFocus}
|
||||
placeholder={t('workflow.nodes.http.apiPlaceholder')!}
|
||||
placeholder={t('workflow.nodes.http.insertVarPlaceholder')!}
|
||||
placeholderClassName='!leading-[21px]'
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ const i18nPrefix = 'workflow.nodes.http'
|
|||
|
||||
type Props = {
|
||||
className?: string
|
||||
nodeId: string
|
||||
readonly: boolean
|
||||
canRemove: boolean
|
||||
payload: KeyValue
|
||||
|
|
@ -22,6 +23,7 @@ type Props = {
|
|||
|
||||
const KeyValueItem: FC<Props> = ({
|
||||
className,
|
||||
nodeId,
|
||||
readonly,
|
||||
canRemove,
|
||||
payload,
|
||||
|
|
@ -45,9 +47,10 @@ const KeyValueItem: FC<Props> = ({
|
|||
|
||||
return (
|
||||
// group class name is for hover row show remove button
|
||||
<div className={cn(className, 'group flex items-center h-min-7 border-t border-gray-200')}>
|
||||
<div className={cn(className, 'group flex items-start h-min-7 border-t border-gray-200')}>
|
||||
<div className='w-1/2 h-full border-r border-gray-200'>
|
||||
<InputItem
|
||||
nodeId={nodeId}
|
||||
value={payload.key}
|
||||
onChange={handleChange('key')}
|
||||
hasRemove={false}
|
||||
|
|
@ -57,6 +60,7 @@ const KeyValueItem: FC<Props> = ({
|
|||
</div>
|
||||
<div className='w-1/2 h-full'>
|
||||
<InputItem
|
||||
nodeId={nodeId}
|
||||
value={payload.value}
|
||||
onChange={handleChange('value')}
|
||||
hasRemove={!readonly && canRemove}
|
||||
|
|
|
|||
|
|
@ -102,6 +102,7 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
|
|||
title={t(`${i18nPrefix}.headers`)}
|
||||
>
|
||||
<KeyValue
|
||||
nodeId={id}
|
||||
list={headers}
|
||||
onChange={setHeaders}
|
||||
onAdd={addHeader}
|
||||
|
|
@ -112,6 +113,7 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
|
|||
title={t(`${i18nPrefix}.params`)}
|
||||
>
|
||||
<KeyValue
|
||||
nodeId={id}
|
||||
list={params}
|
||||
onChange={setParams}
|
||||
onAdd={addParam}
|
||||
|
|
|
|||
|
|
@ -231,6 +231,7 @@ const translation = {
|
|||
'api-key-title': 'API Key',
|
||||
'header': 'Header',
|
||||
},
|
||||
insertVarPlaceholder: 'type \'/\' to insert variable',
|
||||
},
|
||||
code: {
|
||||
inputVars: 'Input Variables',
|
||||
|
|
|
|||
|
|
@ -231,6 +231,7 @@ const translation = {
|
|||
'api-key-title': 'API Key',
|
||||
'header': 'Header',
|
||||
},
|
||||
insertVarPlaceholder: '键入 \'/\' 键快速插入变量',
|
||||
},
|
||||
code: {
|
||||
inputVars: '输入变量',
|
||||
|
|
|
|||
Loading…
Reference in New Issue