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/design-system/src/components/N8nInfoAccordion/InfoAccordion.stories.ts

@@ -0,0 +1,27 @@
+/* tslint:disable:variable-name */
+
+import N8nInfoAccordion from './InfoAccordion.vue';
+import { StoryFn } from "@storybook/vue";
+
+export default {
+	title: 'Atoms/Info Accordion',
+	component: N8nInfoAccordion,
+	argTypes: {
+	},
+	parameters: {
+		backgrounds: { default: '--color-background-light' },
+	},
+};
+
+export const Default: StoryFn = (args, {argTypes}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nInfoAccordion,
+	},
+	template: '<n8n-info-accordion v-bind="$props" @click="onClick" />',
+});
+
+Default.args = {
+	title: 'my title',
+	description: 'my description',
+};

packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue

@@ -0,0 +1,87 @@
+<template>
+	<div :class="['accordion', $style.container]" >
+		<div :class="{[$style.header]: true, [$style.expanded]: expanded}" @click="toggle">
+			<n8n-text color="text-base" size="small" align="left" bold>{{ title }}</n8n-text>
+
+			<n8n-icon
+				:icon="expanded? 'chevron-up' : 'chevron-down'"
+				bold
+			/>
+
+		</div>
+		<div v-if="expanded" :class="{[$style.description]: true, [$style.collapsed]: !expanded}" @click="onClick">
+			<n8n-text color="text-base" size="small" align="left">
+				<span v-html="description"></span>
+			</n8n-text>
+		</div>
+	</div>
+</template>
+
+<script>
+import N8nText from '../N8nText';
+import N8nIcon from '../N8nIcon';
+
+export default {
+	name: 'n8n-info-accordion',
+	components: {
+		N8nText,
+		N8nIcon,
+	},
+	props: {
+		title: {
+			type: String,
+		},
+		description: {
+			type: String,
+		},
+	},
+	mounted() {
+		this.$on('expand', () => {
+			this.expanded = true;
+		});
+	},
+	data() {
+		return {
+			expanded: false,
+		};
+	},
+	methods: {
+		toggle() {
+			this.expanded = !this.expanded;
+		},
+		onClick(e) {
+			this.$emit('click', e);
+		},
+	},
+};
+</script>
+
+<style lang="scss" module>
+.container {
+	background-color: var(--color-background-base);
+}
+
+.header {
+	cursor: pointer;
+	display: flex;
+	padding: var(--spacing-s);
+
+	*:first-child {
+		flex-grow: 1;
+	}
+}
+
+.expanded {
+	padding: var(--spacing-s) var(--spacing-s) var(--spacing-2xs) var(--spacing-s);
+}
+
+.description {
+	display: flex;
+	padding: 0 var(--spacing-s) var(--spacing-s) var(--spacing-s);
+
+	b {
+		font-weight: var(--font-weight-bold);
+	}
+}
+
+</style>

packages/design-system/src/components/N8nInfoAccordion/index.ts

@@ -0,0 +1,3 @@
+import N8nInfoAccordion from './InfoAccordion.vue';
+
+export default N8nInfoAccordion;

packages/design-system/src/components/N8nNotice/Notice.vue

@@ -74,20 +74,23 @@ export default Vue.extend({
 			return sanitizeHtml(
 				text, {
 					allowedAttributes: { a: ['data-key', 'href', 'target'] },
-				}
+				},
 			);
 		},
 		onClick(e) {
 			if (e.target.localName !== 'a') return;
 
-			if (e.target.dataset.key === 'show-less') {
-				e.stopPropagation();
-				e.preventDefault();
-				this.showFullContent = false;
-			} else if (this.canTruncate && e.target.dataset.key === 'toggle-expand') {
+			if (e.target.dataset && e.target.dataset.key) {
 				e.stopPropagation();
 				e.preventDefault();
-				this.showFullContent = !this.showFullContent;
+
+				if (e.target.dataset.key === 'show-less') {
+					this.showFullContent = false;
+				} else if (this.canTruncate && e.target.dataset.key === 'toggle-expand') {
+					this.showFullContent = !this.showFullContent;
+				} else {
+					this.$emit('action', e.target.dataset.key);
+				}
 			}
 		},
 	},

