fix(workflow): align plugin lock overlay with install availability

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

@@ -150,7 +150,7 @@ const BaseNode: FC<BaseNodeProps> = ({
         'relative flex rounded-2xl border',
         showSelectedBorder ? 'border-components-option-card-option-selected-border' : 'border-transparent',
         data._waitingRun && 'opacity-70',
-        data._dimmed && 'opacity-30',
+        data._pluginInstallLocked && 'cursor-not-allowed',
       )}
       ref={nodeRef}
       style={{
@@ -158,6 +158,17 @@ const BaseNode: FC<BaseNodeProps> = ({
         height: (data.type === BlockEnum.Iteration || data.type === BlockEnum.Loop) ? data.height : 'auto',
       }}
     >
+      {(data._dimmed || data._pluginInstallLocked) && (
+        <div
+          className={cn(
+            'absolute inset-0 rounded-2xl transition-opacity',
+            data._pluginInstallLocked
+              ? 'pointer-events-auto z-30 bg-workflow-block-parma-bg opacity-80 backdrop-blur-[2px]'
+              : 'pointer-events-none z-20 bg-workflow-block-parma-bg opacity-50',
+          )}
+          data-testid='workflow-node-install-overlay'
+        />
+      )}
       {
         data.type === BlockEnum.DataSource && (
           <div className='absolute inset-[-2px] top-[-22px] z-[-1] rounded-[18px] bg-node-data-source-bg p-0.5 backdrop-blur-[6px]'>

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

@@ -19,17 +19,19 @@ const Node: FC<NodeProps<DataSourceNodeType>> = ({
     shouldDim,
   } = useNodePluginInstallation(data)
   const { handleNodeDataUpdate } = useNodeDataUpdate()
+  const shouldLock = !isChecking && isMissing && canInstall && Boolean(uniqueIdentifier)
 
   useEffect(() => {
-    if (data._dimmed === shouldDim)
+    if (data._pluginInstallLocked === shouldLock && data._dimmed === shouldDim)
       return
     handleNodeDataUpdate({
       id,
       data: {
+        _pluginInstallLocked: shouldLock,
         _dimmed: shouldDim,
       },
     })
-  }, [data._dimmed, handleNodeDataUpdate, id, shouldDim])
+  }, [data._pluginInstallLocked, data._dimmed, handleNodeDataUpdate, id, shouldDim, shouldLock])
 
   const showInstallButton = !isChecking && isMissing && canInstall && uniqueIdentifier
 
@@ -38,7 +40,7 @@ const Node: FC<NodeProps<DataSourceNodeType>> = ({
 
   return (
     <div className='relative mb-1 px-3 py-1'>
-      <div className='absolute right-3 top-[-32px] z-20'>
+      <div className='pointer-events-auto absolute right-3 top-[-32px] z-40'>
         <InstallPluginButton
           size='small'
           extraIdentifiers={[

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

@@ -23,17 +23,19 @@ const Node: FC<NodeProps<ToolNodeType>> = ({
   } = useNodePluginInstallation(data)
   const showInstallButton = !isChecking && isMissing && canInstall && uniqueIdentifier
   const { handleNodeDataUpdate } = useNodeDataUpdate()
+  const shouldLock = !isChecking && isMissing && canInstall && Boolean(uniqueIdentifier)
 
   useEffect(() => {
-    if (data._dimmed === shouldDim)
+    if (data._pluginInstallLocked === shouldLock && data._dimmed === shouldDim)
       return
     handleNodeDataUpdate({
       id,
       data: {
+        _pluginInstallLocked: shouldLock,
         _dimmed: shouldDim,
       },
     })
-  }, [data._dimmed, handleNodeDataUpdate, id, shouldDim])
+  }, [data._pluginInstallLocked, data._dimmed, handleNodeDataUpdate, id, shouldDim, shouldLock])
 
   const hasConfigs = toolConfigs.length > 0
 
@@ -43,7 +45,7 @@ const Node: FC<NodeProps<ToolNodeType>> = ({
   return (
     <div className='relative mb-1 px-3 py-1'>
       {showInstallButton && (
-        <div className='absolute right-3 top-[-32px] z-20'>
+        <div className='pointer-events-auto absolute right-3 top-[-32px] z-40'>
           <InstallPluginButton
             size='small'
             className='!font-medium !text-text-accent'
@@ -58,7 +60,7 @@ const Node: FC<NodeProps<ToolNodeType>> = ({
         </div>
       )}
       {hasConfigs && (
-        <div className='space-y-0.5'>
+        <div className='space-y-0.5' aria-disabled={shouldDim}>
           {toolConfigs.map((key, index) => (
             <div key={index} className='flex h-6 items-center justify-between space-x-1 rounded-md  bg-workflow-block-parma-bg px-1 text-xs font-normal text-text-secondary'>
               <div title={key} className='max-w-[100px] shrink-0 truncate text-xs font-medium uppercase text-text-tertiary'>

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

@@ -55,17 +55,19 @@ const Node: FC<NodeProps<PluginTriggerNodeType>> = ({
   } = useNodePluginInstallation(data)
   const { handleNodeDataUpdate } = useNodeDataUpdate()
   const showInstallButton = !isChecking && isMissing && canInstall && uniqueIdentifier
+  const shouldLock = !isChecking && isMissing && canInstall && Boolean(uniqueIdentifier)
 
   useEffect(() => {
-    if (data._dimmed === shouldDim)
+    if (data._pluginInstallLocked === shouldLock && data._dimmed === shouldDim)
       return
     handleNodeDataUpdate({
       id,
       data: {
+        _pluginInstallLocked: shouldLock,
         _dimmed: shouldDim,
       },
     })
-  }, [data._dimmed, handleNodeDataUpdate, id, shouldDim])
+  }, [data._pluginInstallLocked, data._dimmed, handleNodeDataUpdate, id, shouldDim, shouldLock])
 
   const { t } = useTranslation()
 
@@ -76,7 +78,7 @@ const Node: FC<NodeProps<PluginTriggerNodeType>> = ({
   return (
     <div className="relative mb-1 px-3 py-1">
       {showInstallButton && (
-        <div className="absolute right-3 top-[-32px] z-20">
+        <div className="pointer-events-auto absolute right-3 top-[-32px] z-40">
           <InstallPluginButton
             size="small"
             extraIdentifiers={[
@@ -90,7 +92,7 @@ const Node: FC<NodeProps<PluginTriggerNodeType>> = ({
           />
         </div>
       )}
-      <div className="space-y-0.5">
+      <div className="space-y-0.5" aria-disabled={shouldDim}>
         {!isValidSubscription && <NodeStatus status={NodeStatusEnum.warning} message={t('pluginTrigger.node.status.warning')} />}
         {isValidSubscription && configKeys.map((key, index) => (
           <div

web/app/components/workflow/types.ts

@@ -106,6 +106,7 @@ export type CommonNodeType<T = {}> = {
   subscription_id?: string
   provider_id?: string
   _dimmed?: boolean
+  _pluginInstallLocked?: boolean
 } & T & Partial<PluginDefaultValue>
 
 export type CommonEdgeType = {