refactor: Update AddFlowVariableModal to use buildVariableString from utils/flow (#1976)

web/components/flow/canvas-modal/add-flow-variable-modal.tsx

@@ -2,7 +2,7 @@ import { apiInterceptors, getKeys, getVariablesByKey } from '@/client/api';
 import { IFlowUpdateParam, IGetKeysResponseData, IVariableItem } from '@/types/flow';
 import { buildVariableString } from '@/utils/flow';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, Cascader, Form, Input, Modal, Select, Space } from 'antd';
+import { Button, Cascader, Form, Input, InputNumber, Modal, Select, Space } from 'antd';
 import { uniqBy } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -19,9 +19,10 @@ interface Option {
 
 type Props = {
   flowInfo?: IFlowUpdateParam;
+  setFlowInfo: React.Dispatch<React.SetStateAction<IFlowUpdateParam | undefined>>;
 };
 
-export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo }) => {
+export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo }) => {
   const { t } = useTranslation();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [form] = Form.useForm();
@@ -48,8 +49,8 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo }) => {
   };
 
   const onFinish = (values: any) => {
-    const variables = JSON.stringify(values.parameters);
+    const newFlowInfo = { ...flowInfo, variables: values?.parameters || [] } as IFlowUpdateParam;
-    localStorage.setItem('variables', variables);
+    setFlowInfo(newFlowInfo);
     setIsModalOpen(false);
   };
 
@@ -142,14 +143,14 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo }) => {
       case 'str':
         return <Input placeholder='Parameter Value' />;
       case 'int':
-        return <Input type='number' placeholder='Parameter Value' />;
+        return <InputNumber placeholder='Parameter Value' className='w-full' />;
       case 'float':
-        return <Input type='number' step='0.01' placeholder='Parameter Value' />;
+        return <InputNumber placeholder='Parameter Value' className='w-full' />;
       case 'bool':
         return (
           <Select placeholder='Select Value'>
-            <Option value='true'>True</Option>
+            <Option value={true}>True</Option>
-            <Option value='false'>False</Option>
+            <Option value={false}>False</Option>
           </Select>
         );
       default:

web/components/flow/canvas-modal/save-flow-modal.tsx

@@ -47,8 +47,6 @@ export const SaveFlowModal: React.FC<Props> = ({
   async function onSaveFlow() {
     const { name, label, description = '', editable = false, state = 'deployed' } = form.getFieldsValue();
     const reactFlowObject = mapHumpToUnderline(reactFlow.toObject() as IFlowData);
-    const variableValues = localStorage.getItem('variables');
-    const variables = JSON.parse(variableValues || '[]');
 
     if (id) {
       const [, , res] = await apiInterceptors(
@@ -60,7 +58,7 @@ export const SaveFlowModal: React.FC<Props> = ({
           uid: id.toString(),
           flow_data: reactFlowObject,
           state,
-          variables,
+          variables: flowInfo?.variables,
         }),
       );
 
@@ -78,7 +76,7 @@ export const SaveFlowModal: React.FC<Props> = ({
           editable,
           flow_data: reactFlowObject,
           state,
-          variables,
+          variables: flowInfo?.variables,
         }),
       );
 

web/pages/construct/flow/canvas/index.tsx

@@ -33,12 +33,13 @@ const Canvas: React.FC = () => {
   const id = searchParams?.get('id') || '';
   const reactFlow = useReactFlow();
   const [messageApi, contextHolder] = message.useMessage();
+  const reactFlowWrapper = useRef<HTMLDivElement>(null);
 
-  const [loading, setLoading] = useState(false);
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const reactFlowWrapper = useRef<HTMLDivElement>(null);
+
   const [flowInfo, setFlowInfo] = useState<IFlowUpdateParam>();
+  const [loading, setLoading] = useState(false);
   const [isSaveFlowModalOpen, setIsSaveFlowModalOpen] = useState(false);
   const [isExportFlowModalOpen, setIsExportFlowModalOpen] = useState(false);
   const [isImportModalOpen, setIsImportFlowModalOpen] = useState(false);
@@ -53,6 +54,7 @@ const Canvas: React.FC = () => {
     setEdges(flowData.edges);
     setLoading(false);
   }
+
   async function getFlowData() {
     setLoading(true);
     const [_, data] = await apiInterceptors(getFlowById(id));
@@ -259,7 +261,7 @@ const Canvas: React.FC = () => {
 
               <Background color='#aaa' gap={16} />
 
-              <AddFlowVariableModal flowInfo={flowInfo} />
+              <AddFlowVariableModal flowInfo={flowInfo} setFlowInfo={setFlowInfo} />
             </ReactFlow>
           </div>
         </div>

web/types/flow.ts

@@ -12,7 +12,7 @@ export type IFlowUpdateParam = {
   uid?: string;
   flow_data?: IFlowData;
   state?: FlowState;
-  variables?: IGetKeysResponseData[];
+  variables?: IVariableItem[];
 };
 
 export type IFlowRefreshParams = {
@@ -170,8 +170,9 @@ export type IFlowDataViewport = {
 };
 
 export type IFlowData = {
-  nodes: Array<IFlowDataNode>;
+  nodes: IFlowDataNode[];
-  edges: Array<IFlowDataEdge>;
+  edges: IFlowDataEdge[];
+  variables?: IVariableItem[];
   viewport: IFlowDataViewport;
 };