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/NodeWebhooks.vue

@@ -9,10 +9,13 @@
 				<div class="url-selection">
 					<el-row>
 						<el-col :span="24">
-							<el-radio-group v-model="showUrlFor" size="mini">
-								<el-radio-button label="test">{{ $locale.baseText('nodeWebhooks.testUrl') }}</el-radio-button>
-								<el-radio-button label="production">{{ $locale.baseText('nodeWebhooks.productionUrl') }}</el-radio-button>
-							</el-radio-group>
+							<n8n-radio-buttons
+								v-model="showUrlFor"
+								:options="[
+									{ label: this.$locale.baseText('nodeWebhooks.testUrl'), value: 'test'},
+									{ label: this.$locale.baseText('nodeWebhooks.productionUrl'), value: 'production'},
+								]"
+							/>
 						</el-col>
 					</el-row>
 				</div>
@@ -21,7 +24,7 @@
 					<div class="webhook-wrapper">
 							<div class="http-field">
 								<div class="http-method">
-									{{getValue(webhook, 'httpMethod')}}<br />
+									{{getWebhookExpressionValue(webhook, 'httpMethod')}}<br />
 								</div>
 							</div>
 							<div class="url-field">
@@ -41,7 +44,6 @@
 import {
 	INodeTypeDescription,
 	IWebhookDescription,
-	NodeHelpers,
 } from 'n8n-workflow';
 
 import { WEBHOOK_NODE_TYPE } from '@/constants';
@@ -79,41 +81,23 @@ export default mixins(
 		},
 		methods: {
 			copyWebhookUrl (webhookData: IWebhookDescription): void {
-				const webhookUrl = this.getWebhookUrl(webhookData);
+				const webhookUrl = this.getWebhookUrlDisplay(webhookData);
 				this.copyToClipboard(webhookUrl);
 
 				this.$showMessage({
 					title: this.$locale.baseText('nodeWebhooks.showMessage.title'),
 					type: 'success',
 				});
-			},
-			getValue (webhookData: IWebhookDescription, key: string): string {
-				if (webhookData[key] === undefined) {
-					return 'empty';
-				}
-				try {
-					return this.resolveExpression(webhookData[key] as string) as string;
-				} catch (e) {
-					return this.$locale.baseText('nodeWebhooks.invalidExpression');
-				}
-			},
-			getWebhookUrl (webhookData: IWebhookDescription): string {
-				if (webhookData.restartWebhook === true) {
-					return '$resumeWebhookUrl';
-				}
-				let baseUrl = this.$store.getters.getWebhookUrl;
-				if (this.showUrlFor === 'test') {
-					baseUrl = this.$store.getters.getWebhookTestUrl;
-				}
-
-				const workflowId = this.$store.getters.workflowId;
-				const path = this.getValue(webhookData, 'path');
-				const isFullPath = this.getValue(webhookData, 'isFullPath') as unknown as boolean || false;
-
-				return NodeHelpers.getNodeWebhookUrl(baseUrl, workflowId, this.node, path, isFullPath);
+				this.$telemetry.track('User copied webhook URL', {
+					pane: 'parameters',
+					type: `${this.showUrlFor} url`,
+				});
 			},
 			getWebhookUrlDisplay (webhookData: IWebhookDescription): string {
-				return this.getWebhookUrl(webhookData);
+				if (this.node) {
+					return this.getWebhookUrl(webhookData, this.node, this.showUrlFor);
+				}
+				return '';
 			},
 		},
 		watch: {
@@ -146,7 +130,7 @@ export default mixins(
 }
 
 .http-method {
-	background-color: green;
+	background-color: var(--color-foreground-xdark);
 	width: 40px;
 	height: 16px;
 	line-height: 16px;