fix(web): pass marketplace plugin install state

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(
       <ThemeProvider forcedTheme="dark">
-        <MarketplaceDetailDialog
-          open
-          plugin={plugin}
-          onOpenChange={onOpenChange}
-        />
+        <MarketplaceDetailDialog open isInstalled plugin={plugin} onOpenChange={onOpenChange} />
       </ThemeProvider>,
     )
 
     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' }))

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 (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent
-        className="h-[min(800px,calc(100dvh-48px))] max-h-none! w-[min(1200px,calc(100vw-48px))] max-w-none! overflow-hidden! border-0 p-0 shadow-xl"
-      >
+      <DialogContent className="h-[min(800px,calc(100dvh-48px))] max-h-none! w-[min(1200px,calc(100vw-48px))] max-w-none! overflow-hidden! border-0 p-0 shadow-xl">
         <DialogTitle className="sr-only">
           {pluginLabel}
           {' · '}

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
-    ? (
-        <div role="dialog" aria-label="marketplace detail">
-          <button type="button" onClick={() => onOpenChange(false)}>
-            close detail
-          </button>
-        </div>
-      )
-    : null,
+  }) =>
+    open ? (
+      <div role="dialog" aria-label="marketplace detail" data-installed={isInstalled}>
+        <button type="button" onClick={() => onOpenChange(false)}>
+          close detail
+        </button>
+      </div>
+    ) : 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()

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 = ({
           />
         )}
         <MarketplaceDetailDialog
+          isInstalled={isInstalled}
           open={isShowMarketplaceDetail}
           plugin={plugin}
           onOpenChange={handleMarketplaceDetailOpenChange}