chore: update the 'Update plugin from GitHub'

2024-11-06 16:49:16 +08:00 · 2024-11-06 16:49:16 +08:00 · 4c0e4e490a
commit 4c0e4e490a
parent 0d08b6cf51
8 changed files with 54 additions and 25 deletions
--- a/web/app/components/base/select/index.tsx
+++ b/web/app/components/base/select/index.tsx
@ -316,7 +316,7 @@ const PortalSelect: FC<PortalSelectProps> = ({
  const { t } = useTranslation()
  const [open, setOpen] = useState(false)
  const localPlaceholder = placeholder || t('common.placeholder.select')
-  const selectedItem = items.find(item => item.value === value)
+  const selectedItem = value ? items.find(item => item.value === value) : undefined

  return (
    <PortalToFollowElem
@ -343,6 +343,7 @@ const PortalSelect: FC<PortalSelectProps> = ({
              >
                {selectedItem?.name ?? localPlaceholder}
              </span>
+              <div className='mx-0.5'>{installedValue && selectedItem && selectedItem.value !== installedValue && <Badge>{installedValue} {'->'} {selectedItem.value} </Badge>}</div>
              <ChevronDownIcon className='shrink-0 h-4 w-4 text-gray-400' />
            </div>
          )}
@ -356,8 +357,8 @@ const PortalSelect: FC<PortalSelectProps> = ({
            <div
              key={item.value}
              className={`
-                flex items-center justify-between px-2.5 h-9 cursor-pointer rounded-lg hover:bg-gray-100 text-gray-700
-                ${item.value === value && 'bg-gray-100'}
+                flex items-center justify-between px-2.5 h-9 cursor-pointer rounded-lg hover:bg-state-base-hover text-text-secondary
+                ${item.value === value && 'bg-state-base-hover'}
              `}
              title={item.name}
              onClick={() => {
--- a/web/app/components/plugins/install-plugin/hooks.ts
+++ b/web/app/components/plugins/install-plugin/hooks.ts
@ -64,10 +64,10 @@ export const useGitHubUpload = () => {
      return GitHubPackage
    }
    catch (error) {
-      setError('Error installing package')
+      setError('Error uploading package')
      Toast.notify({
        type: 'error',
-        message: 'Error installing package',
+        message: 'Error uploading package',
      })
    }
    finally {
--- a/web/app/components/plugins/install-plugin/install-from-github/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/index.tsx
@ -5,7 +5,7 @@ import Modal from '@/app/components/base/modal'
 import type { Item } from '@/app/components/base/select'
 import type { InstallState } from '@/app/components/plugins/types'
 import { useGitHubReleases } from '../hooks'
-import { parseGitHubUrl } from '../utils'
+import { convertRepoToUrl, parseGitHubUrl } from '../utils'
 import type { PluginDeclaration, UpdateFromGitHubPayload } from '../../types'
 import { InstallStepFromGitHub } from '../../types'
 import Toast from '@/app/components/base/toast'
@ -17,7 +17,7 @@ import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-ico
 import { useTranslation } from 'react-i18next'
 import { usePluginPageContext } from '../../plugin-page/context'

-const i18nPrefix = 'plugin.installModal'
+const i18nPrefix = 'plugin.installFromGitHub'

 type InstallFromGitHubProps = {
  updatePayload?: UpdateFromGitHubPayload
@ -27,14 +27,25 @@ type InstallFromGitHubProps = {

 const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, onClose }) => {
  const { t } = useTranslation()
+  // const updatePayloadTest = {
+  //   originalPackageInfo: {
+  //     id: '0299ff5e-40cc-4690-9308-6687cf344a21',
+  //     repo: 'YIXIAO0/test',
+  //     version: '1.10.1',
+  //     package: 'openai.difypkg',
+  //   }
+  // }
  const [state, setState] = useState<InstallState>({
    step: updatePayload ? InstallStepFromGitHub.selectPackage : InstallStepFromGitHub.setUrl,
-    repoUrl: updatePayload?.originalPackageInfo.repo || '',
-    selectedVersion: updatePayload?.originalPackageInfo.version || '',
-    selectedPackage: updatePayload?.originalPackageInfo.package || '',
+    repoUrl: updatePayload?.originalPackageInfo?.repo
+      ? convertRepoToUrl(updatePayload.originalPackageInfo.repo)
+      : '',
+    selectedVersion: '',
+    selectedPackage: '',
    releases: [],
  })
  const { getIconUrl } = useGetIcon()
+  const { fetchReleases } = useGitHubReleases()
  const [uniqueIdentifier, setUniqueIdentifier] = useState<string | null>(null)
  const [manifest, setManifest] = useState<PluginDeclaration | null>(null)
  const [errorMsg, setErrorMsg] = useState<string | null>(null)
@ -55,15 +66,13 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
      })) || [])
    : []

-  const { fetchReleases } = useGitHubReleases()
-
  const getTitle = useCallback(() => {
    if (state.step === InstallStepFromGitHub.installed)
      return t(`${i18nPrefix}.installedSuccessfully`)
    if (state.step === InstallStepFromGitHub.installFailed)
      return t(`${i18nPrefix}.installFailed`)

-    return t(`${i18nPrefix}.installPlugin`)
+    return updatePayload ? t(`${i18nPrefix}.updatePlugin`) : t(`${i18nPrefix}.installPlugin`)
  }, [state.step])

  const handleUrlSubmit = async () => {
@ -190,6 +199,7 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
          )}
          {state.step === InstallStepFromGitHub.readyToInstall && (
            <Loaded
+              updatePayload={updatePayload!}
              uniqueIdentifier={uniqueIdentifier!}
              payload={manifest as any}
              repoUrl={state.repoUrl}
--- a/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
@ -2,18 +2,19 @@

 import React from 'react'
 import Button from '@/app/components/base/button'
-import type { PluginDeclaration } from '../../../types'
+import type { PluginDeclaration, UpdateFromGitHubPayload } from '../../../types'
 import Card from '../../../card'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
 import { pluginManifestToCardPluginProps } from '../../utils'
 import { useTranslation } from 'react-i18next'
-import { installPackageFromGitHub } from '@/service/plugins'
+import { installPackageFromGitHub, uninstallPlugin } from '@/service/plugins'
 import { RiLoader2Line } from '@remixicon/react'
 import { usePluginTasksStore } from '@/app/components/plugins/plugin-page/store'
 import checkTaskStatus from '../../base/check-task-status'
 import { parseGitHubUrl } from '../../utils'

 type LoadedProps = {
+  updatePayload: UpdateFromGitHubPayload
  uniqueIdentifier: string
  payload: PluginDeclaration
  repoUrl: string
@ -27,6 +28,7 @@ type LoadedProps = {
 const i18nPrefix = 'plugin.installModal'

 const Loaded: React.FC<LoadedProps> = ({
+  updatePayload,
  uniqueIdentifier,
  payload,
  repoUrl,
@ -54,6 +56,9 @@ const Loaded: React.FC<LoadedProps> = ({
        uniqueIdentifier,
      )

+      if (updatePayload && isInstalled)
+        await uninstallPlugin(updatePayload.originalPackageInfo.id)
+
      if (isInstalled) {
        onInstalled()
        return
@ -64,10 +69,15 @@ const Loaded: React.FC<LoadedProps> = ({
        taskId,
        pluginUniqueIdentifier: uniqueIdentifier,
      })
+
      onInstalled()
    }
    catch (e) {
-      onFailed(e instanceof Error ? e.message : String(e))
+      if (typeof e === 'string') {
+        onFailed(e)
+        return
+      }
+      onFailed()
    }
    finally {
      setIsInstalling(false)
--- a/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
@ -41,7 +41,7 @@ const SelectPackage: React.FC<SelectPackageProps> = ({
  const { t } = useTranslation()
  const isEdit = Boolean(updatePayload)
  const [isUploading, setIsUploading] = React.useState(false)
-  const { handleUpload, error } = useGitHubUpload()
+  const { handleUpload } = useGitHubUpload()

  const handleUploadPackage = async () => {
    if (isUploading) return
@ -59,7 +59,6 @@ const SelectPackage: React.FC<SelectPackageProps> = ({
    catch (e: any) {
      if (e.response?.message)
        onFailed(e.response?.message)
-
      else
        onFailed(t('plugin.error.uploadFailed'))
    }
@ -74,16 +73,15 @@ const SelectPackage: React.FC<SelectPackageProps> = ({
        htmlFor='version'
        className='flex flex-col justify-center items-start self-stretch text-text-secondary'
      >
-        <span className='system-sm-semibold'>{isEdit ? t('plugin.installFromGitHub.updateVersion')
-          : t('plugin.installFromGitHub.selectVersion')}
-        </span>
+        <span className='system-sm-semibold'>{t('plugin.installFromGitHub.selectVersion')}</span>
      </label>
      <PortalSelect
        value={selectedVersion}
        onSelect={onSelectVersion}
        items={versions}
+        installedValue={updatePayload?.originalPackageInfo.version}
        placeholder={t('plugin.installFromGitHub.selectVersionPlaceholder') || ''}
-        popupClassName='w-[432px] z-[1001]'
+        popupClassName='w-[512px] z-[1001]'
      />
      <label
        htmlFor='package'
@ -96,7 +94,7 @@ const SelectPackage: React.FC<SelectPackageProps> = ({
        onSelect={onSelectPackage}
        items={packages}
        placeholder={t('plugin.installFromGitHub.selectPackagePlaceholder') || ''}
-        popupClassName='w-[432px] z-[1001]'
+        popupClassName='w-[512px] z-[1001]'
      />
      <div className='flex justify-end items-center gap-2 self-stretch mt-4'>
        {!isEdit
--- a/web/app/components/plugins/install-plugin/utils.ts
+++ b/web/app/components/plugins/install-plugin/utils.ts
@ -51,3 +51,7 @@ export const parseGitHubUrl = (url: string): GitHubUrlInfo => {
  const match = url.match(/^https:\/\/github\.com\/([^\/]+)\/([^\/]+)\/?$/)
  return match ? { isValid: true, owner: match[1], repo: match[2] } : { isValid: false }
 }
+
+export const convertRepoToUrl = (repo: string) => {
+  return repo ? `https://github.com/${repo}` : ''
+}
--- a/web/i18n/en-US/plugin.ts
+++ b/web/i18n/en-US/plugin.ts
@ -86,7 +86,10 @@ const translation = {
  },
  installFromGitHub: {
    installPlugin: 'Install plugin from GitHub',
-    updateVersion: 'Update plugin from GitHub',
+    updatePlugin: 'Update plugin from GitHub',
+    installedSuccessfully: 'Installation successful',
+    installFailed: 'Installation failed',
+    uploadFailed: 'Upload failed',
    gitHubRepo: 'GitHub repository',
    selectVersion: 'Select version',
    selectVersionPlaceholder: 'Please select a version',
--- a/web/i18n/zh-Hans/plugin.ts
+++ b/web/i18n/zh-Hans/plugin.ts
@ -86,7 +86,10 @@ const translation = {
  },
  installFromGitHub: {
    installPlugin: '从 GitHub 安装插件',
-    updateVersion: '更新 GitHub 插件',
+    updatePlugin: '更新来自 GitHub 的插件',
+    installedSuccessfully: '安装成功',
+    installFailed: '安装失败',
+    uploadFailed: '上传失败',
    gitHubRepo: 'GitHub 仓库',
    selectVersion: '选择版本',
    selectVersionPlaceholder: '请选择一个版本',