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

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<div :class="$style.inputPanel" v-if="!isTriggerNode" :style="inputPanelStyles">
+		<div :class="$style.inputPanel" :style="inputPanelStyles">
 			<slot name="input"></slot>
 		</div>
 		<div :class="$style.outputPanel" :style="outputPanelStyles">
@@ -10,7 +10,7 @@
 			<div :class="$style.dragButtonContainer" @click="close">
 				<PanelDragButton
 					:class="{ [$style.draggable]: true, [$style.visible]: isDragging }"
-					v-if="!isTriggerNode"
+					v-if="isDraggable"
 					:canMoveLeft="canMoveLeft"
 					:canMoveRight="canMoveRight"
 					@dragstart="onDragStart"
@@ -29,6 +29,9 @@ import PanelDragButton from './PanelDragButton.vue';
 
 const MAIN_PANEL_WIDTH = 360;
 const SIDE_MARGIN = 24;
+const FIXED_PANEL_WIDTH = 320;
+const FIXED_PANEL_WIDTH_LARGE = 420;
+const MINIMUM_INPUT_PANEL_WIDTH = 320;
 
 export default Vue.extend({
 	name: 'NDVDraggablePanels',
@@ -36,9 +39,12 @@ export default Vue.extend({
 		PanelDragButton,
 	},
 	props: {
-		isTriggerNode: {
+		isDraggable: {
 			type: Boolean,
 		},
+		position: {
+			type: Number,
+		},
 	},
 	data() {
 		return {
@@ -55,9 +61,20 @@ export default Vue.extend({
 		window.removeEventListener('resize', this.setTotalWidth);
 	},
 	computed: {
+		fixedPanelWidth() {
+			if (this.windowWidth > 1700) {
+				return FIXED_PANEL_WIDTH_LARGE;
+			}
+
+			return FIXED_PANEL_WIDTH;
+		},
 		mainPanelPosition(): number {
-			if (this.isTriggerNode) {
-				return 0;
+			if (typeof this.position === 'number') {
+				return this.position;
+			}
+
+			if (!this.isDraggable) {
+				return this.fixedPanelWidth + MAIN_PANEL_WIDTH / 2 + SIDE_MARGIN;
 			}
 
 			const relativePosition = this.$store.getters['ui/mainPanelPosition'] as number;
@@ -65,7 +82,7 @@ export default Vue.extend({
 			return relativePosition * this.windowWidth;
 		},
 		inputPanelMargin(): number {
-			return this.isTriggerNode ? 0 : 80;
+			return !this.isDraggable? 0 : 80;
 		},
 		minimumLeftPosition(): number {
 			return SIDE_MARGIN + this.inputPanelMargin;
@@ -93,6 +110,12 @@ export default Vue.extend({
 			};
 		},
 		inputPanelStyles(): { width: string } {
+			if (!this.isDraggable) {
+				return {
+					width: `${this.fixedPanelWidth}px`,
+				};
+			}
+
 			let width = this.mainPanelPosition - MAIN_PANEL_WIDTH / 2 - SIDE_MARGIN;
 			width = Math.min(
 				width,
@@ -109,7 +132,7 @@ export default Vue.extend({
 				width,
 				this.windowWidth - SIDE_MARGIN * 2 - this.inputPanelMargin - MAIN_PANEL_WIDTH,
 			);
-			width = Math.max(320, width);
+			width = Math.max(MINIMUM_INPUT_PANEL_WIDTH, width);
 			return {
 				width: `${width}px`,
 			};