⚡ Add wait node toasts (#2203)

* ⚡ Generalize unique entity name generation

* ⚡ Standardize variable names

* redo credentials

* revert some changes, replace got with was

* fix v-if order

* fix v-if order

* update linting

* update gulpfile

* update ssh display name

* update height

* update params

* update info tip sizes

* address design comments

* update google button disabled

* update icon size to 28px

* update design issues

* update info tab design

* address design comments

* update tab size

* update run data spacing

* address comments, update logo design

* fix spacing issues

* clean up store

* fix create new bug

* add loading state

* rename prop

* remove unused prop

* fix select bug

* remove label tag

* update word break

* build

* address design comments

* update font family of button

* update menu opacity

* update text

* update title

* address more comments

* update oauth messages

* add oauth validation

* hide disabled state

* update warning modal

* show button on text input

* clean up cred details

* add validation errors

* fix bug when deleting cred

* Frontend hack to display test button

* Created interfaces for testing and endpoint

* Testing slack node credentials working

* Adding test with node to endpoint for credential testing

* Fixed linting and test detectability

* Adding required for slack token

* Added google sheets credential testing

* update message

* Adding suggestions by Ivan and Mutasem

* Address comments

* keep blurred when focused

* update font weight of errors

* add oauth banner

* remove toast

* Fixed code bug and added telegram credential testing

* scroll to top on success

* clean up duplication

* Fixed telegram trigger node and added tests to typeform

* refactor modal

* add more validation support

* refactor info tab

* scroll to bottom on save, handle cred saving

* refactor save button

* save cred on valid

* save cred on valid

* scroll to top if has error

* add targets on input labels

* delete credentails input

* revert fe changes

* update validation logic

* clean interface

* test credentials

* update banner design

* show testing state

* update x position

* fix issues

* fix focus issues

* clean up validation behavior

* make error relative

* update banner component

* update error spacing

* don't close dialog

* rename button

* update how banners behave

* if has unsaved changes first

* move confirm message

* add success banner

* update time state

* disable transitions

* test on open

* clean up banner behavior

* update banner styling

* capitalize

* update error banner styling to handle long texts

* avoid unnessary content jostling

* add loading label

* show validation warnings when opening modal

* retest cred if not all props req

* update scroll to auto

* add error warning

* update color saturation

* set overflow to auto

* fix bug to get credentials when connected

* round down to minutes

* change tab name

* update casing oauth

* disable credential testing if it has expressions

* label same as title

* add more space between close and save

* remove check on making any changes

* hide close on confirm modals

* don't accept clicks outside dialog

* fix build issues

* undo test changes

* fix table scrollbar logs

* rename modals

* fix bug with same name

* refactor modal

* fix tslint issue

* refactor name

* update name behavior

* update monospace font

* remove comment

* refactor inputs

* refactor error handling

* reduce spacing changes

* fix doc url oauth1 oauth2

* build

* add toast for waiting executions

* hide infotip if no inputs

* address most comments

* rename file

* fix menu alignment

* gst

* update types

* update language

* refactor toast behavior, add support for links clicking

* allow closing workflow modal from notification

* refactor how modals work

* fix data display

* update toast behavior

* fix type issues

* rename prop

* update overflow behavior for settings

* only expand used properties

* fix edge bug

* make scrollable prop, add margin to tags footer

* remove max height from tag manager

* rewrite message

* fix notice word break

* update property names

* clear sticky notifications on run

* build

* refactor function out

* use destruction

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
Co-authored-by: Omar Ajoue <krynble@gmail.com>

packages/editor-ui/src/Interface.ts

@@ -578,7 +578,6 @@ export interface IRootState {
 	pushConnectionActive: boolean;
 	saveDataErrorExecution: string;
 	saveDataSuccessExecution: string;
-	saveManualExecutions: boolean;
 	timezone: string;
 	stateIsDirty: boolean;
 	executionTimeout: number;

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

@@ -1,11 +1,12 @@
 <template>
 	<Modal
 		:name="modalName"
-		size="lg"
 		:customClass="$style.credentialModal"
 		:eventBus="modalBus"
 		:loading="loading"
 		:beforeClose="beforeClose"
+		width="70%"
+		height="80%"
 	>
 		<template slot="header">
 			<div v-if="credentialType" :class="$style.header">

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

@@ -2,7 +2,9 @@
 	<Modal
 		:name="modalName"
 		:eventBus="modalBus"
-		size="sm"
+		width="50%"
+		:center="true"
+		maxWidth="460px"
 	>
 		<template slot="header">
 			<h2 :class="$style.title">Add new credential</h2>

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

@@ -127,6 +127,7 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
 
 	.el-dialog__body {
 		padding: 0 !important;
+		height: 100%;
 		min-height: 400px;
 		overflow: hidden;
 		border-radius: 8px;

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

@@ -3,30 +3,34 @@
 		:name="modalName"
 		:eventBus="modalBus"
 		@enter="save"
-		size="sm"
 		title="Duplicate Workflow"
+		:center="true"
+		minWidth="420px"
+		maxWidth="420px"
 	>
 		<template v-slot:content>
-			<el-row>
+			<div :class="$style.content">
-				<n8n-input
+				<el-row>
-					v-model="name"
+					<n8n-input
-					ref="nameInput"
+						v-model="name"
-					placeholder="Enter workflow name"
+						ref="nameInput"
-					:maxlength="MAX_WORKFLOW_NAME_LENGTH"
+						placeholder="Enter workflow name"
-				/>
+						:maxlength="MAX_WORKFLOW_NAME_LENGTH"
-			</el-row>
+					/>
-			<el-row>
+				</el-row>
-				<TagsDropdown
+				<el-row>
-					:createEnabled="true"
+					<TagsDropdown
-					:currentTagIds="currentTagIds"
+						:createEnabled="true"
-					:eventBus="dropdownBus"
+						:currentTagIds="currentTagIds"
-					@blur="onTagsBlur"
+						:eventBus="dropdownBus"
-					@esc="onTagsEsc"
+						@blur="onTagsBlur"
-					@update="onTagsUpdate"
+						@esc="onTagsEsc"
-					placeholder="Choose or create a tag"
+						@update="onTagsUpdate"
-					ref="dropdown"
+						placeholder="Choose or create a tag"
-				/>
+						ref="dropdown"
-			</el-row>
+					/>
+				</el-row>
+			</div>
 		</template>
 		<template v-slot:footer="{ close }">
 			<div :class="$style.footer">
@@ -127,6 +131,12 @@ export default mixins(showMessage, workflowHelpers).extend({
 </script>
 
 <style lang="scss" module>
+.content {
+	> div {
+		margin-bottom: 15px;
+	}
+}
+
 .footer {
 	> * {
 		margin-left: var(--spacing-3xs);

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

@@ -65,7 +65,11 @@ export default mixins(showMessage).extend({
 			if (!this.name) {
 				this.$emit('input', `Untitled ${this.type}`);
 
-				this.$showWarning('Error', `${this.type} name cannot be empty`);
+				this.$showToast({
+					title: 'Error',
+					message: `${this.type} name cannot be empty`,
+					type: 'warning',
+				});
 			}
 
 			this.isNameEdit = false;

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

@@ -3,7 +3,6 @@
 		<about :dialogVisible="aboutDialogVisible" @closeDialog="closeAboutDialog"></about>
 		<executions-list :dialogVisible="executionsListDialogVisible" @closeDialog="closeExecutionsListOpenDialog"></executions-list>
 		<credentials-list :dialogVisible="credentialOpenDialogVisible" @closeDialog="closeCredentialOpenDialog"></credentials-list>
-		<workflow-settings :dialogVisible="workflowSettingsDialogVisible" @closeDialog="closeWorkflowSettingsDialog"></workflow-settings>
 		<input type="file" ref="importFile" style="display: none" v-on:change="handleFileImport()">
 
 		<div class="side-menu-wrapper" :class="{expanded: !isCollapsed}">
@@ -229,7 +228,6 @@ export default mixins(
 				credentialOpenDialogVisible: false,
 				executionsListDialogVisible: false,
 				stopExecutionInProgress: false,
-				workflowSettingsDialogVisible: false,
 				helpMenuItems,
 			};
 		},
@@ -305,9 +303,6 @@ export default mixins(
 			closeAboutDialog () {
 				this.aboutDialogVisible = false;
 			},
-			closeWorkflowSettingsDialog () {
-				this.workflowSettingsDialogVisible = false;
-			},
 			closeExecutionsListOpenDialog () {
 				this.executionsListDialogVisible = false;
 			},
@@ -436,7 +431,7 @@ export default mixins(
 				} else if (key === 'help-about') {
 					this.aboutDialogVisible = true;
 				} else if (key === 'workflow-settings') {
-					this.workflowSettingsDialogVisible = true;
+					this.$store.dispatch('ui/openWorkflowSettingsModal');
 				} else if (key === 'workflow-new') {
 					const result = this.$store.getters.getStateIsDirty;
 					if(result) {

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

@@ -1,63 +1,84 @@
 <template>
-	<div>
+	<el-dialog
-		<el-drawer
+		:visible="visible"
-			v-if="drawer"
+		:before-close="closeDialog"
-			:direction="drawerDirection"
+		:title="title"
-			:visible="visible && visibleDrawer"
+		:class="{'dialog-wrapper': true, 'center': center, 'scrollable': scrollable}"
-			:size="drawerWidth"
+		:width="width"
-			:before-close="closeDrawer"
+		:show-close="showClose"
-			>
+		:custom-class="getCustomClass()"
-			<template v-slot:title>
+		:style="styles"
-				<slot name="header" />
+		append-to-body
-			</template>
+	>
-			<template>
+		<template v-slot:title>
-				<slot name="content"/>
+			<slot name="header" v-if="!loading" />
-			</template>
+		</template>
-		</el-drawer>
+		<div class="modal-content" @keydown.stop @keydown.enter="handleEnter" @keydown.esc="closeDialog">
-		<el-dialog
+			<slot v-if="!loading"  name="content"/>
-			v-else
+			<div class="loader" v-else>
-			:visible="dialogVisible"
+				<n8n-spinner />
-			:before-close="closeDialog"
-			:title="title"
-			:class="{ 'dialog-wrapper': true, [size]: true }"
-			:width="width"
-			:show-close="showClose"
-			:custom-class="getCustomClass()"
-			append-to-body
-		>
-			<template v-slot:title>
-				<slot name="header" v-if="!loading" />
-			</template>
-			<div class="modal-content" @keydown.stop @keydown.enter="handleEnter" @keydown.esc="closeDialog">
-				<slot v-if="!loading"  name="content"/>
-				<div class="loader" v-else>
-					<n8n-spinner />
-				</div>
 			</div>
-			<el-row  v-if="!loading" class="modal-footer">
+		</div>
-				<slot name="footer" :close="closeDialog" />
+		<el-row  v-if="!loading" class="modal-footer">
-			</el-row>
+			<slot name="footer" :close="closeDialog" />
-		</el-dialog>
+		</el-row>
-	</div>
+	</el-dialog>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
 
-const sizeMap: {[size: string]: string} = {
-	xl: '80%',
-	lg: '70%',
-	m: '50%',
-	default: '50%',
-};
-
 export default Vue.extend({
 	name: "Modal",
-	props: ['name', 'title', 'eventBus', 'size', 'drawer', 'drawerDirection', 'drawerWidth', 'visible', 'showClose', 'loading', 'classic', 'beforeClose', 'customClass'],
+	props: {
-	data() {
+		name: {
-		return {
+			type: String,
-			visibleDrawer: this.drawer,
+		},
-		};
+		title: {
+			type: String,
+		},
+		eventBus: {
+			type: Vue,
+		},
+		showClose: {
+			type: Boolean,
+			default: true,
+		},
+		loading: {
+			type: Boolean,
+		},
+		classic: {
+			type: Boolean,
+		},
+		beforeClose: {
+			type: Function,
+		},
+		customClass: {
+			type: String,
+		},
+		center: {
+			type: Boolean,
+		},
+		width: {
+			type: String,
+			default: '50%',
+		},
+		minWidth: {
+			type: String,
+		},
+		maxWidth: {
+			type: String,
+		},
+		height: {
+			type: String,
+		},
+		maxHeight: {
+			type: String,
+		},
+		scrollable: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	mounted() {
 		window.addEventListener('keydown', this.onWindowKeydown);
@@ -108,13 +129,6 @@ export default Vue.extend({
 				callback();
 			}
 		},
-		closeDrawer() {
-			this.visibleDrawer = false;
-			setTimeout(() =>{
-				this.$store.commit('ui/closeTopModal');
-				this.visibleDrawer = true;
-			}, 300); // delayed for closing animation to take effect
-		},
 		getCustomClass() {
 			let classes = this.$props.customClass || '';
 
@@ -126,60 +140,64 @@ export default Vue.extend({
 		},
 	},
 	computed: {
-		width(): string {
-			return this.$props.size ? sizeMap[this.$props.size] : sizeMap.default;
-		},
 		isActive(): boolean {
 			return this.$store.getters['ui/isModalActive'](this.$props.name);
 		},
-		dialogVisible(): boolean {
+		visible(): boolean {
 			return this.$store.getters['ui/isModalOpen'](this.$props.name);
 		},
+		styles() {
+			const styles: {[prop: string]: string} = {};
+			if (this.height) {
+				styles['--dialog-height'] = this.height;
+			}
+			if (this.maxHeight) {
+				styles['--dialog-max-height'] = this.maxHeight;
+			}
+			if (this.maxWidth) {
+				styles['--dialog-max-width'] = this.maxWidth;
+			}
+			if (this.minWidth) {
+				styles['--dialog-min-width'] = this.minWidth;
+			}
+			return styles;
+		},
 	},
 });
 </script>
 
 <style lang="scss">
-.el-drawer__header {
-	margin: 0;
-	padding: 30px 30px 0 30px;
-}
-
-.el-drawer__body {
-	overflow: hidden;
-}
-
-.el-dialog__body {
-	height: 100%;
-}
-
 .dialog-wrapper {
-	&.xl > div, &.md > div {
+	.el-dialog {
-		min-width: 620px;
+		display: flex;
+		flex-direction: column;
+		max-width: var(--dialog-max-width, 80%);
+		min-width: var(--dialog-min-width, 420px);
+		height: var(--dialog-height);
+		max-height: var(--dialog-max-height);
 	}
 
-	&.lg > div {
+	.el-dialog__body {
-		height: 80%;
 		overflow: hidden;
-
+		display: flex;
-		.modal-content {
+		flex-direction: column;
-			height: 100%;
+		flex-grow: 1;
-		}
 	}
 
-	&.sm {
+	.modal-content {
+		overflow: hidden;
+		flex-grow: 1;
+	}
+}
+
+.scrollable .modal-content {
+	overflow-y: auto;
+}
+
+.center {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-
-		> div {
-			max-width: 460px;
-		}
-	}
-}
-
-.modal-content > .el-row {
-	margin-bottom: 15px;
 }
 
 .loader {

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

@@ -0,0 +1,92 @@
+<template>
+	<el-drawer
+		:direction="direction"
+		:visible="visible"
+		:size="width"
+		:before-close="close"
+		>
+		<template v-slot:title>
+			<slot name="header" />
+		</template>
+		<template>
+			<slot name="content"/>
+		</template>
+	</el-drawer>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+
+export default Vue.extend({
+	name: "ModalDrawer",
+	props: {
+		name: {
+			type: String,
+		},
+		eventBus: {
+			type: Vue,
+		},
+		direction: {
+			type: String,
+		},
+		width: {
+			type: String,
+		},
+	},
+	mounted() {
+		window.addEventListener('keydown', this.onWindowKeydown);
+
+		if (this.$props.eventBus) {
+			this.$props.eventBus.$on('close', () => {
+				this.close();
+			});
+		}
+
+		const activeElement = document.activeElement as HTMLElement;
+		if (activeElement) {
+			activeElement.blur();
+		}
+	},
+	beforeDestroy() {
+		window.removeEventListener('keydown', this.onWindowKeydown);
+	},
+	methods: {
+		onWindowKeydown(event: KeyboardEvent) {
+			if (!this.isActive) {
+				return;
+			}
+
+			if (event && event.keyCode === 13) {
+				this.handleEnter();
+			}
+		},
+		handleEnter() {
+			if (this.isActive) {
+				this.$emit('enter');
+			}
+		},
+		close() {
+			this.$store.commit('ui/closeTopModal');
+		},
+	},
+	computed: {
+		isActive(): boolean {
+			return this.$store.getters['ui/isModalActive'](this.$props.name);
+		},
+		visible(): boolean {
+			return this.$store.getters['ui/isModalOpen'](this.$props.name);
+		},
+	},
+});
+</script>
+
+<style lang="scss">
+.el-drawer__header {
+	margin: 0;
+	padding: 30px 30px 0 30px;
+}
+
+.el-drawer__body {
+	overflow: hidden;
+}
+</style>

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

@@ -26,10 +26,16 @@
 		</ModalRoot>
 
 		<ModalRoot :name="VERSIONS_MODAL_KEY" :keepAlive="true">
-			<template v-slot="{ modalName, open }">
+			<template v-slot="{ modalName }">
 				<UpdatesPanel
 					:modalName="modalName"
-					:visible="open"
+				/>
+			</template>
+		</ModalRoot>
+		<ModalRoot :name="WORKFLOW_SETTINGS_MODAL_KEY">
+			<template v-slot="{ modalName }">
+				<WorkflowSettings
+					:modalName="modalName"
 				/>
 			</template>
 		</ModalRoot>
@@ -56,7 +62,7 @@
 
 <script lang="ts">
 import Vue from "vue";
-import { DUPLICATE_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, WORKLOW_OPEN_MODAL_KEY, VERSIONS_MODAL_KEY, CREDENTIAL_EDIT_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY } from '@/constants';
+import { DUPLICATE_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, WORKLOW_OPEN_MODAL_KEY, VERSIONS_MODAL_KEY, CREDENTIAL_EDIT_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY } from '@/constants';
 
 import CredentialEdit from "./CredentialEdit/CredentialEdit.vue";
 import DuplicateWorkflowDialog from "@/components/DuplicateWorkflowDialog.vue";
@@ -64,6 +70,7 @@ import WorkflowOpen from "@/components/WorkflowOpen.vue";
 import ModalRoot from "./ModalRoot.vue";
 import CredentialsSelectModal from "./CredentialsSelectModal.vue";
 import UpdatesPanel from "./UpdatesPanel.vue";
+import WorkflowSettings from "./WorkflowSettings.vue";
 import TagsManager from "@/components/TagsManager/TagsManager.vue";
 
 export default Vue.extend({
@@ -74,6 +81,7 @@ export default Vue.extend({
 		ModalRoot,
 		CredentialsSelectModal,
 		UpdatesPanel,
+		WorkflowSettings,
 		TagsManager,
 		WorkflowOpen,
 	},
@@ -81,6 +89,7 @@ export default Vue.extend({
 		DUPLICATE_MODAL_KEY,
 		TAGS_MANAGER_MODAL_KEY,
 		WORKLOW_OPEN_MODAL_KEY,
+		WORKFLOW_SETTINGS_MODAL_KEY,
 		VERSIONS_MODAL_KEY,
 		CREDENTIAL_EDIT_MODAL_KEY,
 		CREDENTIAL_SELECT_MODAL_KEY,

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

@@ -4,7 +4,7 @@
 		:name="modalName"
 		:eventBus="modalBus"
 		@enter="onEnter"
-		size="md"
+		minWidth="620px"
 	>
 		<template v-slot:content>
 			<el-row>
@@ -186,5 +186,6 @@ export default mixins(showMessage).extend({
 <style lang="scss" scoped>
 .el-row {
 	min-height: $--tags-manager-min-height;
+	margin-bottom: 15px;
 }
 </style>

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

@@ -1,10 +1,8 @@
 <template>
-	<Modal
+	<ModalDrawer
 		:name="modalName"
-		:drawer="true"
+		direction="ltr"
-		:visible="visible"
+		width="520px"
-		drawerDirection="ltr"
-		drawerWidth="520px"
 	>
 		<template slot="header">
 			<span :class="$style.title">We’ve been busy ✨</span>
@@ -40,25 +38,25 @@
 				</div>
 			</section>
 		</template>
-	</Modal>
+	</ModalDrawer>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import { mapGetters } from 'vuex';
 
-import Modal from './Modal.vue';
+import ModalDrawer from './ModalDrawer.vue';
 import TimeAgo from './TimeAgo.vue';
 import VersionCard from './VersionCard.vue';
 
 export default Vue.extend({
 	name: 'UpdatesPanel',
 	components: {
-		Modal,
+		ModalDrawer,
 		VersionCard,
 		TimeAgo,
 	},
-	props: ['modalName', 'visible'],
+	props: ['modalName'],
 	computed: {
 		...mapGetters('versions', ['nextVersions', 'currentVersion', 'infoUrl']),
 	},

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

@@ -1,7 +1,8 @@
 <template>
 	<Modal
 		:name="modalName"
-		size="xl"
+		width="80%"
+		minWidth="620px"
 		:classic="true"
 	>
 			<template v-slot:header>

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

@@ -1,7 +1,14 @@
 <template>
-	<span>
+	<Modal
-		<el-dialog class="workflow-settings" :visible="dialogVisible" append-to-body width="65%" title="Workflow Settings" :before-close="closeDialog">
+		:name="modalName"
-			<div v-loading="isLoading">
+		width="65%"
+		maxHeight="80%"
+		title="Workflow Settings"
+		:eventBus="modalBus"
+		:scrollable="true"
+	>
+		<template v-slot:content>
+			<div v-loading="isLoading" class="workflow-settings">
 				<el-row>
 					<el-col :span="10" class="setting-name">
 						Error Workflow:
@@ -156,12 +163,14 @@
 						</el-col>
 					</el-row>
 				</div>
-				<div class="action-buttons">
-					<n8n-button label="Save" size="large" @click="saveSettings" />
-				</div>
 			</div>
-		</el-dialog>
+		</template>
-	</span>
+		<template v-slot:footer>
+			<div class="action-buttons">
+				<n8n-button label="Save" size="large" @click="saveSettings" />
+			</div>
+		</template>
+	</Modal>
 </template>
 
 <script lang="ts">
@@ -177,6 +186,7 @@ import {
 	IWorkflowSettings,
 	IWorkflowShortResponse,
 } from '@/Interface';
+import Modal from './Modal.vue';
 
 import mixins from 'vue-typed-mixins';
 
@@ -187,9 +197,14 @@ export default mixins(
 	showMessage,
 ).extend({
 	name: 'WorkflowSettings',
-	props: [
+	props: {
-		'dialogVisible',
+		modalName: {
-	],
+			type: String,
+		},
+	},
+	components: {
+		Modal,
+	},
 	data () {
 		return {
 			isLoading: true,
@@ -220,22 +235,74 @@ export default mixins(
 			executionTimeout: this.$store.getters.executionTimeout,
 			maxExecutionTimeout: this.$store.getters.maxExecutionTimeout,
 			timeoutHMS: { hours: 0, minutes: 0, seconds: 0 } as ITimeoutHMS,
+			modalBus: new Vue(),
 		};
 	},
-	watch: {
+	async mounted () {
-		dialogVisible (newValue, oldValue) {
+		if (this.$route.params.name === undefined) {
-			if (newValue) {
+			this.$showMessage({
-				this.openDialog();
+				title: 'No workflow active',
-			}
+				message: `No workflow active to display settings of.`,
-			this.$externalHooks().run('workflowSettings.dialogVisibleChanged', { dialogVisible: newValue });
+				type: 'error',
-		},
+				duration: 0,
+			});
+			this.closeDialog();
+			return;
+		}
+
+		this.defaultValues.saveDataErrorExecution = this.$store.getters.saveDataErrorExecution;
+		this.defaultValues.saveDataSuccessExecution = this.$store.getters.saveDataSuccessExecution;
+		this.defaultValues.saveManualExecutions = this.$store.getters.saveManualExecutions;
+		this.defaultValues.timezone = this.$store.getters.timezone;
+
+		this.isLoading = true;
+		const promises = [];
+		promises.push(this.loadWorkflows());
+		promises.push(this.loadSaveDataErrorExecutionOptions());
+		promises.push(this.loadSaveDataSuccessExecutionOptions());
+		promises.push(this.loadSaveExecutionProgressOptions());
+		promises.push(this.loadSaveManualOptions());
+		promises.push(this.loadTimezones());
+
+		try {
+			await Promise.all(promises);
+		} catch (error) {
+			this.$showError(error, 'Problem loading settings', 'The following error occurred loading the data:');
+		}
+
+		const workflowSettings = JSON.parse(JSON.stringify(this.$store.getters.workflowSettings));
+
+		if (workflowSettings.timezone === undefined) {
+			workflowSettings.timezone = 'DEFAULT';
+		}
+		if (workflowSettings.saveDataErrorExecution === undefined) {
+			workflowSettings.saveDataErrorExecution = 'DEFAULT';
+		}
+		if (workflowSettings.saveDataSuccessExecution === undefined) {
+			workflowSettings.saveDataSuccessExecution = 'DEFAULT';
+		}
+		if (workflowSettings.saveExecutionProgress === undefined) {
+			workflowSettings.saveExecutionProgress = 'DEFAULT';
+		}
+		if (workflowSettings.saveManualExecutions === undefined) {
+			workflowSettings.saveManualExecutions = 'DEFAULT';
+		}
+		if (workflowSettings.executionTimeout === undefined) {
+			workflowSettings.executionTimeout = this.$store.getters.executionTimeout;
+		}
+		if (workflowSettings.maxExecutionTimeout === undefined) {
+			workflowSettings.maxExecutionTimeout = this.$store.getters.maxExecutionTimeout;
+		}
+
+		Vue.set(this, 'workflowSettings', workflowSettings);
+		this.timeoutHMS = this.convertToHMS(workflowSettings.executionTimeout);
+		this.isLoading = false;
+
+		this.$externalHooks().run('workflowSettings.dialogVisibleChanged', { dialogVisible: true });
 	},
 	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');
-			return false;
 		},
 		setTimeout (key: string, value: string) {
 			const time = value ? parseInt(value, 10) : 0;
@@ -362,66 +429,6 @@ export default mixins(
 
 			Vue.set(this, 'workflows', workflows);
 		},
-		async openDialog () {
-			if (this.$route.params.name === undefined) {
-				this.$showMessage({
-					title: 'No workflow active',
-					message: `No workflow active to display settings of.`,
-					type: 'error',
-					duration: 0,
-				});
-				this.closeDialog();
-				return;
-			}
-
-			this.defaultValues.saveDataErrorExecution = this.$store.getters.saveDataErrorExecution;
-			this.defaultValues.saveDataSuccessExecution = this.$store.getters.saveDataSuccessExecution;
-			this.defaultValues.saveManualExecutions = this.$store.getters.saveManualExecutions;
-			this.defaultValues.timezone = this.$store.getters.timezone;
-
-			this.isLoading = true;
-			const promises = [];
-			promises.push(this.loadWorkflows());
-			promises.push(this.loadSaveDataErrorExecutionOptions());
-			promises.push(this.loadSaveDataSuccessExecutionOptions());
-			promises.push(this.loadSaveExecutionProgressOptions());
-			promises.push(this.loadSaveManualOptions());
-			promises.push(this.loadTimezones());
-
-			try {
-				await Promise.all(promises);
-			} catch (error) {
-				this.$showError(error, 'Problem loading settings', 'The following error occurred loading the data:');
-			}
-
-			const workflowSettings = JSON.parse(JSON.stringify(this.$store.getters.workflowSettings));
-
-			if (workflowSettings.timezone === undefined) {
-				workflowSettings.timezone = 'DEFAULT';
-			}
-			if (workflowSettings.saveDataErrorExecution === undefined) {
-				workflowSettings.saveDataErrorExecution = 'DEFAULT';
-			}
-			if (workflowSettings.saveDataSuccessExecution === undefined) {
-				workflowSettings.saveDataSuccessExecution = 'DEFAULT';
-			}
-			if (workflowSettings.saveExecutionProgress === undefined) {
-				workflowSettings.saveExecutionProgress = 'DEFAULT';
-			}
-			if (workflowSettings.saveManualExecutions === undefined) {
-				workflowSettings.saveManualExecutions = 'DEFAULT';
-			}
-			if (workflowSettings.executionTimeout === undefined) {
-				workflowSettings.executionTimeout = this.$store.getters.executionTimeout;
-			}
-			if (workflowSettings.maxExecutionTimeout === undefined) {
-				workflowSettings.maxExecutionTimeout = this.$store.getters.maxExecutionTimeout;
-			}
-
-			Vue.set(this, 'workflowSettings', workflowSettings);
-			this.timeoutHMS = this.convertToHMS(workflowSettings.executionTimeout);
-			this.isLoading = false;
-		},
 		async saveSettings () {
 			// Set that the active state should be changed
 			const data: IWorkflowDataUpdate = {

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

@@ -0,0 +1,11 @@
+export function isChildOf(parent: Element, child: Element): boolean {
+	if (child.parentElement === null) {
+		return false;
+	}
+	if (child.parentElement === parent) {
+		return true;
+	}
+
+	return isChildOf(parent, child.parentElement);
+}
+

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

@@ -26,12 +26,15 @@ export const newVersions = mixins(
 				}
 
 				message = `${message} <a class="primary-color">More info</a>`;
-				this.$showWarning('Critical update available', message, {
+				this.$showToast({
+					title: 'Critical update available',
+					message,
 					onClick: () => {
 						this.$store.dispatch('ui/openUpdatesPanel');
 					},
 					closeOnClick: true,
 					customClass: 'clickable',
+					type: 'warning',
 					duration: 0,
 				});
 			}

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

@@ -218,12 +218,35 @@ export const pushConnection = mixins(
 					// @ts-ignore
 					const workflow = this.getWorkflow();
 					if (runDataExecuted.waitTill !== undefined) {
+						const {
+							isNewWorkflow,
+							activeExecutionId,
+							saveManualExecutions,
+						} = this.$store.getters;
+
+						let action;
+						if (isNewWorkflow || !saveManualExecutions) {
+							action = '<a class="open-settings">Turn on saving manual executions</a> and run again to see what happened after this node.';
+						}
+						else {
+							action = `<a href="/execution/${activeExecutionId}" target="_blank">View the execution</a> to see what happened after this node.`;
+						}
+
 						// Workflow did start but had been put to wait
 						this.$titleSet(workflow.name as string, 'IDLE');
-						this.$showMessage({
+						this.$showToast({
-							title: 'Workflow got started',
+							title: 'Workflow started waiting',
-							message: 'Workflow execution has started and is now waiting!',
+							message: `${action} <a href="https://docs.n8n.io/nodes/n8n-nodes-base.wait/" target="_blank">More info</a>`,
 							type: 'success',
+							duration: 0,
+							onLinkClick: async (e: HTMLLinkElement) => {
+								if (e.classList.contains('open-settings')) {
+									if (this.$store.getters.isNewWorkflow) {
+										await this.saveAsNewWorkflow();
+									}
+									this.$store.dispatch('ui/openWorkflowSettingsModal');
+								}
+							},
 						});
 					} else if (runDataExecuted.finished !== true) {
 						this.$titleSet(workflow.name as string, 'ERROR');
@@ -237,8 +260,8 @@ export const pushConnection = mixins(
 						// Workflow did execute without a problem
 						this.$titleSet(workflow.name as string, 'IDLE');
 						this.$showMessage({
-							title: 'Workflow got executed',
+							title: 'Workflow was executed',
-							message: 'Workflow did get executed successfully!',
+							message: 'Workflow was executed successfully!',
 							type: 'success',
 						});
 					}

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

@@ -6,6 +6,9 @@ import { externalHooks } from '@/components/mixins/externalHooks';
 import { ExecutionError } from 'n8n-workflow';
 import { ElMessageBoxOptions } from 'element-ui/types/message-box';
 import { MessageType } from 'element-ui/types/message';
+import { isChildOf } from './helpers';
+
+let stickyNotificationQueue: ElNotificationComponent[] = [];
 
 export const showMessage = mixins(externalHooks).extend({
 	methods: {
@@ -15,13 +18,29 @@ export const showMessage = mixins(externalHooks).extend({
 				messageData.position = 'bottom-right';
 			}
 
-			return this.$notify(messageData);
+			const notification = this.$notify(messageData);
+
+			if (messageData.duration === 0) {
+				stickyNotificationQueue.push(notification);
+			}
+
+			return notification;
 		},
 
-		$showWarning(title: string, message: string,  config?: {onClick?: () => void, duration?: number, customClass?: string, closeOnClick?: boolean}) {
+		$showToast(config: {
+				title: string,
+				message: string,
+				onClick?: () => void,
+				onClose?: () => void,
+				duration?: number,
+				customClass?: string,
+				closeOnClick?: boolean,
+				onLinkClick?: (e: HTMLLinkElement) => void,
+				type?: MessageType,
+			}) {
 			// eslint-disable-next-line prefer-const
 			let notification: ElNotificationComponent;
-			if (config && config.closeOnClick) {
+			if (config.closeOnClick) {
 				const cb = config.onClick;
 				config.onClick = () => {
 					if (notification) {
@@ -33,11 +52,34 @@ export const showMessage = mixins(externalHooks).extend({
 				};
 			}
 
+			if (config.onLinkClick) {
+				const onLinkClick = (e: MouseEvent) => {
+					if (e && e.target && config.onLinkClick && isChildOf(notification.$el, e.target as Element)) {
+						const target = e.target as HTMLElement;
+						if (target && target.tagName === 'A') {
+							config.onLinkClick(e.target as HTMLLinkElement);
+						}
+					}
+				};
+				window.addEventListener('click', onLinkClick);
+
+				const cb = config.onClose;
+				config.onClose = () => {
+					window.removeEventListener('click', onLinkClick);
+					if (cb) {
+						cb();
+					}
+				};
+			}
+
 			notification = this.$showMessage({
-				title,
+				title: config.title,
-				message,
+				message: config.message,
-				type: 'warning',
+				onClick: config.onClick,
-				...(config || {}),
+				onClose: config.onClose,
+				duration: config.duration,
+				customClass: config.customClass,
+				type: config.type,
 			});
 
 			return notification;
@@ -99,6 +141,16 @@ export const showMessage = mixins(externalHooks).extend({
 			}
 		},
 
+		clearAllStickyNotifications() {
+			stickyNotificationQueue.map((notification: ElNotificationComponent) => {
+				if (notification) {
+					notification.close();
+				}
+			});
+
+			stickyNotificationQueue = [];
+		},
+
 		// @ts-ignore
 		collapsableDetails({ description, node }: Error) {
 			if (!description) return '';

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

@@ -13,6 +13,7 @@ import {
 import { externalHooks } from '@/components/mixins/externalHooks';
 import { restApi } from '@/components/mixins/restApi';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
+import { showMessage } from '@/components/mixins/showMessage';
 
 import mixins from 'vue-typed-mixins';
 import { titleChange } from './titleChange';
@@ -21,6 +22,7 @@ export const workflowRun = mixins(
 	externalHooks,
 	restApi,
 	workflowHelpers,
+	showMessage,
 	titleChange,
 ).extend({
 	methods: {
@@ -61,6 +63,8 @@ export const workflowRun = mixins(
 			const workflow = this.getWorkflow();
 			this.$titleSet(workflow.name as string, 'EXECUTING');
 
+			this.clearAllStickyNotifications();
+
 			try {
 				// Check first if the workflow has any issues before execute it
 				const issuesExist = this.$store.getters.nodesIssuesExist;

packages/editor-ui/src/constants.ts

@@ -20,6 +20,7 @@ export const DUPLICATE_MODAL_KEY = 'duplicate';
 export const TAGS_MANAGER_MODAL_KEY = 'tagsManager';
 export const WORKLOW_OPEN_MODAL_KEY = 'workflowOpen';
 export const VERSIONS_MODAL_KEY = 'versions';
+export const WORKFLOW_SETTINGS_MODAL_KEY = 'settings';
 export const CREDENTIAL_EDIT_MODAL_KEY = 'editCredential';
 export const CREDENTIAL_SELECT_MODAL_KEY = 'selectCredential';
 

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

@@ -1,4 +1,4 @@
-import { CREDENTIAL_EDIT_MODAL_KEY, DUPLICATE_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, VERSIONS_MODAL_KEY, WORKLOW_OPEN_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY } from '@/constants';
+import { CREDENTIAL_EDIT_MODAL_KEY, DUPLICATE_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, VERSIONS_MODAL_KEY, WORKLOW_OPEN_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY } from '@/constants';
 import Vue from 'vue';
 import { ActionContext, Module } from 'vuex';
 import {
@@ -27,6 +27,9 @@ const module: Module<IUiState, IRootState> = {
 			[VERSIONS_MODAL_KEY]: {
 				open: false,
 			},
+			[WORKFLOW_SETTINGS_MODAL_KEY]: {
+				open: false,
+			},
 			[CREDENTIAL_SELECT_MODAL_KEY]: {
 				open: false,
 			},
@@ -95,6 +98,9 @@ const module: Module<IUiState, IRootState> = {
 		openUpdatesPanel: async (context: ActionContext<IUiState, IRootState>) => {
 			context.commit('openModal', VERSIONS_MODAL_KEY);
 		},
+		openWorkflowSettingsModal: async (context: ActionContext<IUiState, IRootState>) => {
+			context.commit('openModal', WORKFLOW_SETTINGS_MODAL_KEY);
+		},
 		openExisitngCredential: async (context: ActionContext<IUiState, IRootState>, { id }: {id: string}) => {
 			context.commit('setActiveId', {name: CREDENTIAL_EDIT_MODAL_KEY, id});
 			context.commit('setMode', {name: CREDENTIAL_EDIT_MODAL_KEY, mode: 'edit'});

packages/editor-ui/src/store.ts

@@ -56,7 +56,6 @@ const state: IRootState = {
 	pushConnectionActive: true,
 	saveDataErrorExecution: 'all',
 	saveDataSuccessExecution: 'all',
-	saveManualExecutions: false,
 	timezone: 'America/New_York',
 	stateIsDirty: false,
 	executionTimeout: -1,
@@ -497,9 +496,6 @@ export const store = new Vuex.Store({
 		setSaveDataSuccessExecution (state, newValue: string) {
 			Vue.set(state, 'saveDataSuccessExecution', newValue);
 		},
-		setSaveManualExecutions (state, saveManualExecutions: boolean) {
-			Vue.set(state, 'saveManualExecutions', saveManualExecutions);
-		},
 		setTimezone (state, timezone: string) {
 			Vue.set(state, 'timezone', timezone);
 		},
@@ -606,6 +602,10 @@ export const store = new Vuex.Store({
 			return state.activeActions.includes(action);
 		},
 
+		isNewWorkflow: (state) => {
+			return state.workflow.id === PLACEHOLDER_EMPTY_WORKFLOW_ID;
+		},
+
 		getActiveExecutions: (state): IExecutionsCurrentSummaryExtended[] => {
 			return state.activeExecutions;
 		},
@@ -650,8 +650,8 @@ export const store = new Vuex.Store({
 		saveDataSuccessExecution: (state): string => {
 			return state.saveDataSuccessExecution;
 		},
-		saveManualExecutions: (state): boolean => {
+		saveManualExecutions: (state, getters): boolean => {
-			return state.saveManualExecutions;
+			return !!getters.workflowSettings.saveManualExecutions;
 		},
 		timezone: (state): string => {
 			return state.timezone;

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

@@ -161,6 +161,7 @@ import {
 	IPushDataExecutionFinished,
 	ITag,
 	IWorkflowTemplate,
+	IExecutionsSummary,
 } from '../Interface';
 import { mapGetters } from 'vuex';
 
@@ -403,6 +404,15 @@ export default mixins(
 						}
 					}
 				}
+
+				if ((data as IExecutionsSummary).waitTill) {
+					this.$showMessage({
+						title: `This execution hasn't finished yet`,
+						message: `<a onclick="window.location.reload(false);">Refresh</a> to see the latest status.<br/> <a href="https://docs.n8n.io/nodes/n8n-nodes-base.wait/" target="_blank">More info</a>`,
+						type: 'warning',
+						duration: 0,
+					});
+				}
 			},
 			async openWorkflowTemplate (templateId: string) {
 				this.setLoadingText('Loading template');
@@ -911,7 +921,7 @@ export default mixins(
 					});
 				} catch (error) {
 					// Execution stop might fail when the execution has already finished. Let's treat this here.
-					const execution = await this.restApi().getExecution(executionId) as IExecutionResponse;
+					const execution = await this.restApi().getExecution(executionId);
 					if (execution.finished) {
 						const executedData = {
 							data: execution.data,
@@ -2182,13 +2192,11 @@ export default mixins(
 			},
 			async loadSettings (): Promise<void> {
 				const settings = await this.restApi().getSettings() as IN8nUISettings;
-
 				this.$store.commit('setUrlBaseWebhook', settings.urlBaseWebhook);
 				this.$store.commit('setEndpointWebhook', settings.endpointWebhook);
 				this.$store.commit('setEndpointWebhookTest', settings.endpointWebhookTest);
 				this.$store.commit('setSaveDataErrorExecution', settings.saveDataErrorExecution);
 				this.$store.commit('setSaveDataSuccessExecution', settings.saveDataSuccessExecution);
-				this.$store.commit('setSaveManualExecutions', settings.saveManualExecutions);
 				this.$store.commit('setTimezone', settings.timezone);
 				this.$store.commit('setExecutionTimeout', settings.executionTimeout);
 				this.$store.commit('setMaxExecutionTimeout', settings.maxExecutionTimeout);

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

@@ -283,7 +283,7 @@ export class Wait implements INodeType {
 				description: 'The HTTP Response code to return',
 			},
 			{
-				displayName: 'Response Mode',
+				displayName: 'Respond when',
 				name: 'responseMode',
 				type: 'options',
 				displayOptions: {
@@ -295,12 +295,12 @@ export class Wait implements INodeType {
 				},
 				options: [
 					{
-						name: 'On Received',
+						name: 'Webhook received',
 						value: 'onReceived',
 						description: 'Returns directly with defined Response Code',
 					},
 					{
-						name: 'Last Node',
+						name: 'Last node finishes',
 						value: 'lastNode',
 						description: 'Returns data of the last executed node',
 					},

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

@@ -155,17 +155,17 @@ export class Webhook implements INodeType {
 				description: 'The HTTP Response code to return',
 			},
 			{
-				displayName: 'Response Mode',
+				displayName: 'Respond when',
 				name: 'responseMode',
 				type: 'options',
 				options: [
 					{
-						name: 'On Received',
+						name: 'Webhook received',
 						value: 'onReceived',
 						description: 'Returns directly with defined Response Code',
 					},
 					{
-						name: 'Last Node',
+						name: 'Last node finishes',
 						value: 'lastNode',
 						description: 'Returns data of the last executed node',
 					},