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

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

@@ -54,6 +54,7 @@ const onDocumentVisibilityChange = () => {
 };
 
 onMounted(() => {
+	collaborationStore.initialize();
 	startHeartbeat();
 	document.addEventListener('visibilitychange', onDocumentVisibilityChange);
 });
@@ -61,6 +62,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
 	document.removeEventListener('visibilitychange', onDocumentVisibilityChange);
 	stopHeartbeat();
+	collaborationStore.terminate();
 });
 </script>
 

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

@@ -16,9 +16,9 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import type { Route, RouteLocationRaw } from 'vue-router';
+import type { RouteLocation, RouteLocationRaw } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { mapStores } from 'pinia';
-import { pushConnection } from '@/mixins/pushConnection';
 import WorkflowDetails from '@/components/MainHeader/WorkflowDetails.vue';
 import TabBar from '@/components/MainHeader/TabBar.vue';
 import {
@@ -33,6 +33,7 @@ import { useSourceControlStore } from '@/stores/sourceControl.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useExecutionsStore } from '@/stores/executions.store';
+import { usePushConnection } from '@/composables/usePushConnection';
 
 export default defineComponent({
 	name: 'MainHeader',
@@ -40,11 +41,12 @@ export default defineComponent({
 		WorkflowDetails,
 		TabBar,
 	},
-	mixins: [pushConnection],
-	setup(props, ctx) {
+	setup() {
+		const router = useRouter();
+		const pushConnection = usePushConnection({ router });
+
 		return {
-			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			...pushConnection.setup?.(props, ctx),
+			pushConnection,
 		};
 	},
 	data() {
@@ -99,12 +101,18 @@ export default defineComponent({
 			this.syncTabsWithRoute(to, from);
 		},
 	},
+	beforeMount() {
+		this.pushConnection.initialize();
+	},
 	mounted() {
 		this.dirtyState = this.uiStore.stateIsDirty;
 		this.syncTabsWithRoute(this.$route);
 	},
+	beforeUnmount() {
+		this.pushConnection.terminate();
+	},
 	methods: {
-		syncTabsWithRoute(to: Route, from?: Route): void {
+		syncTabsWithRoute(to: RouteLocation, from?: RouteLocation): void {
 			if (
 				to.name === VIEWS.EXECUTION_HOME ||
 				to.name === VIEWS.WORKFLOW_EXECUTIONS ||

packages/editor-ui/src/components/WorkerList.ee.vue

@@ -29,53 +29,36 @@ import type { ExecutionStatus } from 'n8n-workflow';
 import { useUIStore } from '@/stores/ui.store';
 import { useOrchestrationStore } from '@/stores/orchestration.store';
 import { setPageTitle } from '@/utils/htmlUtils';
-import { pushConnection } from '@/mixins/pushConnection';
 import WorkerCard from './Workers/WorkerCard.ee.vue';
+import { usePushConnection } from '@/composables/usePushConnection';
+import { useRouter } from 'vue-router';
+import { usePushConnectionStore } from '@/stores/pushConnection.store';
+import { useRootStore } from '@/stores/n8nRoot.store';
 
 // eslint-disable-next-line import/no-default-export
 export default defineComponent({
 	name: 'WorkerList',
 	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/naming-convention
 	components: { PushConnectionTracker, WorkerCard },
-	mixins: [pushConnection],
 	props: {
 		autoRefreshEnabled: {
 			type: Boolean,
 			default: true,
 		},
 	},
-	setup(props, ctx) {
+	setup() {
+		const router = useRouter();
 		const i18n = useI18n();
+		const pushConnection = usePushConnection({ router });
+
 		return {
 			i18n,
+			pushConnection,
 			...useToast(),
-			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			...pushConnection.setup?.(props, ctx),
 		};
 	},
-	mounted() {
-		setPageTitle(`n8n - ${this.pageTitle}`);
-
-		this.$telemetry.track('User viewed worker view', {
-			instance_id: this.rootStore.instanceId,
-		});
-	},
-	beforeMount() {
-		if (window.Cypress !== undefined) {
-			return;
-		}
-		this.pushStore.pushConnect();
-		this.orchestrationManagerStore.startWorkerStatusPolling();
-	},
-	beforeUnmount() {
-		if (window.Cypress !== undefined) {
-			return;
-		}
-		this.orchestrationManagerStore.stopWorkerStatusPolling();
-		this.pushStore.pushDisconnect();
-	},
 	computed: {
-		...mapStores(useUIStore, useOrchestrationStore),
+		...mapStores(useRootStore, useUIStore, usePushConnectionStore, useOrchestrationStore),
 		combinedWorkers(): IPushDataWorkerStatusPayload[] {
 			const returnData: IPushDataWorkerStatusPayload[] = [];
 			for (const workerId in this.orchestrationManagerStore.workers) {
@@ -93,6 +76,31 @@ export default defineComponent({
 			return this.i18n.baseText('workerList.pageTitle');
 		},
 	},
+	mounted() {
+		setPageTitle(`n8n - ${this.pageTitle}`);
+
+		this.$telemetry.track('User viewed worker view', {
+			instance_id: this.rootStore.instanceId,
+		});
+	},
+	beforeMount() {
+		if (window.Cypress !== undefined) {
+			return;
+		}
+
+		this.pushConnection.initialize();
+		this.pushStore.pushConnect();
+		this.orchestrationManagerStore.startWorkerStatusPolling();
+	},
+	beforeUnmount() {
+		if (window.Cypress !== undefined) {
+			return;
+		}
+
+		this.orchestrationManagerStore.stopWorkerStatusPolling();
+		this.pushStore.pushDisconnect();
+		this.pushConnection.terminate();
+	},
 	methods: {
 		averageLoadAvg(loads: number[]) {
 			return (loads.reduce((prev, curr) => prev + curr, 0) / loads.length).toFixed(2);