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/hooks/document-hooks.ts

@@ -4,8 +4,9 @@ import { IChangeParserConfigRequestBody } from '@/interfaces/request/document';
 import i18n from '@/locales/config';
 import chatService from '@/services/chat-service';
 import kbService from '@/services/knowledge-service';
-import { api_host } from '@/utils/api';
+import api, { api_host } from '@/utils/api';
 import { buildChunkHighlights } from '@/utils/document-util';
+import { post } from '@/utils/request';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { UploadFile, message } from 'antd';
 import { get } from 'lodash';
@@ -442,3 +443,27 @@ export const useUploadAndParseDocument = (uploadMethod: string) => {
 
   return { data, loading, uploadAndParseDocument: mutateAsync };
 };
+
+export const useParseDocument = () => {
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: ['parseDocument'],
+    mutationFn: async (url: string) => {
+      try {
+        const data = await post(api.parse, { url });
+        if (data?.code === 0) {
+          message.success(i18n.t('message.uploaded'));
+        }
+        return data;
+      } catch (error) {
+        console.log('🚀 ~ mutationFn: ~ error:', error);
+        message.error('error');
+      }
+    },
+  });
+
+  return { parseDocument: mutateAsync, data, loading };
+};

web/src/hooks/login-hooks.ts

@@ -2,7 +2,9 @@ import { Authorization } from '@/constants/authorization';
 import userService from '@/services/user-service';
 import authorizationUtil from '@/utils/authorization-util';
 import { useMutation } from '@tanstack/react-query';
-import { message } from 'antd';
+import { Form, message } from 'antd';
+import { FormInstance } from 'antd/lib';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { history } from 'umi';
 
@@ -95,3 +97,19 @@ export const useLogout = () => {
 
   return { data, loading, logout: mutateAsync };
 };
+
+export const useHandleSubmittable = (form: FormInstance) => {
+  const [submittable, setSubmittable] = useState<boolean>(false);
+
+  // Watch all values
+  const values = Form.useWatch([], form);
+
+  useEffect(() => {
+    form
+      .validateFields({ validateOnly: true })
+      .then(() => setSubmittable(true))
+      .catch(() => setSubmittable(false));
+  }, [form, values]);
+
+  return { submittable };
+};