feat: install from marketplace

web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx

@@ -1,132 +1,73 @@
 'use client'
 
-import React, { useMemo, useState } from 'react'
+import React, { useCallback, useState } from 'react'
-import { RiInformation2Line } from '@remixicon/react'
-import Card from '../../card'
-import { extensionDallE, modelGPT4, toolNotion } from '../../card/card-mock'
 import Modal from '@/app/components/base/modal'
-import Button from '@/app/components/base/button'
+import type { PluginDeclaration } from '../../types'
-import Checkbox from '@/app/components/base/checkbox'
+import { InstallStep } from '../../types'
-import Badge, { BadgeState } from '@/app/components/base/badge/index'
+import Install from './steps/install'
+import Installed from './steps/installed'
+import { useTranslation } from 'react-i18next'
+
+const i18nPrefix = 'plugin.installModal'
 
 type InstallFromMarketplaceProps = {
+  packageId: string
+  manifest: PluginDeclaration
+  onSuccess: () => void
   onClose: () => void
 }
 
-const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({ onClose }) => {
+const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
-  const plugins = useMemo(() => [toolNotion, extensionDallE, modelGPT4], [])
+  packageId,
-  const [selectedPlugins, setSelectedPlugins] = useState<Set<number>>(new Set())
+  manifest,
-  const [isInstalling, setIsInstalling] = useState(false)
+  onSuccess,
-  const [nextStep, setNextStep] = useState(false)
+  onClose,
+}) => {
+  const { t } = useTranslation()
+  // readyToInstall -> check installed -> installed
+  const [step, setStep] = useState<InstallStep>(InstallStep.readyToInstall)
 
-  const mockInstall = async () => {
+  // TODO: check installed in beta version.
-    setIsInstalling(true)
-    await new Promise(resolve => setTimeout(resolve, 1500))
-    setIsInstalling(false)
-  }
 
-  const pluginsToShow = useMemo(() => {
+  const getTitle = useCallback(() => {
-    if (plugins.length === 1 || (nextStep && selectedPlugins.size === 1))
+    if (step === InstallStep.installed)
-      return plugins.length === 1 ? plugins : plugins.filter((_, index) => selectedPlugins.has(index))
+      return t(`${i18nPrefix}.installedSuccessfully`)
+    return t(`${i18nPrefix}.installPlugin`)
+  }, [])
 
-    return nextStep ? plugins.filter((_, index) => selectedPlugins.has(index)) : plugins
+  const handleInstalled = useCallback(async () => {
-  }, [plugins, nextStep, selectedPlugins])
+    setStep(InstallStep.installed)
-
+  }, [])
-  const renderPluginCard = (plugin: any, index: number) => (
-    <Card
-      key={index}
-      installed={nextStep && !isInstalling}
-      payload={plugin}
-      className='w-full'
-      titleLeft={
-        plugin.version === plugin.latest_version
-          ? (
-            <Badge className='mx-1' size="s" state={BadgeState.Default}>{plugin.version}</Badge>
-          )
-          : (
-            <>
-              <Badge className='mx-1' size="s" state={BadgeState.Warning}>
-                {`${plugin.version} -> ${plugin.latest_version}`}
-              </Badge>
-              <div className='flex px-0.5 justify-center items-center gap-0.5'>
-                <div className='text-text-warning system-xs-medium'>Used in 3 apps</div>
-                <RiInformation2Line className='w-4 h-4 text-text-tertiary' />
-              </div>
-            </>
-          )
-      }
-    />
-  )
 
   return (
     <Modal
       isShow={true}
       onClose={onClose}
-      className='flex min-w-[560px] flex-col items-start p-0 rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl'
+      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
     >
       <div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
         <div className='self-stretch text-text-primary title-2xl-semi-bold'>
-          {nextStep ? (isInstalling ? 'Install plugin' : 'Installation successful') : 'Install plugin'}
+          {getTitle()}
         </div>
       </div>
-      <div className='flex px-6 py-3 flex-col justify-center items-start gap-4 self-stretch'>
+      {
-        <div className='flex flex-col items-start gap-2 self-stretch'>
+        step === InstallStep.readyToInstall && (
-          <div className='text-text-secondary system-md-regular'>
+          <Install
-            {(nextStep && !isInstalling)
+            payload={manifest!}
-              ? `The following ${pluginsToShow.length === 1 ? 'plugin has' : `${pluginsToShow.length} plugins have`} been installed successfully`
+            onCancel={onClose}
-              : `About to install the following ${pluginsToShow.length === 1 ? 'plugin' : `${pluginsToShow.length} plugins`}`}
+            onInstalled={handleInstalled}
-          </div>
+          />
-        </div>
+        )
-        <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
+      }
-          {pluginsToShow.map((plugin, index) => (
+      {
-            <div key={index} className={`flex ${(plugins.length > 1 && !nextStep) ? 'pl-1 items-center gap-2' : ''} flex-grow`}>
+        step === InstallStep.installed && (
-              {(plugins.length > 1 && !nextStep) && (
+          <Installed
-                <Checkbox
+            payload={manifest!}
-                  checked={selectedPlugins.has(index)}
+            onCancel={onSuccess}
-                  onCheck={() => {
+          />
-                    const newSelectedPlugins = new Set(selectedPlugins)
+        )
-                    newSelectedPlugins.has(index) ? newSelectedPlugins.delete(index) : newSelectedPlugins.add(index)
+      }
-                    setSelectedPlugins(newSelectedPlugins)
-                  }}
-                />
-              )}
-              {renderPluginCard(plugin, index)}
-            </div>
-          ))}
-        </div>
-      </div>
-      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
-        {nextStep
-          ? (
-            <Button
-              variant='primary'
-              disabled={isInstalling}
-              loading={isInstalling}
-              onClick={onClose}
-            >
-              {isInstalling ? 'Installing...' : 'Close'}
-            </Button>
-          )
-          : (
-            <>
-              <Button variant='secondary' className='min-w-[72px]' onClick={onClose}>
-                Cancel
-              </Button>
-              <Button
-                variant='primary'
-                className='min-w-[72px]'
-                disabled={plugins.length > 1 && selectedPlugins.size < 1}
-                onClick={() => {
-                  setNextStep(true)
-                  mockInstall()
-                }}
-              >
-                Install
-              </Button>
-            </>
-          )}
-      </div>
     </Modal>
   )
 }

