feat: introduce trigger functionality (#27644)

Signed-off-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: Stream <Stream_2@qq.com>
Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: zhsama <torvalds@linux.do>
Co-authored-by: Harry <xh001x@hotmail.com>
Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: yessenia <yessenia.contact@gmail.com>
Co-authored-by: hjlarry <hjlarry@163.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: WTW0313 <twwu@dify.ai>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

web/app/components/workflow/nodes/data-source/node.tsx

@@ -1,10 +1,57 @@
 import type { FC } from 'react'
-import { memo } from 'react'
-import type { DataSourceNodeType } from './types'
+import { memo, useEffect } from 'react'
 import type { NodeProps } from '@/app/components/workflow/types'
-const Node: FC<NodeProps<DataSourceNodeType>> = () => {
+import { InstallPluginButton } from '@/app/components/workflow/nodes/_base/components/install-plugin-button'
+import { useNodePluginInstallation } from '@/app/components/workflow/hooks/use-node-plugin-installation'
+import { useNodeDataUpdate } from '@/app/components/workflow/hooks/use-node-data-update'
+import type { DataSourceNodeType } from './types'
+
+const Node: FC<NodeProps<DataSourceNodeType>> = ({
+  id,
+  data,
+}) => {
+  const {
+    isChecking,
+    isMissing,
+    uniqueIdentifier,
+    canInstall,
+    onInstallSuccess,
+    shouldDim,
+  } = useNodePluginInstallation(data)
+  const { handleNodeDataUpdate } = useNodeDataUpdate()
+  const shouldLock = !isChecking && isMissing && canInstall && Boolean(uniqueIdentifier)
+
+  useEffect(() => {
+    if (data._pluginInstallLocked === shouldLock && data._dimmed === shouldDim)
+      return
+    handleNodeDataUpdate({
+      id,
+      data: {
+        _pluginInstallLocked: shouldLock,
+        _dimmed: shouldDim,
+      },
+    })
+  }, [data._pluginInstallLocked, data._dimmed, handleNodeDataUpdate, id, shouldDim, shouldLock])
+
+  const showInstallButton = !isChecking && isMissing && canInstall && uniqueIdentifier
+
+  if (!showInstallButton)
+    return null
+
   return (
-    <div>
+    <div className='relative mb-1 px-3 py-1'>
+      <div className='pointer-events-auto absolute right-3 top-[-32px] z-40'>
+        <InstallPluginButton
+          size='small'
+          extraIdentifiers={[
+            data.plugin_id,
+            data.provider_name,
+          ].filter(Boolean) as string[]}
+          className='!font-medium !text-text-accent'
+          uniqueIdentifier={uniqueIdentifier!}
+          onSuccess={onInstallSuccess}
+        />
+      </div>
     </div>
   )
 }