github/DB-GPT
1
0
Fork 0
mirror of https://github.com/csunny/DB-GPT.git synced 2025-08-07 11:23:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Update AddFlowVariableModal to use buildVariableString from utils/flow

Browse Source
This commit is contained in:
谨欣 2024-09-05 01:30:35 +08:00
parent 45dec7a4cc
commit a8b6b82850
1 changed files with 17 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web/components/flow/canvas-modal/add-flow-variable-modal.tsx
View File

@ -3,20 +3,15 @@ import { IFlowUpdateParam, IGetKeysResponseData, IVariableItem } from '@/types/f
import { buildVariableString } from '@/utils/flow'; import { buildVariableString } from '@/utils/flow';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'; import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Cascader, Form, Input, InputNumber, Modal, Select, Space } from 'antd'; import { Button, Cascader, Form, Input, InputNumber, Modal, Select, Space } from 'antd';
import { DefaultOptionType } from 'antd/es/cascader';
import { uniqBy } from 'lodash'; import { uniqBy } from 'lodash';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
const { Option } = Select; const { Option } = Select;
const VALUE_TYPES = ['str', 'int', 'float', 'bool', 'ref'] as const;
type ValueType = 'str' | 'int' | 'float' | 'bool' | 'ref'; type ValueType = (typeof VALUE_TYPES)[number];
interface Option {
value?: string | number | null;
label: React.ReactNode;
children?: Option[];
isLeaf?: boolean;
}
type Props = { type Props = {
flowInfo?: IFlowUpdateParam; flowInfo?: IFlowUpdateParam;
setFlowInfo: React.Dispatch<React.SetStateAction<IFlowUpdateParam | undefined>>; setFlowInfo: React.Dispatch<React.SetStateAction<IFlowUpdateParam | undefined>>;
@ -27,7 +22,7 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo })
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const [form] = Form.useForm(); const [form] = Form.useForm();
const [controlTypes, setControlTypes] = useState<ValueType[]>(['str']); const [controlTypes, setControlTypes] = useState<ValueType[]>(['str']);
const [refVariableOptions, setRefVariableOptions] = useState<Option[]>([]); const [refVariableOptions, setRefVariableOptions] = useState<DefaultOptionType[]>([]);
useEffect(() => { useEffect(() => {
getKeysData(); getKeysData();
@ -57,7 +52,7 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo })
const onNameChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => { const onNameChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
const name = e.target.value; const name = e.target.value;
const result = name const newValue = name
?.split('_') ?.split('_')
?.map(word => word.charAt(0).toUpperCase() + word.slice(1)) ?.map(word => word.charAt(0).toUpperCase() + word.slice(1))
?.join(' '); ?.join(' ');
@ -65,7 +60,7 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo })
form.setFields([ form.setFields([
{ {
name: ['parameters', index, 'label'], name: ['parameters', index, 'label'],
value: result, value: newValue,
}, },
]); ]);
}; };
@ -76,9 +71,9 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo })
setControlTypes(newControlTypes); setControlTypes(newControlTypes);
}; };
const loadData = (selectedOptions: Option[]) => { const loadData = (selectedOptions: DefaultOptionType[]) => {
const targetOption = selectedOptions[selectedOptions.length - 1]; const targetOption = selectedOptions[selectedOptions.length - 1];
const { value, scope } = targetOption as Option & { scope: string }; const { value, scope } = targetOption as DefaultOptionType & { scope: string };
setTimeout(async () => { setTimeout(async () => {
const [err, res] = await apiInterceptors(getVariablesByKey({ key: value as string, scope })); const [err, res] = await apiInterceptors(getVariablesByKey({ key: value as string, scope }));
@ -99,21 +94,21 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo })
}, 1000); }, 1000);
}; };
const onRefTypeValueChange = (value: (string | number | null)[], selectedOptions: Option[], index: number) => { const onRefTypeValueChange = (
value: (string | number | null)[],
selectedOptions: DefaultOptionType[],
index: number,
) => {
// when select ref variable, must be select two options(key and variable) // when select ref variable, must be select two options(key and variable)
if (value?.length !== 2) { if (value?.length !== 2) return;
return;
}
const [selectRefKey, selectedRefVariable] = selectedOptions as Option[];
const [selectRefKey, selectedRefVariable] = selectedOptions as DefaultOptionType[];
const selectedVariable = selectRefKey?.children?.find( const selectedVariable = selectRefKey?.children?.find(
({ value }) => value === selectedRefVariable?.value, ({ value }) => value === selectedRefVariable?.value,
) as Option & { item: IVariableItem }; ) as DefaultOptionType & { item: IVariableItem };
// build variable string by rule // build variable string by rule
const variableStr = buildVariableString(selectedVariable?.item); const variableStr = buildVariableString(selectedVariable?.item);
const parameters = form.getFieldValue('parameters'); const parameters = form.getFieldValue('parameters');
const param = parameters?.[index]; const param = parameters?.[index];
if (param) { if (param) {
@ -239,7 +234,7 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo })
rules={[{ required: true, message: 'Missing parameter type' }]} rules={[{ required: true, message: 'Missing parameter type' }]}
> >
<Select placeholder='Select' onChange={value => onValueTypeChange(value, index)}> <Select placeholder='Select' onChange={value => onValueTypeChange(value, index)}>
{['str', 'int', 'float', 'bool', 'ref'].map(type => ( {VALUE_TYPES.map(type => (
<Option key={type} value={type}> <Option key={type} value={type}>
{type} {type}
</Option> </Option>