packages/design-system/src/components/N8nPulse/Pulse.stories.ts

@@ -0,0 +1,21 @@
+/* tslint:disable:variable-name */
+
+import N8nPulse from './Pulse.vue';
+import { StoryFn } from "@storybook/vue";
+
+export default {
+	title: 'Atoms/Pulse',
+	component: N8nPulse,
+	argTypes: {
+	},
+	parameters: {
+		backgrounds: { default: '--color-background-light' },
+	},
+};
+
+export const Default: StoryFn = (args, {argTypes}) => ({
+	components: {
+		N8nPulse,
+	},
+	template: '<n8n-pulse> yo </n8n-pulse>',
+});

packages/design-system/src/components/N8nPulse/Pulse.vue

@@ -0,0 +1,114 @@
+<template>
+	<div :class="['pulse', $style.pulseContainer]">
+		<div :class="$style.pulse">
+			<div :class="$style.pulse2">
+				<slot></slot>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'n8n-pulse',
+};
+</script>
+
+<style lang="scss" module>
+
+$--light-pulse-color: hsla(
+	var(--color-primary-h),
+	var(--color-primary-s),
+	var(--color-primary-l),
+	0.4
+);
+
+$--dark-pulse-color: hsla(
+	var(--color-primary-h),
+	var(--color-primary-s),
+	var(--color-primary-l),
+	0
+);
+
+.pulseContainer {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 240px;
+	width: 100%;
+}
+
+.pulse {
+	width: 74px;
+	height: 74px;
+	border-radius: 50%;
+	box-shadow: 0 0 0 $--light-pulse-color;
+	animation: pulse 6s infinite cubic-bezier(0.33, 1, 0.68, 1);
+}
+
+.pulse2 {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 74px;
+	height: 74px;
+	border-radius: 50%;
+	box-shadow: 0 0 0 $--light-pulse-color;
+	animation: pulse2 6s infinite cubic-bezier(0.33, 1, 0.68, 1);
+}
+
+@keyframes pulse {
+	0% {
+		-moz-box-shadow: 0 0 0 0 $--light-pulse-color;
+		box-shadow: 0 0 0 0 $--light-pulse-color;
+	}
+
+	58.33% {
+		// 3s
+		-moz-box-shadow: 0 0 0 60px $--dark-pulse-color;
+		box-shadow: 0 0 0 60px $--dark-pulse-color;
+	}
+
+	66.6% {
+		// 4s
+		-moz-box-shadow: 0 0 0 66px transparent;
+		box-shadow: 0 0 0 66px transparent;
+	}
+
+	66.7% {
+		-moz-box-shadow: 0 0 0 0 transparent;
+		box-shadow: 0 0 0 0 transparent;
+	}
+}
+
+@keyframes pulse2 {
+	0% {
+		-moz-box-shadow: 0 0 0 0 $--light-pulse-color;
+		box-shadow: 0 0 0 0 $--light-pulse-color;
+	}
+
+	16.66% {
+		// 1s
+		-moz-box-shadow: 0 0 0 0 $--light-pulse-color;
+		box-shadow: 0 0 0 0 $--light-pulse-color;
+	}
+
+	50% {
+		// 3s
+		-moz-box-shadow: 0 0 0 60px $--dark-pulse-color;
+		box-shadow: 0 0 0 60px $--dark-pulse-color;
+	}
+
+	83.3% {
+		// 5s
+		-moz-box-shadow: 0 0 0 66px transparent;
+		box-shadow: 0 0 0 66px transparent;
+	}
+
+	83.4% {
+		-moz-box-shadow: 0 0 0 0 transparent;
+		box-shadow: 0 0 0 0 transparent;
+	}
+}
+
+</style>

packages/design-system/src/components/N8nPulse/index.ts

