feat: dim node

web/app/components/workflow/hooks/use-node-plugin-installation.ts

@@ -99,12 +99,15 @@ const useToolInstallation = (data: ToolNodeType): InstallationState => {
       invalidateTools()
   }, [invalidateTools])
 
+  const shouldDim = (!!collectionInfo && !isResolved) || (isResolved && !matchedCollection)
+
   return {
     isChecking: !!collectionInfo && !isResolved,
     isMissing: isResolved && !matchedCollection,
     uniqueIdentifier,
     canInstall,
     onInstallSuccess,
+    shouldDim,
   }
 }
 
@@ -138,12 +141,15 @@ const useTriggerInstallation = (data: PluginTriggerNodeType): InstallationState
     invalidateTriggers()
   }, [invalidateTriggers])
 
+  const shouldDim = isLoading || (!isLoading && !!triggerProviders && !matchedProvider)
+
   return {
     isChecking: isLoading,
     isMissing: !isLoading && !!triggerProviders && !matchedProvider,
     uniqueIdentifier,
     canInstall,
     onInstallSuccess,
+    shouldDim,
   }
 }
 
@@ -175,12 +181,15 @@ const useDataSourceInstallation = (data: DataSourceNodeType): InstallationState
 
   const hasLoadedList = dataSourceList !== undefined
 
+  const shouldDim = !hasLoadedList || (hasLoadedList && !matchedPlugin)
+
   return {
     isChecking: !hasLoadedList,
     isMissing: hasLoadedList && !matchedPlugin,
     uniqueIdentifier,
     canInstall,
     onInstallSuccess,
+    shouldDim,
   }
 }
 
@@ -203,6 +212,7 @@ export const useNodePluginInstallation = (data: CommonNodeType): InstallationSta
         uniqueIdentifier: undefined,
         canInstall: false,
         onInstallSuccess: () => undefined,
+        shouldDim: false,
       }
   }
 }

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

@@ -1,11 +1,13 @@
 import type { FC } from 'react'
-import { memo } from 'react'
+import { memo, useEffect } from 'react'
 import type { NodeProps } from '@/app/components/workflow/types'
 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 {
@@ -14,7 +16,20 @@ const Node: FC<NodeProps<DataSourceNodeType>> = ({
     uniqueIdentifier,
     canInstall,
     onInstallSuccess,
+    shouldDim,
   } = useNodePluginInstallation(data)
+  const { handleNodeDataUpdate } = useNodeDataUpdate()
+
+  useEffect(() => {
+    if (data._dimmed === shouldDim)
+      return
+    handleNodeDataUpdate({
+      id,
+      data: {
+        _dimmed: shouldDim,
+      },
+    })
+  }, [data._dimmed, handleNodeDataUpdate, id, shouldDim])
 
   const showInstallButton = !isChecking && isMissing && canInstall && uniqueIdentifier
 

web/app/components/workflow/nodes/tool/node.tsx

@@ -1,12 +1,14 @@
 import type { FC } from 'react'
-import React from 'react'
+import React, { useEffect } from 'react'
 import type { NodeProps } from '@/app/components/workflow/types'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 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 { ToolNodeType } from './types'
 
 const Node: FC<NodeProps<ToolNodeType>> = ({
+  id,
   data,
 }) => {
   const { tool_configurations, paramSchemas } = data
@@ -17,8 +19,21 @@ const Node: FC<NodeProps<ToolNodeType>> = ({
     uniqueIdentifier,
     canInstall,
     onInstallSuccess,
+    shouldDim,
   } = useNodePluginInstallation(data)
   const showInstallButton = !isChecking && isMissing && canInstall && uniqueIdentifier
+  const { handleNodeDataUpdate } = useNodeDataUpdate()
+
+  useEffect(() => {
+    if (data._dimmed === shouldDim)
+      return
+    handleNodeDataUpdate({
+      id,
+      data: {
+        _dimmed: shouldDim,
+      },
+    })
+  }, [data._dimmed, handleNodeDataUpdate, id, shouldDim])
 
   const hasConfigs = toolConfigs.length > 0
 

web/app/components/workflow/nodes/trigger-plugin/node.tsx

@@ -1,10 +1,11 @@
 import NodeStatus, { NodeStatusEnum } from '@/app/components/base/node-status'
 import type { NodeProps } from '@/app/components/workflow/types'
 import type { FC } from 'react'
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 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 { PluginTriggerNodeType } from './types'
 import useConfig from './use-config'
 
@@ -50,9 +51,22 @@ const Node: FC<NodeProps<PluginTriggerNodeType>> = ({
     uniqueIdentifier,
     canInstall,
     onInstallSuccess,
+    shouldDim,
   } = useNodePluginInstallation(data)
+  const { handleNodeDataUpdate } = useNodeDataUpdate()
   const showInstallButton = !isChecking && isMissing && canInstall && uniqueIdentifier
 
+  useEffect(() => {
+    if (data._dimmed === shouldDim)
+      return
+    handleNodeDataUpdate({
+      id,
+      data: {
+        _dimmed: shouldDim,
+      },
+    })
+  }, [data._dimmed, handleNodeDataUpdate, id, shouldDim])
+
   const { t } = useTranslation()
 
   const isValidSubscription = useMemo(() => {