From 907897c6959bfc7c94ccb231b5dbfcf3b5ef89f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Tue, 3 Sep 2024 20:27:27 +0800
Subject: [PATCH] chore: Update AddFlowVariableModal component to include
 parameter management

---
 .../add-flow-variable-modal.tsx}               |  7 +++----
 web/components/flow/canvas-modal/index.ts      |  1 +
 web/pages/construct/flow/canvas/index.tsx      | 18 ++++++++----------
 3 files changed, 12 insertions(+), 14 deletions(-)
 rename web/components/flow/{add-flow-variable.tsx => canvas-modal/add-flow-variable-modal.tsx} (97%)

diff --git a/web/components/flow/add-flow-variable.tsx b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
similarity index 97%
rename from web/components/flow/add-flow-variable.tsx
rename to web/components/flow/canvas-modal/add-flow-variable-modal.tsx
index e27d484a5..961ec76f7 100644
--- a/web/components/flow/add-flow-variable.tsx
+++ b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
@@ -12,7 +12,7 @@ const { Option } = Select;
 const DAG_PARAM_KEY = 'dbgpt.core.flow.params';
 const DAG_PARAM_SCOPE = 'flow_priv';
 
-const AddFlowVariable: React.FC = () => {
+export const AddFlowVariableModal: React.FC = () => {
   const { t } = useTranslation();
   // const [operators, setOperators] = useState<Array<IFlowNode>>([]);
   // const [resources, setResources] = useState<Array<IFlowNode>>([]);
@@ -149,7 +149,7 @@ const AddFlowVariable: React.FC = () => {
             {(fields, { add, remove }) => (
               <>
                 {fields.map(({ key, name, ...restField }, index) => (
-                  <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align='baseline'>
+                  <Space key={key}>
                     <Form.Item
                       {...restField}
                       name={[name, 'name']}
@@ -218,6 +218,7 @@ const AddFlowVariable: React.FC = () => {
               </>
             )}
           </Form.List>
+
           <Form.Item wrapperCol={{ offset: 20, span: 4 }}>
             <Space>
               <Button onClick={() => setIsModalOpen(false)}>{t('cancel')}</Button>
@@ -231,5 +232,3 @@ const AddFlowVariable: React.FC = () => {
     </>
   );
 };
-
-export default AddFlowVariable;
diff --git a/web/components/flow/canvas-modal/index.ts b/web/components/flow/canvas-modal/index.ts
index 76abf29ea..a7cb14203 100644
--- a/web/components/flow/canvas-modal/index.ts
+++ b/web/components/flow/canvas-modal/index.ts
@@ -1,3 +1,4 @@
+export * from './add-flow-variable-modal';
 export * from './export-flow-modal';
 export * from './import-flow-modal';
 export * from './save-flow-modal';
diff --git a/web/pages/construct/flow/canvas/index.tsx b/web/pages/construct/flow/canvas/index.tsx
index 5957074ea..c67b72bfa 100644
--- a/web/pages/construct/flow/canvas/index.tsx
+++ b/web/pages/construct/flow/canvas/index.tsx
@@ -1,5 +1,11 @@
 import { apiInterceptors, getFlowById } from '@/client/api';
 import MuiLoading from '@/components/common/loading';
+import AddNodesSider from '@/components/flow/add-nodes-sider';
+import ButtonEdge from '@/components/flow/button-edge';
+import { AddFlowVariableModal, ExportFlowModal, ImportFlowModal, SaveFlowModal } from '@/components/flow/canvas-modal';
+import CanvasNode from '@/components/flow/canvas-node';
+import { IFlowData, IFlowUpdateParam } from '@/types/flow';
+import { checkFlowDataRequied, getUniqueNodeId, mapUnderlineToHump } from '@/utils/flow';
 import { ExportOutlined, FrownOutlined, ImportOutlined, SaveOutlined } from '@ant-design/icons';
 import { Divider, Space, Tooltip, message, notification } from 'antd';
 import { useSearchParams } from 'next/navigation';
@@ -16,14 +22,6 @@ import ReactFlow, {
   useNodesState,
   useReactFlow,
 } from 'reactflow';
-// import AddNodes from '@/components/flow/add-nodes';
-import AddFlowVariable from '@/components/flow/add-flow-variable';
-import AddNodesSider from '@/components/flow/add-nodes-sider';
-import ButtonEdge from '@/components/flow/button-edge';
-import { ExportFlowModal, ImportFlowModal, SaveFlowModal } from '@/components/flow/canvas-modal';
-import CanvasNode from '@/components/flow/canvas-node';
-import { IFlowData, IFlowUpdateParam } from '@/types/flow';
-import { checkFlowDataRequied, getUniqueNodeId, mapUnderlineToHump } from '@/utils/flow';
 import 'reactflow/dist/style.css';
 
 const nodeTypes = { customNode: CanvasNode };
@@ -249,10 +247,10 @@ const Canvas: React.FC = () => {
               deleteKeyCode={['Backspace', 'Delete']}
             >
               <Controls className='flex flex-row items-center' position='bottom-center' />
+
               <Background color='#aaa' gap={16} />
 
-              {/* <AddNodes /> */}
-              <AddFlowVariable />
+              <AddFlowVariableModal />
             </ReactFlow>
           </div>
         </div>