✨ Improve workflow activation (#2692)

* feat: activator disabled based on thiggers

* feat: tooltip over inactive switch

* feat: message for trigger types

* feat: deactivate on save if trigger is removed

* chore: refactor executions modal

* feat: calculate service name if possible

* feat: alert on activation

* chore: fix linting

* feat: always enable activator when active

* fix: adjust the alert

* feat: take disabled state into account

* feat: automatically save on activation

* feat: rely on nodes name and edit messages

* feat: isolate state for each activator instance

* feat: create activation modal component

* feat: activationModal checkbox and trigger message

* feat: add activation messages to node config

* chore: style activation modal

* chore: style fixes

* feat: refactor disabled state

* chore: refactor modal

* chore: refactor modal

* chore: tidy the node config

* chore: refactor and styling tweaks

* chore: minor fixes

* fix: check webhooks from ui nodes

* chore: remove saving prompt

* chore: explicit current workflow evaluation

* feat: add settings link to activation modal

* fix: immediately load executions on render

* feat: exclude error trigger from trigger nodes

* chore: add i18n keys

* fix: check localstorage more strictly

* fix: handle refresh in execution list

* remove unnessary event

* remove comment

* fix closing executions modal bugs

* update closing

* update translation key

* fix translation keys

* fix modal closing

* fix closing

* fix drawer closing

* close all modals when opening executions

* update key

* close all modals when opening workflow or new page

* delete unnessary comment

* clean up import

* clean up unnessary initial data

* clean up activator impl

* rewrite

* fix open modal bug

* simply remove error

* refactor activation logic

* fix i18n and such

* remove changes

* revert saving changes

* Revert "revert saving changes"

25c29d1055

* add translation

* fix new workflows saving

* clean up modal impl

* clean up impl

* refactor common code out

* remove active changes from saving

* refactor differently

* revert unnessary change

* set dirty false

* fix i18n bug

* avoid opening two modals

* fix tooltips

* add comment

* address other comments

* address comments

Co-authored-by: saintsebastian <tilitidam@gmail.com>

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

@@ -0,0 +1,121 @@
+<template>
+	<Modal
+		:name="WORKFLOW_ACTIVE_MODAL_KEY"
+		:title="$locale.baseText('activationModal.workflowActivated')"
+		width="460px"
+	>
+		<template v-slot:content>
+			<div>
+				<n8n-text>{{ triggerContent }}</n8n-text>
+			</div>
+			<div :class="$style.spaced">
+				<n8n-text>
+					<n8n-text :bold="true">
+						{{ $locale.baseText('activationModal.theseExecutionsWillNotShowUp') }}
+					</n8n-text>
+					{{ $locale.baseText('activationModal.butYouCanSeeThem') }}
+					<a @click="showExecutionsList">
+						{{ $locale.baseText('activationModal.executionList') }}
+					</a>
+					{{ $locale.baseText('activationModal.ifYouChooseTo') }}
+					<a @click="showSettings">{{ $locale.baseText('activationModal.saveExecutions') }}</a>
+				</n8n-text>
+			</div>
+		</template>
+
+
+		<template v-slot:footer="{ close }">
+			<div :class="$style.footer">
+				<el-checkbox :value="checked" @change="handleCheckboxChange">{{ $locale.baseText('activationModal.dontShowAgain') }}</el-checkbox>
+				<n8n-button @click="close" :label="$locale.baseText('activationModal.gotIt')" />
+			</div>
+		</template>
+	</Modal>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+import Modal from '@/components/Modal.vue';
+import { WORKFLOW_ACTIVE_MODAL_KEY, EXECUTIONS_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY, LOCAL_STORAGE_ACTIVATION_FLAG } from '../constants';
+import { getActivatableTriggerNodes, getTriggerNodeServiceName } from './helpers';
+
+export default Vue.extend({
+	name: 'ActivationModal',
+	components: {
+		Modal,
+	},
+	props: [
+		'modalName',
+	],
+	data () {
+		return {
+			WORKFLOW_ACTIVE_MODAL_KEY,
+			checked: false,
+		};
+	},
+	methods: {
+		async showExecutionsList () {
+			this.$store.dispatch('ui/openModal', EXECUTIONS_MODAL_KEY);
+		},
+		async showSettings() {
+			this.$store.dispatch('ui/openModal', WORKFLOW_SETTINGS_MODAL_KEY);
+		},
+		handleCheckboxChange (checkboxValue: boolean) {
+			this.checked = checkboxValue;
+			window.localStorage.setItem(LOCAL_STORAGE_ACTIVATION_FLAG, checkboxValue.toString());
+		},
+	},
+	computed: {
+		triggerContent (): string {
+			const foundTriggers = getActivatableTriggerNodes(this.$store.getters.workflowTriggerNodes);
+			if (!foundTriggers.length) {
+				return '';
+			}
+
+			if (foundTriggers.length > 1) {
+				return this.$locale.baseText('activationModal.yourTriggersWillNowFire');
+			}
+
+			const trigger = foundTriggers[0];
+
+			const triggerNodeType = this.$store.getters.nodeType(trigger.type);
+			if (triggerNodeType.activationMessage) {
+				return triggerNodeType.activationMessage;
+			}
+
+			const serviceName = getTriggerNodeServiceName(triggerNodeType.displayName);
+			if (trigger.webhookId) {
+				return this.$locale.baseText('activationModal.yourWorkflowWillNowListenForEvents', {
+					interpolate: {
+						serviceName,
+					},
+				});
+			} else if (triggerNodeType.polling) {
+				return this.$locale.baseText('activationModal.yourWorkflowWillNowRegularlyCheck', {
+					interpolate: {
+						serviceName,
+					},
+				});
+			} else {
+				return this.$locale.baseText('activationModal.yourTriggerWillNowFire');
+			}
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+.spaced {
+	margin-top: var(--spacing-2xs);
+}
+
+.footer {
+	text-align: right;
+
+	> * {
+		margin-left: var(--spacing-s);
+	}
+}
+
+</style>

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

@@ -80,7 +80,6 @@ export default mixins(workflowHelpers).extend({
 				instance_id: this.$store.getters.instanceId,
 				email: null,
 			});
-			this.$store.commit('ui/closeTopModal');
 		},
 		async send() {
 			if (this.isEmailValid) {
@@ -100,7 +99,7 @@ export default mixins(workflowHelpers).extend({
 						type: 'success',
 					});
 				}
-				this.$store.commit('ui/closeTopModal');
+				this.modalBus.$emit('close');
 			}
 		},
 	},

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

@@ -344,7 +344,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 		},
 	},
 	methods: {
-		async beforeClose(done: () => void) {
+		async beforeClose() {
 			let keepEditing = false;
 
 			if (this.hasUnsavedChanges) {
@@ -368,8 +368,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 			}
 
 			if (!keepEditing) {
-				done();
+				return true;
-				return;
 			}
 			else if (!this.requiredPropertiesFilled) {
 				this.showValidationWarning = true;
@@ -378,6 +377,8 @@ export default mixins(showMessage, nodeHelpers).extend({
 			else if (this.isOAuthType) {
 				this.scrollToBottom();
 			}
+
+			return false;
 		},
 
 		displayCredentialParameter(parameter: INodeProperties): boolean {

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

@@ -1,6 +1,12 @@
 <template>
-	<span>
+	<Modal
-		<el-dialog :visible="dialogVisible" append-to-body width="80%" :title="`${$locale.baseText('executionsList.workflowExecutions')} ${combinedExecutions.length}/${finishedExecutionsCountEstimated === true ? '~' : ''}${combinedExecutionsCount}`" :before-close="closeDialog">
+		:name="EXECUTIONS_MODAL_KEY"
+		width="80%"
+		:title="`${$locale.baseText('executionsList.workflowExecutions')} ${combinedExecutions.length}/${finishedExecutionsCountEstimated === true ? '~' : ''}${combinedExecutionsCount}`"
+		:eventBus="modalBus"
+	>
+		<template v-slot:content>
+
 			<div class="filters">
 				<el-row>
 					<el-col :span="2" class="filter-headline">
@@ -153,9 +159,8 @@
 			<div class="load-more" v-if="finishedExecutionsCount > finishedExecutions.length || finishedExecutionsCountEstimated === true">
 				<n8n-button icon="sync" :title="$locale.baseText('executionsList.loadMore')" :label="$locale.baseText('executionsList.loadMore')" @click="loadMore()" :loading="isDataLoading" />
 			</div>
-
+		</template>
-		</el-dialog>
+	</Modal>
-	</span>
 </template>
 
 <script lang="ts">
@@ -163,9 +168,10 @@ import Vue from 'vue';
 
 import ExecutionTime from '@/components/ExecutionTime.vue';
 import WorkflowActivator from '@/components/WorkflowActivator.vue';
+import Modal from '@/components/Modal.vue';
 
 import { externalHooks } from '@/components/mixins/externalHooks';
-import { WAIT_TIME_UNLIMITED } from '@/constants';
+import { WAIT_TIME_UNLIMITED, EXECUTIONS_MODAL_KEY } from '@/constants';
 
 import { restApi } from '@/components/mixins/restApi';
 import { genericHelpers } from '@/components/mixins/genericHelpers';
@@ -200,12 +206,10 @@ export default mixins(
 	showMessage,
 ).extend({
 	name: 'ExecutionsList',
-	props: [
-		'dialogVisible',
-	],
 	components: {
 		ExecutionTime,
 		WorkflowActivator,
+		Modal,
 	},
 	data () {
 		return {
@@ -230,8 +234,24 @@ export default mixins(
 
 			stoppingExecutions: [] as string[],
 			workflows: [] as IWorkflowShortResponse[],
+			modalBus: new Vue(),
+			EXECUTIONS_MODAL_KEY,
 		};
 	},
+	async created() {
+		await this.loadWorkflows();
+		await this.refreshData();
+		this.handleAutoRefreshToggle();
+
+		this.$externalHooks().run('executionsList.openDialog');
+		this.$telemetry.track('User opened Executions log', { workflow_id: this.$store.getters.workflowId });
+	},
+	beforeDestroy() {
+		if (this.autoRefreshInterval) {
+			clearInterval(this.autoRefreshInterval);
+			this.autoRefreshInterval = undefined;
+		}
+	},
 	computed: {
 		statuses () {
 			return [
@@ -312,23 +332,9 @@ export default mixins(
 			return filter;
 		},
 	},
-	watch: {
-		dialogVisible (newValue, oldValue) {
-			if (newValue) {
-				this.openDialog();
-			}
-		},
-	},
 	methods: {
 		closeDialog() {
-			// Handle the close externally as the visible parameter is an external prop
+			this.modalBus.$emit('close');
-			// and is so not allowed to be changed here.
-			this.$emit('closeDialog');
-			if (this.autoRefreshInterval) {
-				clearInterval(this.autoRefreshInterval);
-				this.autoRefreshInterval = undefined;
-			}
-			return false;
 		},
 		convertToDisplayDate,
 		displayExecution (execution: IExecutionShortResponse, e: PointerEvent) {
@@ -343,7 +349,7 @@ export default mixins(
 				name: 'ExecutionById',
 				params: { id: execution.id },
 			});
-			this.closeDialog();
+			this.modalBus.$emit('closeAll');
 		},
 		handleAutoRefreshToggle () {
 			if (this.autoRefreshInterval) {
@@ -610,18 +616,6 @@ export default mixins(
 				);
 			}
 		},
-		async openDialog () {
-			Vue.set(this, 'selectedItems', {});
-			this.filter.workflowId = 'ALL';
-			this.checkAll = false;
-
-			await this.loadWorkflows();
-			await this.refreshData();
-			this.handleAutoRefreshToggle();
-
-			this.$externalHooks().run('executionsList.openDialog');
-			this.$telemetry.track('User opened Executions log', { workflow_id: this.$store.getters.workflowId });
-		},
 		async retryExecution (execution: IExecutionShortResponse, loadWorkflow?: boolean) {
 			this.isDataLoading = true;
 

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

@@ -63,7 +63,7 @@
 			<template>
 				<span class="activator">
 					<span>{{ $locale.baseText('workflowDetails.active') + ':' }}</span>
-					<WorkflowActivator :workflow-active="isWorkflowActive" :workflow-id="currentWorkflowId" :disabled="!currentWorkflowId"/>
+					<WorkflowActivator :workflow-active="isWorkflowActive" :workflow-id="currentWorkflowId"/>
 				</span>
 				<SaveButton
 					:saved="!this.isDirty && !this.isNewWorkflow"

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

@@ -1,7 +1,6 @@
 <template>
 	<div id="side-menu">
 		<about :dialogVisible="aboutDialogVisible" @closeDialog="closeAboutDialog"></about>
-		<executions-list :dialogVisible="executionsListDialogVisible" @closeDialog="closeExecutionsListOpenDialog"></executions-list>
 		<input type="file" ref="importFile" style="display: none" v-on:change="handleFileImport()">
 
 		<div class="side-menu-wrapper" :class="{expanded: !isCollapsed}">
@@ -166,7 +165,7 @@ import { saveAs } from 'file-saver';
 import mixins from 'vue-typed-mixins';
 import { mapGetters } from 'vuex';
 import MenuItemsIterator from './MainSidebarMenuItemsIterator.vue';
-import { CREDENTIAL_LIST_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY, DUPLICATE_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, VERSIONS_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY, WORKFLOW_OPEN_MODAL_KEY } from '@/constants';
+import { CREDENTIAL_LIST_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY, DUPLICATE_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, VERSIONS_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY, WORKFLOW_OPEN_MODAL_KEY, EXECUTIONS_MODAL_KEY } from '@/constants';
 
 export default mixins(
 	genericHelpers,
@@ -190,7 +189,6 @@ export default mixins(
 				aboutDialogVisible: false,
 				// @ts-ignore
 				basePath: this.$store.getters.getBaseUrl,
-				executionsListDialogVisible: false,
 				stopExecutionInProgress: false,
 			};
 		},
@@ -303,9 +301,6 @@ export default mixins(
 			closeAboutDialog () {
 				this.aboutDialogVisible = false;
 			},
-			closeExecutionsListOpenDialog () {
-				this.executionsListDialogVisible = false;
-			},
 			openTagManager() {
 				this.$store.dispatch('ui/openModal', TAGS_MANAGER_MODAL_KEY);
 			},
@@ -345,7 +340,7 @@ export default mixins(
 					params: { name: workflowId },
 				});
 
-				this.$store.commit('ui/closeTopModal');
+				this.$store.commit('ui/closeAllModals');
 			},
 			async handleFileImport () {
 				const reader = new FileReader();
@@ -506,7 +501,7 @@ export default mixins(
 						this.openWorkflow(this.workflowExecution.workflowId as string);
 					}
 				} else if (key === 'executions') {
-					this.executionsListDialogVisible = true;
+					this.$store.dispatch('ui/openModal', EXECUTIONS_MODAL_KEY);
 				}
 			},
 		},

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

@@ -116,6 +116,10 @@ export default Vue.extend({
 			this.$props.eventBus.$on('close', () => {
 				this.closeDialog();
 			});
+
+			this.$props.eventBus.$on('closeAll', () => {
+				this.closeAllDialogs();
+			});
 		}
 
 		const activeElement = document.activeElement as HTMLElement;
@@ -141,22 +145,18 @@ export default Vue.extend({
 				this.$emit('enter');
 			}
 		},
-		closeDialog(callback?: () => void) {
+		closeAllDialogs() {
+			this.$store.commit('ui/closeAllModals');
+		},
+		async closeDialog() {
 			if (this.beforeClose) {
-				this.beforeClose(() => {
+				const shouldClose = await this.beforeClose();
-					this.$store.commit('ui/closeTopModal');
+				if (shouldClose === false) { // must be strictly false to stop modal from closing
-					if (typeof callback === 'function') {
-						callback();
-					}
-				});
-
 					return;
 				}
-
-			this.$store.commit('ui/closeTopModal');
-			if (typeof callback === 'function') {
-				callback();
 			}
+
+			this.$store.commit('ui/closeModal', this.$props.name);
 		},
 		getCustomClass() {
 			let classes = this.$props.customClass || '';

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

@@ -80,12 +80,15 @@ export default Vue.extend({
 				this.$emit('enter');
 			}
 		},
-		close() {
+		async close() {
 			if (this.beforeClose) {
-				this.beforeClose();
+				const shouldClose = await this.beforeClose();
+				if (shouldClose === false) { // must be strictly false to stop modal from closing
 					return;
 				}
-			this.$store.commit('ui/closeTopModal');
+			}
+
+			this.$store.commit('ui/closeModal', this.$props.name);
 		},
 	},
 	computed: {

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

@@ -60,12 +60,34 @@
 		<ModalRoot :name="WORKFLOW_SETTINGS_MODAL_KEY">
 			<WorkflowSettings />
 		</ModalRoot>
+
+		<ModalRoot :name="EXECUTIONS_MODAL_KEY">
+			<ExecutionsList />
+		</ModalRoot>
+
+		<ModalRoot :name="WORKFLOW_ACTIVE_MODAL_KEY">
+			<ActivationModal />
+		</ModalRoot>
 	</div>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
-import { CONTACT_PROMPT_MODAL_KEY, CREDENTIAL_LIST_MODAL_KEY, DUPLICATE_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, PERSONALIZATION_MODAL_KEY, WORKFLOW_OPEN_MODAL_KEY, VERSIONS_MODAL_KEY, CREDENTIAL_EDIT_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY, VALUE_SURVEY_MODAL_KEY } from '@/constants';
+import {
+	CONTACT_PROMPT_MODAL_KEY,
+	CREDENTIAL_EDIT_MODAL_KEY,
+	CREDENTIAL_LIST_MODAL_KEY,
+	CREDENTIAL_SELECT_MODAL_KEY,
+	DUPLICATE_MODAL_KEY,
+	EXECUTIONS_MODAL_KEY,
+	PERSONALIZATION_MODAL_KEY,
+	TAGS_MANAGER_MODAL_KEY,
+	VALUE_SURVEY_MODAL_KEY,
+	VERSIONS_MODAL_KEY,
+	WORKFLOW_ACTIVE_MODAL_KEY,
+	WORKFLOW_OPEN_MODAL_KEY,
+	WORKFLOW_SETTINGS_MODAL_KEY,
+} from '@/constants';
 
 import ContactPromptModal from './ContactPromptModal.vue';
 import CredentialEdit from "./CredentialEdit/CredentialEdit.vue";
@@ -79,15 +101,19 @@ import UpdatesPanel from "./UpdatesPanel.vue";
 import ValueSurvey from "./ValueSurvey.vue";
 import WorkflowSettings from "./WorkflowSettings.vue";
 import WorkflowOpen from "./WorkflowOpen.vue";
+import ExecutionsList from "./ExecutionsList.vue";
+import ActivationModal from "./ActivationModal.vue";
 
 export default Vue.extend({
 	name: "Modals",
 	components: {
+		ActivationModal,
 		ContactPromptModal,
 		CredentialEdit,
 		CredentialsList,
 		CredentialsSelectModal,
 		DuplicateWorkflowDialog,
+		ExecutionsList,
 		ModalRoot,
 		PersonalizationModal,
 		TagsManager,
@@ -108,6 +134,8 @@ export default Vue.extend({
 		WORKFLOW_OPEN_MODAL_KEY,
 		WORKFLOW_SETTINGS_MODAL_KEY,
 		VALUE_SURVEY_MODAL_KEY,
+		EXECUTIONS_MODAL_KEY,
+		WORKFLOW_ACTIVE_MODAL_KEY,
 	}),
 });
 </script>

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

@@ -92,7 +92,7 @@ import NodeIcon from '@/components/NodeIcon.vue';
 import mixins from 'vue-typed-mixins';
 
 import { get } from 'lodash';
-import { getStyleTokenValue } from './helpers';
+import { getStyleTokenValue, getTriggerNodeServiceName } from './helpers';
 import { INodeUi, XYPosition } from '@/Interface';
 
 export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).extend({
@@ -131,7 +131,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 					'node.waitingForYouToCreateAnEventIn',
 					{
 						interpolate: {
-							nodeType: this.nodeType && this.nodeType.displayName.replace(/Trigger/, ""),
+							nodeType: this.nodeType && getTriggerNodeServiceName(this.nodeType.displayName),
 						},
 					},
 				);

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

@@ -1,6 +1,7 @@
 <template>
 	<ModalDrawer
 		:name="VALUE_SURVEY_MODAL_KEY"
+		:eventBus="modalBus"
 		:beforeClose="closeDialog"
 		:modal="false"
 		:wrapperClosable="false"
@@ -60,6 +61,7 @@ import ModalDrawer from './ModalDrawer.vue';
 
 import mixins from 'vue-typed-mixins';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
+import Vue from 'vue';
 
 const DEFAULT_TITLE = `How likely are you to recommend n8n to a friend or colleague?`;
 const GREAT_FEEDBACK_TITLE = `Great to hear! Can we reach out to see how we can make n8n even better for you?`;
@@ -104,6 +106,7 @@ export default mixins(workflowHelpers).extend({
 			},
 			showButtons: true,
 			VALUE_SURVEY_MODAL_KEY,
+			modalBus: new Vue(),
 		};
 	},
 	methods: {
@@ -119,8 +122,6 @@ export default mixins(workflowHelpers).extend({
 					email: '',
 				});
 			}
-
-			this.$store.commit('ui/closeTopModal');
 		},
 		onInputChange(value: string) {
 			this.form.email = value;
@@ -169,7 +170,7 @@ export default mixins(workflowHelpers).extend({
 					this.form.email = '';
 					this.showButtons = true;
 				}, 1000);
-				this.$store.commit('ui/closeTopModal');
+				this.modalBus.$emit('close');
 			}
 		},
 	},

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

@@ -1,19 +1,22 @@
 <template>
 	<div class="workflow-activator">
+		<n8n-tooltip :disabled="!disabled" placement="bottom">
+			<div slot="content">{{ $locale.baseText('workflowActivator.thisWorkflowHasNoTriggerNodes') }}</div>
 			<el-switch
 				v-loading="loading"
-			element-loading-spinner="el-icon-loading"
 				:value="workflowActive"
 				@change="activeChanged"
 			  :title="workflowActive ? $locale.baseText('workflowActivator.deactivateWorkflow') : $locale.baseText('workflowActivator.activateWorkflow')"
 				:disabled="disabled || loading"
 				:active-color="getActiveColor"
-			inactive-color="#8899AA">
+				inactive-color="#8899AA"
+				element-loading-spinner="el-icon-loading">
 			</el-switch>
+		</n8n-tooltip>
 
 		<div class="could-not-be-started" v-if="couldNotBeStarted">
 			<n8n-tooltip placement="top">
-				<div @click="displayActivationError" slot="content">{{ $locale.baseText('workflowActivator.theWorkflowIsSetToBeActiveBut') }}</div>
+				<div @click="displayActivationError" slot="content" v-html="$locale.baseText('workflowActivator.theWorkflowIsSetToBeActiveBut')"></div>
 				<font-awesome-icon @click="displayActivationError" icon="exclamation-triangle" />
 			</n8n-tooltip>
 		</div>
@@ -27,13 +30,17 @@ import { genericHelpers } from '@/components/mixins/genericHelpers';
 import { restApi } from '@/components/mixins/restApi';
 import { showMessage } from '@/components/mixins/showMessage';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
-import {
-	IWorkflowDataUpdate,
-} from '../Interface';
 
 import mixins from 'vue-typed-mixins';
 import { mapGetters } from "vuex";
 
+import {
+	WORKFLOW_ACTIVE_MODAL_KEY,
+	LOCAL_STORAGE_ACTIVATION_FLAG,
+} from '@/constants';
+import { getActivatableTriggerNodes } from './helpers';
+
+
 export default mixins(
 	externalHooks,
 	genericHelpers,
@@ -45,7 +52,6 @@ export default mixins(
 		{
 			name: 'WorkflowActivator',
 			props: [
-				'disabled',
 				'workflowActive',
 				'workflowId',
 			],
@@ -74,59 +80,47 @@ export default mixins(
 					}
 					return '#13ce66';
 				},
+				isCurrentWorkflow(): boolean {
+					return this.$store.getters['workflowId'] === this.workflowId;
+				},
+				disabled(): boolean {
+					const isNewWorkflow = !this.workflowId;
+					if (isNewWorkflow || this.isCurrentWorkflow) {
+						return !this.workflowActive && !this.containsTrigger;
+					}
+
+					return false;
+				},
+				containsTrigger(): boolean {
+					const foundTriggers = getActivatableTriggerNodes(this.$store.getters.workflowTriggerNodes);
+					return foundTriggers.length > 0;
+				},
 			},
 			methods: {
 				async activeChanged (newActiveState: boolean) {
-					if (this.workflowId === undefined) {
+					this.loading = true;
-						this.$showMessage({
+
-							title: this.$locale.baseText('workflowActivator.showMessage.activeChangedWorkflowIdUndefined.title'),
+					if (!this.workflowId) {
-							message: this.$locale.baseText('workflowActivator.showMessage.activeChangedWorkflowIdUndefined.message'),
+						const saved = await this.saveCurrentWorkflow();
-							type: 'error',
+						if (!saved) {
-						});
+							this.loading = false;
 							return;
 						}
+					}
 
-					if (this.nodesIssuesExist === true) {
+					try {
+						if (this.isCurrentWorkflow && this.nodesIssuesExist) {
 							this.$showMessage({
 								title: this.$locale.baseText('workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.title'),
 								message: this.$locale.baseText('workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.message'),
 								type: 'error',
 							});
+
+							this.loading = false;
 							return;
 						}
 
-					// Set that the active state should be changed
+						await this.updateWorkflow({workflowId: this.workflowId, active: newActiveState});
-					let data: IWorkflowDataUpdate = {};
-
-					const activeWorkflowId = this.$store.getters.workflowId;
-					if (newActiveState === true && this.workflowId === activeWorkflowId) {
-						// If the currently active workflow gets activated save the whole
-						// workflow. If that would not happen then it could be quite confusing
-						// for people because it would activate a different version of the workflow
-						// than the one they can currently see.
-						if (this.dirtyState) {
-							const importConfirm = await this.confirmMessage(
-								this.$locale.baseText('workflowActivator.confirmMessage.message'),
-								this.$locale.baseText('workflowActivator.confirmMessage.headline'),
-								'warning',
-								this.$locale.baseText('workflowActivator.confirmMessage.confirmButtonText'),
-								this.$locale.baseText('workflowActivator.confirmMessage.cancelButtonText'),
-							);
-							if (importConfirm === false) {
-								return;
-							}
-						}
-
-						// Get the current workflow data that it gets saved together with the activation
-						data = await this.getWorkflowDataToSave();
-					}
-
-					data.active = newActiveState;
-
-					this.loading = true;
-
-					try {
-						await this.restApi().updateWorkflow(this.workflowId, data);
 					} catch (error) {
 						const newStateName = newActiveState === true ? 'activated' : 'deactivated';
 						this.$showError(
@@ -141,27 +135,21 @@ export default mixins(
 						return;
 					}
 
-					const currentWorkflowId = this.$store.getters.workflowId;
+					const activationEventName = this.isCurrentWorkflow ? 'workflow.activeChangeCurrent' : 'workflow.activeChange';
-					let activationEventName = 'workflow.activeChange';
-					if (currentWorkflowId === this.workflowId) {
-						// If the status of the current workflow got changed
-						// commit it specifically
-						this.$store.commit('setActive', newActiveState);
-						activationEventName = 'workflow.activeChangeCurrent';
-					}
-
-					if (newActiveState === true) {
-						this.$store.commit('setWorkflowActive', this.workflowId);
-					} else {
-						this.$store.commit('setWorkflowInactive', this.workflowId);
-					}
-
 					this.$externalHooks().run(activationEventName, { workflowId: this.workflowId, active: newActiveState });
 					this.$telemetry.track('User set workflow active status', { workflow_id: this.workflowId, is_active: newActiveState });
 
 					this.$emit('workflowActiveChanged', { id: this.workflowId, active: newActiveState });
 					this.loading = false;
+
+					if (this.isCurrentWorkflow) {
+						if (newActiveState && window.localStorage.getItem(LOCAL_STORAGE_ACTIVATION_FLAG) !== 'true') {
+							this.$store.dispatch('ui/openModal', WORKFLOW_ACTIVE_MODAL_KEY);
+						}
+						else {
 							this.$store.dispatch('settings/fetchPromptsData');
+						}
+					}
 				},
 				async displayActivationError () {
 					let errorMessage: string;
@@ -192,7 +180,8 @@ export default mixins(
 	);
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
 .workflow-activator {
 	display: inline-block;
 }
@@ -206,4 +195,5 @@ export default mixins(
 ::v-deep .el-loading-spinner {
 	margin-top: -10px;
 }
+
 </style>

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

@@ -183,7 +183,7 @@ export default mixins(
 						params: { name: data.id },
 					});
 				}
-				this.$store.commit('ui/closeTopModal');
+				this.$store.commit('ui/closeAllModals');
 			}
 		},
 		openDialog () {

packages/editor-ui/src/components/helpers.ts

@@ -1,3 +1,5 @@
+import { ERROR_TRIGGER_NODE_TYPE } from '@/constants';
+import { INodeUi } from '@/Interface';
 import dateformat from 'dateformat';
 
 const KEYWORDS_TO_FILTER = ['API', 'OAuth1', 'OAuth2'];
@@ -18,3 +20,14 @@ export function getStyleTokenValue(name: string): string {
 	const style = getComputedStyle(document.body);
 	return style.getPropertyValue(name);
 }
+
+export function getTriggerNodeServiceName(nodeName: string) {
+	return nodeName.replace(/ trigger/i, '');
+}
+
+export function getActivatableTriggerNodes(nodes: INodeUi[]) {
+	return nodes.filter((node: INodeUi) => {
+		// Error Trigger does not behave like other triggers and workflows using it can not be activated
+		return !node.disabled && node.type !== ERROR_TRIGGER_NODE_TYPE;
+	});
+}

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

@@ -437,6 +437,32 @@ export const workflowHelpers = mixins(
 				return returnData['__xxxxxxx__'];
 			},
 
+			async updateWorkflow({workflowId, active}: {workflowId: string, active?: boolean}) {
+				let data: IWorkflowDataUpdate = {};
+
+				const isCurrentWorkflow = workflowId === this.$store.getters.workflowId;
+				if (isCurrentWorkflow) {
+					data = await this.getWorkflowDataToSave();
+				}
+
+				if (active !== undefined) {
+					data.active = active;
+				}
+
+				const workflow = await this.restApi().updateWorkflow(workflowId, data);
+
+				if (isCurrentWorkflow) {
+					this.$store.commit('setActive', !!workflow.active);
+					this.$store.commit('setStateDirty', false);
+				}
+
+				if (workflow.active) {
+					this.$store.commit('setWorkflowActive', workflowId);
+				} else {
+					this.$store.commit('setWorkflowInactive', workflowId);
+				}
+			},
+
 			async saveCurrentWorkflow({name, tags}: {name?: string, tags?: string[]} = {}): Promise<boolean> {
 				const currentWorkflow = this.$route.params.name;
 				if (!currentWorkflow) {

packages/editor-ui/src/constants.ts

@@ -28,6 +28,8 @@ export const CREDENTIAL_LIST_MODAL_KEY = 'credentialsList';
 export const PERSONALIZATION_MODAL_KEY = 'personalization';
 export const CONTACT_PROMPT_MODAL_KEY = 'contactPrompt';
 export const VALUE_SURVEY_MODAL_KEY = 'valueSurvey';
+export const EXECUTIONS_MODAL_KEY = 'executions';
+export const WORKFLOW_ACTIVE_MODAL_KEY = 'activation';
 
 // breakpoints
 export const BREAKPOINT_SM = 768;
@@ -135,4 +137,5 @@ export const OTHER_WORK_AREA_KEY = 'otherWorkArea';
 export const OTHER_COMPANY_INDUSTRY_KEY = 'otherCompanyIndustry';
 
 export const VALID_EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+export const LOCAL_STORAGE_ACTIVATION_FLAG = 'N8N_HIDE_ACTIVATION_ALERT';
 

packages/editor-ui/src/modules/ui.ts

@@ -1,4 +1,4 @@
-import { CONTACT_PROMPT_MODAL_KEY, CREDENTIAL_EDIT_MODAL_KEY, DUPLICATE_MODAL_KEY, PERSONALIZATION_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, VERSIONS_MODAL_KEY, WORKFLOW_OPEN_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY, CREDENTIAL_LIST_MODAL_KEY, VALUE_SURVEY_MODAL_KEY } from '@/constants';
+import { CONTACT_PROMPT_MODAL_KEY, CREDENTIAL_EDIT_MODAL_KEY, DUPLICATE_MODAL_KEY, PERSONALIZATION_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, VERSIONS_MODAL_KEY, WORKFLOW_OPEN_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY, CREDENTIAL_LIST_MODAL_KEY, VALUE_SURVEY_MODAL_KEY, EXECUTIONS_MODAL_KEY, WORKFLOW_ACTIVE_MODAL_KEY } from '@/constants';
 import Vue from 'vue';
 import { ActionContext, Module } from 'vuex';
 import {
@@ -45,6 +45,12 @@ const module: Module<IUiState, IRootState> = {
 			[WORKFLOW_SETTINGS_MODAL_KEY]: {
 				open: false,
 			},
+			[EXECUTIONS_MODAL_KEY]: {
+				open: false,
+			},
+			[WORKFLOW_ACTIVE_MODAL_KEY]: {
+				open: false,
+			},
 		},
 		modalStack: [],
 		sidebarMenuCollapsed: true,
@@ -81,17 +87,19 @@ const module: Module<IUiState, IRootState> = {
 			Vue.set(state.modals[name], 'open', true);
 			state.modalStack = [name].concat(state.modalStack);
 		},
-		closeTopModal: (state: IUiState) => {
+		closeModal: (state: IUiState, name: string) => {
-			const name = state.modalStack[0];
+			Vue.set(state.modals[name], 'open', false);
+			state.modalStack = state.modalStack.filter((openModalName: string) => {
+				return name !== openModalName;
+			});
+		},
+		closeAllModals: (state: IUiState) => {
+			Object.keys(state.modals).forEach((name: string) => {
+				if (state.modals[name].open) {
 					Vue.set(state.modals[name], 'open', false);
-			if (state.modals.mode) {
-				Vue.set(state.modals[name], 'mode', '');
 				}
-			if (state.modals.activeId) {
+			});
-				Vue.set(state.modals[name], 'activeId', '');
+			state.modalStack = [];
-			}
-
-			state.modalStack = state.modalStack.slice(1);
 		},
 		toggleSidebarMenuCollapse: (state: IUiState) => {
 			state.sidebarMenuCollapsed = !state.sidebarMenuCollapsed;

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -472,7 +472,7 @@
 		},
 		"clickOnTheQuestionMarkIcon": "Click the '?' icon to open this node on n8n.io",
 		"continueOnFail": {
-			"description": "If active, the workflow continues even if this node's <br />execution fails. When this occurs, the node passes along input data from<br />previous nodes - so your workflow should account for unexpected output data.",
+			"description": "If active, the workflow continues even if this node's execution fails. When this occurs, the node passes along input data from previous nodes - so your workflow should account for unexpected output data.",
 			"displayName": "Continue On Fail"
 		},
 		"executeOnce": {
@@ -891,12 +891,6 @@
 	},
 	"workflowActivator": {
 		"activateWorkflow": "Activate workflow",
-		"confirmMessage": {
-			"cancelButtonText": "",
-			"confirmButtonText": "Yes, activate and save!",
-			"headline": "Activate and save?",
-			"message": "When you activate the workflow all currently unsaved changes of the workflow will be saved."
-		},
 		"deactivateWorkflow": "Deactivate workflow",
 		"showError": {
 			"message": "There was a problem and the workflow could not be {newStateName}",
@@ -920,7 +914,8 @@
 				"title": "Problem activating workflow"
 			}
 		},
-		"theWorkflowIsSetToBeActiveBut": "The workflow is set to be active but could not be started.<br />Click to display error message."
+		"theWorkflowIsSetToBeActiveBut": "The workflow is set to be active but could not be started.<br />Click to display error message.",
+		"thisWorkflowHasNoTriggerNodes": "This workflow has no trigger nodes that require activation"
 	},
 	"workflowDetails": {
 		"active": "Active",
@@ -1040,5 +1035,19 @@
 		"timeoutAfter": "Timeout After",
 		"timeoutWorkflow": "Timeout Workflow",
 		"timezone": "Timezone"
+	},
+	"activationModal": {
+		"workflowActivated": "Workflow activated",
+		"theseExecutionsWillNotShowUp": "These executions will not show up immediately in the editor,",
+		"butYouCanSeeThem": "but you can see them in the",
+		"executionList": "execution list",
+		"ifYouChooseTo": "if you choose to",
+		"saveExecutions": "save executions.",
+		"dontShowAgain": "Don't show again",
+		"yourTriggersWillNowFire": "Your triggers will now fire production executions automatically.",
+		"yourTriggerWillNowFire": "Your trigger will now fire production executions automatically.",
+		"yourWorkflowWillNowRegularlyCheck": "Your workflow will now regularly check {serviceName} for events and trigger executions for them.",
+		"yourWorkflowWillNowListenForEvents": "Your workflow will now listen for events from {serviceName} and trigger executions.",
+		"gotIt": "Got it"
 	}
 }

packages/editor-ui/src/store.ts

@@ -761,6 +761,7 @@ export const store = new Vuex.Store({
 				return getters.nodeType(node.type).group.includes('trigger');
 			});
 		},
+
 		// Node-Index
 		getNodeIndex: (state) => (nodeName: string): number => {
 			return state.nodeIndex.indexOf(nodeName);

packages/nodes-base/nodes/Cron/Cron.node.ts

@@ -26,6 +26,7 @@ export class Cron implements INodeType {
 		version: 1,
 		description: 'Triggers the workflow at a specific time',
 		eventTriggerDescription: '',
+		activationMessage: 'Your cron trigger will now trigger executions on the schedule you have defined.',
 		defaults: {
 			name: 'Cron',
 			color: '#00FF00',

packages/nodes-base/nodes/Interval/Interval.node.ts

@@ -16,6 +16,7 @@ export class Interval implements INodeType {
 		version: 1,
 		description: 'Triggers the workflow in a given interval',
 		eventTriggerDescription: '',
+		activationMessage: 'Your interval trigger will now trigger executions on the schedule you have defined.',
 		defaults: {
 			name: 'Interval',
 			color: '#00FF00',

packages/nodes-base/nodes/SseTrigger/SseTrigger.node.ts

@@ -16,6 +16,7 @@ export class SseTrigger implements INodeType {
 		version: 1,
 		description: 'Triggers the workflow when Server-Sent Events occur',
 		eventTriggerDescription: '',
+		activationMessage: 'You can now make calls to your SSE URL to trigger executions.',
 		defaults: {
 			name: 'SSE Trigger',
 			color: '#225577',

packages/nodes-base/nodes/Webhook/Webhook.node.ts

@@ -48,6 +48,7 @@ export class Webhook implements INodeType {
 		version: 1,
 		description: 'Starts the workflow when a webhook is called',
 		eventTriggerDescription: 'Waiting for you to call the Test URL',
+		activationMessage: 'You can now make calls to your production webhook URL.',
 		defaults: {
 			name: 'Webhook',
 		},

packages/nodes-base/nodes/WorkflowTrigger/WorkflowTrigger.node.ts

@@ -17,6 +17,7 @@ export class WorkflowTrigger implements INodeType {
 		version: 1,
 		description: 'Triggers based on various lifecycle events, like when a workflow is activated',
 		eventTriggerDescription: '',
+		activationMessage: 'Your workflow will now trigger executions on the event you have defined.',
 		defaults: {
 			name: 'Workflow Trigger',
 			color: '#ff6d5a',

packages/workflow/src/Interfaces.ts

@@ -807,6 +807,7 @@ export interface INodeTypeDescription extends INodeTypeBaseDescription {
 	version: number;
 	defaults: INodeParameters;
 	eventTriggerDescription?: string;
+	activationMessage?: string;
 	inputs: string[];
 	inputNames?: string[];
 	outputs: string[];