Austin/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2024-11-16 03:32:23 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat: finish github install

Browse Source
This commit is contained in:
Joel 2024-11-15 14:40:04 +08:00
parent 6b759795d5
commit a0758dc2fc
7 changed files with 129 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/app/(commonLayout)/plugins/test/card/page.tsx
View File

@ -6,13 +6,20 @@ import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
// import ProviderCard from '@/app/components/plugins/provider-card'
import Badge from '@/app/components/base/badge'
import InstallBundle from '@/app/components/plugins/install-plugin/install-bundle'
import { useBoolean } from 'ahooks'
const PluginList = () => {
const pluginList = [toolNotion, extensionDallE, modelGPT4, customTool]
const [isShow, {
setFalse: hide,
}] = useBoolean(true)
return (
<div className='pb-3 bg-white'>
<InstallBundle onClose={() => { }} fromDSLPayload={[
{isShow && (
<InstallBundle
onClose={hide}
fromDSLPayload={[
// {
// type: 'marketplace',
// value: {
@ -28,6 +35,15 @@ const PluginList = () => {
github_plugin_unique_identifier: 'yixiao0/test:0.0.1@3592166c87afcf944b4f13f27467a5c8f9e00bd349cb42033a072734a37431b4',
},
},
{
type: 'github',
value: {
package: 'dify-test.difypkg',
repo: 'WTW0313/dify-test',
version: '0.0.5-beta.2',
github_plugin_unique_identifier: 'wtw0313/dify-test:0.0.1@1633daa043b47155d4228e2db7734245fd6d3e20ba812e5c02ce69fc1e3038f4',
},
},
// {
// type: 'marketplace',
// value: {
@ -35,6 +51,8 @@ const PluginList = () => {
// },
// },
]} />
)
}
<div className='mx-3 '>
{/* <h2 className='my-3'>Dify Plugin list</h2> */}
{/* <div className='grid grid-cols-2 gap-3'>

20
web/app/components/plugins/install-plugin/install-bundle/index.tsx
View File

@ -3,8 +3,9 @@ import type { FC } from 'react'
import Modal from '@/app/components/base/modal'
import React, { useCallback, useState } from 'react'
import { InstallStep } from '../../types'
import type { Dependency } from '../../types'
import type { Dependency, Plugin } from '../../types'
import Install from './steps/install'
import Installed from './steps/installed'
import { useTranslation } from 'react-i18next'
const i18nPrefix = 'plugin.installModal'
@ -29,7 +30,8 @@ const InstallBundle: FC<Props> = ({
}) => {
const { t } = useTranslation()
const [step, setStep] = useState<InstallStep>(installType === InstallType.fromMarketplace ? InstallStep.readyToInstall : InstallStep.uploading)
const [installedPlugins, setInstalledPlugins] = useState<Plugin[]>([])
const [installStatus, setInstallStatus] = useState<{ success: boolean }[]>([])
const getTitle = useCallback(() => {
if (step === InstallStep.uploadFailed)
return t(`${i18nPrefix}.uploadFailed`)
@ -41,6 +43,12 @@ const InstallBundle: FC<Props> = ({
return t(`${i18nPrefix}.installPlugin`)
}, [step, t])
const handleInstalled = useCallback((plugins: Plugin[], installStatus: { success: boolean }[]) => {
setInstallStatus(installStatus)
setInstalledPlugins(plugins)
setStep(InstallStep.installed)
}, [])
return (
<Modal
isShow={true}
@ -57,6 +65,14 @@ const InstallBundle: FC<Props> = ({
<Install
fromDSLPayload={fromDSLPayload}
onCancel={onClose}
onInstalled={handleInstalled}
/>
)}
{step === InstallStep.installed && (
<Installed
list={installedPlugins}
installStatus={installStatus}
onCancel={onClose}
/>
)}
</Modal>

5
web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx
View File

@ -29,7 +29,10 @@ const Item: FC<Props> = ({
const [payload, setPayload] = React.useState<Plugin | null>(null)
useEffect(() => {
if (data) {
const payload = pluginManifestToCardPluginProps(data.manifest)
const payload = {
...pluginManifestToCardPluginProps(data.manifest),
plugin_id: data.unique_identifier,
}
onFetchedPayload(payload)
setPayload(payload)
}

4
web/app/components/plugins/install-plugin/install-bundle/steps/install-by-dsl-list.tsx
View File

@ -26,12 +26,12 @@ const InstallByDSLList: FC<Props> = ({
const [plugins, setPlugins, getPlugins] = useGetState<Plugin[]>([])
const handlePlugInFetched = useCallback((index: number) => {
return (p: Plugin) => {
const nextPlugins = produce(plugins, (draft) => {
const nextPlugins = produce(getPlugins(), (draft) => {
draft[index] = p
})
setPlugins(nextPlugins)
}
}, [plugins, setPlugins])
}, [getPlugins, setPlugins])
const marketPlaceInDSLIndex = useMemo(() => {
const res: number[] = []

12
web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
View File

@ -7,23 +7,25 @@ import { RiLoader2Line } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import InstallByDSLList from './install-by-dsl-list'
import { useInstallFromMarketplaceAndGitHub } from '@/service/use-plugins'
import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
const i18nPrefix = 'plugin.installModal'
type Props = {
fromDSLPayload: Dependency[]
onInstalled: (plugins: Plugin[], installStatus: { success: boolean }[]) => void
onCancel: () => void
}
const Install: FC<Props> = ({
fromDSLPayload,
onInstalled,
onCancel,
}) => {
const { t } = useTranslation()
const [selectedPlugins, setSelectedPlugins] = React.useState<Plugin[]>([])
const [selectedIndexes, setSelectedIndexes] = React.useState<number[]>([])
const selectedPluginsNum = selectedPlugins.length
const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
const handleSelect = (plugin: Plugin, selectedIndex: number) => {
const isSelected = !!selectedPlugins.find(p => p.plugin_id === plugin.plugin_id)
let nextSelectedPlugins
@ -44,10 +46,12 @@ const Install: FC<Props> = ({
// Install from marketplace and github
const { mutate: installFromMarketplaceAndGitHub, isPending: isInstalling } = useInstallFromMarketplaceAndGitHub({
onSuccess: (res: { success: boolean }[]) => {
console.log(res)
onInstalled(selectedPlugins, res)
const hasInstallSuccess = res.some(r => r.success)
if (hasInstallSuccess)
invalidateInstalledPluginList()
},
})
console.log(canInstall, !isInstalling, selectedPlugins.length === 0)
const handleInstall = () => {
installFromMarketplaceAndGitHub(fromDSLPayload.filter((_d, index) => selectedIndexes.includes(index)))
}

55
web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx Normal file
View File

@ -0,0 +1,55 @@
'use client'
import type { FC } from 'react'
import React from 'react'
import type { Plugin } from '../../../types'
import Card from '@/app/components/plugins/card'
import Button from '@/app/components/base/button'
import { useTranslation } from 'react-i18next'
import Badge, { BadgeState } from '@/app/components/base/badge/index'
type Props = {
list: Plugin[]
installStatus: { success: boolean }[]
onCancel: () => void
}
const Installed: FC<Props> = ({
list,
installStatus,
onCancel,
}) => {
const { t } = useTranslation()
return (
<>
<div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
{/* <p className='text-text-secondary system-md-regular'>{(isFailed && errMsg) ? errMsg : t(`plugin.installModal.${isFailed ? 'installFailedDesc' : 'installedSuccessfullyDesc'}`)}</p> */}
<div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn space-y-1'>
{list.map((plugin, index) => {
return (
<Card
key={plugin.plugin_id}
className='w-full'
payload={plugin}
installed={installStatus[index].success}
installFailed={!installStatus[index].success}
titleLeft={plugin.version ? <Badge className='mx-1' size="s" state={BadgeState.Default}>{plugin.version}</Badge> : null}
/>
)
})}
</div>
</div>
{/* Action Buttons */}
<div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
<Button
variant='primary'
className='min-w-[72px]'
onClick={onCancel}
>
{t('common.operation.close')}
</Button>
</div>
</>
)
}
export default React.memo(Installed)

1
web/service/use-plugins.ts
View File

@ -121,6 +121,7 @@ export const useInstallFromMarketplaceAndGitHub = ({
})
return ({ success: true })
}
// eslint-disable-next-line unused-imports/no-unused-vars
catch (e) {
return Promise.resolve({ success: false })
}