chore: update the 'Update plugin from GitHub'

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}

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)

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