opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
lyzno1 2025-10-30 16:55:07 +08:00
parent b25d379ef4
commit 7d4bb45f94
No known key found for this signature in database
5 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/app/components/workflow/nodes/_base/node.tsx
View File

@ -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]'>

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

@ -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={[

10
web/app/components/workflow/nodes/tool/node.tsx
View File

@ -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'>

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

@ -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

1
web/app/components/workflow/types.ts
View File

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