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

@@ -3,11 +3,11 @@
 		<n8n-tooltip :disabled="!disabled" placement="bottom">
 			<div slot="content">{{ $locale.baseText('workflowActivator.thisWorkflowHasNoTriggerNodes') }}</div>
 			<el-switch
-				v-loading="loading"
+				v-loading="updatingWorkflowActivation"
 				:value="workflowActive"
 				@change="activeChanged"
 			  :title="workflowActive ? $locale.baseText('workflowActivator.deactivateWorkflow') : $locale.baseText('workflowActivator.activateWorkflow')"
-				:disabled="disabled || loading"
+				:disabled="disabled || updatingWorkflowActivation"
 				:active-color="getActiveColor"
 				inactive-color="#8899AA"
 				element-loading-spinner="el-icon-loading">
@@ -25,28 +25,17 @@
 
 <script lang="ts">
 
-import { externalHooks } from '@/components/mixins/externalHooks';
-import { genericHelpers } from '@/components/mixins/genericHelpers';
-import { restApi } from '@/components/mixins/restApi';
 import { showMessage } from '@/components/mixins/showMessage';
-import { workflowHelpers } from '@/components/mixins/workflowHelpers';
+import { workflowActivate } from '@/components/mixins/workflowActivate';
 
 import mixins from 'vue-typed-mixins';
 import { mapGetters } from "vuex";
 
-import {
-	WORKFLOW_ACTIVE_MODAL_KEY,
-	LOCAL_STORAGE_ACTIVATION_FLAG,
-} from '@/constants';
 import { getActivatableTriggerNodes } from './helpers';
 
-
 export default mixins(
-	externalHooks,
-	genericHelpers,
-	restApi,
 	showMessage,
-	workflowHelpers,
+	workflowActivate,
 )
 	.extend(
 		{
@@ -55,11 +44,6 @@ export default mixins(
 				'workflowActive',
 				'workflowId',
 			],
-			data () {
-				return {
-					loading: false,
-				};
-			},
 			computed: {
 				...mapGetters({
 					dirtyState: "getStateIsDirty",
@@ -98,61 +82,7 @@ export default mixins(
 			},
 			methods: {
 				async activeChanged (newActiveState: boolean) {
-					this.loading = true;
-
-					if (!this.workflowId) {
-						const saved = await this.saveCurrentWorkflow();
-						if (!saved) {
-							this.loading = false;
-							return;
-						}
-					}
-
-					try {
-						if (this.isCurrentWorkflow && this.nodesIssuesExist) {
-							this.$showMessage({
-								title: this.$locale.baseText('workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.title'),
-								message: this.$locale.baseText('workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.message'),
-								type: 'error',
-							});
-
-							this.loading = false;
-							return;
-						}
-
-						if (newActiveState) {
-							this.$telemetry.track('User set workflow active status');
-						}
-
-						await this.updateWorkflow({workflowId: this.workflowId, active: newActiveState});
-					} catch (error) {
-						const newStateName = newActiveState === true ? 'activated' : 'deactivated';
-						this.$showError(
-							error,
-							this.$locale.baseText(
-								'workflowActivator.showError.title',
-								{ interpolate: { newStateName } },
-							) + ':',
-						);
-						this.loading = false;
-						return;
-					}
-
-					const activationEventName = this.isCurrentWorkflow ? 'workflow.activeChangeCurrent' : 'workflow.activeChange';
-					this.$externalHooks().run(activationEventName, { workflowId: this.workflowId, active: newActiveState });
-					this.$telemetry.track('User set workflow active status', { workflow_id: this.workflowId, is_active: newActiveState });
-
-					this.$emit('workflowActiveChanged', { id: this.workflowId, active: newActiveState });
-					this.loading = false;
-
-					if (this.isCurrentWorkflow) {
-						if (newActiveState && window.localStorage.getItem(LOCAL_STORAGE_ACTIVATION_FLAG) !== 'true') {
-							this.$store.dispatch('ui/openModal', WORKFLOW_ACTIVE_MODAL_KEY);
-						}
-						else {
-							this.$store.dispatch('settings/fetchPromptsData');
-						}
-					}
+					return this.updateWorkflowActivation(this.workflowId, newActiveState);
 				},
 				async displayActivationError () {
 					let errorMessage: string;