web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx

@@ -1,13 +1,15 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useMemo } from 'react'
+import { RiInformation2Line } from '@remixicon/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 { useTranslation } from 'react-i18next'
 import { RiLoader2Line } from '@remixicon/react'
+import Badge, { BadgeState } from '@/app/components/base/badge/index'
 
 const i18nPrefix = 'plugin.installModal'
 
@@ -32,22 +34,40 @@ const Installed: FC<Props> = ({
     onInstalled()
   }
 
+  const toInstallVersion = '1.3.0'
+  const supportCheckInstalled = false // TODO: check installed in beta version.
+
+  const versionInfo = useMemo(() => {
+    return (<>{
+      payload.version === toInstallVersion || !supportCheckInstalled
+        ? (
+          <Badge className='mx-1' size="s" state={BadgeState.Default}>{payload.version}</Badge>
+        )
+        : (
+          <>
+            <Badge className='mx-1' size="s" state={BadgeState.Warning}>
+              {`${payload.version} -> ${toInstallVersion}`}
+            </Badge>
+            <div className='flex px-0.5 justify-center items-center gap-0.5'>
+              <div className='text-text-warning system-xs-medium'>Used in 3 apps</div>
+              <RiInformation2Line className='w-4 h-4 text-text-tertiary' />
+            </div>
+          </>
+        )
+    }</>)
+  }, [payload])
+
   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)}
+            titleLeft={versionInfo}
           />
         </div>
       </div>

web/app/components/plugins/plugin-page/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   RiDragDropLine,
@@ -29,6 +29,9 @@ import {
   useRouter,
   useSearchParams,
 } from 'next/navigation'
+import type { PluginDeclaration } from '../types'
+import { toolNotionManifest } from '../card/card-mock'
+import { sleep } from '@/utils'
 
 const PACKAGE_IDS_KEY = 'package-ids'
 
@@ -54,7 +57,28 @@ const PluginPage = ({
       return ''
     }
   }, [searchParams])
-  const isInstallPackage = !!packageId
+  const [isShowInstallFromMarketplace, {
+    setTrue: showInstallFromMarketplace,
+    setFalse: doHideInstallFromMarketplace,
+  }] = useBoolean(false)
+
+  const hideInstallFromMarketplace = () => {
+    doHideInstallFromMarketplace()
+    const url = new URL(window.location.href)
+    url.searchParams.delete(PACKAGE_IDS_KEY)
+    replace(url.toString())
+  }
+  const [manifest, setManifest] = useState<PluginDeclaration | null>(null)
+
+  useEffect(() => {
+    (async () => {
+      await sleep(100)
+      if (packageId) {
+        setManifest(toolNotionManifest)
+        showInstallFromMarketplace()
+      }
+    })()
+  }, [packageId])
 
   const {
     canManagement,
@@ -94,18 +118,6 @@ 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}
@@ -216,7 +228,10 @@ const PluginPage = ({
       {
         isShowInstallFromMarketplace && (
           <InstallFromMarketplace
+            manifest={manifest!}
+            packageId={packageId}
             onClose={hideInstallFromMarketplace}
+            onSuccess={hideInstallFromMarketplace}
           />
         )
       }