feat(editor): block UI in NDV when workflow is listening to events (#4390)

* feature: block UI in NDV when workflow is listening to events

* feature: hide stop listening button in parameters pane and show stop listening button in input pane for webhook

* feature: create block UI design system component

* fix: add back accidentally removed prop

* fix(editor): extend node settings event listener button functionality

* refactor(editor): using composition API in BlockUi component

packages/editor-ui/src/components/NodeDetailsView.vue

@@ -72,6 +72,7 @@
 						:linkedRuns="linked"
 						:sessionId="sessionId"
 						:isReadOnly="readOnly || hasForeignCredential"
+						:blockUI="blockUi && isTriggerNode"
 						@linkRun="onLinkRunToOutput"
 						@unlinkRun="() => onUnlinkRun('output')"
 						@runChange="onRunOutputIndexChange"
@@ -87,8 +88,10 @@
 						:sessionId="sessionId"
 						:nodeType="activeNodeType"
 						:isReadOnly="readOnly || hasForeignCredential"
+						:blockUI="blockUi && showTriggerPanel"
 						@valueChanged="valueChanged"
 						@execute="onNodeExecute"
+						@stopExecution="onStopExecution"
 						@activate="onWorkflowActivate"
 					/>
 					<a
@@ -225,14 +228,10 @@ export default mixins(
 			return null;
 		},
 		showTriggerPanel(): boolean {
-			const isWebhookBasedNode = this.activeNodeType && this.activeNodeType.webhooks && this.activeNodeType.webhooks.length;
-			const isPollingNode = this.activeNodeType && this.activeNodeType.polling;
-			const override = this.activeNodeType && this.activeNodeType.triggerPanel;
-			return Boolean(
-				!this.readOnly &&
-				this.isTriggerNode &&
-				(isWebhookBasedNode || isPollingNode || override),
-			);
+			const isWebhookBasedNode = !!this.activeNodeType?.webhooks?.length;
+			const isPollingNode = this.activeNodeType?.polling;
+			const override = !!this.activeNodeType?.triggerPanel;
+			return !this.readOnly && this.isTriggerNode && (isWebhookBasedNode || isPollingNode || override);
 		},
 		workflow(): Workflow {
 			return this.getCurrentWorkflow();
@@ -343,6 +342,15 @@ export default mixins(
 		outputPanelEditMode(): { enabled: boolean; value: string; } {
 			return this.$store.getters['ndv/outputPanelEditMode'];
 		},
+		isWorkflowRunning(): boolean {
+			return this.$store.getters.isActionActive('workflowRunning');
+		},
+		isExecutionWaitingForWebhook(): boolean {
+			return this.$store.getters.executionWaitingForWebhook;
+		},
+		blockUi(): boolean {
+			return this.isWorkflowRunning || this.isExecutionWaitingForWebhook;
+		},
 	},
 	watch: {
 		activeNode(node: INodeUi | null) {
@@ -608,8 +616,13 @@ export default mixins(
 			});
 		},
 		checkForeignCredentials() {
-			const issues = this.getNodeCredentialIssues(this.activeNode);
-			this.hasForeignCredential = !!issues?.credentials?.foreign;
+			if(this.activeNode){
+				const issues = this.getNodeCredentialIssues(this.activeNode);
+				this.hasForeignCredential = !!issues?.credentials?.foreign;
+			}
+		},
+		onStopExecution(){
+			this.$emit('stopExecution');
 		},
 	},
 });

packages/editor-ui/src/components/NodeExecuteButton.vue

@@ -3,7 +3,7 @@
 		<div slot="content">{{ disabledHint }}</div>
 		<div>
 			<n8n-button
-				:loading="nodeRunning && !isListeningForEvents"
+				:loading="nodeRunning && !isListeningForEvents && !isListeningForWorkflowEvents"
 				:disabled="disabled || !!disabledHint"
 				:label="buttonLabel"
 				:type="type"
@@ -98,6 +98,9 @@ export default mixins(
 				(!executedNode || executedNode === this.nodeName)
 			);
 		},
+		isListeningForWorkflowEvents(): boolean {
+			return this.nodeRunning && this.isTriggerNode && !this.isScheduleTrigger && !this.isManualTriggerNode;
+		},
 		hasIssues (): boolean {
 			return Boolean(this.node && this.node.issues && (this.node.issues.parameters || this.node.issues.credentials));
 		},
