✨ Improve Waiting Webhook call state in WF Canvas (#2430)

* N8N-2586 Improve Waiting Webhook call state in WF Canvas

* N8N-2586 Added watcher for showing Webhook's Node Tooltip on execution

* N8N-2586 Show helping tooltip for trigger node if wokrflow is running, it is a trigger node, if it is only one trigger node in WF

* N8N-2586 Rework/Move logic to computed property, Created getter for ActveTriggerNodesInWokrflow, Add style to trigger node's tooltip, remove comments

* N8N-2586 Added EventTriggerDescription prop in INodeTypeDescription Interface, Updated Logic for TriggerNode Tooltip based on the new prop

* N8N-2586 Add new use cases/watcher to show Trigger Nodes Tooltip / If has issues, if paused, if wokrlfow is running, Refactor Getter

* N8N-2586 Added z-index to tooltip, Added new Scenario for Tooltip if it is Draged&Droped on the WF

* N8N-2586 Refactor computed property for draged nodes

* N8N-2586 Fixed Conflicts

* N8N-2586 Fixed Tooltip

* N8N-2586 Dont show tooltip on core trigger nodes that execute automatically

* N8N-2586 Fixed Webhook tooltip when adding/deleting canvas during WF execution

* N8N-2586 Updated Logic, Simplify the code

* N8N-2586 Simplify Code

* N8N-2586 Added check for nodetype

* update dragging to use local state

* N8N-2586 Added eventTriggerDescription to Interval Node

* add comment, use new getter

* update to always check

Co-authored-by: Mutasem <mutdmour@gmail.com>

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

@@ -26,6 +26,13 @@
 					<font-awesome-icon icon="sync-alt" spin />
 				</div>
 
+				<div class="node-trigger-tooltip__wrapper">
+					<n8n-tooltip placement="top" :manual="true" :value="showTriggerNodeTooltip" popper-class="node-trigger-tooltip__wrapper--item">
+						<div slot="content" v-text="getTriggerNodeTooltip"></div>
+						<span />
+					</n8n-tooltip>
+				</div>
+
 				<NodeIcon class="node-icon" :nodeType="nodeType" :size="40" :shrink="false" :disabled="this.data.disabled"/>
 			</div>
 
@@ -106,11 +113,41 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 
 			return workflowResultDataNode.length;
 		},
+		canvasOffsetPosition() {
+			return this.$store.getters.getNodeViewOffsetPosition;
+		},
+		getTriggerNodeTooltip (): string | undefined {
+			if (this.nodeType !== null && this.nodeType.hasOwnProperty('eventTriggerDescription')) {
+				return this.nodeType.eventTriggerDescription;
+			} else {
+				return `Waiting for you to create an event in ${this.nodeType && this.nodeType.displayName.replace(/Trigger/, "")}`;
+			}
+		},
 		isExecuting (): boolean {
 			return this.$store.getters.executingNode === this.data.name;
 		},
+		isSingleActiveTriggerNode (): boolean {
+			const nodes = this.$store.getters.workflowTriggerNodes.filter((node: INodeUi) => {
+				const nodeType =  this.$store.getters.nodeType(node.type) as INodeTypeDescription | null;
+				return nodeType && nodeType.eventTriggerDescription !== '' && !node.disabled;
+			});
+
+			return nodes.length === 1;
+		},
+		isTriggerNode (): boolean {
+			return !!(this.nodeType && this.nodeType.group.includes('trigger'));
+		},
+		isTriggerNodeTooltipEmpty () : boolean {
+			return this.nodeType !== null ? this.nodeType.eventTriggerDescription === '' : false;
+		},
+		isNodeDisabled (): boolean | undefined {
+			return this.node && this.node.disabled;
+		},
 		nodeType (): INodeTypeDescription | null {
-			return this.$store.getters.nodeType(this.data.type);
+			return this.data && this.$store.getters.nodeType(this.data.type);
+		},
+		node (): INodeUi | undefined { // same as this.data but reactive..
+			return this.$store.getters.nodesByName[this.name] as INodeUi | undefined;
 		},
 		nodeClass (): object {
 			return {
@@ -136,9 +173,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 			}
 		},
 		position (): XYPosition {
-			const node = this.$store.getters.nodesByName[this.name] as INodeUi; // position responsive to store changes
+			return this.node ? this.node.position : [0, 0];
-
-			return node.position;
 		},
 		showDisabledLinethrough(): boolean {
 			return !!(this.data.disabled && this.nodeType && this.nodeType.inputs.length === 1 && this.nodeType.outputs.length === 1);
@@ -207,13 +242,33 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 		shiftOutputCount (): boolean {
 			return !!(this.nodeType && this.nodeType.outputs.length > 2);
 		},
-	},
+		shouldShowTriggerTooltip () : boolean {
+			return !!this.node && this.workflowRunning && this.isTriggerNode && this.isSingleActiveTriggerNode && !this.isTriggerNodeTooltipEmpty && !this.isNodeDisabled && !this.hasIssues && !this.dragging;
+		},
+ 	},
 	watch: {
 		isActive(newValue, oldValue) {
 			if (!newValue && oldValue) {
 				this.setSubtitle();
 			}
 		},
+		canvasOffsetPosition() {
+			if (this.showTriggerNodeTooltip) {
+				this.showTriggerNodeTooltip = false;
+				setTimeout(() => {
+					this.showTriggerNodeTooltip = this.shouldShowTriggerTooltip;
+				}, 200);
+			}
+		},
+		shouldShowTriggerTooltip(shouldShowTriggerTooltip) {
+			if (shouldShowTriggerTooltip) {
+				setTimeout(() => {
+					this.showTriggerNodeTooltip = this.shouldShowTriggerTooltip;
+				}, 2500);
+			} else {
+				this.showTriggerNodeTooltip = false;
+			}
+		},
 		nodeRunData(newValue) {
 			this.$emit('run', {name: this.data.name, data: newValue, waiting: !!this.waiting});
 		},
@@ -228,6 +283,8 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 		return {
 			isTouchActive: false,
 			nodeSubtitle: '',
+			showTriggerNodeTooltip: false,
+			dragging: false,
 		};
 	},
 	methods: {
@@ -459,7 +516,6 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 		border-color: var(--color-success-light);
 	}
 }
