feat(editor): Replace root events with event bus events (no-changelog) (#6454)

* feat: replace root events with event bus events

* fix: prevent cypress from replacing global with globalThis in import path

* feat: remove emitter mixin

* fix: replace component events with event bus

* fix: fix linting issue

* fix: fix breaking expression switch

* chore: prettify ndv e2e suite code

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

@@ -5,25 +5,35 @@
 </template>
 
 <script lang="ts">
+import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
-import emitter from '@/mixins/emitter';
+import type { EventBus } from 'n8n-design-system/utils';
+import { createEventBus } from 'n8n-design-system/utils';
 
 export default defineComponent({
 	name: 'IntersectionObserved',
-	mixins: [emitter],
-	props: ['enabled'],
+	props: {
+		enabled: {
+			type: Boolean,
+			default: false,
+		},
+		eventBus: {
+			type: Object as PropType<EventBus>,
+			default: () => createEventBus(),
+		},
+	},
 	mounted() {
 		if (!this.enabled) {
 			return;
 		}
 
 		this.$nextTick(() => {
-			this.$dispatch('IntersectionObserver', 'observe', this.$refs.observed);
+			this.eventBus.emit('observe', this.$refs.observed);
 		});
 	},
 	beforeDestroy() {
 		if (this.enabled) {
-			this.$dispatch('IntersectionObserver', 'unobserve', this.$refs.observed);
+			this.eventBus.emit('unobserve', this.$refs.observed);
 		}
 	},
 });

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

@@ -5,11 +5,27 @@
 </template>
 
 <script lang="ts">
+import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
+import type { EventBus } from 'n8n-design-system/utils';
+import { createEventBus } from 'n8n-design-system/utils';
 
 export default defineComponent({
 	name: 'IntersectionObserver',
-	props: ['threshold', 'enabled'],
+	props: {
+		threshold: {
+			type: Number,
+			default: 0,
+		},
+		enabled: {
+			type: Boolean,
+			default: false,
+		},
+		eventBus: {
+			type: Object as PropType<EventBus>,
+			default: () => createEventBus(),
+		},
+	},
 	data() {
 		return {
 			observer: null,
@@ -35,13 +51,13 @@ export default defineComponent({
 			});
 		}, options);
 
-		this.$data.observer = observer;
+		this.observer = observer;
 
-		this.$on('observe', (observed: Element) => {
+		this.eventBus.on('observe', (observed: Element) => {
 			observer.observe(observed);
 		});
 
-		this.$on('unobserve', (observed: Element) => {
+		this.eventBus.on('unobserve', (observed: Element) => {
 			observer.unobserve(observed);
 		});
 	},

packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue

@@ -166,6 +166,7 @@ import type { IPermissions } from '@/permissions';
 import { getWorkflowPermissions } from '@/permissions';
 import { createEventBus } from 'n8n-design-system';
 import { useCloudPlanStore } from '@/stores';
+import { nodeViewEventBus } from '@/event-bus';
 
 const hasChanged = (prev: string[], curr: string[]) => {
 	if (prev.length !== curr.length) {
@@ -445,7 +446,7 @@ export default defineComponent({
 					return;
 				}
 
-				this.$root.$emit('importWorkflowData', { data: workflowData });
+				nodeViewEventBus.emit('importWorkflowData', { data: workflowData });
 			};
 
 			const inputRef = this.$refs.importFile as HTMLInputElement | undefined;
@@ -505,7 +506,7 @@ export default defineComponent({
 							},
 						)) as MessageBoxInputData;
 
-						this.$root.$emit('importWorkflowUrl', { url: promptResponse.value });
+						nodeViewEventBus.emit('importWorkflowUrl', { url: promptResponse.value });
 					} catch (e) {}
 					break;
 				}

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

@@ -28,6 +28,7 @@
 				:droppable="droppable"
 				:node="node"
 				:path="path"
+				:event-bus="eventBus"
 				@input="valueChanged"
 				@modalOpenerClick="openExpressionEditorModal"
 				@focus="setFocus"
@@ -391,8 +392,8 @@ import { useCredentialsStore } from '@/stores/credentials.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { htmlEditorEventBus } from '@/event-bus';
 import Vue from 'vue';
-
-type ResourceLocatorRef = InstanceType<typeof ResourceLocator>;
+import type { EventBus } from 'n8n-design-system/utils';
+import { createEventBus } from 'n8n-design-system/utils';
 
 export default defineComponent({
 	name: 'parameter-input',
@@ -463,6 +464,10 @@ export default defineComponent({
 				size: 'small',
 			}),
 		},
+		eventBus: {
+			type: Object as PropType<EventBus>,
+			default: () => createEventBus(),
+		},
 	},
 	data() {
 		return {
@@ -1112,9 +1117,7 @@ export default defineComponent({
 				}
 			} else if (command === 'refreshOptions') {
 				if (this.isResourceLocatorParameter) {
-					const resourceLocatorRef = this.$refs.resourceLocator as ResourceLocatorRef | undefined;
-
-					resourceLocatorRef?.$emit('refreshList');
+					this.eventBus.emit('refreshList');
 				}
 				void this.loadRemoteParameterOptions();
 			} else if (command === 'formatHtml') {
@@ -1146,7 +1149,7 @@ export default defineComponent({
 		});
 	},
 	mounted() {
-		this.$on('optionSelected', this.optionSelected);
+		this.eventBus.on('optionSelected', this.optionSelected);
 
 		this.tempValue = this.displayValue as string;
 		if (this.node !== null) {
@@ -1186,6 +1189,9 @@ export default defineComponent({
 			inputFieldRef: this.$refs['inputField'],
 		});
 	},
+	beforeDestroy() {
+		this.eventBus.off('optionSelected', this.optionSelected);
+	},
 });
 </script>
 

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

@@ -32,6 +32,7 @@
 				:isForCredential="true"
 				:eventSource="eventSource"
 				:hint="!showRequiredErrors ? hint : ''"
+				:event-bus="eventBus"
 				@focus="onFocus"
 				@blur="onBlur"
 				@textInput="valueChanged"
@@ -65,6 +66,7 @@ import { isValueExpression } from '@/utils';
 import type { INodeParameterResourceLocator, INodeProperties, IParameterLabel } from 'n8n-workflow';
 import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows.store';
+import { createEventBus } from 'n8n-design-system/utils';
 
 type ParamRef = InstanceType<typeof ParameterInputWrapper>;
 
@@ -100,6 +102,7 @@ export default defineComponent({
 			focused: false,
 			blurredEver: false,
 			menuExpanded: false,
+			eventBus: createEventBus(),
 		};
 	},
 	computed: {
@@ -147,9 +150,7 @@ export default defineComponent({
 			this.menuExpanded = expanded;
 		},
 		optionSelected(command: string) {
-			if (this.$refs.param) {
-				(this.$refs.param as ParamRef).$emit('optionSelected', command);
-			}
+			this.eventBus.emit('optionSelected', command);
 		},
 		valueChanged(parameterData: IUpdateInformation) {
 			this.$emit('change', parameterData);

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

@@ -56,6 +56,7 @@
 							:hint="hint"
 							:hide-issues="hideIssues"
 							:label="label"
+							:event-bus="eventBus"
 							@valueChanged="valueChanged"
 							@textInput="onTextInput"
 							@focus="onFocus"
@@ -98,6 +99,7 @@ import { useNDVStore } from '@/stores/ndv.store';
 import { useSegment } from '@/stores/segment.store';
 import { externalHooks } from '@/mixins/externalHooks';
 import { getMappedResult } from '@/utils/mappingUtils';
+import { createEventBus } from 'n8n-design-system/utils';
 
 type ParameterInputWrapperRef = InstanceType<typeof ParameterInputWrapper>;
 
@@ -112,7 +114,10 @@ export default defineComponent({
 		ParameterInputWrapper,
 	},
 	setup() {
+		const eventBus = createEventBus();
+
 		return {
+			eventBus,
 			...useToast(),
 		};
 	},
@@ -234,17 +239,14 @@ export default defineComponent({
 			this.menuExpanded = expanded;
 		},
 		optionSelected(command: string) {
-			const paramRef = this.$refs.param as ParameterInputWrapperRef | undefined;
-			paramRef?.$emit('optionSelected', command);
+			this.eventBus.emit('optionSelected', command);
 		},
 		valueChanged(parameterData: IUpdateInformation) {
 			this.$emit('valueChanged', parameterData);
 		},
 		onTextInput(parameterData: IUpdateInformation) {
-			const paramRef = this.$refs.param as ParameterInputWrapperRef | undefined;
-
 			if (isValueExpression(this.parameter, parameterData.value)) {
-				paramRef?.$emit('optionSelected', 'addExpression');
+				this.eventBus.emit('optionSelected', 'addExpression');
 			}
 		},
 		onDrop(newParamValue: string) {

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

@@ -18,6 +18,7 @@
 			:expressionEvaluated="expressionValueComputed"
 			:label="label"
 			:data-test-id="`parameter-input-${parameter.name}`"
+			:event-bus="internalEventBus"
 			@focus="onFocus"
 			@blur="onBlur"
 			@drop="onDrop"
@@ -61,8 +62,8 @@ import type { INodeUi, IUpdateInformation, TargetItem } from '@/Interface';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { isValueExpression } from '@/utils';
 import { useNDVStore } from '@/stores/ndv.store';
-
-type ParamRef = InstanceType<typeof ParameterInput>;
+import type { EventBus } from 'n8n-design-system/utils';
+import { createEventBus } from 'n8n-design-system/utils';
 
 export default defineComponent({
 	name: 'parameter-input-wrapper',
@@ -71,8 +72,16 @@ export default defineComponent({
 		ParameterInput,
 		InputHint,
 	},
+	data() {
+		return {
+			internalEventBus: createEventBus(),
+		};
+	},
 	mounted() {
-		this.$on('optionSelected', this.optionSelected);
+		this.eventBus.on('optionSelected', this.optionSelected);
+	},
+	beforeDestroy() {
+		this.eventBus.off('optionSelected', this.optionSelected);
 	},
 	props: {
 		isReadOnly: {
@@ -124,6 +133,10 @@ export default defineComponent({
 				size: 'small',
 			}),
 		},
+		eventBus: {
+			type: Object as PropType<EventBus>,
+			default: () => createEventBus(),
+		},
 	},
 	computed: {
 		...mapStores(useNDVStore),
@@ -217,9 +230,7 @@ export default defineComponent({
 			this.$emit('drop', data);
 		},
 		optionSelected(command: string) {
-			const paramRef = this.$refs.param as ParamRef | undefined;
-
-			paramRef?.$emit('optionSelected', command);
+			this.internalEventBus.emit('optionSelected', command);
 		},
 		onValueChanged(parameterData: IUpdateInformation) {
 			this.$emit('valueChanged', parameterData);

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

@@ -15,11 +15,11 @@
 			:hasMore="currentQueryHasMore"
 			:errorView="currentQueryError"
 			:width="width"
+			:event-bus="eventBus"
 			@input="onListItemSelected"
 			@hide="onDropdownHide"
 			@filter="onSearchFilter"
 			@loadMore="loadResourcesDebounced"
-			ref="dropdown"
 		>
 			<template #error>
 				<div :class="$style.error" data-test-id="rlc-error-container">
@@ -176,8 +176,8 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
-
-type ResourceLocatorDropdownRef = InstanceType<typeof ResourceLocatorDropdown>;
+import { createEventBus } from 'n8n-design-system/utils';
+import type { EventBus } from 'n8n-design-system/utils';
 
 interface IResourceLocatorQuery {
 	results: INodeListSearchItems[];
@@ -256,6 +256,10 @@ export default defineComponent({
 		loadOptionsMethod: {
 			type: String,
 		},
+		eventBus: {
+			type: Object as PropType<EventBus>,
+			default: () => createEventBus(),
+		},
 	},
 	data() {
 		return {
@@ -475,17 +479,20 @@ export default defineComponent({
 		},
 	},
 	mounted() {
-		this.$on('refreshList', this.refreshList);
+		this.eventBus.on('refreshList', this.refreshList);
 		window.addEventListener('resize', this.setWidth);
+
 		useNDVStore().$subscribe((mutation, state) => {
 			// Update the width when main panel dimension change
 			this.setWidth();
 		});
+
 		setTimeout(() => {
 			this.setWidth();
 		}, 0);
 	},
 	beforeDestroy() {
+		this.eventBus.off('refreshList', this.refreshList);
 		window.removeEventListener('resize', this.setWidth);
 	},
 	methods: {
@@ -510,9 +517,8 @@ export default defineComponent({
 			this.trackEvent('User refreshed resource locator list');
 		},
 		onKeyDown(e: MouseEvent) {
-			const dropdownRef = this.$refs.dropdown as ResourceLocatorDropdownRef | undefined;
-			if (dropdownRef && this.showResourceDropdown && !this.isSearchable) {
-				dropdownRef.$emit('keyDown', e);
+			if (this.showResourceDropdown && !this.isSearchable) {
+				this.eventBus.emit('keyDown', e);
 			}
 		},
 		openResource(url: string) {

packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue

@@ -82,6 +82,8 @@
 import type { IResourceLocatorResultExpanded } from '@/Interface';
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
+import type { EventBus } from 'n8n-design-system/utils';
+import { createEventBus } from 'n8n-design-system/utils';
 
 const SEARCH_BAR_HEIGHT_PX = 40;
 const SCROLL_MARGIN_PX = 10;
@@ -120,6 +122,10 @@ export default defineComponent({
 		width: {
 			type: Number,
 		},
+		eventBus: {
+			type: Object as PropType<EventBus>,
+			default: () => createEventBus(),
+		},
 	},
 	data() {
 		return {
@@ -128,7 +134,10 @@ export default defineComponent({
 		};
 	},
 	mounted() {
-		this.$on('keyDown', this.onKeyDown);
+		this.eventBus.on('keyDown', this.onKeyDown);
+	},
+	beforeDestroy() {
+		this.eventBus.off('keyDown', this.onKeyDown);
 	},
 	computed: {
 		sortedResources(): IResourceLocatorResultExpanded[] {

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

@@ -4,6 +4,7 @@
 		@observed="onObserved"
 		class="tags-container"
 		:enabled="responsive"
+		:event-bus="intersectionEventBus"
 	>
 		<template>
 			<span class="tags">
@@ -26,6 +27,7 @@
 						:class="{ hidden: tag.hidden }"
 						:data-id="tag.id"
 						:enabled="responsive"
+						:event-bus="intersectionEventBus"
 						v-else
 					>
 						<el-tag :title="tag.name" type="info" size="small" :class="{ hoverable }">
@@ -46,6 +48,7 @@ import IntersectionObserver from './IntersectionObserver.vue';
 import IntersectionObserved from './IntersectionObserved.vue';
 import { mapStores } from 'pinia';
 import { useTagsStore } from '@/stores/tags.store';
+import { createEventBus } from 'n8n-design-system/utils';
 
 // random upper limit if none is set to minimize performance impact of observers
 const DEFAULT_MAX_TAGS_LIMIT = 20;
@@ -62,6 +65,7 @@ export default defineComponent({
 	props: ['tagIds', 'limit', 'clickable', 'responsive', 'hoverable'],
 	data() {
 		return {
+			intersectionEventBus: createEventBus(),
 			visibility: {} as { [id: string]: boolean },
 		};
 	},