Feat/plugins (#12547)

Co-authored-by: AkaraChen <akarachen@outlook.com>
Co-authored-by: Yi <yxiaoisme@gmail.com>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: kurokobo <kuro664@gmail.com>
Co-authored-by: Hiroshi Fujita <fujita-h@users.noreply.github.com>

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

@@ -0,0 +1,17 @@
+import { useCallback } from 'react'
+import { useStore as usePluginDependenciesStore } from './store'
+import { useMutationCheckDependencies } from '@/service/use-plugins'
+
+export const usePluginDependencies = () => {
+  const { mutateAsync } = useMutationCheckDependencies()
+
+  const handleCheckPluginDependencies = useCallback(async (appId: string) => {
+    const { leaked_dependencies } = await mutateAsync(appId)
+    const { setDependencies } = usePluginDependenciesStore.getState()
+    setDependencies(leaked_dependencies)
+  }, [mutateAsync])
+
+  return {
+    handleCheckPluginDependencies,
+  }
+}

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

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 }),
+}))