From 000db07d29f249ab1bd33d853c49d8701fc7e626 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 21 Nov 2024 11:16:05 +0800
Subject: [PATCH] feat: in tool install plugin

---
 .../install-from-marketplace/index.tsx          |  1 +
 .../market-place-plugin/action.tsx              |  2 +-
 .../block-selector/market-place-plugin/item.tsx | 17 +++++++++++++++--
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
index b721a84454..ad5b596b73 100644
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
@@ -52,6 +52,7 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
     <Modal
       isShow={true}
       onClose={onClose}
+      wrapperClassName='z-[9999]'
       className='flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl'
       closable
     >
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
index d77ea248fe..65d8877819 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
@@ -47,7 +47,7 @@ const OperationDropdown: FC<Props> = ({
           <RiMoreFill className='w-4 h-4 text-components-button-secondary-accent-text' />
         </ActionButton>
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='z-50'>
+      <PortalToFollowElemContent className='z-[9999]'>
         <div className='w-[112px] p-1 bg-components-panel-bg-blur rounded-xl border-[0.5px] border-components-panel-border shadow-lg'>
           <div className='px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover'>{t('common.operation.download')}</div>
           {/* Wait marketplace */}
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/item.tsx b/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
index d257533d62..628b437d3e 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
@@ -5,10 +5,12 @@ import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import Action from './action'
 import type { Plugin } from '@/app/components/plugins/types.ts'
+import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
 import I18n from '@/context/i18n'
 import cn from '@/utils/classnames'
 
 import { formatNumber } from '@/utils/format'
+import { useBoolean } from 'ahooks'
 
 enum ActionType {
   install = 'install',
@@ -28,6 +30,10 @@ const Item: FC<Props> = ({
   const { locale } = useContext(I18n)
   const getLocalizedText = (obj: Record<string, string> | undefined) =>
     obj?.[locale] || obj?.['en-US'] || obj?.en_US || ''
+  const [isShowInstallModal, {
+    setTrue: showInstallModal,
+    setFalse: hideInstallModal,
+  }] = useBoolean(false)
 
   return (
     <div className='group/plugin flex rounded-lg py-1 pr-1 pl-3 hover:bg-state-base-hover'>
@@ -47,14 +53,21 @@ const Item: FC<Props> = ({
         </div>
         {/* Action */}
         <div className={cn(!open ? 'hidden' : 'flex', 'group-hover/plugin:flex  items-center space-x-1 h-4 text-components-button-secondary-accent-text system-xs-medium')}>
-          <div className='px-1.5'>{t('plugin.installAction')}</div>
+          <div className='px-1.5 cursor-pointer' onClick={showInstallModal}>{t('plugin.installAction')}</div>
           <Action
             open={open}
             onOpenChange={setOpen}
           />
         </div>
+        {isShowInstallModal && (
+          <InstallFromMarketplace
+            uniqueIdentifier={payload.latest_package_identifier}
+            manifest={payload}
+            onSuccess={hideInstallModal}
+            onClose={hideInstallModal}
+          />
+        )}
       </div>
-
     </div>
   )
 }