-
 </style>
 
 <style lang="scss">
@@ -468,6 +524,20 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 	z-index: 2;
 }
 
+.node-trigger-tooltip {
+	&__wrapper {
+		top: -22px;
+		left: 50px;
+		position: relative;
+
+		&--item {
+			max-width: 160px;
+			position: fixed;
+			z-index: 0!important;
+		}
+	}
+}
+
 /** connector */
 .jtk-connector {
 	z-index: 3;

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

@@ -170,6 +170,8 @@ export const nodeBase = mixins(
 						// Do not allow to move nodes in readOnly mode
 						return false;
 					}
+					// @ts-ignore
+					this.dragging = true;
 
 					if (params.e && !this.$store.getters.isNodeSelected(this.data.name)) {
 						// Only the node which gets dragged directly gets an event, for all others it is
@@ -183,6 +185,8 @@ export const nodeBase = mixins(
 					return true;
 				},
 				stop: (params: { e: MouseEvent }) => {
+					// @ts-ignore
+					this.dragging = false;
 					if (this.$store.getters.isActionActive('dragActive')) {
 						const moveNodes = this.$store.getters.getSelectedNodes.slice();
 						const selectedNodeNames = moveNodes.map((node: INodeUi) => node.name);

packages/editor-ui/src/store.ts

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

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

@@ -261,7 +261,7 @@ export default mixins(
 				}
 
 				if (this.executionWaitingForWebhook === true) {
-					return 'Waiting for Webhook-Call';
+					return 'Waiting for Trigger Event';
 				}
 
 				return 'Executing Workflow';

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

@@ -25,6 +25,7 @@ export class Cron implements INodeType {
 		group: ['trigger'],
 		version: 1,
 		description: 'Triggers the workflow at a specific time',
+		eventTriggerDescription: '',
 		defaults: {
 			name: 'Cron',
 			color: '#00FF00',

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

@@ -36,6 +36,7 @@ export class EmailReadImap implements INodeType {
 		group: ['trigger'],
 		version: 1,
 		description: 'Triggers the workflow when a new email is received',
+		eventTriggerDescription: 'Waiting for you to receive an email',
 		defaults: {
 			name: 'IMAP Email',
 			color: '#44AA22',

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

@@ -14,6 +14,7 @@ export class ErrorTrigger implements INodeType {
 		group: ['trigger'],
 		version: 1,
 		description: 'Triggers the workflow when another workflow has an error',
+		eventTriggerDescription: '',
 		maxNodes: 1,
 		defaults: {
 			name: 'Error Trigger',

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

@@ -15,6 +15,7 @@ export class Interval implements INodeType {
 		group: ['trigger'],
 		version: 1,
 		description: 'Triggers the workflow in a given interval',
+		eventTriggerDescription: '',
 		defaults: {
 			name: 'Interval',
 			color: '#00FF00',

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

@@ -18,6 +18,7 @@ export class LocalFileTrigger implements INodeType {
 		version: 1,
 		subtitle: '=Path: {{$parameter["path"]}}',
 		description: 'Triggers a workflow on file system changes',
+		eventTriggerDescription: '',
 		defaults: {
 			name: 'Local File Trigger',
 			color: '#404040',

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

@@ -15,6 +15,7 @@ export class N8nTrigger implements INodeType {
 		group: ['trigger'],
 		version: 1,
 		description: 'Handle events from your n8n instance',
+		eventTriggerDescription: '',
 		defaults: {
 			name: 'n8n Trigger',
 			color: '#ff6d5a',

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

@@ -15,6 +15,7 @@ export class SseTrigger implements INodeType {
 		group: ['trigger'],
 		version: 1,
 		description: 'Triggers the workflow when Server-Sent Events occur',
+		eventTriggerDescription: '',
 		defaults: {
 			name: 'SSE Trigger',
 			color: '#225577',

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

@@ -45,6 +45,7 @@ export class Webhook implements INodeType {
 		group: ['trigger'],
 		version: 1,
 		description: 'Starts the workflow when a webhook is called',
+		eventTriggerDescription: 'Waiting for you to ping the Test URL',
 		defaults: {
 			name: 'Webhook',
 			color: '#885577',

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

@@ -16,6 +16,7 @@ export class WorkflowTrigger implements INodeType {
 		group: ['trigger'],
 		version: 1,
 		description: 'Triggers based on various lifecycle events, like when a workflow is activated',
+		eventTriggerDescription: '',
 		defaults: {
 			name: 'Workflow Trigger',
 			color: '#ff6d5a',

packages/workflow/src/Interfaces.ts

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