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)
This commit is contained in:
balibabu
2025-07-15 15:50:10 +08:00
committed by GitHub
parent 24c41d2a61
commit 148fde8b1b
2 changed files with 17 additions and 13 deletions

View File

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

View File

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