From 2cb7b73ee77ede83657b1e33d33b0ae984b5d5ad Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 23 Oct 2024 15:00:31 +0800
Subject: [PATCH] feat: handle import from marketplace

---
 .../components/plugins/plugin-page/index.tsx    |  4 +++-
 .../plugin-page/install-plugin-dropdown.tsx     | 17 ++++++++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx
index 598c2d7015..7ec7dbfae8 100644
--- a/web/app/components/plugins/plugin-page/index.tsx
+++ b/web/app/components/plugins/plugin-page/index.tsx
@@ -111,7 +111,9 @@ const PluginPage = ({
               </Button>
             </div>
             {canManagement && (
-              <InstallPluginDropdown />
+              <InstallPluginDropdown
+                onSwitchToMarketplaceTab={() => setActiveTab('discover')}
+              />
             )}
             {
               canDebugger && (
diff --git a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
index cd682f42b7..7a20d5b43e 100644
--- a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
+++ b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
@@ -6,7 +6,6 @@ import Button from '@/app/components/base/button'
 import { MagicBox } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 import { FileZip } from '@/app/components/base/icons/src/vender/solid/files'
 import { Github } from '@/app/components/base/icons/src/vender/solid/general'
-import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
 import InstallFromGitHub from '@/app/components/plugins/install-plugin/install-from-github'
 import InstallFromLocalPackage from '@/app/components/plugins/install-plugin/install-from-local-package'
 import cn from '@/utils/classnames'
@@ -17,7 +16,12 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import { useSelector as useAppContextSelector } from '@/context/app-context'
 
-const InstallPluginDropdown = () => {
+type Props = {
+  onSwitchToMarketplaceTab: () => void
+}
+const InstallPluginDropdown = ({
+  onSwitchToMarketplaceTab,
+}: Props) => {
   const fileInputRef = useRef<HTMLInputElement>(null)
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [selectedAction, setSelectedAction] = useState<string | null>(null)
@@ -53,7 +57,7 @@ const InstallPluginDropdown = () => {
         <PortalToFollowElemContent className='z-[1002]'>
           <div className='flex flex-col p-1 pb-2 items-start w-[200px] bg-components-panel-bg-blur border border-components-panel-border rounded-xl shadows-shadow-lg'>
             <span className='flex pt-1 pb-0.5 pl-2 pr-3 items-start self-stretch text-text-tertiary system-xs-medium-uppercase'>
-              Install Form
+              Install From
             </span>
             <input
               type='file'
@@ -65,7 +69,7 @@ const InstallPluginDropdown = () => {
             <div className='p-1 w-full'>
               {[
                 ...(
-                  enable_marketplace
+                  (enable_marketplace || true)
                     ? [{ icon: MagicBox, text: 'Marketplace', action: 'marketplace' }]
                     : []
                 ),
@@ -79,6 +83,10 @@ const InstallPluginDropdown = () => {
                     if (action === 'local') {
                       fileInputRef.current?.click()
                     }
+                    else if (action === 'marketplace') {
+                      onSwitchToMarketplaceTab()
+                      setIsMenuOpen(false)
+                    }
                     else {
                       setSelectedAction(action)
                       setIsMenuOpen(false)
@@ -93,7 +101,6 @@ const InstallPluginDropdown = () => {
           </div>
         </PortalToFollowElemContent>
       </div>
-      {selectedAction === 'marketplace' && <InstallFromMarketplace onClose={() => setSelectedAction(null)} />}
       {selectedAction === 'github' && <InstallFromGitHub onClose={() => setSelectedAction(null)} />}
       {selectedAction === 'local' && selectedFile
         && (<InstallFromLocalPackage