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/canvas/node/begin-node.tsx

@@ -1,9 +1,15 @@
 import { Flex } from 'antd';
 import classNames from 'classnames';
+import get from 'lodash/get';
 import { useTranslation } from 'react-i18next';
 import { Handle, NodeProps, Position } from 'reactflow';
-import { Operator, operatorMap } from '../../constant';
-import { NodeData } from '../../interface';
+import {
+  BeginQueryType,
+  BeginQueryTypeIconMap,
+  Operator,
+  operatorMap,
+} from '../../constant';
+import { BeginQuery, NodeData } from '../../interface';
 import OperatorIcon from '../../operator-icon';
 import { RightHandleStyle } from './handle-icon';
 import styles from './index.less';
@@ -11,15 +17,13 @@ import styles from './index.less';
 // TODO: do not allow other nodes to connect to this node
 export function BeginNode({ selected, data }: NodeProps<NodeData>) {
   const { t } = useTranslation();
+  const query: BeginQuery[] = get(data, 'form.query', []);
 
   return (
     <section
       className={classNames(styles.ragNode, {
         [styles.selectedNode]: selected,
       })}
-      style={{
-        width: 100,
-      }}
     >
       <Handle
         type="source"
@@ -29,7 +33,7 @@ export function BeginNode({ selected, data }: NodeProps<NodeData>) {
         style={RightHandleStyle}
       ></Handle>
 
-      <Flex align="center" justify={'space-around'}>
+      <Flex align="center" justify={'center'} gap={10}>
         <OperatorIcon
           name={data.label as Operator}
           fontSize={24}
@@ -37,6 +41,24 @@ export function BeginNode({ selected, data }: NodeProps<NodeData>) {
         ></OperatorIcon>
         <div className={styles.nodeTitle}>{t(`flow.begin`)}</div>
       </Flex>
+      <Flex gap={8} vertical className={styles.generateParameters}>
+        {query.map((x, idx) => {
+          const Icon = BeginQueryTypeIconMap[x.type as BeginQueryType];
+          return (
+            <Flex
+              key={idx}
+              align="center"
+              gap={6}
+              className={styles.conditionBlock}
+            >
+              <Icon className="size-4" />
+              <label htmlFor="">{x.key}</label>
+              <span className={styles.parameterValue}>{x.name}</span>
+              <span className="flex-1">{x.optional ? 'Yes' : 'No'}</span>
+            </Flex>
+          );
+        })}
+      </Flex>
     </section>
   );
 }