From c46b5f2fd00a0b689394788bbb7dc8173333ce1d Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 23 Oct 2024 15:26:31 +0800
Subject: [PATCH] feat: handle install search params and hide

---
 .../steps/install.tsx                         | 74 +++++++++++++++++++
 .../steps/installed.tsx                       | 46 ++++++++++++
 .../components/plugins/plugin-page/index.tsx  | 42 +++++++++++
 3 files changed, 162 insertions(+)
 create mode 100644 web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
 create mode 100644 web/app/components/plugins/install-plugin/install-from-marketplace/steps/installed.tsx

diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
new file mode 100644
index 0000000000..5067dff908
--- /dev/null
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
@@ -0,0 +1,74 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { PluginDeclaration } from '../../../types'
+import Card from '../../../card'
+import { pluginManifestToCardPluginProps } from '../../utils'
+import Button from '@/app/components/base/button'
+import { sleep } from '@/utils'
+import { Trans, useTranslation } from 'react-i18next'
+import { RiLoader2Line } from '@remixicon/react'
+
+const i18nPrefix = 'plugin.installModal'
+
+type Props = {
+  payload: PluginDeclaration
+  onCancel: () => void
+  onInstalled: () => void
+}
+
+const Installed: FC<Props> = ({
+  payload,
+  onCancel,
+  onInstalled,
+}) => {
+  const { t } = useTranslation()
+  const [isInstalling, setIsInstalling] = React.useState(false)
+
+  const handleInstall = async () => {
+    if (isInstalling) return
+    setIsInstalling(true)
+    await sleep(1500)
+    onInstalled()
+  }
+
+  return (
+    <>
+      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
+        <div className='text-text-secondary system-md-regular'>
+          <p>{t(`${i18nPrefix}.readyToInstall`)}</p>
+          <p>
+            <Trans
+              i18nKey={`${i18nPrefix}.fromTrustSource`}
+              components={{ trustSource: <span className='system-md-semibold' /> }}
+            />
+          </p>
+        </div>
+        <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
+          <Card
+            className='w-full'
+            payload={pluginManifestToCardPluginProps(payload)}
+          />
+        </div>
+      </div>
+      {/* Action Buttons */}
+      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+        {!isInstalling && (
+          <Button variant='secondary' className='min-w-[72px]' onClick={onCancel}>
+            {t('common.operation.cancel')}
+          </Button>
+        )}
+        <Button
+          variant='primary'
+          className='min-w-[72px] flex space-x-0.5'
+          disabled={isInstalling}
+          onClick={handleInstall}
+        >
+          {isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
+          <span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
+        </Button>
+      </div>
+    </>
+  )
+}
+export default React.memo(Installed)
diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/installed.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/installed.tsx
new file mode 100644
index 0000000000..34fad51691
--- /dev/null
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/installed.tsx
@@ -0,0 +1,46 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { PluginDeclaration } from '../../../types'
+import Card from '../../../card'
+import Button from '@/app/components/base/button'
+import { pluginManifestToCardPluginProps } from '../../utils'
+import { useTranslation } from 'react-i18next'
+
+type Props = {
+  payload: PluginDeclaration
+  onCancel: () => void
+
+}
+
+const Installed: FC<Props> = ({
+  payload,
+  onCancel,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <>
+      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
+        <p className='text-text-secondary system-md-regular'>The plugin has been installed successfully.</p>
+        <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
+          <Card
+            className='w-full'
+            payload={pluginManifestToCardPluginProps(payload)}
+            installed
+          />
+        </div>
+      </div>
+      {/* Action Buttons */}
+      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+        <Button
+          variant='primary'
+          className='min-w-[72px]'
+          onClick={onCancel}
+        >
+          {t('common.operation.close')}
+        </Button>
+      </div>
+    </>
+  )
+}
+export default React.memo(Installed)
diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx
index 7ec7dbfae8..6c73f0c6ee 100644
--- a/web/app/components/plugins/plugin-page/index.tsx
+++ b/web/app/components/plugins/plugin-page/index.tsx
@@ -24,6 +24,13 @@ import Tooltip from '@/app/components/base/tooltip'
 import cn from '@/utils/classnames'
 import PermissionSetModal from '@/app/components/plugins/permission-setting-modal/modal'
 import { useSelector as useAppContextSelector } from '@/context/app-context'
+import InstallFromMarketplace from '../install-plugin/install-from-marketplace'
+import {
+  useRouter,
+  useSearchParams,
+} from 'next/navigation'
+
+const PACKAGE_IDS_KEY = 'package-ids'
 
 export type PluginPageProps = {
   plugins: React.ReactNode
@@ -34,6 +41,21 @@ const PluginPage = ({
   marketplace,
 }: PluginPageProps) => {
   const { t } = useTranslation()
+  const searchParams = useSearchParams()
+  const { replace } = useRouter()
+
+  // just support install one package now
+  const packageId = useMemo(() => {
+    const idStrings = searchParams.get(PACKAGE_IDS_KEY)
+    try {
+      return idStrings ? JSON.parse(idStrings)[0] : ''
+    }
+    catch (e) {
+      return ''
+    }
+  }, [searchParams])
+  const isInstallPackage = !!packageId
+
   const {
     canManagement,
     canDebugger,
@@ -72,6 +94,18 @@ const PluginPage = ({
 
   const { dragging, fileUploader, fileChangeHandle, removeFile } = uploaderProps
 
+  const [isShowInstallFromMarketplace, {
+    setTrue: showInstallFromMarketplace,
+    setFalse: doHideInstallFromMarketplace,
+  }] = useBoolean(isInstallPackage)
+
+  const hideInstallFromMarketplace = () => {
+    doHideInstallFromMarketplace()
+    const url = new URL(window.location.href)
+    url.searchParams.delete(PACKAGE_IDS_KEY)
+    replace(url.toString())
+  }
+
   return (
     <div
       ref={containerRef}
@@ -178,6 +212,14 @@ const PluginPage = ({
           onSave={setPermissions}
         />
       )}
+
+      {
+        isShowInstallFromMarketplace && (
+          <InstallFromMarketplace
+            onClose={hideInstallFromMarketplace}
+          />
+        )
+      }
     </div>
   )
 }