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/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) {