Feat: Add authorization token field to the MCP form #3221 (#8850)

### What problem does this PR solve?

Feat: Add authorization token field to the MCP form #3221
### Type of change


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

web/src/pages/profile-setting/mcp/edit-mcp-dialog.tsx

@@ -12,7 +12,7 @@ import { IModalProps } from '@/interfaces/common';
 import { IMCPTool, IMCPToolObject } from '@/interfaces/database/mcp';
 import { cn } from '@/lib/utils';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { isEmpty, pick } from 'lodash';
+import { isEmpty, omit, pick } from 'lodash';
 import { RefreshCw } from 'lucide-react';
 import {
   MouseEventHandler,
@@ -82,10 +82,14 @@ export function EditMcpDialog({
   }, []);
 
   const handleOk = async (values: z.infer<typeof FormSchema>) => {
+    const nextValues = {
+      ...omit(values, 'authorization_token'),
+      headers: { authorization_token: values.authorization_token },
+    };
     if (isTriggeredBySaving) {
-      onOk?.(values);
+      onOk?.(nextValues);
     } else {
-      const ret = await testMcpServer(values);
+      const ret = await testMcpServer(nextValues);
       if (ret.code === 0) {
         setFieldChanged(false);
       }

web/src/pages/profile-setting/mcp/edit-mcp-form.tsx

@@ -15,7 +15,7 @@ import { Input } from '@/components/ui/input';
 import { RAGFlowSelect } from '@/components/ui/select';
 import { IModalProps } from '@/interfaces/common';
 import { buildOptions } from '@/utils/form';
-import { Editor, loader } from '@monaco-editor/react';
+import { loader } from '@monaco-editor/react';
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -53,7 +53,7 @@ export function useBuildFormSchema() {
         message: t('common.namePlaceholder'),
       })
       .trim(),
-    headers: z.record(z.string(), z.any()).optional(),
+    authorization_token: z.string().optional(),
   });
 
   return FormSchema;
@@ -142,18 +142,18 @@ export function EditMcpForm({
         />
         <FormField
           control={form.control}
-          name="headers"
+          name="authorization_token"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Headers</FormLabel>
+              <FormLabel>Authorization Token</FormLabel>
               <FormControl>
-                <Editor
-                  height={200}
-                  defaultLanguage="json"
-                  theme="vs-dark"
+                <Input
+                  placeholder={t('common.namePlaceholder')}
                   {...field}
-                  onChange={(value) => {
-                    field.onChange(value);
+                  autoComplete="off"
+                  type="password"
+                  onChange={(e) => {
+                    field.onChange(e.target.value.trim());
                     setFieldChanged(true);
                   }}
                 />