feat: Add RunDrawer #3355 (#3434)

### What problem does this PR solve?

feat: Translation test run form #3355
feat: Wrap QueryTable with Collapse #3355
feat: If the required fields are not filled in, the submit button will
be grayed out. #3355
feat: Add RunDrawer #3355

### Type of change


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

web/src/pages/flow/header/index.tsx

@@ -3,13 +3,16 @@ import { useSetModalState, useTranslate } from '@/hooks/common-hooks';
 import { useFetchFlow } from '@/hooks/flow-hooks';
 import { ArrowLeftOutlined } from '@ant-design/icons';
 import { Button, Flex, Space } from 'antd';
+import { useCallback } from 'react';
 import { Link, useParams } from 'umi';
 import FlowIdModal from '../flow-id-modal';
 import {
+  useGetBeginNodeDataQuery,
   useSaveGraph,
   useSaveGraphBeforeOpeningDebugDrawer,
   useWatchAgentChange,
 } from '../hooks';
+import { BeginQuery } from '../interface';
 import styles from './index.less';
 
 interface IProps {
@@ -19,7 +22,7 @@ interface IProps {
 
 const FlowHeader = ({ showChatDrawer, chatDrawerVisible }: IProps) => {
   const { saveGraph } = useSaveGraph();
-  const handleRun = useSaveGraphBeforeOpeningDebugDrawer(showChatDrawer);
+  const { handleRun } = useSaveGraphBeforeOpeningDebugDrawer(showChatDrawer);
   const { data } = useFetchFlow();
   const { t } = useTranslate('flow');
   const {
@@ -30,6 +33,16 @@ const FlowHeader = ({ showChatDrawer, chatDrawerVisible }: IProps) => {
   const { visible, hideModal, showModal } = useSetModalState();
   const { id } = useParams();
   const time = useWatchAgentChange(chatDrawerVisible);
+  const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
+
+  const handleRunAgent = useCallback(() => {
+    const query: BeginQuery[] = getBeginNodeDataQuery();
+    if (query.length > 0) {
+      showChatDrawer();
+    } else {
+      handleRun();
+    }
+  }, [getBeginNodeDataQuery, handleRun, showChatDrawer]);
 
   return (
     <>
@@ -51,10 +64,10 @@ const FlowHeader = ({ showChatDrawer, chatDrawerVisible }: IProps) => {
           </div>
         </Space>
         <Space size={'large'}>
-          <Button onClick={handleRun}>
+          <Button onClick={handleRunAgent}>
             <b>{t('run')}</b>
           </Button>
-          <Button type="primary" onClick={saveGraph}>
+          <Button type="primary" onClick={() => saveGraph()}>
             <b>{t('save')}</b>
           </Button>
           {/* <Button type="primary" onClick={showOverviewModal} disabled>