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/form/begin-form/index.less

@@ -0,0 +1,24 @@
+.dynamicInputVariable {
+  background-color: #ebe9e9;
+  :global(.ant-collapse-content) {
+    background-color: #f6f6f6;
+  }
+  :global(.ant-collapse-content-box) {
+    padding: 0 !important;
+  }
+  margin-bottom: 20px;
+  .title {
+    font-weight: 600;
+    font-size: 16px;
+  }
+
+  .addButton {
+    color: rgb(22, 119, 255);
+    font-weight: 600;
+  }
+}
+
+.addButton {
+  color: rgb(22, 119, 255);
+  font-weight: 600;
+}

web/src/pages/flow/form/begin-form/index.tsx

@@ -1,17 +1,20 @@
-import { useTranslate } from '@/hooks/common-hooks';
+import { PlusOutlined } from '@ant-design/icons';
 import { Button, Form, Input } from 'antd';
 import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { BeginQuery, IOperatorForm } from '../../interface';
 import { useEditQueryRecord } from './hooks';
 import { ModalForm } from './paramater-modal';
 import QueryTable from './query-table';
 
+import styles from './index.less';
+
 type FieldType = {
   prologue?: string;
 };
 
 const BeginForm = ({ onValuesChange, form }: IOperatorForm) => {
-  const { t } = useTranslate('chat');
+  const { t } = useTranslation();
   const {
     ok,
     currentRecord,
@@ -55,9 +58,9 @@ const BeginForm = ({ onValuesChange, form }: IOperatorForm) => {
       >
         <Form.Item<FieldType>
           name={'prologue'}
-          label={t('setAnOpener')}
-          tooltip={t('setAnOpenerTip')}
-          initialValue={t('setAnOpenerInitial')}
+          label={t('chat.setAnOpener')}
+          tooltip={t('chat.setAnOpenerTip')}
+          initialValue={t('chat.setAnOpenerInitial')}
         >
           <Input.TextArea autoSize={{ minRows: 5 }} />
         </Form.Item>
@@ -65,7 +68,6 @@ const BeginForm = ({ onValuesChange, form }: IOperatorForm) => {
         <Form.Item name="query" noStyle />
 
         <Form.Item
-          label="Query List"
           shouldUpdate={(prevValues, curValues) =>
             prevValues.query !== curValues.query
           }
@@ -86,9 +88,11 @@ const BeginForm = ({ onValuesChange, form }: IOperatorForm) => {
           htmlType="button"
           style={{ margin: '0 8px' }}
           onClick={() => showModal()}
+          icon={<PlusOutlined />}
           block
+          className={styles.addButton}
         >
-          Add +
+          {t('flow.addItem')}
         </Button>
         {visible && (
           <ModalForm

web/src/pages/flow/form/begin-form/paramater-modal.tsx

@@ -3,7 +3,7 @@ import { IModalProps } from '@/interfaces/common';
 import { Form, Input, Modal, Select, Switch } from 'antd';
 import { DefaultOptionType } from 'antd/es/select';
 import { useEffect, useMemo } from 'react';
-import { BeginQueryType } from '../../constant';
+import { BeginQueryType, BeginQueryTypeIconMap } from '../../constant';
 import { BeginQuery } from '../../interface';
 import BeginDynamicOptions from './begin-dynamic-options';
 
@@ -20,10 +20,19 @@ export const ModalForm = ({
   const options = useMemo(() => {
     return Object.values(BeginQueryType).reduce<DefaultOptionType[]>(
       (pre, cur) => {
+        const Icon = BeginQueryTypeIconMap[cur];
+
         return [
           ...pre,
           {
-            label: cur,
+            label: (
+              <div className="flex items-center gap-2">
+                <Icon
+                  className={`size-${cur === BeginQueryType.Options ? 4 : 5}`}
+                ></Icon>
+                {cur}
+              </div>
+            ),
             value: cur,
           },
         ];

web/src/pages/flow/form/begin-form/query-table.tsx

@@ -1,8 +1,11 @@
 import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import type { TableProps } from 'antd';
-import { Space, Table, Tooltip } from 'antd';
+import { Collapse, Space, Table, Tooltip } from 'antd';
 import { BeginQuery } from '../../interface';
 
+import { useTranslation } from 'react-i18next';
+import styles from './index.less';
+
 interface IProps {
   data: BeginQuery[];
   deleteRecord(index: number): void;
@@ -10,6 +13,8 @@ interface IProps {
 }
 
 const QueryTable = ({ data, deleteRecord, showModal }: IProps) => {
+  const { t } = useTranslation();
+
   const columns: TableProps<BeginQuery>['columns'] = [
     {
       title: 'Key',
@@ -25,7 +30,7 @@ const QueryTable = ({ data, deleteRecord, showModal }: IProps) => {
       ),
     },
     {
-      title: 'Name',
+      title: t('flow.name'),
       dataIndex: 'name',
       key: 'name',
       ellipsis: {
@@ -38,18 +43,18 @@ const QueryTable = ({ data, deleteRecord, showModal }: IProps) => {
       ),
     },
     {
-      title: 'Type',
+      title: t('flow.type'),
       dataIndex: 'type',
       key: 'type',
     },
     {
-      title: 'Optional',
+      title: t('flow.optional'),
       dataIndex: 'optional',
       key: 'optional',
       render: (optional) => (optional ? 'Yes' : 'No'),
     },
     {
-      title: 'Action',
+      title: t('common.action'),
       key: 'action',
       render: (_, record, idx) => (
         <Space>
@@ -64,7 +69,23 @@ const QueryTable = ({ data, deleteRecord, showModal }: IProps) => {
   ];
 
   return (
-    <Table<BeginQuery> columns={columns} dataSource={data} pagination={false} />
+    <Collapse
+      defaultActiveKey={['1']}
+      className={styles.dynamicInputVariable}
+      items={[
+        {
+          key: '1',
+          label: <span className={styles.title}>{t('flow.input')}</span>,
+          children: (
+            <Table<BeginQuery>
+              columns={columns}
+              dataSource={data}
+              pagination={false}
+            />
+          ),
+        },
+      ]}
+    />
   );
 };
 

web/src/pages/flow/form/components/dynamic-input-variable.tsx

@@ -1,7 +1,7 @@
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Collapse, Flex, Form, Input, Select } from 'antd';
 
-import { useCallback } from 'react';
+import { PropsWithChildren, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useBuildComponentIdSelectOptions } from '../../hooks';
 import styles from './index.less';
@@ -95,9 +95,10 @@ const DynamicVariableForm = ({ nodeId }: IProps) => {
   );
 };
 
-const DynamicInputVariable = ({ nodeId }: IProps) => {
-  const { t } = useTranslation();
-
+export function FormCollapse({
+  children,
+  title,
+}: PropsWithChildren<{ title: string }>) {
   return (
     <Collapse
       className={styles.dynamicInputVariable}
@@ -105,12 +106,21 @@ const DynamicInputVariable = ({ nodeId }: IProps) => {
       items={[
         {
           key: '1',
-          label: <span className={styles.title}>{t('flow.input')}</span>,
-          children: <DynamicVariableForm nodeId={nodeId}></DynamicVariableForm>,
+          label: <span className={styles.title}>{title}</span>,
+          children,
         },
       ]}
     />
   );
+}
+
+const DynamicInputVariable = ({ nodeId }: IProps) => {
+  const { t } = useTranslation();
+  return (
+    <FormCollapse title={t('flow.input')}>
+      <DynamicVariableForm nodeId={nodeId}></DynamicVariableForm>
+    </FormCollapse>
+  );
 };
 
 export default DynamicInputVariable;