✨ Improve workflow activation (#2692)

* feat: activator disabled based on thiggers * feat: tooltip over inactive switch * feat: message for trigger types * feat: deactivate on save if trigger is removed * chore: refactor executions modal * feat: calculate service name if possible * feat: alert on activation * chore: fix linting * feat: always enable activator when active * fix: adjust the alert * feat: take disabled state into account * feat: automatically save on activation * feat: rely on nodes name and edit messages * feat: isolate state for each activator instance * feat: create activation modal component * feat: activationModal checkbox and trigger message * feat: add activation messages to node config * chore: style activation modal * chore: style fixes * feat: refactor disabled state * chore: refactor modal * chore: refactor modal * chore: tidy the node config * chore: refactor and styling tweaks * chore: minor fixes * fix: check webhooks from ui nodes * chore: remove saving prompt * chore: explicit current workflow evaluation * feat: add settings link to activation modal * fix: immediately load executions on render * feat: exclude error trigger from trigger nodes * chore: add i18n keys * fix: check localstorage more strictly * fix: handle refresh in execution list * remove unnessary event * remove comment * fix closing executions modal bugs * update closing * update translation key * fix translation keys * fix modal closing * fix closing * fix drawer closing * close all modals when opening executions * update key * close all modals when opening workflow or new page * delete unnessary comment * clean up import * clean up unnessary initial data * clean up activator impl * rewrite * fix open modal bug * simply remove error * refactor activation logic * fix i18n and such * remove changes * revert saving changes * Revert "revert saving changes" 25c29d10553ebcc11939ff29938e8a5ac6b3ffae * add translation * fix new workflows saving * clean up modal impl * clean up impl * refactor common code out * remove active changes from saving * refactor differently * revert unnessary change * set dirty false * fix i18n bug * avoid opening two modals * fix tooltips * add comment * address other comments * address comments Co-authored-by: saintsebastian <tilitidam@gmail.com>
2025-12-17 18:12:04 +00:00 · 2022-01-21 18:00:00 +01:00
parent a9cef48048
commit 49bf786e5b
25 changed files with 372 additions and 174 deletions
--- a/packages/editor-ui/src/components/ActivationModal.vue
+++ b/packages/editor-ui/src/components/ActivationModal.vue
@@ -0,0 +1,121 @@
+<template>
+	<Modal
+		:name="WORKFLOW_ACTIVE_MODAL_KEY"
+		:title="$locale.baseText('activationModal.workflowActivated')"
+		width="460px"
+	>
+		<template v-slot:content>
+			<div>
+				<n8n-text>{{ triggerContent }}</n8n-text>
+			</div>
+			<div :class="$style.spaced">
+				<n8n-text>
+					<n8n-text :bold="true">
+						{{ $locale.baseText('activationModal.theseExecutionsWillNotShowUp') }}
+					</n8n-text>
+					{{ $locale.baseText('activationModal.butYouCanSeeThem') }}
+					<a @click="showExecutionsList">
+						{{ $locale.baseText('activationModal.executionList') }}
+					</a>
+					{{ $locale.baseText('activationModal.ifYouChooseTo') }}
+					<a @click="showSettings">{{ $locale.baseText('activationModal.saveExecutions') }}</a>
+				</n8n-text>
+			</div>
+		</template>
+
+
+		<template v-slot:footer="{ close }">
+			<div :class="$style.footer">
+				<el-checkbox :value="checked" @change="handleCheckboxChange">{{ $locale.baseText('activationModal.dontShowAgain') }}</el-checkbox>
+				<n8n-button @click="close" :label="$locale.baseText('activationModal.gotIt')" />
+			</div>
+		</template>
+	</Modal>
+</template>
+
+<script lang="ts">
+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';
+
+export default Vue.extend({
+	name: 'ActivationModal',
+	components: {
+		Modal,
+	},
+	props: [
+		'modalName',
+	],
+	data () {
+		return {
+			WORKFLOW_ACTIVE_MODAL_KEY,
+			checked: false,
+		};
+	},
+	methods: {
+		async showExecutionsList () {
+			this.$store.dispatch('ui/openModal', EXECUTIONS_MODAL_KEY);
+		},
+		async showSettings() {
+			this.$store.dispatch('ui/openModal', WORKFLOW_SETTINGS_MODAL_KEY);
+		},
+		handleCheckboxChange (checkboxValue: boolean) {
+			this.checked = checkboxValue;
+			window.localStorage.setItem(LOCAL_STORAGE_ACTIVATION_FLAG, checkboxValue.toString());
+		},
+	},
+	computed: {
+		triggerContent (): string {
+			const foundTriggers = getActivatableTriggerNodes(this.$store.getters.workflowTriggerNodes);
+			if (!foundTriggers.length) {
+				return '';
+			}
+
+			if (foundTriggers.length > 1) {
+				return this.$locale.baseText('activationModal.yourTriggersWillNowFire');
+			}
+
+			const trigger = foundTriggers[0];
+
+			const triggerNodeType = this.$store.getters.nodeType(trigger.type);
+			if (triggerNodeType.activationMessage) {
+				return triggerNodeType.activationMessage;
+			}
+
+			const serviceName = getTriggerNodeServiceName(triggerNodeType.displayName);
+			if (trigger.webhookId) {
+				return this.$locale.baseText('activationModal.yourWorkflowWillNowListenForEvents', {
+					interpolate: {
+						serviceName,
+					},
+				});
+			} else if (triggerNodeType.polling) {
+				return this.$locale.baseText('activationModal.yourWorkflowWillNowRegularlyCheck', {
+					interpolate: {
+						serviceName,
+					},
+				});
+			} else {
+				return this.$locale.baseText('activationModal.yourTriggerWillNowFire');
+			}
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+.spaced {
+	margin-top: var(--spacing-2xs);
+}
+
+.footer {
+	text-align: right;
+
+	> * {
+		margin-left: var(--spacing-s);
+	}
+}
+
+</style>