✨ 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/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,7 +59,8 @@ 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
 				const issuesExist = this.$store.getters.nodesIssuesExist;
@@ -78,6 +83,7 @@ export const workflowRun = mixins(
 							type: 'error',
 							duration: 0,
 						});
+						titleChange.set(workflow.name, 'ERROR');
 						return;
 					}
 				}
@@ -164,9 +170,10 @@ 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;
 			}