From 4c0e4e490af2411eb70ca3166e73d0c105df78d5 Mon Sep 17 00:00:00 2001
From: Yi <yxiaoisme@gmail.com>
Date: Wed, 6 Nov 2024 16:49:16 +0800
Subject: [PATCH] chore: update the 'Update plugin from GitHub'

---
 web/app/components/base/select/index.tsx      |  7 ++---
 .../plugins/install-plugin/hooks.ts           |  4 +--
 .../install-from-github/index.tsx             | 26 +++++++++++++------
 .../install-from-github/steps/loaded.tsx      | 16 +++++++++---
 .../steps/selectPackage.tsx                   | 12 ++++-----
 .../plugins/install-plugin/utils.ts           |  4 +++
 web/i18n/en-US/plugin.ts                      |  5 +++-
 web/i18n/zh-Hans/plugin.ts                    |  5 +++-
 8 files changed, 54 insertions(+), 25 deletions(-)

diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx
index 0b8ff096ff..482b923a76 100644
--- 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={() => {
diff --git a/web/app/components/plugins/install-plugin/hooks.ts b/web/app/components/plugins/install-plugin/hooks.ts
index 90388a06bf..9054933aa2 100644
--- 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 {
diff --git a/web/app/components/plugins/install-plugin/install-from-github/index.tsx b/web/app/components/plugins/install-plugin/install-from-github/index.tsx
index e8fdd69f0c..6f30e81f7c 100644
--- 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}
diff --git 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
index 7b67ef441b..dce2e735c8 100644
--- 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)
diff --git 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
index b6758002cd..1d65175267 100644
--- 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
diff --git a/web/app/components/plugins/install-plugin/utils.ts b/web/app/components/plugins/install-plugin/utils.ts
index 347c114591..731d4a9383 100644
--- 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}` : ''
+}
diff --git a/web/i18n/en-US/plugin.ts b/web/i18n/en-US/plugin.ts
index 5ee95468b9..c049653aac 100644
--- 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',
diff --git a/web/i18n/zh-Hans/plugin.ts b/web/i18n/zh-Hans/plugin.ts
index a9acc1e0e3..1fc23ea1b0 100644
--- 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: '请选择一个版本',