@@ -0,0 +1,3 @@
+import N8nPulse from './Pulse.vue';
+
+export default N8nPulse;

packages/design-system/src/components/N8nText/Text.vue

@@ -1,5 +1,5 @@
 <template functional>
-	<component :is="props.tag" :class="$options.methods.getClasses(props, $style)" :style="$options.methods.getStyles(props)">
+	<component :is="props.tag" :class="$options.methods.getClasses(props, $style, data)" :style="$options.methods.getStyles(props)" v-on="listeners">
 		<slot></slot>
 	</component>
 </template>
@@ -36,8 +36,13 @@ export default Vue.extend({
 		},
 	},
 	methods: {
-		getClasses(props: {size: string, bold: boolean}, $style: any) {
-			return {[$style[`size-${props.size}`]]: true, [$style.bold]: props.bold, [$style.regular]: !props.bold};
+		getClasses(props: {size: string, bold: boolean}, $style: any, data: any) {
+			const classes = {[$style[`size-${props.size}`]]: true, [$style.bold]: props.bold, [$style.regular]: !props.bold};
+			if (data.staticClass) {
+				classes[data.staticClass] = true;
+			}
+
+			return classes;
 		},
 		getStyles(props: {color: string, align: string, compact: false}) {
 			const styles = {} as any;

packages/design-system/src/components/index.ts

@@ -33,6 +33,7 @@ import Notification from 'element-ui/lib/notification';
 import Popover from 'element-ui/lib/popover';
 import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
 
+import N8nInfoAccordion from './N8nInfoAccordion';
 import N8nActionBox from './N8nActionBox';
 import N8nActionToggle from './N8nActionToggle';
 import N8nAvatar from './N8nAvatar';
@@ -56,6 +57,7 @@ import N8nMenuItem from './N8nMenuItem';
 import N8nNotice from './N8nNotice';
 import N8nLink from './N8nLink';
 import N8nOption from './N8nOption';
+import N8nPulse from './N8nPulse';
 import N8nRadioButtons from './N8nRadioButtons';
 import N8nSelect from './N8nSelect';
 import N8nSpinner from './N8nSpinner';
@@ -72,6 +74,7 @@ import N8nUserSelect from './N8nUserSelect';
 import locale from '../locale';
 
 export {
+	N8nInfoAccordion,
 	N8nActionBox,
 	N8nActionToggle,
 	N8nAvatar,
@@ -95,6 +98,7 @@ export {
 	N8nMenuItem,
 	N8nNotice,
 	N8nOption,
+	N8nPulse,
 	N8nRadioButtons,
 	N8nSelect,
 	N8nSpinner,

packages/editor-ui/src/components/ActivationModal.vue

@@ -39,6 +39,7 @@ import Vue from 'vue';
 import Modal from '@/components/Modal.vue';
 import { WORKFLOW_ACTIVE_MODAL_KEY, EXECUTIONS_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY, LOCAL_STORAGE_ACTIVATION_FLAG } from '../constants';
 import { getActivatableTriggerNodes, getTriggerNodeServiceName } from './helpers';
+import { INodeTypeDescription } from 'n8n-workflow';
 
 export default Vue.extend({
 	name: 'ActivationModal',
@@ -79,12 +80,12 @@ export default Vue.extend({
 
 			const trigger = foundTriggers[0];
 
-			const triggerNodeType = this.$store.getters.nodeType(trigger.type, trigger.typeVersion);
+			const triggerNodeType = this.$store.getters.nodeType(trigger.type, trigger.typeVersion) as INodeTypeDescription;
 			if (triggerNodeType.activationMessage) {
 				return triggerNodeType.activationMessage;
 			}
 
-			const serviceName = getTriggerNodeServiceName(triggerNodeType.displayName);
+			const serviceName = getTriggerNodeServiceName(triggerNodeType);
 			if (trigger.webhookId) {
 				return this.$locale.baseText('activationModal.yourWorkflowWillNowListenForEvents', {
 					interpolate: {