outman/dify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update the 'Update plugin from GitHub'

Browse Source
This commit is contained in:
Yi 2024-11-06 16:49:16 +08:00
parent 0d08b6cf51
commit 4c0e4e490a
8 changed files with 54 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/app/components/base/select/index.tsx
View File

@ -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={() => {

4
web/app/components/plugins/install-plugin/hooks.ts
View File

@ -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 {

26
web/app/components/plugins/install-plugin/install-from-github/index.tsx
View File

@ -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}

16
web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
View File

@ -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)

12
web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
View File

@ -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

4
web/app/components/plugins/install-plugin/utils.ts
View File

@ -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}` : ''
}

5
web/i18n/en-US/plugin.ts
View File

@ -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',

5
web/i18n/zh-Hans/plugin.ts
View File

@ -86,7 +86,10 @@ const translation = {
},
installFromGitHub: {
installPlugin: '从 GitHub 安装插件',
updateVersion: '更新 GitHub 插件',
updatePlugin: '更新来自 GitHub 的插件',
installedSuccessfully: '安装成功',
installFailed: '安装失败',
uploadFailed: '上传失败',
gitHubRepo: 'GitHub 仓库',
selectVersion: '选择版本',
selectVersionPlaceholder: '请选择一个版本',