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

@@ -27,9 +27,24 @@
 
 		<div class="data-display" v-if="activeNode">
 			<div @click="close" :class="$style.modalBackground"></div>
-			<NDVDraggablePanels :isTriggerNode="isTriggerNode" @close="close" @init="onPanelsInit" @dragstart="onDragStart" @dragend="onDragEnd">
+			<NDVDraggablePanels
+				:position="isTriggerNode && !showTriggerPanel ? 0 : undefined"
+				:isDraggable="!isTriggerNode"
+				@close="close"
+				@init="onPanelsInit"
+				@dragstart="onDragStart"
+				@dragend="onDragEnd"
+			>
 				<template #input>
+					<TriggerPanel
+						v-if="showTriggerPanel"
+						:nodeName="activeNode.name"
+						:sessionId="sessionId"
+						@execute="onNodeExecute"
+						@activate="onWorkflowActivate"
+					/>
 					<InputPanel
+						v-else-if="!isTriggerNode"
 						:workflow="workflow"
 						:canLinkRuns="canLinkRuns"
 						:runIndex="inputRun"
@@ -63,6 +78,7 @@
 						:sessionId="sessionId"
 						@valueChanged="valueChanged"
 						@execute="onNodeExecute"
+						@activate="onWorkflowActivate"
 					/>
 					<a
 						v-if="featureRequestUrl"
@@ -100,19 +116,31 @@ import mixins from 'vue-typed-mixins';
 import Vue from 'vue';
 import OutputPanel from './OutputPanel.vue';
 import InputPanel from './InputPanel.vue';
+import TriggerPanel from './TriggerPanel.vue';
 import { mapGetters } from 'vuex';
-import { BASE_NODE_SURVEY_URL, START_NODE_TYPE, STICKY_NODE_TYPE } from '@/constants';
+import {
+	BASE_NODE_SURVEY_URL,
+	CRON_NODE_TYPE,
+	ERROR_TRIGGER_NODE_TYPE,
+	START_NODE_TYPE,
+	STICKY_NODE_TYPE,
+} from '@/constants';
 import { editor } from 'monaco-editor';
+import { workflowActivate } from './mixins/workflowActivate';
 
-export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
+export default mixins(externalHooks, nodeHelpers, workflowHelpers, workflowActivate).extend({
 	name: 'NodeDetailsView',
 	components: {
 		NodeSettings,
 		InputPanel,
 		OutputPanel,
 		NDVDraggablePanels,
+		TriggerPanel,
 	},
 	props: {
+		readOnly: {
+			type: Boolean,
+		},
 		renaming: {
 			type: Boolean,
 		},
@@ -168,6 +196,16 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
 			}
 			return null;
 		},
+		showTriggerPanel(): boolean {
+			const isWebhookBasedNode = this.activeNodeType && this.activeNodeType.webhooks && this.activeNodeType.webhooks.length;
+			const isPollingNode = this.activeNodeType && this.activeNodeType.polling;
+			const override = this.activeNodeType && this.activeNodeType.triggerPanel;
+			return Boolean(
+				!this.readOnly &&
+				this.isTriggerNode &&
+				(isWebhookBasedNode || isPollingNode || override),
+			);
+		},
 		workflow(): Workflow {
 			return this.getWorkflow();
 		},
@@ -325,6 +363,12 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
 		},
 	},
 	methods: {
+		onWorkflowActivate() {
+			this.$store.commit('setActiveNode', null);
+			setTimeout(() => {
+				this.activateCurrentWorkflow('ndv');
+			}, 1000);
+		},
 		onFeatureRequestClick() {
 			window.open(this.featureRequestUrl, '_blank');
 			this.$telemetry.track('User clicked ndv link', {
@@ -342,7 +386,7 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
 			this.isDragging = true;
 			this.mainPanelPosition = e.position;
 		},
-		onDragEnd(e: { windowWidth: number, position: number }) {
+		onDragEnd(e: { windowWidth: number; position: number }) {
 			this.isDragging = false;
 			this.$telemetry.track('User moved parameters pane', {
 				window_width: e.windowWidth,
@@ -473,7 +517,6 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
 	width: 100%;
 	display: flex;
 }
-
 </style>
 
 <style lang="scss" module>