From bba80f465bc669f80aaf028dc8db72d1c8606b9a Mon Sep 17 00:00:00 2001 From: Joel Date: Fri, 15 Nov 2024 12:07:20 +0800 Subject: [PATCH] just add --- .../(commonLayout)/plugins/test/card/page.tsx | 6 ++++ .../steps/install-by-dsl-list.tsx | 15 +++++--- .../install-bundle/steps/install.tsx | 26 ++++++++++---- web/service/use-plugins.ts | 36 +++++++++++++++++++ 4 files changed, 72 insertions(+), 11 deletions(-) diff --git a/web/app/(commonLayout)/plugins/test/card/page.tsx b/web/app/(commonLayout)/plugins/test/card/page.tsx index 85a00d5af0..1d7817a982 100644 --- a/web/app/(commonLayout)/plugins/test/card/page.tsx +++ b/web/app/(commonLayout)/plugins/test/card/page.tsx @@ -28,6 +28,12 @@ const PluginList = () => { github_plugin_unique_identifier: 'yixiao0/test:0.0.1@3592166c87afcf944b4f13f27467a5c8f9e00bd349cb42033a072734a37431b4', }, }, + { + type: 'marketplace', + value: { + plugin_unique_identifier: 'langgenius/openai:0.0.1@f88fdb98d104466db16a425bfe3af8c1bcad45047a40fb802d98a989ac57a5a3', + }, + }, ]} />
{/*

Dify Plugin list

*/} diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/install-by-dsl-list.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/install-by-dsl-list.tsx index a7ab97ab6a..8442c0a13d 100644 --- a/web/app/components/plugins/install-plugin/install-bundle/steps/install-by-dsl-list.tsx +++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install-by-dsl-list.tsx @@ -11,17 +11,18 @@ import { useGetState } from 'ahooks' type Props = { fromDSLPayload: Dependency[] selectedPlugins: Plugin[] - handleSelect: (plugin: Plugin) => void + onSelect: (plugin: Plugin, selectedIndex: number) => void onLoadedAllPlugin: () => void } const InstallByDSLList: FC = ({ fromDSLPayload, selectedPlugins, - handleSelect, + onSelect, onLoadedAllPlugin, }) => { const { isLoading: isFetchingMarketplaceData, data: marketplaceRes } = useFetchPluginsInMarketPlaceByIds(fromDSLPayload.filter(d => d.type === 'marketplace').map(d => d.value.plugin_unique_identifier!)) + const [plugins, setPlugins, getPlugins] = useGetState([]) const handlePlugInFetched = useCallback((index: number) => { return (p: Plugin) => { @@ -59,6 +60,12 @@ const InstallByDSLList: FC = ({ onLoadedAllPlugin() // eslint-disable-next-line react-hooks/exhaustive-deps }, [isLoadedAllData]) + + const handleSelect = useCallback((index: number) => { + return () => { + onSelect(plugins[index], index) + } + }, [onSelect, plugins]) return ( <> {fromDSLPayload.map((d, index) => ( @@ -66,14 +73,14 @@ const InstallByDSLList: FC = ({ ? p.plugin_id === plugins[index]?.plugin_id)} - onCheckedChange={handleSelect} + onCheckedChange={handleSelect(index)} dependency={d} onFetchedPayload={handlePlugInFetched(index)} /> : p.plugin_id === plugins[index]?.plugin_id)} - onCheckedChange={handleSelect} + onCheckedChange={handleSelect(index)} payload={plugins[index] as Plugin} /> ))} diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx index e3610f6d98..1ac7f95746 100644 --- a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx +++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx @@ -6,6 +6,7 @@ import Button from '@/app/components/base/button' import { RiLoader2Line } from '@remixicon/react' import { useTranslation } from 'react-i18next' import InstallByDSLList from './install-by-dsl-list' +import { useInstallFromMarketplaceAndGitHub } from '@/service/use-plugins' const i18nPrefix = 'plugin.installModal' @@ -20,9 +21,10 @@ const Install: FC = ({ }) => { const { t } = useTranslation() const [selectedPlugins, setSelectedPlugins] = React.useState([]) + const [selectedIndexes, setSelectedIndexes] = React.useState([]) const selectedPluginsNum = selectedPlugins.length - const handleSelect = (plugin: Plugin) => { + const handleSelect = (plugin: Plugin, selectedIndex: number) => { const isSelected = !!selectedPlugins.find(p => p.plugin_id === plugin.plugin_id) let nextSelectedPlugins if (isSelected) @@ -30,13 +32,23 @@ const Install: FC = ({ else nextSelectedPlugins = [...selectedPlugins, plugin] setSelectedPlugins(nextSelectedPlugins) + const nextSelectedIndexes = isSelected ? selectedIndexes.filter(i => i !== selectedIndex) : [...selectedIndexes, selectedIndex] + setSelectedIndexes(nextSelectedIndexes) } const [canInstall, setCanInstall] = React.useState(false) const handleLoadedAllPlugin = useCallback(() => { setCanInstall(true) - }, []) - const handleInstall = () => { + }, [selectedPlugins, selectedIndexes]) + // Install from marketplace and github + const { mutate: installFromMarketplaceAndGitHub, isPending: isInstalling } = useInstallFromMarketplaceAndGitHub({ + onSuccess: () => { + console.log('success!') + }, + }) + console.log(canInstall, !isInstalling, selectedPlugins.length === 0) + const handleInstall = () => { + installFromMarketplaceAndGitHub(fromDSLPayload.filter((_d, index) => selectedIndexes.includes(index))) } return ( <> @@ -48,7 +60,7 @@ const Install: FC = ({
@@ -63,11 +75,11 @@ const Install: FC = ({ diff --git a/web/service/use-plugins.ts b/web/service/use-plugins.ts index c071d4a993..6697948877 100644 --- a/web/service/use-plugins.ts +++ b/web/service/use-plugins.ts @@ -94,6 +94,42 @@ export const useUploadGitHub = (payload: { }) } +export const useInstallFromMarketplaceAndGitHub = ({ + onSuccess, +}: { + onSuccess?: () => void +}) => { + return useMutation({ + mutationFn: (payload: Dependency[]) => { + return Promise.all(payload.map(async (item) => { + try { + if (item.type === 'github') { + await post('/workspaces/current/plugin/install/github', { + body: { + repo: item.value.repo!, + version: item.value.version!, + package: item.value.package!, + plugin_unique_identifier: item.value.github_plugin_unique_identifier!, + }, + }) + return ({ success: true }) + } + await post('/workspaces/current/plugin/install/marketplace', { + body: { + plugin_unique_identifiers: [item.value.plugin_unique_identifier!], + }, + }) + return ({ success: true }) + } + catch (e) { + return Promise.resolve({ success: false }) + } + })) + }, + onSuccess, + }) +} + export const useDebugKey = () => { return useQuery({ queryKey: [NAME_SPACE, 'debugKey'],