feat: install from marketplace

2024-10-23 16:42:24 +08:00 · 2024-10-23 16:42:24 +08:00 · ae2c76bda2
commit ae2c76bda2
parent c46b5f2fd0
3 changed files with 105 additions and 129 deletions
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
@ -1,132 +1,73 @@
 'use client'

-import React, { useMemo, useState } from 'react'
-import { RiInformation2Line } from '@remixicon/react'
-import Card from '../../card'
-import { extensionDallE, modelGPT4, toolNotion } from '../../card/card-mock'
+import React, { useCallback, useState } from 'react'
 import Modal from '@/app/components/base/modal'
-import Button from '@/app/components/base/button'
-import Checkbox from '@/app/components/base/checkbox'
-import Badge, { BadgeState } from '@/app/components/base/badge/index'
+import type { PluginDeclaration } from '../../types'
+import { InstallStep } from '../../types'
+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 plugins = useMemo(() => [toolNotion, extensionDallE, modelGPT4], [])
-  const [selectedPlugins, setSelectedPlugins] = useState<Set<number>>(new Set())
-  const [isInstalling, setIsInstalling] = useState(false)
-  const [nextStep, setNextStep] = useState(false)
+const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
+  packageId,
+  manifest,
+  onSuccess,
+  onClose,
+}) => {
+  const { t } = useTranslation()
+  // readyToInstall -> check installed -> installed
+  const [step, setStep] = useState<InstallStep>(InstallStep.readyToInstall)

-  const mockInstall = async () => {
-    setIsInstalling(true)
-    await new Promise(resolve => setTimeout(resolve, 1500))
-    setIsInstalling(false)
-  }
+  // TODO: check installed in beta version.

-  const pluginsToShow = useMemo(() => {
-    if (plugins.length === 1 || (nextStep && selectedPlugins.size === 1))
-      return plugins.length === 1 ? plugins : plugins.filter((_, index) => selectedPlugins.has(index))
+  const getTitle = useCallback(() => {
+    if (step === InstallStep.installed)
+      return t(`${i18nPrefix}.installedSuccessfully`)
+    return t(`${i18nPrefix}.installPlugin`)
+  }, [])

-    return nextStep ? plugins.filter((_, index) => selectedPlugins.has(index)) : plugins
-  }, [plugins, nextStep, selectedPlugins])
-
-  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>
-            </>
-          )
-      }
-    />
-  )
+  const handleInstalled = useCallback(async () => {
+    setStep(InstallStep.installed)
+  }, [])

  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'>
-          <div className='text-text-secondary system-md-regular'>
-            {(nextStep && !isInstalling)
-              ? `The following ${pluginsToShow.length === 1 ? 'plugin has' : `${pluginsToShow.length} plugins have`} been installed successfully`
-              : `About to install the following ${pluginsToShow.length === 1 ? 'plugin' : `${pluginsToShow.length} plugins`}`}
-          </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`}>
-              {(plugins.length > 1 && !nextStep) && (
-                <Checkbox
-                  checked={selectedPlugins.has(index)}
-                  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>
+      {
+        step === InstallStep.readyToInstall && (
+          <Install
+            payload={manifest!}
+            onCancel={onClose}
+            onInstalled={handleInstalled}
+          />
+        )
+      }
+      {
+        step === InstallStep.installed && (
+          <Installed
+            payload={manifest!}
+            onCancel={onSuccess}
+          />
+        )
+      }
    </Modal>
  )
 }
--- 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
@ -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>
--- a/web/app/components/plugins/plugin-page/index.tsx
+++ b/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}
          />
        )
      }