refactor(editor): Turn titleChange mixin to composable (#6059)

packages/editor-ui/src/mixins/pushConnection.ts

@@ -8,7 +8,7 @@ import {
 import { externalHooks } from '@/mixins/externalHooks';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
 import { showMessage } from '@/mixins/showMessage';
-import { titleChange } from '@/mixins/titleChange';
+import { useTitleChange } from '@/composables/useTitleChange';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 
 import {
@@ -39,9 +39,13 @@ export const pushConnection = mixins(
 	externalHooks,
 	nodeHelpers,
 	showMessage,
-	titleChange,
 	workflowHelpers,
 ).extend({
+	setup() {
+		return {
+			...useTitleChange(),
+		};
+	},
 	data() {
 		return {
 			pushSource: null as WebSocket | EventSource | null,
@@ -362,7 +366,7 @@ export const pushConnection = mixins(
 					}
 
 					// Workflow did start but had been put to wait
-					this.$titleSet(workflow.name as string, 'IDLE');
+					this.titleSet(workflow.name as string, 'IDLE');
 					this.$showToast({
 						title: 'Workflow started waiting',
 						message: `${action} <a href="https://docs.n8n.io/integrations/builtin/core-nodes/n8n-nodes-base.wait/" target="_blank">More info</a>`,
@@ -370,7 +374,7 @@ export const pushConnection = mixins(
 						duration: 0,
 					});
 				} else if (runDataExecuted.finished !== true) {
-					this.$titleSet(workflow.name as string, 'ERROR');
+					this.titleSet(workflow.name as string, 'ERROR');
 
 					if (
 						runDataExecuted.data.resultData.error?.name === 'ExpressionError' &&
@@ -441,7 +445,7 @@ export const pushConnection = mixins(
 					}
 				} else {
 					// Workflow did execute without a problem
-					this.$titleSet(workflow.name as string, 'IDLE');
+					this.titleSet(workflow.name as string, 'IDLE');
 
 					const execution = this.workflowsStore.getWorkflowExecution;
 					if (execution && execution.executedNode) {

packages/editor-ui/src/mixins/titleChange.ts

@@ -1,28 +0,0 @@
-import Vue from 'vue';
-
-import { WorkflowTitleStatus } from '@/Interface';
-
-export const titleChange = Vue.extend({
-	methods: {
-		/**
-		 * Change title of n8n tab
-		 *
-		 * @param {string} workflow Name of workflow
-		 * @param {WorkflowTitleStatus} status Status of workflow
-		 */
-		$titleSet(workflow: string, status: WorkflowTitleStatus) {
-			let icon = '⚠️';
-			if (status === 'EXECUTING') {
-				icon = '🔄';
-			} else if (status === 'IDLE') {
-				icon = '▶️';
-			}
-
-			window.document.title = `n8n - ${icon} ${workflow}`;
-		},
-
-		$titleReset() {
-			document.title = 'n8n - Workflow Automation';
-		},
-	},
-});

packages/editor-ui/src/mixins/workflowRun.ts

@@ -14,19 +14,18 @@ import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { showMessage } from '@/mixins/showMessage';
 
 import mixins from 'vue-typed-mixins';
-import { titleChange } from './titleChange';
+import { useTitleChange } from '@/composables/useTitleChange';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useRootStore } from '@/stores/n8nRootStore';
 
-export const workflowRun = mixins(
-	externalHooks,
-	restApi,
-	workflowHelpers,
-	showMessage,
-	titleChange,
-).extend({
+export const workflowRun = mixins(externalHooks, restApi, workflowHelpers, showMessage).extend({
+	setup() {
+		return {
+			...useTitleChange(),
+		};
+	},
 	computed: {
 		...mapStores(useRootStore, useUIStore, useWorkflowsStore),
 	},
@@ -72,7 +71,7 @@ export const workflowRun = mixins(
 				return;
 			}
 
-			this.$titleSet(workflow.name as string, 'EXECUTING');
+			this.titleSet(workflow.name as string, 'EXECUTING');
 
 			this.clearAllStickyNotifications();
 
@@ -119,7 +118,7 @@ export const workflowRun = mixins(
 							type: 'error',
 							duration: 0,
 						});
-						this.$titleSet(workflow.name as string, 'ERROR');
+						this.titleSet(workflow.name as string, 'ERROR');
 						this.$externalHooks().run('workflowRun.runError', { errorMessages, nodeName });
 
 						this.getWorkflowDataToSave().then((workflowData) => {
@@ -245,7 +244,7 @@ export const workflowRun = mixins(
 
 				return runWorkflowApiResponse;
 			} catch (error) {
-				this.$titleSet(workflow.name as string, 'ERROR');
+				this.titleSet(workflow.name as string, 'ERROR');
 				this.$showError(error, this.$locale.baseText('workflowRun.showError.title'));
 				return undefined;
 			}