dify

dify/web/app/components/workflow/plugin-dependency/hooks.ts

@@ -0,0 +1,20 @@
+import { useCallback } from 'react'
+import { useStore as usePluginDependenciesStore } from './store'
+import { useMutationCheckDependencies } from '@/service/use-plugins'
+import { useCheckPipelineDependencies } from '@/service/use-pipeline'
+
+export const usePluginDependencies = () => {
+  const { mutateAsync: checkWorkflowDependencies } = useMutationCheckDependencies()
+  const { mutateAsync: checkPipelineDependencies } = useCheckPipelineDependencies()
+
+  const handleCheckPluginDependencies = useCallback(async (id: string, isPipeline = false) => {
+    const checkDependencies = isPipeline ? checkPipelineDependencies : checkWorkflowDependencies
+    const { leaked_dependencies } = await checkDependencies(id)
+    const { setDependencies } = usePluginDependenciesStore.getState()
+    setDependencies(leaked_dependencies)
+  }, [checkWorkflowDependencies, checkPipelineDependencies])
+
+  return {
+    handleCheckPluginDependencies,
+  }
+}

dify/web/app/components/workflow/plugin-dependency/index.tsx

@@ -0,0 +1,24 @@
+import { useCallback } from 'react'
+import { useStore } from './store'
+import InstallBundle from '@/app/components/plugins/install-plugin/install-bundle'
+
+const PluginDependency = () => {
+  const dependencies = useStore(s => s.dependencies)
+
+  const handleCancelInstallBundle = useCallback(() => {
+    const { setDependencies } = useStore.getState()
+    setDependencies([])
+  }, [])
+
+  if (!dependencies.length)
+    return null
+
+  return (
+    <InstallBundle
+      fromDSLPayload={dependencies}
+      onClose={handleCancelInstallBundle}
+    />
+  )
+}
+
+export default PluginDependency

dify/web/app/components/workflow/plugin-dependency/store.ts

@@ -0,0 +1,11 @@
+import { create } from 'zustand'
+import type { Dependency } from '@/app/components/plugins/types'
+
+type Shape = {
+  dependencies: Dependency[]
+  setDependencies: (dependencies: Dependency[]) => void
+}
+export const useStore = create<Shape>(set => ({
+  dependencies: [],
+  setDependencies: dependencies => set({ dependencies }),
+}))