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/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();