refactor: Update AddFlowVariableModal styles and functionality (#1979)

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

@@ -172,20 +172,27 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo })
 
       <Modal
         title={t('Add_Global_Variable_of_Flow')}
-        open={isModalOpen}
-        footer={null}
         width={1000}
-        onCancel={() => setIsModalOpen(false)}
+        open={isModalOpen}
         styles={{
           body: {
-            minHeight: '50vh',
-            maxHeight: '70vh',
+            minHeight: '40vh',
+            maxHeight: '65vh',
             overflow: 'scroll',
             backgroundColor: 'rgba(0,0,0,0.02)',
             padding: '0 8px',
             borderRadius: 4,
           },
         }}
+        onCancel={() => setIsModalOpen(false)}
+        footer={[
+          <Button key='cancel' onClick={() => setIsModalOpen(false)}>
+            {t('cancel')}
+          </Button>,
+          <Button key='submit' type='primary' onClick={() => form.submit()}>
+            {t('verify')}
+          </Button>,
+        ]}
       >
         <Form
           name='dynamic_form_nest_item'
@@ -200,7 +207,7 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo })
             {(fields, { add, remove }) => (
               <>
                 {fields.map(({ key, name, ...restField }, index) => (
-                  <Space key={key}>
+                  <Space key={key} className='hover:bg-gray-100 pt-2 pl-2'>
                     <Form.Item
                       {...restField}
                       name={[name, 'name']}
@@ -257,11 +264,11 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo })
                       <Input placeholder='Parameter Description' />
                     </Form.Item>
 
+                    <MinusCircleOutlined onClick={() => remove(name)} />
+
                     <Form.Item name={[name, 'key']} hidden initialValue='dbgpt.core.flow.params' />
                     <Form.Item name={[name, 'scope']} hidden initialValue='flow_priv' />
                     <Form.Item name={[name, 'category']} hidden initialValue='common' />
-
-                    <MinusCircleOutlined onClick={() => remove(name)} />
                   </Space>
                 ))}
 
@@ -273,15 +280,6 @@ export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo, setFlowInfo })
               </>
             )}
           </Form.List>
-
-          <Form.Item wrapperCol={{ offset: 20, span: 4 }}>
-            <Space>
-              <Button onClick={() => setIsModalOpen(false)}>{t('cancel')}</Button>
-              <Button type='primary' htmlType='submit'>
-                {t('verify')}
-              </Button>
-            </Space>
-          </Form.Item>
         </Form>
       </Modal>
     </>

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

@@ -1,5 +1,5 @@
 import { IFlowData, IFlowUpdateParam } from '@/types/flow';
-import { Button, Form, Input, Modal, Radio, Space, message } from 'antd';
+import { Button, Form, Input, Modal, Radio, message } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { ReactFlowInstance } from 'reactflow';
 
