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

refactor: add API endpoint to list latest plugin versions and query it in a asynchronous way (#17695)

Browse Source
This commit is contained in:
Yeuoly
2025-04-09 18:49:27 +09:00
committed by GitHub
parent 2c2efe2e1e
commit 33324ee23d
6 changed files with 67 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/app/components/plugins/plugin-page/plugins-panel.tsx
View File

@@ -3,17 +3,23 @@ import { useMemo } from 'react'
import type { FilterState } from './filter-management'
import FilterManagement from './filter-management'
import List from './list'
import { useInstalledPluginList, useInvalidateInstalledPluginList } from '@/service/use-plugins'
import { useInstalledLatestVersion, useInstalledPluginList, useInvalidateInstalledPluginList } from '@/service/use-plugins'
import PluginDetailPanel from '@/app/components/plugins/plugin-detail-panel'
import { usePluginPageContext } from './context'
import { useDebounceFn } from 'ahooks'
import Empty from './empty'
import Loading from '../../base/loading'
import { PluginSource } from '../types'
const PluginsPanel = () => {
const filters = usePluginPageContext(v => v.filters) as FilterState
const setFilters = usePluginPageContext(v => v.setFilters)
const { data: pluginList, isLoading: isPluginListLoading } = useInstalledPluginList()
const { data: installedLatestVersion } = useInstalledLatestVersion(
pluginList?.plugins
.filter(plugin => plugin.source === PluginSource.marketplace)
.map(plugin => plugin.plugin_id) ?? [],
)
const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
const currentPluginID = usePluginPageContext(v => v.currentPluginID)
const setCurrentPluginID = usePluginPageContext(v => v.setCurrentPluginID)
@@ -22,9 +28,17 @@ const PluginsPanel = () => {
setFilters(filters)
}, { wait: 500 })
const pluginListWithLatestVersion = useMemo(() => {
return pluginList?.plugins.map(plugin => ({
...plugin,
latest_version: installedLatestVersion?.versions[plugin.plugin_id]?.version ?? '',
latest_unique_identifier: installedLatestVersion?.versions[plugin.plugin_id]?.unique_identifier ?? '',
})) || []
}, [pluginList, installedLatestVersion])
const filteredList = useMemo(() => {
const { categories, searchQuery, tags } = filters
const filteredList = pluginList?.plugins.filter((plugin) => {
const filteredList = pluginListWithLatestVersion.filter((plugin) => {
return (
(categories.length === 0 || categories.includes(plugin.declaration.category))
&& (tags.length === 0 || tags.some(tag => plugin.declaration.tags.includes(tag)))
@@ -32,12 +46,12 @@ const PluginsPanel = () => {
)
})
return filteredList
}, [pluginList, filters])
}, [pluginListWithLatestVersion, filters])
const currentPluginDetail = useMemo(() => {
const detail = pluginList?.plugins.find(plugin => plugin.plugin_id === currentPluginID)
const detail = pluginListWithLatestVersion.find(plugin => plugin.plugin_id === currentPluginID)
return detail
}, [currentPluginID, pluginList?.plugins])
}, [currentPluginID, pluginListWithLatestVersion])
const handleHide = () => setCurrentPluginID(undefined)