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/nodes-base/nodes/Cron/Cron.node.ts

@@ -35,6 +35,12 @@ export class Cron implements INodeType {
 		inputs: [],
 		outputs: ['main'],
 		properties: [
+			{
+				displayName: 'This workflow will run on the schedule you define here once you <a data-key="activate">activate</a> it.<br><br>For testing, you can also trigger it manually: by going back to the canvas and clicking ‘execute workflow’',
+				name: 'notice',
+				type: 'notice',
+				default: '',
+			},
 			{
 				displayName: 'Trigger Times',
 				name: 'triggerTimes',

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

@@ -15,6 +15,7 @@ export class ErrorTrigger implements INodeType {
 		version: 1,
 		description: 'Triggers the workflow when another workflow has an error',
 		eventTriggerDescription: '',
+		mockManualExecution: true,
 		maxNodes: 1,
 		defaults: {
 			name: 'Error Trigger',
@@ -22,7 +23,14 @@ export class ErrorTrigger implements INodeType {
 		},
 		inputs: [],
 		outputs: ['main'],
-		properties: [],
+		properties: [
+			{
+				displayName: 'This node will trigger when there is an error in another workflow, as long as that workflow is set up to do so. <a href="https://docs.n8n.io/integrations/core-nodes/n8n-nodes-base.errortrigger" target="_blank">More info<a>',
+				name: 'notice',
+				type: 'notice',
+				default: '',
+			},
+		],
 	};
 
 

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

@@ -25,6 +25,12 @@ export class Interval implements INodeType {
 		inputs: [],
 		outputs: ['main'],
 		properties: [
+			{
+				displayName: 'This workflow will run on the schedule you define here once you <a data-key="activate">activate</a> it.<br><br>For testing, you can also trigger it manually: by going back to the canvas and clicking ‘execute workflow’',
+				name: 'notice',
+				type: 'notice',
+				default: '',
+			},
 			{
 				displayName: 'Interval',
 				name: 'interval',

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

@@ -16,6 +16,7 @@ export class N8nTrigger implements INodeType {
 		version: 1,
 		description: 'Handle events from your n8n instance',
 		eventTriggerDescription: '',
+		mockManualExecution: true,
 		defaults: {
 			name: 'n8n Trigger',
 		},

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

@@ -23,6 +23,12 @@ export class Start implements INodeType {
 		inputs: [],
 		outputs: ['main'],
 		properties: [
+			{
+				displayName: 'This node is where a manual workflow execution starts. To make one, go back to the canvas and click ‘execute workflow’',
+				name: 'notice',
+				type: 'notice',
+				default: '',
+			},
 		],
 	};
 

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

@@ -53,6 +53,14 @@ export class Webhook implements INodeType {
 		defaults: {
 			name: 'Webhook',
 		},
+		triggerPanel: {
+			header: '',
+			executionsHelp: {
+				inactive: 'Webhooks have two modes: test and production. <br /> <br /> <b>Use test mode while you build your workflow</b>. Click the \'listen\' button, then make a request to the test URL. The executions will show up in the editor.<br /> <br /> <b>Use production mode to run your workflow automatically</b>. <a data-key=\"activate\">Activate</a> the workflow, then make requests to the production URL. These executions will show up in the executions list, but not in the editor.',
+				active: 'Webhooks have two modes: test and production. <br /> <br /> <b>Use test mode while you build your workflow</b>. Click the \'listen\' button, then make a request to the test URL. The executions will show up in the editor.<br /> <br /> <b>Use production mode to run your workflow automatically</b>. Since the workflow is activated, you can make requests to the production URL. These executions will show up in the <a data-key=\"executions\">executions list</a>, but not in the editor.',
+			},
+			activationHint: 'Once you’ve finished building your workflow, run it without having to click this button by using the production webhook URL.',
+		},
 		// eslint-disable-next-line n8n-nodes-base/node-class-description-inputs-wrong-regular-node
 		inputs: [],
 		outputs: ['main'],

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: '',
+		mockManualExecution: true,
 		activationMessage: 'Your workflow will now trigger executions on the event you have defined.',
 		defaults: {
 			name: 'Workflow Trigger',