@@ -130,56 +199,13 @@ const NavSelector = ({ curNav, navigationItems, createText, isApp, onCreate, onL
)}
{isApp && isCurrentWorkspaceEditor && (
-
+
)}
diff --git a/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-list.spec.tsx b/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-list.spec.tsx
index e31afc7cb2..ec9a8eeccf 100644
--- a/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-list.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/__tests__/endpoint-list.spec.tsx
@@ -76,6 +76,8 @@ const createPluginDetail = (): PluginDetail => ({
})
describe('EndpointList', () => {
+ const getAddButton = () => screen.getByRole('button', { name: 'plugin.detailPanel.endpointModalTitle' })
+
beforeEach(() => {
vi.clearAllMocks()
mockEndpointListData = { endpoints: mockEndpoints }
@@ -112,7 +114,7 @@ describe('EndpointList', () => {
it('should render add button', () => {
render(
)
- expect(screen.getAllByRole('button').length).toBeGreaterThan(0)
+ expect(getAddButton()).toBeInTheDocument()
})
})
@@ -120,8 +122,7 @@ describe('EndpointList', () => {
it('should show modal when add button clicked', () => {
render(
)
- const addButton = screen.getAllByRole('button')[0]
- fireEvent.click(addButton!)
+ fireEvent.click(getAddButton())
expect(screen.getByTestId('endpoint-modal'))!.toBeInTheDocument()
})
@@ -129,8 +130,7 @@ describe('EndpointList', () => {
it('should hide modal when cancel clicked', () => {
render(
)
- const addButton = screen.getAllByRole('button')[0]
- fireEvent.click(addButton!)
+ fireEvent.click(getAddButton())
expect(screen.getByTestId('endpoint-modal'))!.toBeInTheDocument()
fireEvent.click(screen.getByTestId('modal-cancel'))
@@ -140,8 +140,7 @@ describe('EndpointList', () => {
it('should call createEndpoint when save clicked', () => {
render(
)
- const addButton = screen.getAllByRole('button')[0]
- fireEvent.click(addButton!)
+ fireEvent.click(getAddButton())
fireEvent.click(screen.getByTestId('modal-save'))
expect(mockCreateEndpoint).toHaveBeenCalled()
@@ -176,8 +175,7 @@ describe('EndpointList', () => {
it('should invalidate endpoint list after successful create', () => {
render(
)
- const addButton = screen.getAllByRole('button')[0]
- fireEvent.click(addButton!)
+ fireEvent.click(getAddButton())
fireEvent.click(screen.getByTestId('modal-save'))
expect(mockInvalidateEndpointList).toHaveBeenCalledWith('test-plugin')
@@ -186,8 +184,7 @@ describe('EndpointList', () => {
it('should pass correct params to createEndpoint', () => {
render(
)
- const addButton = screen.getAllByRole('button')[0]
- fireEvent.click(addButton!)
+ fireEvent.click(getAddButton())
fireEvent.click(screen.getByTestId('modal-save'))
expect(mockCreateEndpoint).toHaveBeenCalledWith({
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
index 2d11305f6e..d50ab4c4ea 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
@@ -1,5 +1,6 @@
import type { PluginDetail } from '@/app/components/plugins/types'
import { cn } from '@langgenius/dify-ui/cn'
+import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import { toast } from '@langgenius/dify-ui/toast'
import {
RiAddLine,
@@ -11,7 +12,6 @@ import * as React from 'react'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import ActionButton from '@/app/components/base/action-button'
-import Tooltip from '@/app/components/base/tooltip'
import { toolCredentialToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
import { useDocLink } from '@/context/i18n'
import {
@@ -67,10 +67,23 @@ const EndpointList = ({ detail }: Props) => {
{t('detailPanel.endpoints', { ns: 'plugin' })}
-
+
+
+
+ )}
+ />
+
@@ -80,17 +93,19 @@ const EndpointList = ({ detail }: Props) => {
href={docLink('/develop-plugin/getting-started/getting-started-dify-plugin')}
target="_blank"
rel="noopener noreferrer"
+ className="inline-flex cursor-pointer items-center gap-1 system-xs-regular text-text-accent"
>
-
-
- {t('detailPanel.endpointsDocLink', { ns: 'plugin' })}
-
+
+ {t('detailPanel.endpointsDocLink', { ns: 'plugin' })}
- )}
- />
+
+
-
+
diff --git a/web/app/components/snippets/__tests__/snippet-evaluation-page.spec.tsx b/web/app/components/snippets/__tests__/snippet-evaluation-page.spec.tsx
index 1c30cab2c9..b3962c8792 100644
--- a/web/app/components/snippets/__tests__/snippet-evaluation-page.spec.tsx
+++ b/web/app/components/snippets/__tests__/snippet-evaluation-page.spec.tsx
@@ -1,10 +1,11 @@
import type { SnippetDetailPayload } from '@/models/snippet'
+import type { Snippet } from '@/types/snippet'
import { render, screen } from '@testing-library/react'
import SnippetEvaluationPage from '../snippet-evaluation-page'
const mockUseSnippetApiDetail = vi.fn()
-const mockGetSnippetDetailMock = vi.fn()
const mockSetAppSidebarExpand = vi.fn()
+const mockUseDocumentTitle = vi.fn()
vi.mock('@/service/use-snippets', async (importOriginal) => {
const actual = await importOriginal
()
@@ -34,15 +35,15 @@ vi.mock('@/next/navigation', () => ({
}),
}))
-vi.mock('@/service/use-snippets.mock', () => ({
- getSnippetDetailMock: (snippetId: string) => mockGetSnippetDetailMock(snippetId),
-}))
-
vi.mock('@/hooks/use-breakpoints', () => ({
default: () => 'desktop',
MediaType: { mobile: 'mobile', desktop: 'desktop' },
}))
+vi.mock('@/hooks/use-document-title', () => ({
+ default: (title: string) => mockUseDocumentTitle(title),
+}))
+
vi.mock('@/app/components/app/store', () => ({
useStore: (selector: (state: { setAppSidebarExpand: typeof mockSetAppSidebarExpand }) => unknown) => selector({
setAppSidebarExpand: mockSetAppSidebarExpand,
@@ -101,21 +102,39 @@ const mockSnippetDetail: SnippetDetailPayload = {
},
}
+const mockSnippetApiDetail: Snippet = {
+ id: mockSnippetDetail.snippet.id,
+ name: mockSnippetDetail.snippet.name,
+ description: mockSnippetDetail.snippet.description,
+ type: 'node',
+ version: '1',
+ use_count: 19,
+ icon_info: {
+ icon: mockSnippetDetail.snippet.icon,
+ icon_background: mockSnippetDetail.snippet.iconBackground,
+ icon_type: 'emoji',
+ },
+ input_fields: [],
+ created_at: 1711267200,
+ created_by: 'user-1',
+ updated_at: 1711267200,
+ updated_by: 'user-1',
+ is_published: true,
+}
+
describe('SnippetEvaluationPage', () => {
beforeEach(() => {
vi.clearAllMocks()
mockUseSnippetApiDetail.mockReturnValue({
- data: undefined,
+ data: mockSnippetApiDetail,
isLoading: false,
})
- mockGetSnippetDetailMock.mockReturnValue(mockSnippetDetail)
})
- it('should render evaluation with mock snippet detail data', () => {
+ it('should render evaluation with snippet detail data from api', () => {
render()
- expect(mockGetSnippetDetailMock).toHaveBeenCalledWith('snippet-1')
- expect(mockUseSnippetApiDetail).not.toHaveBeenCalled()
+ expect(mockUseSnippetApiDetail).toHaveBeenCalledWith('snippet-1')
expect(screen.getByTestId('app-sidebar')).toBeInTheDocument()
expect(screen.getByTestId('evaluation')).toHaveTextContent('snippet-1')
})
diff --git a/web/app/components/snippets/snippet-evaluation-page.tsx b/web/app/components/snippets/snippet-evaluation-page.tsx
index f6aeeef335..c0585cef25 100644
--- a/web/app/components/snippets/snippet-evaluation-page.tsx
+++ b/web/app/components/snippets/snippet-evaluation-page.tsx
@@ -1,9 +1,13 @@
'use client'
import { useMemo } from 'react'
+import Loading from '@/app/components/base/loading'
import SnippetAndEvaluationPlanGuard from '@/app/components/billing/snippet-and-evaluation-plan-guard'
import Evaluation from '@/app/components/evaluation'
-import { getSnippetDetailMock } from '@/service/use-snippets.mock'
+import {
+ buildSnippetDetailPayload,
+ useSnippetApiDetail,
+} from '@/service/use-snippets'
import SnippetLayout from './components/snippet-layout'
type SnippetEvaluationPageProps = {
@@ -11,8 +15,21 @@ type SnippetEvaluationPageProps = {
}
const SnippetEvaluationPage = ({ snippetId }: SnippetEvaluationPageProps) => {
- const mockSnippet = useMemo(() => getSnippetDetailMock(snippetId)?.snippet, [snippetId])
- const snippet = mockSnippet
+ const { data, isLoading } = useSnippetApiDetail(snippetId)
+ const snippet = useMemo(() => {
+ if (!data)
+ return undefined
+
+ return buildSnippetDetailPayload(data).snippet
+ }, [data])
+
+ if (isLoading) {
+ return (
+
+
+
+ )
+ }
if (!snippet)
return null
diff --git a/web/app/components/tools/mcp/detail/__tests__/content.spec.tsx b/web/app/components/tools/mcp/detail/__tests__/content.spec.tsx
index c2835c992b..261781f8c0 100644
--- a/web/app/components/tools/mcp/detail/__tests__/content.spec.tsx
+++ b/web/app/components/tools/mcp/detail/__tests__/content.spec.tsx
@@ -12,6 +12,7 @@ const mockAuthorizeMcp = vi.fn().mockResolvedValue({ result: 'success' })
const mockUpdateMCP = vi.fn().mockResolvedValue({ result: 'success' })
const mockDeleteMCP = vi.fn().mockResolvedValue({ result: 'success' })
const mockInvalidateMCPTools = vi.fn()
+const mockInvalidateAllMCPTools = vi.fn()
const mockOpenOAuthPopup = vi.fn()
// Mutable mock state
@@ -33,6 +34,7 @@ vi.mock('@/service/use-tools', () => ({
isFetching: mockIsFetching,
}),
useInvalidateMCPTools: () => mockInvalidateMCPTools,
+ useInvalidateAllMCPTools: () => mockInvalidateAllMCPTools,
useUpdateMCPTools: () => ({
mutateAsync: mockUpdateTools,
isPending: mockIsUpdating,
@@ -180,6 +182,7 @@ describe('MCPDetailContent', () => {
mockUpdateMCP.mockClear()
mockDeleteMCP.mockClear()
mockInvalidateMCPTools.mockClear()
+ mockInvalidateAllMCPTools.mockClear()
mockOpenOAuthPopup.mockClear()
// Reset mock return values
@@ -512,6 +515,7 @@ describe('MCPDetailContent', () => {
await waitFor(() => {
expect(mockUpdateTools).toHaveBeenCalledWith('mcp-1')
expect(mockInvalidateMCPTools).toHaveBeenCalledWith('mcp-1')
+ expect(mockInvalidateAllMCPTools).toHaveBeenCalled()
expect(onUpdate).toHaveBeenCalled()
})
})
@@ -529,6 +533,7 @@ describe('MCPDetailContent', () => {
await waitFor(() => {
expect(mockUpdateTools).toHaveBeenCalledWith('mcp-1')
+ expect(mockInvalidateAllMCPTools).toHaveBeenCalled()
})
})
})
diff --git a/web/app/components/tools/mcp/detail/content.tsx b/web/app/components/tools/mcp/detail/content.tsx
index 35c8a35a6f..c785516eee 100644
--- a/web/app/components/tools/mcp/detail/content.tsx
+++ b/web/app/components/tools/mcp/detail/content.tsx
@@ -26,6 +26,7 @@ import { openOAuthPopup } from '@/hooks/use-oauth'
import {
useAuthorizeMCP,
useDeleteMCP,
+ useInvalidateAllMCPTools,
useInvalidateMCPTools,
useMCPTools,
useUpdateMCP,
@@ -61,6 +62,7 @@ const MCPDetailContent: FC = ({
const { data, isFetching: isGettingTools } = useMCPTools(detail.is_team_authorization ? detail.id : '')
const invalidateMCPTools = useInvalidateMCPTools()
+ const invalidateAllMCPTools = useInvalidateAllMCPTools()
const { mutateAsync: updateTools, isPending: isUpdating } = useUpdateMCPTools()
const { mutateAsync: authorizeMcp, isPending: isAuthorizing } = useAuthorizeMCP()
const toolList = data?.tools || []
@@ -76,8 +78,9 @@ const MCPDetailContent: FC = ({
return
await updateTools(detail.id)
invalidateMCPTools(detail.id)
+ invalidateAllMCPTools()
onUpdate()
- }, [detail, hideUpdateConfirm, invalidateMCPTools, onUpdate, updateTools])
+ }, [detail, hideUpdateConfirm, invalidateAllMCPTools, invalidateMCPTools, onUpdate, updateTools])
const { mutateAsync: updateMCP } = useUpdateMCP({})
const { mutateAsync: deleteMCP } = useDeleteMCP({})
diff --git a/web/app/components/tools/mcp/detail/tool-item.tsx b/web/app/components/tools/mcp/detail/tool-item.tsx
index 4101fa2078..f05890aee2 100644
--- a/web/app/components/tools/mcp/detail/tool-item.tsx
+++ b/web/app/components/tools/mcp/detail/tool-item.tsx
@@ -1,9 +1,9 @@
'use client'
import type { Tool } from '@/app/components/tools/types'
import { cn } from '@langgenius/dify-ui/cn'
+import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
-import Tooltip from '@/app/components/base/tooltip'
import { useLocale } from '@/context/i18n'
import { getLanguage } from '@/i18n-config/language'
@@ -51,25 +51,31 @@ const MCPToolItem = ({
}
return (
-
+
+ {tool.label[language]}
+ {tool.description[language]}
+
+ )}
+ />
+
{tool.label[language]}
{tool.description[language]}
{renderParameters()}
- )}
- >
-
-
{tool.label[language]}
-
{tool.description[language]}
-
-
-
+
+
+
+
+ )}
+ />
+
+ {t('overview.appInfo.regenerate', { ns: 'appOverview' })}
+
)}
@@ -104,13 +114,19 @@ type TriggerModeOverlayProps = {
const TriggerModeOverlay: FC = ({ triggerModeMessage }) => {
if (triggerModeMessage) {
return (
-
-
-
+
+ }
+ />
+
+ {triggerModeMessage}
+
+
)
}
return
@@ -146,12 +162,13 @@ function getTooltipContent({
{t('overview.appInfo.enableTooltip.description', { ns: 'appOverview' })}
- window.open(docLink('/use-dify/nodes/user-input'), '_blank')}
>
{t('overview.appInfo.enableTooltip.learnMore', { ns: 'appOverview' })}
-
+
)
}
@@ -316,16 +333,31 @@ const MCPServiceCard: FC = ({