✨ Dynamic title based on workflow execution (#865)

* ✅ Added title changes based on workflow execution

* ⚡ Title changes on workflow open, reset on workflow delete, fixed not showing when page refreshed

* ⚡ Title icons

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

@@ -89,6 +89,7 @@ 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,
@@ -96,6 +97,7 @@ export default mixins(
 	restApi,
 	showMessage,
 	workflowHelpers,
+	titleChange
 )
 	.extend({
 		name: 'MainHeader',
@@ -155,6 +157,7 @@ export default mixins(
 		},
 		methods: {
 			async openWorkflow (workflowId: string) {
+				titleChange.set(workflowId, 'IDLE');
 				// Change to other workflow
 				this.$router.push({
 					name: 'NodeViewExisting',
@@ -162,7 +165,6 @@ export default mixins(
 				});
 			},
 		},
-
 		async mounted () {
 			// Initialize the push connection
 			this.pushConnect();

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

@@ -186,6 +186,7 @@ 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,
@@ -194,6 +195,7 @@ export default mixins(
 	workflowHelpers,
 	workflowRun,
 	workflowSave,
+	titleChange
 )
 	.extend({
 		name: 'MainHeader',
@@ -417,7 +419,8 @@ export default mixins(
 						this.$showError(error, 'Problem deleting the workflow', 'There was a problem deleting the workflow:');
 						return;
 					}
-
+					// Reset tab title since workflow is deleted.
+					titleChange.reset();
 					this.$showMessage({
 						title: 'Workflow got deleted',
 						message: `The workflow "${this.workflowName}" got deleted!`,

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

@@ -37,11 +37,13 @@ import { showMessage } from '@/components/mixins/showMessage';
 import { IWorkflowShortResponse } from '@/Interface';
 
 import mixins from 'vue-typed-mixins';
+import titleChange from './mixins/titleChange';
 
 export default mixins(
 	genericHelpers,
 	restApi,
 	showMessage,
+	titleChange
 ).extend({
 	name: 'WorkflowOpen',
 	props: [
@@ -89,6 +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.$emit('openWorkflow', data.id);
 			}
 		},

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

@@ -12,10 +12,12 @@ import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 import { showMessage } from '@/components/mixins/showMessage';
 
 import mixins from 'vue-typed-mixins';
+import titleChange from './titleChange';
 
 export const pushConnection = mixins(
 	nodeHelpers,
 	showMessage,
+	titleChange
 )
 	.extend({
 		data () {
@@ -147,7 +149,7 @@ export const pushConnection = mixins(
 			 */
 			pushMessageReceived (event: Event, isRetry?: boolean): boolean {
 				const retryAttempts = 5;
-
+				const workflow = this.getWorkflow();
 				let receivedData: IPushData;
 				try {
 					// @ts-ignore
@@ -207,7 +209,7 @@ export const pushConnection = mixins(
 						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.$showMessage({
 							title: 'Problem executing workflow',
 							message: errorMessage,
@@ -215,6 +217,7 @@ export const pushConnection = mixins(
 						});
 					} else {
 						// Workflow did execute without a problem
+						titleChange.set(workflow.name, 'IDLE');
 						this.$showMessage({
 							title: 'Workflow got executed',
 							message: 'Workflow did get executed successfully!',

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

@@ -0,0 +1,25 @@
+type Status = 'EXECUTING' | 'IDLE' | 'ERROR';
+
+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}`;
+        }
+       
+    },
+
+    reset () {
+        document.title = `n8n - Workflow Automation`;
+    }
+};

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

@@ -14,10 +14,13 @@ 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';
 
 export const workflowRun = mixins(
 	restApi,
 	workflowHelpers,
+	titleChange
 ).extend({
 	methods: {
 		// Starts to executes a workflow on server.
@@ -27,6 +30,7 @@ export const workflowRun = mixins(
 				// because then it can not receive the data as it executes.
 				throw new Error('No active connection to server. It is maybe down.');
 			}
+			const workflow = this.getWorkflow();
 
 			this.$store.commit('addActiveAction', 'workflowRunning');
 
@@ -55,6 +59,7 @@ export const workflowRun = mixins(
 			}
 
 			const workflow = this.getWorkflow();
+			titleChange.set(workflow.name, 'EXECUTING');
 			
 			try {
 				// Check first if the workflow has any issues before execute it
@@ -78,6 +83,7 @@ export const workflowRun = mixins(
 							type: 'error',
 							duration: 0,
 						});
+						titleChange.set(workflow.name, 'ERROR');
 						return;
 					}
 				}
@@ -165,8 +171,9 @@ export const workflowRun = mixins(
 				};
 				this.$store.commit('setWorkflowExecutionData', executionData);
 				
-				return await this.runWorkflowApi(startRunData);
+				 return await this.runWorkflowApi(startRunData);
 			} catch (error) {
+				titleChange.set(workflow.name, 'ERROR');
 				this.$showError(error, 'Problem running workflow', 'There was a problem running the workflow:');
 				return undefined;
 			}

packages/editor-ui/src/main.ts

@@ -15,6 +15,8 @@ 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,
@@ -92,6 +94,7 @@ 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

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