detail header

web/app/components/tools/mcp/detail/content.tsx

@@ -0,0 +1,89 @@
+'use client'
+import React from 'react'
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAppContext } from '@/context/app-context'
+import {
+  RiCloseLine,
+} from '@remixicon/react'
+import type { ToolWithProvider } from '../../../workflow/types'
+import Icon from '@/app/components/plugins/card/base/card-icon'
+import ActionButton from '@/app/components/base/action-button'
+import Button from '@/app/components/base/button'
+// import Toast from '@/app/components/base/toast'
+import Indicator from '@/app/components/header/indicator'
+import cn from '@/utils/classnames'
+
+type Props = {
+  detail?: ToolWithProvider
+  onUpdate: () => void
+  onHide: () => void
+}
+
+const MCPDetailContent: FC<Props> = ({
+  detail,
+  // onUpdate,
+  onHide,
+}) => {
+  const { t } = useTranslation()
+  const { isCurrentWorkspaceManager } = useAppContext()
+
+  if (!detail)
+    return null
+
+  return (
+    <>
+      <div className={cn('shrink-0 border-b border-divider-subtle bg-components-panel-bg p-4 pb-3')}>
+        <div className='flex'>
+          <div className='shrink-0 overflow-hidden rounded-xl border border-components-panel-border-subtle'>
+            <Icon src={detail.icon} />
+          </div>
+          <div className='ml-3 w-0 grow'>
+            <div className='flex h-5 items-center'>
+              <div className='system-md-semibold truncate text-text-primary' title={detail.name}>{detail.name}</div>
+            </div>
+            <div className='system-xs-regular mt-0.5 truncate text-text-tertiary' title={detail.server_url}>{detail.server_url}</div>
+          </div>
+          <div className='flex gap-1'>
+            {/* <OperationDropdown
+              source={detail.source}
+              onInfo={showPluginInfo}
+              onCheckVersion={handleUpdate}
+              onRemove={showDeleteConfirm}
+              detailUrl={detailUrl}
+            /> */}
+            <ActionButton onClick={onHide}>
+              <RiCloseLine className='h-4 w-4' />
+            </ActionButton>
+          </div>
+        </div>
+        <div className='mt-5'>
+          {detail.is_team_authorization && (
+            <Button
+              variant='secondary'
+              className='w-full'
+              // onClick={() => setShowSettingAuth(true)}
+              disabled={!isCurrentWorkspaceManager}
+            >
+              <Indicator className='mr-2' color={'green'} />
+              {t('tools.auth.authorized')}
+            </Button>
+          )}
+          {detail.is_team_authorization && (
+            <Button
+              variant='primary'
+              className='w-full'
+              // onClick={() => setShowSettingAuth(true)}
+              disabled={!isCurrentWorkspaceManager}
+            >{t('tools.auth.unauthorized')}</Button>
+          )}
+        </div>
+      </div>
+      <div className='grow overflow-y-auto'>
+        TOOL list
+      </div>
+    </>
+  )
+}
+
+export default MCPDetailContent

web/app/components/tools/mcp/detail/provider-detail.tsx

@@ -2,8 +2,9 @@
 import React from 'react'
 import type { FC } from 'react'
 import Drawer from '@/app/components/base/drawer'
+import MCPDetailContent from './content'
+import type { ToolWithProvider } from '../../../workflow/types'
 import cn from '@/utils/classnames'
-import type { ToolWithProvider } from '../../workflow/types'
 
 type Props = {
   detail?: ToolWithProvider
@@ -36,12 +37,11 @@ const MCPDetailPanel: FC<Props> = ({
       panelClassName={cn('mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl')}
     >
       {detail && (
-        <>
+        <MCPDetailContent
-          <div>HEADER</div>
+          detail={detail}
-          <div className='grow overflow-y-auto'>
+          onHide={onHide}
-            TOOL list
+          onUpdate={handleUpdate}
-          </div>
+        />
-        </>
       )}
     </Drawer>
   )

web/app/components/tools/mcp/index.tsx

@@ -2,7 +2,7 @@
 import { useMemo, useState } from 'react'
 import NewMCPCard from './create-card'
 import MCPCard from './provider-card'
-import MCPDetailPanel from './provider-detail'
+import MCPDetailPanel from './detail/provider-detail'
 import { useAllMCPTools, useInvalidateAllMCPTools } from '@/service/use-tools'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'

web/app/components/tools/mcp/mock.ts

@@ -110,7 +110,7 @@ export const listData = [
     id: 'fdjklajfkljadslf111',
     author: 'KVOJJJin',
     name: 'GOGOGO',
-    icon: 'https://cloud.dify.dev/console/api/workspaces/694cc430-fa36-4458-86a0-4a98c09c4684/model-providers/langgenius/openai/openai/icon_large/en_US',
+    icon: 'https://cloud.dify.dev/console/api/workspaces/694cc430-fa36-4458-86a0-4a98c09c4684/model-providers/langgenius/openai/openai/icon_small/en_US',
     server_url: 'https://mcp.composio.dev/notion/****/abc',
     type: 'mcp',
     is_team_authorization: true,
@@ -125,7 +125,7 @@ export const listData = [
     id: 'fdjklajfkljadslf222',
     author: 'KVOJJJin',
     name: 'GOGOGO2',
-    icon: 'https://cloud.dify.dev/console/api/workspaces/694cc430-fa36-4458-86a0-4a98c09c4684/model-providers/langgenius/openai/openai/icon_large/en_US',
+    icon: 'https://cloud.dify.dev/console/api/workspaces/694cc430-fa36-4458-86a0-4a98c09c4684/model-providers/langgenius/openai/openai/icon_small/en_US',
     server_url: 'https://mcp.composio.dev/notion/****/abc',
     type: 'mcp',
     is_team_authorization: false,
@@ -140,7 +140,7 @@ export const listData = [
     id: 'fdjklajfkljadslf333',
     author: 'KVOJJJin',
     name: 'GOGOGO3',
-    icon: 'https://cloud.dify.dev/console/api/workspaces/694cc430-fa36-4458-86a0-4a98c09c4684/model-providers/langgenius/openai/openai/icon_large/en_US',
+    icon: 'https://cloud.dify.dev/console/api/workspaces/694cc430-fa36-4458-86a0-4a98c09c4684/model-providers/langgenius/openai/openai/icon_small/en_US',
     server_url: 'https://mcp.composio.dev/notion/****/abc',
     type: 'mcp',
     is_team_authorization: true,

web/app/components/tools/mcp/provider-card.tsx

@@ -38,7 +38,9 @@ const MCPCard = ({
       )}
     >
       <div className='group flex grow items-center gap-3 rounded-t-xl p-4'>
-        <Icon className='shrink-0' src={data.icon} />
+        <div className='shrink-0 overflow-hidden rounded-xl border border-components-panel-border-subtle'>
+          <Icon src={data.icon} />
+        </div>
         <div className='grow'>
           <div className='system-md-semibold mb-1 truncate text-text-secondary' title={data.name}>{data.name}</div>
           <div className='flex items-center gap-2'>