Feature: Added global variable functionality #10703 (#11117)

### What problem does this PR solve?

Feature: Added global variable functionality

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/index.tsx

@@ -38,6 +38,7 @@ import { useParams } from 'umi';
 import AgentCanvas from './canvas';
 import { DropdownProvider } from './canvas/context';
 import { Operator } from './constant';
+import { GobalParamSheet } from './gobal-variable-sheet';
 import { useCancelCurrentDataflow } from './hooks/use-cancel-dataflow';
 import { useHandleExportJsonFile } from './hooks/use-export-json';
 import { useFetchDataOnMount } from './hooks/use-fetch-data';
@@ -123,6 +124,12 @@ export default function Agent() {
     hideModal: hidePipelineLogSheet,
   } = useSetModalState();
 
+  const {
+    visible: gobalParamSheetVisible,
+    showModal: showGobalParamSheet,
+    hideModal: hideGobalParamSheet,
+  } = useSetModalState();
+
   const {
     isParsing,
     logs,
@@ -206,6 +213,13 @@ export default function Agent() {
           >
             <LaptopMinimalCheck /> {t('flow.save')}
           </ButtonLoading>
+          <ButtonLoading
+            variant={'secondary'}
+            onClick={() => showGobalParamSheet()}
+            loading={loading}
+          >
+            {t('flow.gobalVariable')}
+          </ButtonLoading>
           <Button variant={'secondary'} onClick={handleButtonRunClick}>
             <CirclePlay />
             {t('flow.run')}
@@ -299,6 +313,12 @@ export default function Agent() {
           loading={pipelineRunning}
         ></PipelineRunSheet>
       )}
+      {gobalParamSheetVisible && (
+        <GobalParamSheet
+          data={{}}
+          hideModal={hideGobalParamSheet}
+        ></GobalParamSheet>
+      )}
     </section>
   );
 }