mirror of https://github.com/langgenius/dify.git
chore: remove the frontend changes
This commit is contained in:
parent
7d91f4783b
commit
4a9fe55976
|
|
@ -2,7 +2,7 @@
|
|||
import React, { useRef, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { getDomain } from 'tldts'
|
||||
import { RiArrowDownSLine, RiCloseLine, RiEditLine } from '@remixicon/react'
|
||||
import { RiCloseLine, RiEditLine } from '@remixicon/react'
|
||||
import { Mcp } from '@/app/components/base/icons/src/vender/other'
|
||||
import AppIconPicker from '@/app/components/base/app-icon-picker'
|
||||
import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
|
||||
|
|
@ -10,7 +10,6 @@ import AppIcon from '@/app/components/base/app-icon'
|
|||
import Modal from '@/app/components/base/modal'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Input from '@/app/components/base/input'
|
||||
import Select from '@/app/components/base/select'
|
||||
import HeadersInput from './headers-input'
|
||||
import type { AppIconType } from '@/types/app'
|
||||
import type { ToolWithProvider } from '@/app/components/workflow/types'
|
||||
|
|
@ -34,10 +33,6 @@ export type DuplicateAppModalProps = {
|
|||
timeout: number
|
||||
sse_read_timeout: number
|
||||
headers?: Record<string, string>
|
||||
client_id?: string
|
||||
client_secret?: string
|
||||
grant_type?: string
|
||||
scope?: string
|
||||
}) => void
|
||||
onHide: () => void
|
||||
}
|
||||
|
|
@ -80,12 +75,6 @@ const MCPModal = ({
|
|||
const [headers, setHeaders] = React.useState<Record<string, string>>(
|
||||
data?.masked_headers || {},
|
||||
)
|
||||
const [clientId, setClientId] = React.useState(data?.client_id || '')
|
||||
const [clientSecret, setClientSecret] = React.useState(data?.client_secret || '')
|
||||
const [grantType, setGrantType] = React.useState(data?.grant_type || 'authorization_code')
|
||||
const [scope, setScope] = React.useState(data?.scope || '')
|
||||
const [authCollapsed, setAuthCollapsed] = React.useState(true)
|
||||
const [configCollapsed, setConfigCollapsed] = React.useState(true)
|
||||
const [isFetchingIcon, setIsFetchingIcon] = useState(false)
|
||||
const appIconRef = useRef<HTMLDivElement>(null)
|
||||
const isHovering = useHover(appIconRef)
|
||||
|
|
@ -99,10 +88,6 @@ const MCPModal = ({
|
|||
setMcpTimeout(data.timeout || 30)
|
||||
setSseReadTimeout(data.sse_read_timeout || 300)
|
||||
setHeaders(data.masked_headers || {})
|
||||
setClientId(data.client_id || '')
|
||||
setClientSecret(data.client_secret || '')
|
||||
setGrantType(data.grant_type || 'authorization_code')
|
||||
setScope(data.scope || '')
|
||||
setAppIcon(getIcon(data))
|
||||
}
|
||||
else {
|
||||
|
|
@ -113,10 +98,6 @@ const MCPModal = ({
|
|||
setMcpTimeout(30)
|
||||
setSseReadTimeout(300)
|
||||
setHeaders({})
|
||||
setClientId('')
|
||||
setClientSecret('')
|
||||
setGrantType('authorization_code')
|
||||
setScope('')
|
||||
setAppIcon(DEFAULT_ICON as AppIconSelection)
|
||||
}
|
||||
}, [data])
|
||||
|
|
@ -145,8 +126,7 @@ const MCPModal = ({
|
|||
setIsFetchingIcon(true)
|
||||
try {
|
||||
const res = await uploadRemoteFileInfo(remoteIcon, undefined, true)
|
||||
if ('url' in res)
|
||||
setAppIcon({ type: 'image', url: res.url, fileId: extractFileId(res.url) || '' })
|
||||
setAppIcon({ type: 'image', url: res.url, fileId: extractFileId(res.url) || '' })
|
||||
}
|
||||
catch (e) {
|
||||
let errorMessage = 'Failed to fetch remote icon'
|
||||
|
|
@ -180,10 +160,6 @@ const MCPModal = ({
|
|||
timeout: timeout || 30,
|
||||
sse_read_timeout: sseReadTimeout || 300,
|
||||
headers: Object.keys(headers).length > 0 ? headers : undefined,
|
||||
client_id: clientId || undefined,
|
||||
client_secret: clientSecret || undefined,
|
||||
grant_type: grantType,
|
||||
scope: scope || undefined,
|
||||
})
|
||||
if(isCreate)
|
||||
onHide()
|
||||
|
|
@ -263,116 +239,41 @@ const MCPModal = ({
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div
|
||||
className='mb-1 flex h-6 cursor-pointer items-center justify-between'
|
||||
onClick={() => setAuthCollapsed(!authCollapsed)}
|
||||
>
|
||||
<span className='system-sm-semibold-uppercase text-text-secondary'>{t('tools.mcp.modal.authentication')}</span>
|
||||
<RiArrowDownSLine className={cn('h-4 w-4 text-text-tertiary transition-transform', authCollapsed && '-rotate-90')} />
|
||||
<div className='mb-1 flex h-6 items-center'>
|
||||
<span className='system-sm-medium text-text-secondary'>{t('tools.mcp.modal.timeout')}</span>
|
||||
</div>
|
||||
{!authCollapsed && (
|
||||
<div className='mt-3 space-y-5'>
|
||||
<div>
|
||||
<div className='mb-1 flex h-6 items-center'>
|
||||
<span className='system-sm-medium text-text-secondary'>{t('tools.mcp.modal.grantType')}</span>
|
||||
</div>
|
||||
<Select
|
||||
items={[
|
||||
{ value: 'authorization_code', name: t('tools.mcp.modal.grantTypeAuthCode') },
|
||||
{ value: 'client_credentials', name: t('tools.mcp.modal.grantTypeClientCredentials') },
|
||||
]}
|
||||
defaultValue={grantType}
|
||||
onSelect={item => setGrantType(item.value as string)}
|
||||
placeholder={t('tools.mcp.modal.grantType')}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className='mb-1 flex h-6 items-center'>
|
||||
<span className='system-sm-medium text-text-secondary'>{t('tools.mcp.modal.clientId')}</span>
|
||||
</div>
|
||||
<Input
|
||||
value={clientId}
|
||||
onChange={e => setClientId(e.target.value)}
|
||||
placeholder={t('tools.mcp.modal.clientIdPlaceholder')}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className='mb-1 flex h-6 items-center'>
|
||||
<span className='system-sm-medium text-text-secondary'>{t('tools.mcp.modal.clientSecret')}</span>
|
||||
</div>
|
||||
<Input
|
||||
type='password'
|
||||
value={clientSecret}
|
||||
onChange={e => setClientSecret(e.target.value)}
|
||||
placeholder={t('tools.mcp.modal.clientSecretPlaceholder')}
|
||||
/>
|
||||
</div>
|
||||
{grantType === 'client_credentials' && (
|
||||
<div>
|
||||
<div className='mb-1 flex h-6 items-center'>
|
||||
<span className='system-sm-medium text-text-secondary'>{t('tools.mcp.modal.scope')}</span>
|
||||
</div>
|
||||
<Input
|
||||
value={scope}
|
||||
onChange={e => setScope(e.target.value)}
|
||||
placeholder={t('tools.mcp.modal.scopePlaceholder')}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<div className='mb-1 flex h-6 items-center'>
|
||||
<span className='system-sm-medium text-text-secondary'>{t('tools.mcp.modal.headers')}</span>
|
||||
</div>
|
||||
<div className='body-xs-regular mb-2 text-text-tertiary'>{t('tools.mcp.modal.headersTip')}</div>
|
||||
<HeadersInput
|
||||
headers={headers}
|
||||
onChange={setHeaders}
|
||||
readonly={false}
|
||||
isMasked={!isCreate && Object.keys(headers).length > 0}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Input
|
||||
type='number'
|
||||
value={timeout}
|
||||
onChange={e => setMcpTimeout(Number(e.target.value))}
|
||||
onBlur={e => handleBlur(e.target.value.trim())}
|
||||
placeholder={t('tools.mcp.modal.timeoutPlaceholder')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div
|
||||
className='mb-1 flex h-6 cursor-pointer items-center justify-between'
|
||||
onClick={() => setConfigCollapsed(!configCollapsed)}
|
||||
>
|
||||
<span className='system-sm-semibold-uppercase text-text-secondary'>{t('tools.mcp.modal.configuration')}</span>
|
||||
<RiArrowDownSLine className={cn('h-4 w-4 text-text-tertiary transition-transform', configCollapsed && '-rotate-90')} />
|
||||
<div className='mb-1 flex h-6 items-center'>
|
||||
<span className='system-sm-medium text-text-secondary'>{t('tools.mcp.modal.sseReadTimeout')}</span>
|
||||
</div>
|
||||
{!configCollapsed && (
|
||||
<div className='mt-3 space-y-5'>
|
||||
<div>
|
||||
<div className='mb-1 flex h-6 items-center'>
|
||||
<span className='system-sm-medium text-text-secondary'>{t('tools.mcp.modal.timeout')}</span>
|
||||
</div>
|
||||
<Input
|
||||
type='number'
|
||||
value={timeout}
|
||||
onChange={e => setMcpTimeout(Number(e.target.value))}
|
||||
onBlur={e => handleBlur(e.target.value.trim())}
|
||||
placeholder={t('tools.mcp.modal.timeoutPlaceholder')}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className='mb-1 flex h-6 items-center'>
|
||||
<span className='system-sm-medium text-text-secondary'>{t('tools.mcp.modal.sseReadTimeout')}</span>
|
||||
</div>
|
||||
<Input
|
||||
type='number'
|
||||
value={sseReadTimeout}
|
||||
onChange={e => setSseReadTimeout(Number(e.target.value))}
|
||||
onBlur={e => handleBlur(e.target.value.trim())}
|
||||
placeholder={t('tools.mcp.modal.timeoutPlaceholder')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Input
|
||||
type='number'
|
||||
value={sseReadTimeout}
|
||||
onChange={e => setSseReadTimeout(Number(e.target.value))}
|
||||
onBlur={e => handleBlur(e.target.value.trim())}
|
||||
placeholder={t('tools.mcp.modal.timeoutPlaceholder')}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className='mb-1 flex h-6 items-center'>
|
||||
<span className='system-sm-medium text-text-secondary'>{t('tools.mcp.modal.headers')}</span>
|
||||
</div>
|
||||
<div className='body-xs-regular mb-2 text-text-tertiary'>{t('tools.mcp.modal.headersTip')}</div>
|
||||
<HeadersInput
|
||||
headers={headers}
|
||||
onChange={setHeaders}
|
||||
readonly={false}
|
||||
isMasked={!isCreate && Object.keys(headers).length > 0}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-row-reverse pt-5'>
|
||||
|
|
|
|||
|
|
@ -62,10 +62,6 @@ export type Collection = {
|
|||
sse_read_timeout?: number
|
||||
headers?: Record<string, string>
|
||||
masked_headers?: Record<string, string>
|
||||
client_id?: string
|
||||
client_secret?: string
|
||||
grant_type?: string
|
||||
scope?: string
|
||||
is_authorized?: boolean
|
||||
provider?: string
|
||||
}
|
||||
|
|
|
|||
|
|
@ -203,17 +203,6 @@ const translation = {
|
|||
timeout: 'Timeout',
|
||||
sseReadTimeout: 'SSE Read Timeout',
|
||||
timeoutPlaceholder: '30',
|
||||
configuration: 'Configuration',
|
||||
authentication: 'Authentication',
|
||||
grantType: 'Grant Type',
|
||||
grantTypeAuthCode: 'Authorization Code (User Authentication)',
|
||||
grantTypeClientCredentials: 'Client Credentials (Service-to-Service)',
|
||||
scope: 'OAuth Scope',
|
||||
scopePlaceholder: 'Enter OAuth scope (optional)',
|
||||
clientId: 'Client ID',
|
||||
clientIdPlaceholder: 'Enter client ID',
|
||||
clientSecret: 'Client Secret',
|
||||
clientSecretPlaceholder: 'Enter client secret',
|
||||
},
|
||||
delete: 'Remove MCP Server',
|
||||
deleteConfirmTitle: 'Would you like to remove {{mcp}}?',
|
||||
|
|
|
|||
|
|
@ -203,12 +203,6 @@ const translation = {
|
|||
timeout: '超时时间',
|
||||
sseReadTimeout: 'SSE 读取超时时间',
|
||||
timeoutPlaceholder: '30',
|
||||
configuration: '配置',
|
||||
authentication: '认证',
|
||||
clientId: '客户端 ID',
|
||||
clientIdPlaceholder: '请输入客户端 ID',
|
||||
clientSecret: '客户端密钥',
|
||||
clientSecretPlaceholder: '请输入客户端密钥',
|
||||
},
|
||||
delete: '删除 MCP 服务',
|
||||
deleteConfirmTitle: '你想要删除 {{mcp}} 吗?',
|
||||
|
|
|
|||
|
|
@ -88,10 +88,6 @@ export const useCreateMCP = () => {
|
|||
timeout?: number
|
||||
sse_read_timeout?: number
|
||||
headers?: Record<string, string>
|
||||
client_id?: string
|
||||
client_secret?: string
|
||||
grant_type?: string
|
||||
scope?: string
|
||||
}) => {
|
||||
return post<ToolWithProvider>('workspaces/current/tool-provider/mcp', {
|
||||
body: {
|
||||
|
|
@ -119,10 +115,6 @@ export const useUpdateMCP = ({
|
|||
timeout?: number
|
||||
sse_read_timeout?: number
|
||||
headers?: Record<string, string>
|
||||
client_id?: string
|
||||
client_secret?: string
|
||||
grant_type?: string
|
||||
scope?: string
|
||||
}) => {
|
||||
return put('workspaces/current/tool-provider/mcp', {
|
||||
body: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue