⚡ Fix issues with Dynamic title

packages/editor-ui/src/Interface.ts

@@ -417,3 +417,5 @@ export interface ITimeoutHMS {
 	minutes: number;
 	seconds: number;
 }
+
+export type WorkflowTitleStatus = 'EXECUTING' | 'IDLE' | 'ERROR';

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

@@ -84,20 +84,20 @@ import { genericHelpers } from '@/components/mixins/genericHelpers';
 import { pushConnection } from '@/components/mixins/pushConnection';
 import { restApi } from '@/components/mixins/restApi';
 import { showMessage } from '@/components/mixins/showMessage';
+import { titleChange } from '@/components/mixins/titleChange';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 
 import { saveAs } from 'file-saver';
 
 import mixins from 'vue-typed-mixins';
-import titleChange from './mixins/titleChange';
 
 export default mixins(
 	genericHelpers,
 	pushConnection,
 	restApi,
 	showMessage,
+	titleChange,
 	workflowHelpers,
-	titleChange
 )
 	.extend({
 		name: 'MainHeader',
@@ -157,7 +157,7 @@ export default mixins(
 		},
 		methods: {
 			async openWorkflow (workflowId: string) {
-				titleChange.set(workflowId, 'IDLE');
+				this.$titleSet(this.workflowName, 'IDLE');
 				// Change to other workflow
 				this.$router.push({
 					name: 'NodeViewExisting',

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

@@ -179,6 +179,7 @@ import WorkflowSettings from '@/components/WorkflowSettings.vue';
 import { genericHelpers } from '@/components/mixins/genericHelpers';
 import { restApi } from '@/components/mixins/restApi';
 import { showMessage } from '@/components/mixins/showMessage';
+import { titleChange } from '@/components/mixins/titleChange';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 import { workflowSave } from '@/components/mixins/workflowSave';
 import { workflowRun } from '@/components/mixins/workflowRun';
@@ -186,16 +187,15 @@ import { workflowRun } from '@/components/mixins/workflowRun';
 import { saveAs } from 'file-saver';
 
 import mixins from 'vue-typed-mixins';
-import titleChange from './mixins/titleChange';
 
 export default mixins(
 	genericHelpers,
 	restApi,
 	showMessage,
+	titleChange,
 	workflowHelpers,
 	workflowRun,
 	workflowSave,
-	titleChange
 )
 	.extend({
 		name: 'MainHeader',
@@ -420,7 +420,7 @@ export default mixins(
 						return;
 					}
 					// Reset tab title since workflow is deleted.
-					titleChange.reset();
+					this.$titleReset();
 					this.$showMessage({
 						title: 'Workflow got deleted',
 						message: `The workflow "${this.workflowName}" got deleted!`,

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

@@ -34,16 +34,16 @@ import WorkflowActivator from '@/components/WorkflowActivator.vue';
 import { restApi } from '@/components/mixins/restApi';
 import { genericHelpers } from '@/components/mixins/genericHelpers';
 import { showMessage } from '@/components/mixins/showMessage';
+import { titleChange } from '@/components/mixins/titleChange';
 import { IWorkflowShortResponse } from '@/Interface';
 
 import mixins from 'vue-typed-mixins';
-import titleChange from './mixins/titleChange';
 
 export default mixins(
 	genericHelpers,
 	restApi,
 	showMessage,
-	titleChange
+	titleChange,
 ).extend({
 	name: 'WorkflowOpen',
 	props: [
@@ -91,7 +91,7 @@ export default mixins(
 		},
 		openWorkflow (data: IWorkflowShortResponse, column: any) { // tslint:disable-line:no-any
 			if (column.label !== 'Active') {
-				titleChange.set(data.name, 'IDLE');
+				this.$titleSet(data.name, 'IDLE');
 				this.$emit('openWorkflow', data.id);
 			}
 		},

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

@@ -10,14 +10,14 @@ import {
 
 import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 import { showMessage } from '@/components/mixins/showMessage';
+import { titleChange } from '@/components/mixins/titleChange';
 
 import mixins from 'vue-typed-mixins';
-import titleChange from './titleChange';
 
 export const pushConnection = mixins(
 	nodeHelpers,
 	showMessage,
-	titleChange
+	titleChange,
 )
 	.extend({
 		data () {
@@ -149,7 +149,6 @@ export const pushConnection = mixins(
 			 */
 			pushMessageReceived (event: Event, isRetry?: boolean): boolean {
 				const retryAttempts = 5;
-				const workflow = this.getWorkflow();
 				let receivedData: IPushData;
 				try {
 					// @ts-ignore
@@ -203,13 +202,19 @@ export const pushConnection = mixins(
 
 					const runDataExecuted = pushData.data;
 
+					console.log('..pushData..');
+					console.log(pushData);
+
+
+					// @ts-ignore
+					const workflow = this.getWorkflow();
 					if (runDataExecuted.finished !== true) {
 						// There was a problem with executing the workflow
 						let errorMessage = 'There was a problem executing the workflow!';
 						if (runDataExecuted.data.resultData.error && runDataExecuted.data.resultData.error.message) {
 							errorMessage = `There was a problem executing the workflow:<br /><strong>"${runDataExecuted.data.resultData.error.message}"</strong>`;
 						}
-						titleChange.set(workflow.name, 'ERROR');
+						this.$titleSet(workflow.name, 'ERROR');
 						this.$showMessage({
 							title: 'Problem executing workflow',
 							message: errorMessage,
@@ -217,7 +222,7 @@ export const pushConnection = mixins(
 						});
 					} else {
 						// Workflow did execute without a problem
-						titleChange.set(workflow.name, 'IDLE');
+						this.$titleSet(workflow.name, 'IDLE');
 						this.$showMessage({
 							title: 'Workflow got executed',
 							message: 'Workflow did get executed successfully!',

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

@@ -1,25 +1,31 @@
-type Status = 'EXECUTING' | 'IDLE' | 'ERROR';
+import Vue from 'vue';
 
-export default {
-    /**
-     * Change title of n8n tab
-     * @param workflow Name of workflow
-     * @param status Status of workflow
-     */
-    set (workflow : string, status : Status) {
-        if (status === 'EXECUTING') {
-            window.document.title = `n8n - 🔄 ${workflow}}`;
-        }
-        else if (status === 'IDLE') {
-            window.document.title = `n8n - ▶️ ${workflow}`;
-        }
-        else {
-            window.document.title = `n8n - ⚠️ ${workflow}`;
-        }
-       
-    },
+import {
+	WorkflowTitleStatus,
+} from '../../Interface';
 
-    reset () {
-        document.title = `n8n - Workflow Automation`;
-    }
-};
+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/components/mixins/workflowRun.ts

@@ -14,13 +14,12 @@ import { restApi } from '@/components/mixins/restApi';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 
 import mixins from 'vue-typed-mixins';
-import titleChange from './titleChange';
-import { title } from 'process';
+import { titleChange } from './titleChange';
 
 export const workflowRun = mixins(
 	restApi,
 	workflowHelpers,
-	titleChange
+	titleChange,
 ).extend({
 	methods: {
 		// Starts to executes a workflow on server.
@@ -59,8 +58,8 @@ export const workflowRun = mixins(
 			}
 
 			const workflow = this.getWorkflow();
-			titleChange.set(workflow.name, 'EXECUTING');
-			
+			this.$titleSet(workflow.name as string, 'EXECUTING');
+
 			try {
 				// Check first if the workflow has any issues before execute it
 				const issuesExist = this.$store.getters.nodesIssuesExist;
@@ -83,7 +82,7 @@ export const workflowRun = mixins(
 							type: 'error',
 							duration: 0,
 						});
-						titleChange.set(workflow.name, 'ERROR');
+						this.$titleSet(workflow.name as string, 'ERROR');
 						return;
 					}
 				}
@@ -170,10 +169,10 @@ export const workflowRun = mixins(
 					},
 				};
 				this.$store.commit('setWorkflowExecutionData', executionData);
-				
+
 				 return await this.runWorkflowApi(startRunData);
 			} catch (error) {
-				titleChange.set(workflow.name, 'ERROR');
+				this.$titleSet(workflow.name as string, 'ERROR');
 				this.$showError(error, 'Problem running workflow', 'There was a problem running the workflow:');
 				return undefined;
 			}

packages/editor-ui/src/main.ts

@@ -15,8 +15,6 @@ import './n8n-theme.scss';
 import App from '@/App.vue';
 import router from './router';
 
-import titleChange from './components/mixins/titleChange';
-
 import { library } from '@fortawesome/fontawesome-svg-core';
 import {
 	faAngleDoubleLeft,
@@ -94,7 +92,6 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 import { store } from './store';
 Vue.use(ElementUI, { locale });
-Vue.mixin(titleChange);
 
 library.add(faAngleDoubleLeft);
 library.add(faAngleDown);

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

@@ -115,6 +115,8 @@ import { mouseSelect } from '@/components/mixins/mouseSelect';
 import { moveNodeWorkflow } from '@/components/mixins/moveNodeWorkflow';
 import { restApi } from '@/components/mixins/restApi';
 import { showMessage } from '@/components/mixins/showMessage';
+import { titleChange } from '@/components/mixins/titleChange';
+
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 import { workflowRun } from '@/components/mixins/workflowRun';
 
@@ -157,7 +159,6 @@ import {
 	IWorkflowDataUpdate,
 	XYPositon,
 } from '../Interface';
-import titleChange from '../components/mixins/titleChange';
 
 export default mixins(
 	copyPaste,
@@ -166,9 +167,9 @@ export default mixins(
 	moveNodeWorkflow,
 	restApi,
 	showMessage,
+	titleChange,
 	workflowHelpers,
 	workflowRun,
-	titleChange
 )
 	.extend({
 		name: 'NodeView',
@@ -1326,8 +1327,8 @@ export default mixins(
 					}
 
 					if (workflowId !== null) {
-						let workflow = await this.restApi().getWorkflow(workflowId);
-						titleChange.set(workflow.name, 'IDLE');
+						const workflow = await this.restApi().getWorkflow(workflowId);
+						this.$titleSet(workflow.name, 'IDLE');
 						// Open existing workflow
 						await this.openWorkflow(workflowId);
 					} else {