From af311432eca2ba2e97da73261bbef8266b046552 Mon Sep 17 00:00:00 2001
From: jZonG <jzongcode@gmail.com>
Date: Thu, 8 May 2025 17:07:36 +0800
Subject: [PATCH] detail header

---
 .../components/tools/mcp/detail/content.tsx   | 89 +++++++++++++++++++
 .../mcp/{ => detail}/provider-detail.tsx      | 14 +--
 web/app/components/tools/mcp/index.tsx        |  2 +-
 web/app/components/tools/mcp/mock.ts          |  6 +-
 .../components/tools/mcp/provider-card.tsx    |  4 +-
 5 files changed, 103 insertions(+), 12 deletions(-)
 create mode 100644 web/app/components/tools/mcp/detail/content.tsx
 rename web/app/components/tools/mcp/{ => detail}/provider-detail.tsx (79%)

diff --git a/web/app/components/tools/mcp/detail/content.tsx b/web/app/components/tools/mcp/detail/content.tsx
new file mode 100644
index 0000000000..5ae9370b2f
--- /dev/null
+++ b/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
diff --git a/web/app/components/tools/mcp/provider-detail.tsx b/web/app/components/tools/mcp/detail/provider-detail.tsx
similarity index 79%
rename from web/app/components/tools/mcp/provider-detail.tsx
rename to web/app/components/tools/mcp/detail/provider-detail.tsx
index 849736b7aa..effb2363c9 100644
--- a/web/app/components/tools/mcp/provider-detail.tsx
+++ b/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 && (
-        <>
-          <div>HEADER</div>
-          <div className='grow overflow-y-auto'>
-            TOOL list
-          </div>
-        </>
+        <MCPDetailContent
+          detail={detail}
+          onHide={onHide}
+          onUpdate={handleUpdate}
+        />
       )}
     </Drawer>
   )
diff --git a/web/app/components/tools/mcp/index.tsx b/web/app/components/tools/mcp/index.tsx
index 2fe9c86fa6..be8421e2f0 100644
--- a/web/app/components/tools/mcp/index.tsx
+++ b/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'
diff --git a/web/app/components/tools/mcp/mock.ts b/web/app/components/tools/mcp/mock.ts
index 341061c44e..f271f67ed3 100644
--- a/web/app/components/tools/mcp/mock.ts
+++ b/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,
diff --git a/web/app/components/tools/mcp/provider-card.tsx b/web/app/components/tools/mcp/provider-card.tsx
index 53d387eb70..0ca5e3e205 100644
--- a/web/app/components/tools/mcp/provider-card.tsx
+++ b/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'>