feat(editor): Improve trigger panel (#3509)

* add panel

* add workflow activation hints

* support service trigger nodes

* update polling state

* support more views

* update when trigger panel shows

* update start/error nodes

* add cron/interval info box

* clean up start node

* fix up webhook views

* remove console log

* add listening state

* clean up loading state

* update loading state

* fix up animation

* update views

* add executions hint

* update views

* update accordian styling

* address more issues

* disable execute button if issues

* disable if it has issues

* add stop waiting button

* can activate workflow when dsiabled

* update el

* fix has issues

* add margin bttm

* update views

* close ndv

* add shake

* update copies

* add error when polling node is missing one

* update package lock

* hide switch

* hide binary data that's missing keys

* hide main bar if ndv is open

* remove waiting to execute

* change accordion bg color

* capitalize text

* disable trigger panel in read only views

* remove webhook title

* update webhook desc

* update component

* update webhook executions note

* update header

* update webhook url

* update exec help

* bring back waiting to execute for non triggers

* add transition fade

* set shake

* add helpful tooltip

* add nonactive text

* add inactive text

* hide trigger panel by default

* remove unused import

* update pulse animation

* handle empty values for options

* update text

* add flag for mock manual executions

* add overrides

* Add overrides

* update check

* update package lock; show button for others

* hide more info

* update other core nodes

* update service name

* remove panel from nodes

* update panel

* last tweaks

* add telemetry event

* add telemetry; address issues

* address feedback

* address feedback

* address feedback

* fix previous

* fix previous

* fix bug

* fix bug with webhookbased

* add extra break

* update telemetry

* update telemetry

* add telemetry req

* add info icon story; use icon component

* clean css; en.json

* clean en.json

* rename key

* add key

* sort keys alpha

* handle activation if active + add previous state to telemetry

* stop activation if active

* remove unnessary tracking

* remove unused import

* remove unused

* remove unnessary flag

* rewrite in ts

* move pulse to design system

* clean up

* clean up

* clean up

* disable tslint check

* disable tslint check

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

@@ -1,16 +1,22 @@
 <template>
-	<n8n-button
-		:loading="nodeRunning"
-		:disabled="workflowRunning && !nodeRunning"
-		:label="buttonLabel"
-		:type="type"
-		:size="size"
-		:transparentBackground="transparent"
-		@click="onClick"
-	/>
+	<n8n-tooltip placement="bottom" :disabled="!disabledHint">
+		<div slot="content">{{ disabledHint }}</div>
+		<div>
+			<n8n-button
+				:loading="nodeRunning && !isListeningForEvents"
+				:disabled="!!disabledHint"
+				:label="buttonLabel"
+				:type="type"
+				:size="size"
+				:transparentBackground="transparent"
+				@click="onClick"
+			/>
+		</div>
+	</n8n-tooltip>
 </template>
 
 <script lang="ts">
+import { WEBHOOK_NODE_TYPE } from '@/constants';
 import { INodeUi } from '@/Interface';
 import { INodeTypeDescription } from 'n8n-workflow';
 import mixins from 'vue-typed-mixins';
@@ -36,6 +42,9 @@ export default mixins(
 			type: Boolean,
 			default: false,
 		},
+		telemetrySource: {
+			type: String,
+		},
 	},
 	computed: {
 		node (): INodeUi {
@@ -64,11 +73,61 @@ export default mixins(
 		isScheduleTrigger (): boolean {
 			return !!(this.nodeType && this.nodeType.group.includes('schedule'));
 		},
+		isWebhookNode (): boolean {
+			return Boolean(this.nodeType && this.nodeType.name === WEBHOOK_NODE_TYPE);
+		},
+		isListeningForEvents(): boolean {
+			const waitingOnWebhook = this.$store.getters.executionWaitingForWebhook as boolean;
+			const executedNode = this.$store.getters.executedNode as string | undefined;
+
+			return (
+				this.node &&
+				!this.node.disabled &&
+				this.isTriggerNode &&
+				waitingOnWebhook &&
+				(!executedNode || executedNode === this.nodeName)
+			);
+		},
+		hasIssues (): boolean {
+			return Boolean(this.node && this.node.issues && (this.node.issues.parameters || this.node.issues.credentials));
+		},
+		disabledHint(): string {
+			if (this.isListeningForEvents) {
+				return '';
+			}
+
+			if (this.isTriggerNode && this.node.disabled) {
+				return this.$locale.baseText('ndv.execute.nodeIsDisabled');
+			}
+
+			if (this.isTriggerNode && this.hasIssues) {
+				if (this.$store.getters.activeNode && this.$store.getters.activeNode.name !== this.nodeName) {
+					return this.$locale.baseText('ndv.execute.fixPrevious');
+				}
+
+				return this.$locale.baseText('ndv.execute.requiredFieldsMissing');
+			}
+
+			if (this.workflowRunning && !this.nodeRunning) {
+				return this.$locale.baseText('ndv.execute.workflowAlreadyRunning');
+			}
+
+			return '';
+		},
 		buttonLabel(): string {
+			if (this.isListeningForEvents) {
+				return this.$locale.baseText('ndv.execute.stopListening');
+			}
+
 			if (this.label) {
 				return this.label;
 			}
-			if (this.isPollingTypeNode) {
+
+			if (this.isWebhookNode) {
+				return this.$locale.baseText('ndv.execute.listenForTestEvent');
+			}
+
+			if (this.isPollingTypeNode || (this.nodeType && this.nodeType.mockManualExecution)) {
 				return this.$locale.baseText('ndv.execute.fetchEvent');
 			}
 
@@ -80,9 +139,32 @@ export default mixins(
 		},
 	},
 	methods: {
+		async stopWaitingForWebhook () {
+			try {
+				await this.restApi().removeTestWebhook(this.$store.getters.workflowId);
+			} catch (error) {
+				this.$showError(
+					error,
+					this.$locale.baseText('ndv.execute.stopWaitingForWebhook.error'),
+				);
+				return;
+			}
+
+			this.$showMessage({
+				title: this.$locale.baseText('ndv.execute.stopWaitingForWebhook.success'),
+				type: 'success',
+			});
+		},
+
 		onClick() {
-			this.runWorkflow(this.nodeName, 'RunData.ExecuteNodeButton');
-			this.$emit('execute');
+			if (this.isListeningForEvents) {
+				this.stopWaitingForWebhook();
+			}
+			else {
+				this.$telemetry.track('User clicked execute node button', { node_type: this.nodeName, workflow_id: this.$store.getters.workflowId, source: this.telemetrySource });
+				this.runWorkflow(this.nodeName, 'RunData.ExecuteNodeButton');
+				this.$emit('execute');
+			}
 		},
 	},
 });