From 148fde8b1b29404f5676e1122ffe9e4d2cc3acc3 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Tue, 15 Jul 2025 15:50:10 +0800
Subject: [PATCH] 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)
---
 .../profile-setting/mcp/edit-mcp-dialog.tsx   | 10 +++++++---
 .../profile-setting/mcp/edit-mcp-form.tsx     | 20 +++++++++----------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/web/src/pages/profile-setting/mcp/edit-mcp-dialog.tsx b/web/src/pages/profile-setting/mcp/edit-mcp-dialog.tsx
index b94b8bf38..6be9c5cd4 100644
--- a/web/src/pages/profile-setting/mcp/edit-mcp-dialog.tsx
+++ b/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);
       }
diff --git a/web/src/pages/profile-setting/mcp/edit-mcp-form.tsx b/web/src/pages/profile-setting/mcp/edit-mcp-form.tsx
index 05c3f7491..dfad0ff38 100644
--- a/web/src/pages/profile-setting/mcp/edit-mcp-form.tsx
+++ b/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);
                   }}
                 />