@@ -125,7 +128,7 @@ export default mixins(
 			return '';
 		},
 		buttonLabel(): string {
-			if (this.isListeningForEvents) {
+			if (this.isListeningForEvents || this.isListeningForWorkflowEvents) {
 				return this.$locale.baseText('ndv.execute.stopListening');
 			}
 
@@ -164,6 +167,8 @@ export default mixins(
 		async onClick() {
 			if (this.isListeningForEvents) {
 				this.stopWaitingForWebhook();
+			} else if (this.isListeningForWorkflowEvents) {
+				this.$emit('stopExecution');
 			} else {
 				let shouldUnpinAndExecute = false;
 				if (this.hasPinData) {

packages/editor-ui/src/components/NodeSettings.vue

@@ -12,11 +12,13 @@
 				></NodeTitle>
 				<div v-if="!isReadOnly">
 					<NodeExecuteButton
+						v-if="!blockUI"
 						:nodeName="node.name"
-						:disabled="outputPanelEditMode.enabled"
+						:disabled="outputPanelEditMode.enabled && !isTriggerNode"
 						size="small"
 						telemetrySource="parameters"
 						@execute="onNodeExecute"
+						@stopExecution="onStopExecution"
 					/>
 				</div>
 			</div>
@@ -113,6 +115,7 @@
 				/>
 			</div>
 		</div>
+		<n8n-block-ui :show="blockUI" />
 	</div>
 </template>
 
@@ -224,6 +227,9 @@ export default mixins(externalHooks, nodeHelpers).extend({
 		isCommunityNode(): boolean {
 			return isCommunityPackageName(this.node.type);
 		},
+		isTriggerNode(): boolean {
+			return this.$store.getters['nodeTypes/isTriggerNode'](this.node.type);
+		},
 	},
 	props: {
 		eventBus: {},
@@ -239,6 +245,10 @@ export default mixins(externalHooks, nodeHelpers).extend({
 		isReadOnly: {
 			type: Boolean,
 		},
+		blockUI: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -758,6 +768,9 @@ export default mixins(externalHooks, nodeHelpers).extend({
 				node_type: this.node.type,
 			});
 		},
+		onStopExecution(){
+			this.$emit('stopExecution');
+		},
 	},
 	mounted() {
 		this.setNodeValues();

packages/editor-ui/src/components/OutputPanel.vue

@@ -10,6 +10,7 @@
 		:executingMessage="$locale.baseText('ndv.output.executing')"
 		:sessionId="sessionId"
 		:isReadOnly="isReadOnly"
+		:blockUI="blockUI"
 		paneType="output"
 		@runChange="onRunIndexChange"
 		@linkRun="onLinkRun"
@@ -109,6 +110,10 @@ export default mixins(
 		sessionId: {
 			type: String,
 		},
+		blockUI: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	computed: {
 		node(): INodeUi {

packages/editor-ui/src/components/RunData.vue

@@ -321,7 +321,7 @@
 				</n8n-select>
 			</div>
 		</div>
-
+		<n8n-block-ui :show="blockUI" :class="$style.uiBlocker" />
 	</div>
 </template>
 
@@ -367,7 +367,7 @@ import { genericHelpers } from '@/components/mixins/genericHelpers';
 import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 import { pinData } from '@/components/mixins/pinData';
 import { CodeEditor } from "@/components/forms";
-import { dataPinningEventBus } from '../event-bus/data-pinning-event-bus';
+import { dataPinningEventBus } from '@/event-bus/data-pinning-event-bus';
 import { clearJsonKey, executionDataToJson, stringSizeInBytes } from './helpers';
 import RunDataTable from './RunDataTable.vue';
 import RunDataJson from '@/components/RunDataJson.vue';
@@ -437,6 +437,10 @@ export default mixins(
 			showMappingHint: {
 				type: Boolean,
 			},
+			blockUI: {
+				type: Boolean,
+				default: false,
+			},
 		},
 		data () {
 			return {
@@ -1383,4 +1387,9 @@ export default mixins(
 	height: 100%;
 }
 
+.uiBlocker {
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
 </style>

packages/editor-ui/src/components/TriggerPanel.vue

@@ -28,6 +28,12 @@
 						:copy-button-text="$locale.baseText('generic.clickToCopy')"
 						@copy="onTestLinkCopied"
 					></CopyInput>
+					<NodeExecuteButton
+						:nodeName="nodeName"
+						@execute="onNodeExecute"
+						size="medium"
+						telemetrySource="inputs"
+					/>
 				</div>
 				<div v-else>
 					<n8n-text tag="div" size="large" color="text-dark" class="mb-2xs" bold>{{
@@ -60,7 +66,6 @@
 					</div>
 
 					<NodeExecuteButton
-						v-if="!isActivelyPolling"
 						:nodeName="nodeName"
 						@execute="onNodeExecute"
 						size="medium"