From d6ebd4ec2b025428aba8bac68e4b5d82e508fdd7 Mon Sep 17 00:00:00 2001 From: CodingOnStar Date: Thu, 30 Jul 2026 14:48:02 +0800 Subject: [PATCH] fix(web): pass marketplace plugin install state --- .../detail-dialog/__tests__/index.spec.tsx | 13 ++++------ .../marketplace/detail-dialog/index.tsx | 17 +++++------- .../list/__tests__/card-wrapper.spec.tsx | 26 +++++++++++-------- .../plugins/marketplace/list/card-wrapper.tsx | 7 +++-- 4 files changed, 29 insertions(+), 34 deletions(-) diff --git a/web/app/components/plugins/marketplace/detail-dialog/__tests__/index.spec.tsx b/web/app/components/plugins/marketplace/detail-dialog/__tests__/index.spec.tsx index 8fca36fccb8..90b42331d8b 100644 --- a/web/app/components/plugins/marketplace/detail-dialog/__tests__/index.spec.tsx +++ b/web/app/components/plugins/marketplace/detail-dialog/__tests__/index.spec.tsx @@ -9,8 +9,9 @@ import MarketplaceDetailDialog from '../index' vi.mock('../../utils', () => ({ getPluginLinkInMarketplace: ( plugin: Plugin, - params: { language: string; source?: string; theme?: string; view: string }, - ) => `about:blank?plugin=${plugin.org}/${plugin.name}&language=${params.language}&source=${params.source}&theme=${params.theme}&view=${params.view}`, + params: { installed: string; language: string; source?: string; theme?: string; view: string }, + ) => + `about:blank?plugin=${plugin.org}/${plugin.name}&installed=${params.installed}&language=${params.language}&source=${params.source}&theme=${params.theme}&view=${params.view}`, })) const plugin = { @@ -44,18 +45,14 @@ describe('MarketplaceDetailDialog', () => { render( - + , ) const frame = screen.getByTitle('Plugin A · plugin.detailPanel.operation.detail') expect(frame).toHaveAttribute( 'src', - 'about:blank?plugin=dify/plugin-a&language=en-US&source=http://localhost:3000&theme=system&view=modal', + 'about:blank?plugin=dify/plugin-a&installed=true&language=en-US&source=http://localhost:3000&theme=system&view=modal', ) await user.click(screen.getByRole('button', { name: 'common.operation.close' })) diff --git a/web/app/components/plugins/marketplace/detail-dialog/index.tsx b/web/app/components/plugins/marketplace/detail-dialog/index.tsx index 18068318b93..039fe032243 100644 --- a/web/app/components/plugins/marketplace/detail-dialog/index.tsx +++ b/web/app/components/plugins/marketplace/detail-dialog/index.tsx @@ -2,24 +2,21 @@ import type { Plugin } from '@/app/components/plugins/types' import { cn } from '@langgenius/dify-ui/cn' -import { - Dialog, - DialogCloseButton, - DialogContent, - DialogTitle, -} from '@langgenius/dify-ui/dialog' +import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog' import { useTheme } from 'next-themes' import { useState } from 'react' import { useLocale, useTranslation } from '#i18n' import { getPluginLinkInMarketplace } from '../utils' type MarketplaceDetailDialogProps = { + isInstalled: boolean open: boolean plugin: Plugin onOpenChange: (open: boolean) => void } function MarketplaceDetailDialog({ + isInstalled, open, plugin, onOpenChange, @@ -31,6 +28,7 @@ function MarketplaceDetailDialog({ const pluginLabel = plugin.label[locale] ?? plugin.label['en-US'] ?? plugin.name const detailLabel = t(($) => $['detailPanel.operation.detail'], { ns: 'plugin' }) const detailURL = getPluginLinkInMarketplace(plugin, { + installed: String(isInstalled), language: locale, source: globalThis.location?.origin, theme, @@ -38,16 +36,13 @@ function MarketplaceDetailDialog({ }) const handleOpenChange = (nextOpen: boolean) => { - if (!nextOpen) - setIsLoading(true) + if (!nextOpen) setIsLoading(true) onOpenChange(nextOpen) } return ( - + {pluginLabel} {' · '} diff --git a/web/app/components/plugins/marketplace/list/__tests__/card-wrapper.spec.tsx b/web/app/components/plugins/marketplace/list/__tests__/card-wrapper.spec.tsx index af22694e1c1..6c267825032 100644 --- a/web/app/components/plugins/marketplace/list/__tests__/card-wrapper.spec.tsx +++ b/web/app/components/plugins/marketplace/list/__tests__/card-wrapper.spec.tsx @@ -47,20 +47,21 @@ vi.mock('@/app/components/plugins/install-plugin/hooks/use-plugin-install-permis vi.mock('../../detail-dialog', () => ({ default: ({ + isInstalled, open, onOpenChange, }: { + isInstalled: boolean open: boolean onOpenChange: (open: boolean) => void - }) => open - ? ( -
- -
- ) - : null, + }) => + open ? ( +
+ +
+ ) : null, })) vi.mock('../../utils', () => ({ @@ -140,10 +141,13 @@ describe('CardWrapper', () => { it('opens and closes marketplace detail dialog from the detail action', async () => { const user = userEvent.setup() - renderCardWrapper({ showInstallButton: true }) + renderCardWrapper({ showInstallButton: true, isInstalled: true }) await user.click(screen.getByRole('button', { name: 'plugin.detailPanel.operation.detail' })) - expect(screen.getByRole('dialog', { name: 'marketplace detail' })).toBeInTheDocument() + expect(screen.getByRole('dialog', { name: 'marketplace detail' })).toHaveAttribute( + 'data-installed', + 'true', + ) await user.click(screen.getByRole('button', { name: 'close detail' })) expect(screen.queryByRole('dialog', { name: 'marketplace detail' })).not.toBeInTheDocument() diff --git a/web/app/components/plugins/marketplace/list/card-wrapper.tsx b/web/app/components/plugins/marketplace/list/card-wrapper.tsx index 4c36b226bd9..face9077e8c 100644 --- a/web/app/components/plugins/marketplace/list/card-wrapper.tsx +++ b/web/app/components/plugins/marketplace/list/card-wrapper.tsx @@ -44,10 +44,8 @@ const CardWrapperComponent = ({ [plugin.tags, getTagLabel], ) const handleMarketplaceDetailOpenChange = (open: boolean) => { - if (open) - showMarketplaceDetail() - else - hideMarketplaceDetail() + if (open) showMarketplaceDetail() + else hideMarketplaceDetail() } const showInstallAction = !!showInstallButton && canInstallPlugin @@ -93,6 +91,7 @@ const CardWrapperComponent = ({ /> )}