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/plugins/i18n/locales/en.json

@@ -306,8 +306,16 @@
 	"ndv.backToCanvas.waitingForTriggerWarning": "Waiting for a Trigger node to execute. Close this view to see the Workflow Canvas.",
 	"ndv.execute.executeNode": "Execute node",
 	"ndv.execute.executing": "Executing",
-	"ndv.execute.fetchEvent": "Fetch Event",
+	"ndv.execute.fetchEvent": "Fetch Test Event",
+	"ndv.execute.fixPrevious": "Fix previous node first",
 	"ndv.execute.listenForEvent": "Listen For Event",
+	"ndv.execute.listenForTestEvent": "Listen For Test Event",
+	"ndv.execute.stopListening": "Stop Listening",
+	"ndv.execute.nodeIsDisabled": "Enable node to execute",
+	"ndv.execute.requiredFieldsMissing": "Complete required fields first",
+	"ndv.execute.stopWaitingForWebhook.error": "Problem deleting test webhook",
+	"ndv.execute.stopWaitingForWebhook.success": "Deleted test webhook",
+	"ndv.execute.workflowAlreadyRunning": "Workflow is already running",
 	"ndv.featureRequest": "I wish this node would...",
 	"ndv.input": "Input",
 	"ndv.input.nodeDistance": "({count} node back) | ({count} nodes back)",
@@ -336,14 +344,12 @@
 	"ndv.output.noOutputDataInBranch": "No output data in this branch",
 	"ndv.output.of": " of ",
 	"ndv.output.pageSize": "Page Size",
-	"ndv.output.pollEventNodeHint": "Fetch an event to output data",
 	"ndv.output.run": "Run",
 	"ndv.output.runNodeHint": "Execute this node to output data",
 	"ndv.output.staleDataWarning": "Node parameters have changed. <br /> Execute node again to refresh output.",
 	"ndv.output.tooMuchData.message": "The node contains {size} MB of data. Displaying it may cause problems. <br /> If you do decide to display it, avoid the JSON view.",
 	"ndv.output.tooMuchData.showDataAnyway": "Show data anyway",
 	"ndv.output.tooMuchData.title": "Output data is huge!",
-	"ndv.output.triggerEventNodeHint": "Listen for an event to output data",
 	"ndv.output.waitingToRun": "Waiting to execute...",
 	"ndv.title.cancel": "Cancel",
 	"ndv.title.rename": "Rename",
@@ -614,6 +620,8 @@
 	"pushConnection.workflowExecutedSuccessfully": "Workflow executed successfully",
 	"pushConnectionTracker.cannotConnectToServer": "You have a connection issue or the server is down. <br />n8n should reconnect automatically once the issue is resolved.",
 	"pushConnectionTracker.connectionLost": "Connection lost",
+	"pushConnection.pollingNode.dataNotFound": "No {service} data found",
+	"pushConnection.pollingNode.dataNotFound.message": "We didn’t find any data in {service} to simulate an event. Please create one in {service} and try again.",
 	"runData.emptyItemHint": "This is an item, but it's empty.",
 	"runData.switchToBinary.info": "This item only has",
 	"runData.switchToBinary.binary": "binary data",
@@ -795,6 +803,24 @@
 	"timeAgo.rightNow": "Right now",
 	"timeAgo.weeksAgo": "%s weeks ago",
 	"timeAgo.yearsAgo": "%s years ago",
+	"ndv.trigger.moreInfo": "More info",
+	"ndv.trigger.copiedTestUrl": "Test URL copied to clipboard",
+	"ndv.trigger.webhookBasedNode.executionsHelp.inactive": "<b>While building your workflow</b>, click the 'listen' button, then go to {service} and make an event happen. This will trigger an execution, which will show up in this editor.<br /> <br /> <b>Once you're happy with your workflow</b>, <a data-key=\"activate\">activate</a> it. Then every time there's a matching event in {service}, the workflow will execute. These executions will show up in the <a data-key=\"executions\">executions list</a>, but not in the editor.",
+	"ndv.trigger.webhookBasedNode.executionsHelp.active": "<b>While building your workflow</b>, click the 'listen' button, then go to {service} and make an event happen. This will trigger an execution, which will show up in this editor.<br /> <br /> <b>Your workflow will also execute automatically</b>, since it's activated. Every time there’s a matching event in {service}, this node will trigger an execution. These executions will show up in the <a data-key=\"executions\">executions list</a>, but not in the editor. ",
+	"ndv.trigger.webhookNode.listening": "Listening for test event",
+	"ndv.trigger.webhookBasedNode.listening": "Listening for your trigger event",
+	"ndv.trigger.webhookNode.requestHint": "Make a {type} request to:",
+	"ndv.trigger.webhookBasedNode.serviceHint": "Go to {service} and create an event",
+	"ndv.trigger.webhookBasedNode.activationHint.inactive": "Once you’ve finished building your workflow, <a data-key=\"activate\">activate it</a> to have it also listen continuously (you just won’t see those executions here).",
+	"ndv.trigger.webhookBasedNode.activationHint.active": "This node will also trigger automatically on new {service} events (but those executions won’t show up here).",
+	"ndv.trigger.pollingNode.activationHint.inactive": "Once you’ve finished building your workflow, <a data-key=\"activate\">activate it</a> to have it also check for events regularly (you just won’t see those executions here).",
+	"ndv.trigger.pollingNode.activationHint.active": "This node will also trigger automatically on new {service} events (but those executions won’t show up here).",
+	"ndv.trigger.executionsHint.question": "When will this node trigger my flow?",
+	"ndv.trigger.pollingNode.fetchingEvent": "Fetching event",
+	"ndv.trigger.pollingNode.fetchingHint": "This node is looking for an event in {name} that is similar to the one you defined",
+	"ndv.trigger.pollingNode.executionsHelp.inactive": "<b>While building your workflow</b>, click the 'fetch' button to fetch a single mock event. It will show up in this editor.<br /><br /><b>Once you're happy with your workflow</b>, <a data-key=\"activate\">activate</a> it. Then n8n will regularly check {service} for new events, and execute this workflow if it finds any. These executions will show up in the <a data-key=\"executions\">executions list</a>, but not in the editor.",
+	"ndv.trigger.pollingNode.executionsHelp.active": "<b>While building your workflow</b>, click the 'fetch' button to fetch a single mock event. It will show up in this editor.<br /><br /><b>Your workflow will also execute automatically</b>, since it's activated. n8n will regularly check {app_name} for new events, and execute this workflow if it finds any. These executions will show up in the <a data-key=\"executions\">executions list</a>, but not in the editor.",
+	"ndv.trigger.webhookBasedNode.action": "Pull in events from {name}",
 	"updatesPanel.andIs": "and is",
 	"updatesPanel.behindTheLatest": "behind the latest and greatest n8n",
 	"updatesPanel.howToUpdateYourN8nVersion": "How to update your n8n version",
@@ -815,6 +841,7 @@
 	"versionCard.thisVersionHasASecurityIssue": "This version has a security issue.<br />It is listed here for completeness.",
 	"versionCard.unknown": "unknown",
 	"versionCard.version": "Version",
+	"workflowActivator.workflowIsActive": "Workflow is already active",
 	"workflowActivator.activateWorkflow": "Activate workflow",
 	"workflowActivator.deactivateWorkflow": "Deactivate workflow",
 	"workflowActivator.showError.title": "Workflow could not be {newStateName}",