feat: install difypkg ui

2024-11-16 03:32:23 +08:00 · 2024-10-15 14:56:59 +08:00 · 2024-10-15 14:56:59 +08:00 · c9ee1e9ff2
commit c9ee1e9ff2
parent c48c84674e
6 changed files with 305 additions and 124 deletions
--- a/web/app/components/plugins/card/base/card-icon.tsx
+++ b/web/app/components/plugins/card/base/card-icon.tsx
@ -18,10 +18,8 @@ const Icon = ({
      }}
    >
      {installed
-        && <div className='p-0.5 absolute bottom-[-4px] right-[-4px] w-3 h-3 rounded-full bg-white '>
-          <div className='h-full rounded-full bg-state-success-solid'>
-            <RiCheckLine className='w-full h-full text-text-primary-on-surface' />
-          </div>
+        && <div className='flex justify-center items-center gap-2 absolute bottom-[-4px] right-[-4px] w-[18px] h-[18px] rounded-full border-2 border-components-panel-bg bg-state-success-solid'>
+          <RiCheckLine className='w-3 h-3 text-text-primary-on-surface' />
        </div>
      }
    </div>
--- a/web/app/components/plugins/card/base/org-info.tsx
+++ b/web/app/components/plugins/card/base/org-info.tsx
@ -4,6 +4,7 @@ type Props = {
  orgName: string
  packageName: string
  packageNameClassName?: string
+  isLoading?: boolean
 }

 const OrgInfo = ({
@ -11,12 +12,34 @@ const OrgInfo = ({
  orgName,
  packageName,
  packageNameClassName,
+  isLoading = false,
 }: Props) => {
-  return <div className={cn('flex items-center h-4 space-x-0.5', className)}>
+  const LoadingPlaceholder = ({ width }: { width: string }) => (
+    <div className={`h-2 w-${width} rounded-sm opacity-20 bg-text-quaternary`} />
+  )
+  return (
+    <div className={cn('flex items-center h-4 space-x-0.5', className)}>
+      {isLoading
+        ? (
+          <LoadingPlaceholder width="[41px]" />
+        )
+        : (
          <span className='shrink-0 text-text-tertiary system-xs-regular'>{orgName}</span>
-    <span className='shrink-0 text-text-quaternary system-xs-regular'>/</span>
-    <span className={cn('shrink-0 w-0 grow truncate text-text-tertiary system-xs-regular', packageNameClassName)}>{packageName}</span>
+        )}
+      <span className='shrink-0 text-text-quaternary system-xs-regular'>
+        {isLoading ? '·' : '/'}
+      </span>
+      {isLoading
+        ? (
+          <LoadingPlaceholder width="[180px]" />
+        )
+        : (
+          <span className={cn('shrink-0 w-0 grow truncate text-text-tertiary system-xs-regular', packageNameClassName)}>
+            {packageName}
+          </span>
+        )}
    </div>
+  )
 }

 export default OrgInfo
--- a/web/app/components/plugins/card/index.tsx
+++ b/web/app/components/plugins/card/index.tsx
@ -2,6 +2,7 @@ import React from 'react'
 import { RiVerifiedBadgeLine } from '@remixicon/react'
 import type { Plugin } from '../types'
 import Icon from '../card/base/card-icon'
+import { Group } from '../../base/icons/src/vender/other'
 import CornerMark from './base/corner-mark'
 import Title from './base/title'
 import OrgInfo from './base/org-info'
@ -18,6 +19,8 @@ type Props = {
  descriptionLineRows?: number
  footer?: React.ReactNode
  serverLocale?: Locale
+  isLoading?: boolean
+  loadingFileName?: string
 }

 const Card = ({
@ -28,33 +31,53 @@ const Card = ({
  descriptionLineRows = 2,
  footer,
  locale,
+  isLoading = false,
+  loadingFileName,
 }: Props) => {
-  const { type, name, org, label } = payload
+  const { type, name, org, label, brief, icon } = payload
+
+  const getLocalizedText = (obj: Record<string, string> | undefined) =>
+    obj?.[locale] || obj?.['en-US'] || ''
+
+  const LoadingPlaceholder = ({ className }: { className?: string }) => (
+    <div className={cn('h-2 rounded-sm opacity-20 bg-text-quaternary', className)} />
+  )

  return (
    <div className={cn('relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)}>
-      <CornerMark text={type} />
+      {!isLoading && <CornerMark text={type} />}
      {/* Header */}
      <div className="flex">
-        <Icon src={payload.icon} installed={installed} />
+        {isLoading
+          ? (<div
+            className='flex max-w-10 max-h-10 p-1 justify-center items-center gap-2 flex-grow rounded-[10px]
+              border-[0.5px] border-components-panel-border bg-background-default backdrop-blur-sm'>
+            <div className='flex w-5 h-5 justify-center items-center'>
+              <Group className='text-text-tertiary' />
+            </div>
+          </div>)
+          : <Icon src={icon} installed={installed} />}
        <div className="ml-3 grow">
          <div className="flex items-center h-5">
-            <Title title={label[locale]} />
-            <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />
+            <Title title={loadingFileName || getLocalizedText(label)} />
+            {!isLoading && <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />}
            {titleLeft} {/* This can be version badge */}
          </div>
          <OrgInfo
            className="mt-0.5"
            orgName={org}
            packageName={name}
+            isLoading={isLoading}
          />
        </div>
      </div>
-      <Description
+      {isLoading
+        ? <LoadingPlaceholder className="mt-3 w-[420px]" />
+        : <Description
          className="mt-3"
-        text={payload.brief[locale]}
+          text={getLocalizedText(brief)}
          descriptionLineRows={descriptionLineRows}
-      />
+        />}
      {footer && <div>{footer}</div>}
    </div>
  )
--- a/web/app/components/plugins/install-plugin/install-from-github/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/index.tsx
@ -10,7 +10,7 @@ type InstallFromGitHubProps = {
  onClose: () => void
 }

-type InstallStep = 'url' | 'version' | 'package'
+type InstallStep = 'url' | 'version' | 'package' | 'installed'

 const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
  const [step, setStep] = useState<InstallStep>('url')
@ -42,11 +42,38 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
        setStep('package')
        break
      case 'package':
-        // TODO: Handle final submission
+        // TODO: Handle installation
+        setStep('installed')
        break
    }
  }

+  const isInputValid = () => {
+    switch (step) {
+      case 'url':
+        return !!repoUrl.trim()
+      case 'version':
+        return !!selectedVersion
+      case 'package':
+        return !!selectedPackage
+      default:
+        return true
+    }
+  }
+
+  const InfoRow = ({ label, value }: { label: string; value: string }) => (
+    <div className='flex items-center gap-3'>
+      <div className='flex w-[72px] items-center gap-2'>
+        <div className='text-text-tertiary system-sm-medium'>
+          {label}
+        </div>
+      </div>
+      <div className='flex-grow overflow-hidden text-text-secondary text-ellipsis system-sm-medium'>
+        {value}
+      </div>
+    </div>
+  )
+
  return (
    <Modal
      isShow={true}
@ -61,11 +88,11 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
            Install plugin from GitHub
          </div>
          <div className='self-stretch text-text-tertiary system-xs-regular'>
-            Please make sure that you only install plugins from a trusted source.
+            {step !== 'installed' && 'Please make sure that you only install plugins from a trusted source.'}
          </div>
        </div>
      </div>
-      <div className='flex px-6 py-3 flex-col justify-center items-start gap-4 self-stretch'>
+      <div className={`flex px-6 py-3 flex-col justify-center items-start self-stretch ${step === 'installed' ? 'gap-2' : 'gap-4'}`}>
        {step === 'url' && (
          <>
            <label
@ -121,8 +148,34 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
            />
          </>
        )}
+        {step === 'installed' && (
+          <>
+            <div className='text-text-secondary system-md-regular'>The plugin has been installed successfully.</div>
+            <div className='flex w-full p-4 flex-col justify-center items-start gap-2 rounded-2xl bg-background-section-burn'>
+              {[
+                { label: 'Repository', value: repoUrl },
+                { label: 'Version', value: selectedVersion },
+                { label: 'Package', value: selectedPackage },
+              ].map(({ label, value }) => (
+                <InfoRow key={label} label={label} value={value} />
+              ))}
+            </div>
+          </>
+        )}
      </div>
      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+        {step === 'installed'
+          ? (
+            <Button
+              variant='primary'
+              className='min-w-[72px]'
+              onClick={onClose}
+            >
+            Close
+            </Button>
+          )
+          : (
+            <>
              <Button
                variant='secondary'
                className='min-w-[72px]'
@ -134,9 +187,12 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ onClose }) => {
                variant='primary'
                className='min-w-[72px]'
                onClick={handleNext}
+                disabled={!isInputValid()}
              >
                {step === 'package' ? 'Install' : 'Next'}
              </Button>
+            </>
+          )}
      </div>
    </Modal>
  )
--- a/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
@ -1,9 +1,13 @@
 'use client'

-import React from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useContext } from 'use-context-selector'
 import { RiLoader2Line } from '@remixicon/react'
+import Card from '../../card'
+import { toolNotion } from '../../card/card-mock'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
+import I18n from '@/context/i18n'

 type InstallFromLocalPackageProps = {
  file: File
@ -11,12 +15,48 @@ type InstallFromLocalPackageProps = {
 }

 const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({ onClose }) => {
+  const [status, setStatus] = useState<'uploading' | 'ready' | 'installing' | 'installed'>('uploading')
+  const { locale } = useContext(I18n)
+
+  useEffect(() => {
+    const timer = setTimeout(() => setStatus('ready'), 1500)
+    return () => clearTimeout(timer)
+  }, [])
+
+  const handleInstall = useCallback(async () => {
+    setStatus('installing')
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    setStatus('installed')
+  }, [])
+
+  const renderStatusMessage = () => {
+    switch (status) {
+      case 'uploading':
+        return (
+          <div className='flex items-center gap-1 self-stretch'>
+            <RiLoader2Line className='text-text-accent w-4 h-4' />
+            <div className='text-text-secondary system-md-regular'>
+              Uploading notion-sync.difypkg ...
+            </div>
+          </div>
+        )
+      case 'installed':
+        return <p className='text-text-secondary system-md-regular'>The plugin has been installed successfully.</p>
+      default:
+        return (
+          <div className='text-text-secondary system-md-regular'>
+            <p>About to install the following plugin.</p>
+            <p>Please make sure that you only install plugins from a <span className='system-md-semibold'>trusted source</span>.</p>
+          </div>
+        )
+    }
+  }
+
  return (
    <Modal
      isShow={true}
      onClose={onClose}
-      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'
+      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'>
@ -25,28 +65,38 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({ onClo
        </div>
      </div>
      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
-        <div className='flex items-center gap-1 self-stretch'>
-          <RiLoader2Line className='text-text-accent w-4 h-4' />
-          <div className='text-text-secondary system-md-regular'>
-            Uploading notion-sync.difypkg ...
-          </div>
+        {renderStatusMessage()}
+        <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'
+            locale={locale}
+            payload={status === 'uploading' ? { name: 'notion-sync' } as any : toolNotion as any}
+            isLoading={status === 'uploading'}
+            loadingFileName='notion-sync.difypkg'
+            installed={status === 'installed'}
+          />
        </div>
      </div>
      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
-        <Button
-          variant='secondary'
-          className='min-w-[72px]'
-          onClick={onClose}
-        >
+        {status === 'installed'
+          ? (
+            <Button variant='primary' onClick={onClose}>Close</Button>
+          )
+          : (
+            <>
+              <Button variant='secondary' className='min-w-[72px]' onClick={onClose}>
              Cancel
              </Button>
              <Button
                variant='primary'
                className='min-w-[72px]'
-          disabled
+                disabled={status !== 'ready'}
+                onClick={handleInstall}
              >
-          Install
+                {status === 'installing' ? 'Installing...' : 'Install'}
              </Button>
+            </>
+          )}
      </div>
    </Modal>
  )
--- 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,6 +1,6 @@
 'use client'

-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { useContext } from 'use-context-selector'
 import { RiInformation2Line } from '@remixicon/react'
 import Card from '../../card'
@ -17,88 +17,119 @@ type InstallFromMarketplaceProps = {

 const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({ onClose }) => {
  const { locale } = useContext(I18n)
-
-  // Mock a plugin list
-  const plugins = [toolNotion, extensionDallE, modelGPT4]
+  const plugins = useMemo(() => [toolNotion, extensionDallE, modelGPT4], [])
  const [selectedPlugins, setSelectedPlugins] = useState<Set<number>>(new Set())
+  const [isInstalling, setIsInstalling] = useState(false)
+  const [nextStep, setNextStep] = useState(false)

-  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'
-      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'>Install plugin</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'>About to install the following plugin</div>
-        </div>
-        <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap
-          rounded-2xl bg-background-section-burn'>
-          {plugins.length === 1
-            && <Card
-              payload={plugins[0] as any}
-              locale={locale}
-              className='w-full'
-            >
-            </Card>
+  const mockInstall = async () => {
+    setIsInstalling(true)
+    await new Promise(resolve => setTimeout(resolve, 1500))
+    setIsInstalling(false)
  }
-          {plugins.length > 1 && plugins.map((plugin, index) => (
-            <div className='flex pl-1 items-center gap-2 flex-grow' key={index}>
-              <Checkbox
-                checked={selectedPlugins.has(index)}
-                onCheck={() => {
-                  const newSelectedPlugins = new Set(selectedPlugins)
-                  if (newSelectedPlugins.has(index))
-                    newSelectedPlugins.delete(index)
-                  else
-                    newSelectedPlugins.add(index)

-                  setSelectedPlugins(newSelectedPlugins)
-                }}
-              />
+  const pluginsToShow = useMemo(() => {
+    if (plugins.length === 1 || (nextStep && selectedPlugins.size === 1))
+      return plugins.length === 1 ? plugins : plugins.filter((_, index) => selectedPlugins.has(index))
+
+    return nextStep ? plugins.filter((_, index) => selectedPlugins.has(index)) : plugins
+  }, [plugins, nextStep, selectedPlugins])
+
+  const renderPluginCard = (plugin: any, index: number) => (
    <Card
      key={index}
-                payload={plugin as any}
+      installed={nextStep && !isInstalling}
+      payload={plugin}
      locale={locale}
      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}`}
+      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'
+      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'}
+        </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='secondary'
-          className='min-w-[72px]'
+              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>
  )