@@ -46,8 +46,14 @@ export const ExportFlowModal: React.FC<Props> = ({
         title={t('Export_Flow')}
         open={isExportFlowModalOpen}
         onCancel={() => setIsExportFlowModalOpen(false)}
-        cancelButtonProps={{ className: 'hidden' }}
-        okButtonProps={{ className: 'hidden' }}
+        footer={[
+          <Button key='cancel' onClick={() => setIsExportFlowModalOpen(false)}>
+            {t('cancel')}
+          </Button>,
+          <Button key='submit' type='primary' onClick={() => form.submit()}>
+            {t('verify')}
+          </Button>,
+        ]}
       >
         <Form
           form={form}
@@ -78,17 +84,6 @@ export const ExportFlowModal: React.FC<Props> = ({
           <Form.Item hidden name='uid'>
             <Input />
           </Form.Item>
-
-          <Form.Item wrapperCol={{ offset: 14, span: 8 }}>
-            <Space>
-              <Button htmlType='button' onClick={() => setIsExportFlowModalOpen(false)}>
-                {t('cancel')}
-              </Button>
-              <Button type='primary' htmlType='submit'>
-                {t('verify')}
-              </Button>
-            </Space>
-          </Form.Item>
         </Form>
       </Modal>
 

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

@@ -1,10 +1,10 @@
 import { apiInterceptors, importFlow } from '@/client/api';
+import CanvasWrapper from '@/pages/construct/flow/canvas/index';
 import { UploadOutlined } from '@ant-design/icons';
-import { Button, Form, GetProp, Modal, Radio, Space, Upload, UploadFile, UploadProps, message } from 'antd';
+import { Button, Form, GetProp, Modal, Radio, Upload, UploadFile, UploadProps, message } from 'antd';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Edge, Node } from 'reactflow';
-import CanvasWrapper from '@/pages/construct/flow/canvas/index';
 type Props = {
   isImportModalOpen: boolean;
   setNodes: React.Dispatch<React.SetStateAction<Node<any, string | undefined>[]>>;
@@ -39,10 +39,9 @@ export const ImportFlowModal: React.FC<Props> = ({ isImportModalOpen, setIsImpor
     if (res?.success) {
       messageApi.success(t('Import_Flow_Success'));
       localStorage.setItem('importFlowData', JSON.stringify(res?.data));
-      CanvasWrapper(res?.data)
+      CanvasWrapper(res?.data);
     } else if (res?.err_msg) {
       messageApi.error(res?.err_msg);
-    
     }
     setIsImportFlowModalOpen(false);
   };
@@ -67,8 +66,14 @@ export const ImportFlowModal: React.FC<Props> = ({ isImportModalOpen, setIsImpor
         title={t('Import_Flow')}
         open={isImportModalOpen}
         onCancel={() => setIsImportFlowModalOpen(false)}
-        cancelButtonProps={{ className: 'hidden' }}
-        okButtonProps={{ className: 'hidden' }}
+        footer={[
+          <Button key='cancel' onClick={() => setIsImportFlowModalOpen(false)}>
+            {t('cancel')}
+          </Button>,
+          <Button key='submit' type='primary' onClick={() => form.submit()}>
+            {t('verify')}
+          </Button>,
+        ]}
       >
         <Form
           form={form}
@@ -98,15 +103,6 @@ export const ImportFlowModal: React.FC<Props> = ({ isImportModalOpen, setIsImpor
               <Radio value={false}>{t('No')}</Radio>
             </Radio.Group>
           </Form.Item>
-
-          <Form.Item wrapperCol={{ offset: 14, span: 8 }}>
-            <Space>
-              <Button onClick={() => setIsImportFlowModalOpen(false)}>{t('cancel')}</Button>
-              <Button type='primary' htmlType='submit'>
-                {t('verify')}
-              </Button>
-            </Space>
-          </Form.Item>
         </Form>
       </Modal>
 

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

@@ -1,7 +1,7 @@
 import { addFlow, apiInterceptors, updateFlowById } from '@/client/api';
 import { IFlowData, IFlowUpdateParam } from '@/types/flow';
 import { mapHumpToUnderline } from '@/utils/flow';
-import { Button, Checkbox, Form, Input, Modal, Space, message } from 'antd';
+import { Button, Checkbox, Form, Input, Modal, message } from 'antd';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -93,11 +93,15 @@ export const SaveFlowModal: React.FC<Props> = ({
       <Modal
         title={t('flow_modal_title')}
         open={isSaveFlowModalOpen}
-        onCancel={() => {
-          setIsSaveFlowModalOpen(false);
-        }}
-        cancelButtonProps={{ className: 'hidden' }}
-        okButtonProps={{ className: 'hidden' }}
+        onCancel={() => setIsSaveFlowModalOpen(false)}
+        footer={[
+          <Button key='cancel' onClick={() => setIsSaveFlowModalOpen(false)}>
+            {t('cancel')}
+          </Button>,
+          <Button key='submit' type='primary' onClick={() => form.submit()}>
+            {t('verify')}
+          </Button>,
+        ]}
       >
         <Form
           name='flow_form'
@@ -162,22 +166,6 @@ export const SaveFlowModal: React.FC<Props> = ({
               }}
             />
           </Form.Item>
-
-          <Form.Item wrapperCol={{ offset: 14, span: 8 }}>
-            <Space>
-              <Button
-                htmlType='button'
-                onClick={() => {
-                  setIsSaveFlowModalOpen(false);
-                }}
-              >
-                {t('cancel')}
-              </Button>
-              <Button type='primary' htmlType='submit'>
-                {t('verify')}
-              </Button>
-            </Space>
-          </Form.Item>
         </Form>
       </Modal>