refactor(editor): Migrate pushConnection mixin to composable and remove collaboration store side effects (no-changelog) (#9249)

packages/editor-ui/src/views/NodeView.vue

@@ -806,6 +806,7 @@ export default defineComponent({
 		this.resetWorkspace();
 		this.canvasStore.initInstance(this.nodeViewRef as HTMLElement);
 		this.titleReset();
+
 		window.addEventListener('message', this.onPostMessageReceived);
 
 		this.clipboard.onPaste.value = this.onClipboardPasteEvent;
@@ -980,6 +981,7 @@ export default defineComponent({
 		if (!this.isDemo) {
 			this.pushStore.pushConnect();
 		}
+		this.collaborationStore.initialize();
 	},
 	beforeUnmount() {
 		// Make sure the event listeners get removed again else we
@@ -993,6 +995,7 @@ export default defineComponent({
 		if (!this.isDemo) {
 			this.pushStore.pushDisconnect();
 		}
+		this.collaborationStore.terminate();
 
 		this.resetWorkspace();
 		this.instance.unbind();

packages/editor-ui/src/views/SettingsCommunityNodesView.vue

@@ -60,7 +60,6 @@ import {
 } from '@/constants';
 import CommunityPackageCard from '@/components/CommunityPackageCard.vue';
 import { useToast } from '@/composables/useToast';
-import { pushConnection } from '@/mixins/pushConnection';
 import type { PublicInstalledPackage } from 'n8n-workflow';
 
 import { useCommunityNodesStore } from '@/stores/communityNodes.store';
@@ -69,6 +68,9 @@ import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings.store';
 import { defineComponent } from 'vue';
 import { useExternalHooks } from '@/composables/useExternalHooks';
+import { useRouter } from 'vue-router';
+import { usePushConnection } from '@/composables/usePushConnection';
+import { usePushConnectionStore } from '@/stores/pushConnection.store';
 
 const PACKAGE_COUNT_THRESHOLD = 31;
 
@@ -77,15 +79,15 @@ export default defineComponent({
 	components: {
 		CommunityPackageCard,
 	},
-	mixins: [pushConnection],
-	setup(props, ctx) {
+	setup() {
+		const router = useRouter();
+		const pushConnection = usePushConnection({ router });
 		const externalHooks = useExternalHooks();
 
 		return {
 			externalHooks,
 			...useToast(),
-			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			...pushConnection.setup?.(props, ctx),
+			pushConnection,
 		};
 	},
 	data() {
@@ -93,10 +95,12 @@ export default defineComponent({
 			loading: false,
 		};
 	},
-	async mounted() {
+	beforeMount() {
+		this.pushConnection.initialize();
 		// The push connection is needed here to receive `reloadNodeType` and `removeNodeType` events when community nodes are installed, updated, or removed.
 		this.pushStore.pushConnect();
-
+	},
+	async mounted() {
 		try {
 			this.loading = true;
 			await this.communityNodesStore.fetchInstalledPackages();
@@ -142,9 +146,10 @@ export default defineComponent({
 	},
 	beforeUnmount() {
 		this.pushStore.pushDisconnect();
+		this.pushConnection.terminate();
 	},
 	computed: {
-		...mapStores(useCommunityNodesStore, useSettingsStore, useUIStore),
+		...mapStores(useCommunityNodesStore, useSettingsStore, useUIStore, usePushConnectionStore),
 		getEmptyStateDescription(): string {
 			const packageCount = this.communityNodesStore.availablePackageCount;