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"

25c29d1055

* 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>
This commit is contained in:
Mutasem Aldmour 2022-01-21 18:00:00 +01:00 committed by GitHub
parent a9cef48048
commit 49bf786e5b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 372 additions and 174 deletions

View file

@ -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>

View file

@ -80,7 +80,6 @@ export default mixins(workflowHelpers).extend({
instance_id: this.$store.getters.instanceId,
email: null,
});
this.$store.commit('ui/closeTopModal');
},
async send() {
if (this.isEmailValid) {
@ -100,7 +99,7 @@ export default mixins(workflowHelpers).extend({
type: 'success',
});
}
this.$store.commit('ui/closeTopModal');
this.modalBus.$emit('close');
}
},
},

View file

@ -344,7 +344,7 @@ export default mixins(showMessage, nodeHelpers).extend({
},
},
methods: {
async beforeClose(done: () => void) {
async beforeClose() {
let keepEditing = false;
if (this.hasUnsavedChanges) {
@ -368,8 +368,7 @@ export default mixins(showMessage, nodeHelpers).extend({
}
if (!keepEditing) {
done();
return;
return true;
}
else if (!this.requiredPropertiesFilled) {
this.showValidationWarning = true;
@ -378,6 +377,8 @@ export default mixins(showMessage, nodeHelpers).extend({
else if (this.isOAuthType) {
this.scrollToBottom();
}
return false;
},
displayCredentialParameter(parameter: INodeProperties): boolean {

View file

@ -1,6 +1,12 @@
<template>
<span>
<el-dialog :visible="dialogVisible" append-to-body width="80%" :title="`${$locale.baseText('executionsList.workflowExecutions')} ${combinedExecutions.length}/${finishedExecutionsCountEstimated === true ? '~' : ''}${combinedExecutionsCount}`" :before-close="closeDialog">
<Modal
:name="EXECUTIONS_MODAL_KEY"
width="80%"
:title="`${$locale.baseText('executionsList.workflowExecutions')} ${combinedExecutions.length}/${finishedExecutionsCountEstimated === true ? '~' : ''}${combinedExecutionsCount}`"
:eventBus="modalBus"
>
<template v-slot:content>
<div class="filters">
<el-row>
<el-col :span="2" class="filter-headline">
@ -153,9 +159,8 @@
<div class="load-more" v-if="finishedExecutionsCount > finishedExecutions.length || finishedExecutionsCountEstimated === true">
<n8n-button icon="sync" :title="$locale.baseText('executionsList.loadMore')" :label="$locale.baseText('executionsList.loadMore')" @click="loadMore()" :loading="isDataLoading" />
</div>
</el-dialog>
</span>
</template>
</Modal>
</template>
<script lang="ts">
@ -163,9 +168,10 @@ import Vue from 'vue';
import ExecutionTime from '@/components/ExecutionTime.vue';
import WorkflowActivator from '@/components/WorkflowActivator.vue';
import Modal from '@/components/Modal.vue';
import { externalHooks } from '@/components/mixins/externalHooks';
import { WAIT_TIME_UNLIMITED } from '@/constants';
import { WAIT_TIME_UNLIMITED, EXECUTIONS_MODAL_KEY } from '@/constants';
import { restApi } from '@/components/mixins/restApi';
import { genericHelpers } from '@/components/mixins/genericHelpers';
@ -200,12 +206,10 @@ export default mixins(
showMessage,
).extend({
name: 'ExecutionsList',
props: [
'dialogVisible',
],
components: {
ExecutionTime,
WorkflowActivator,
Modal,
},
data () {
return {
@ -230,8 +234,24 @@ export default mixins(
stoppingExecutions: [] as string[],
workflows: [] as IWorkflowShortResponse[],
modalBus: new Vue(),
EXECUTIONS_MODAL_KEY,
};
},
async created() {
await this.loadWorkflows();
await this.refreshData();
this.handleAutoRefreshToggle();
this.$externalHooks().run('executionsList.openDialog');
this.$telemetry.track('User opened Executions log', { workflow_id: this.$store.getters.workflowId });
},
beforeDestroy() {
if (this.autoRefreshInterval) {
clearInterval(this.autoRefreshInterval);
this.autoRefreshInterval = undefined;
}
},
computed: {
statuses () {
return [
@ -312,23 +332,9 @@ export default mixins(
return filter;
},
},
watch: {
dialogVisible (newValue, oldValue) {
if (newValue) {
this.openDialog();
}
},
},
methods: {
closeDialog () {
// Handle the close externally as the visible parameter is an external prop
// and is so not allowed to be changed here.
this.$emit('closeDialog');
if (this.autoRefreshInterval) {
clearInterval(this.autoRefreshInterval);
this.autoRefreshInterval = undefined;
}
return false;
closeDialog() {
this.modalBus.$emit('close');
},
convertToDisplayDate,
displayExecution (execution: IExecutionShortResponse, e: PointerEvent) {
@ -343,7 +349,7 @@ export default mixins(
name: 'ExecutionById',
params: { id: execution.id },
});
this.closeDialog();
this.modalBus.$emit('closeAll');
},
handleAutoRefreshToggle () {
if (this.autoRefreshInterval) {
@ -610,18 +616,6 @@ export default mixins(
);
}
},
async openDialog () {
Vue.set(this, 'selectedItems', {});
this.filter.workflowId = 'ALL';
this.checkAll = false;
await this.loadWorkflows();
await this.refreshData();
this.handleAutoRefreshToggle();
this.$externalHooks().run('executionsList.openDialog');
this.$telemetry.track('User opened Executions log', { workflow_id: this.$store.getters.workflowId });
},
async retryExecution (execution: IExecutionShortResponse, loadWorkflow?: boolean) {
this.isDataLoading = true;

View file

@ -63,7 +63,7 @@
<template>
<span class="activator">
<span>{{ $locale.baseText('workflowDetails.active') + ':' }}</span>
<WorkflowActivator :workflow-active="isWorkflowActive" :workflow-id="currentWorkflowId" :disabled="!currentWorkflowId"/>
<WorkflowActivator :workflow-active="isWorkflowActive" :workflow-id="currentWorkflowId"/>
</span>
<SaveButton
:saved="!this.isDirty && !this.isNewWorkflow"

View file

@ -1,7 +1,6 @@
<template>
<div id="side-menu">
<about :dialogVisible="aboutDialogVisible" @closeDialog="closeAboutDialog"></about>
<executions-list :dialogVisible="executionsListDialogVisible" @closeDialog="closeExecutionsListOpenDialog"></executions-list>
<input type="file" ref="importFile" style="display: none" v-on:change="handleFileImport()">
<div class="side-menu-wrapper" :class="{expanded: !isCollapsed}">
@ -166,7 +165,7 @@ import { saveAs } from 'file-saver';
import mixins from 'vue-typed-mixins';
import { mapGetters } from 'vuex';
import MenuItemsIterator from './MainSidebarMenuItemsIterator.vue';
import { CREDENTIAL_LIST_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY, DUPLICATE_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, VERSIONS_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY, WORKFLOW_OPEN_MODAL_KEY } from '@/constants';
import { CREDENTIAL_LIST_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY, DUPLICATE_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, VERSIONS_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY, WORKFLOW_OPEN_MODAL_KEY, EXECUTIONS_MODAL_KEY } from '@/constants';
export default mixins(
genericHelpers,
@ -190,7 +189,6 @@ export default mixins(
aboutDialogVisible: false,
// @ts-ignore
basePath: this.$store.getters.getBaseUrl,
executionsListDialogVisible: false,
stopExecutionInProgress: false,
};
},
@ -303,9 +301,6 @@ export default mixins(
closeAboutDialog () {
this.aboutDialogVisible = false;
},
closeExecutionsListOpenDialog () {
this.executionsListDialogVisible = false;
},
openTagManager() {
this.$store.dispatch('ui/openModal', TAGS_MANAGER_MODAL_KEY);
},
@ -345,7 +340,7 @@ export default mixins(
params: { name: workflowId },
});
this.$store.commit('ui/closeTopModal');
this.$store.commit('ui/closeAllModals');
},
async handleFileImport () {
const reader = new FileReader();
@ -506,7 +501,7 @@ export default mixins(
this.openWorkflow(this.workflowExecution.workflowId as string);
}
} else if (key === 'executions') {
this.executionsListDialogVisible = true;
this.$store.dispatch('ui/openModal', EXECUTIONS_MODAL_KEY);
}
},
},

View file

@ -116,6 +116,10 @@ export default Vue.extend({
this.$props.eventBus.$on('close', () => {
this.closeDialog();
});
this.$props.eventBus.$on('closeAll', () => {
this.closeAllDialogs();
});
}
const activeElement = document.activeElement as HTMLElement;
@ -141,22 +145,18 @@ export default Vue.extend({
this.$emit('enter');
}
},
closeDialog(callback?: () => void) {
closeAllDialogs() {
this.$store.commit('ui/closeAllModals');
},
async closeDialog() {
if (this.beforeClose) {
this.beforeClose(() => {
this.$store.commit('ui/closeTopModal');
if (typeof callback === 'function') {
callback();
}
});
return;
const shouldClose = await this.beforeClose();
if (shouldClose === false) { // must be strictly false to stop modal from closing
return;
}
}
this.$store.commit('ui/closeTopModal');
if (typeof callback === 'function') {
callback();
}
this.$store.commit('ui/closeModal', this.$props.name);
},
getCustomClass() {
let classes = this.$props.customClass || '';

View file

@ -80,12 +80,15 @@ export default Vue.extend({
this.$emit('enter');
}
},
close() {
async close() {
if (this.beforeClose) {
this.beforeClose();
return;
const shouldClose = await this.beforeClose();
if (shouldClose === false) { // must be strictly false to stop modal from closing
return;
}
}
this.$store.commit('ui/closeTopModal');
this.$store.commit('ui/closeModal', this.$props.name);
},
},
computed: {

View file

@ -60,12 +60,34 @@
<ModalRoot :name="WORKFLOW_SETTINGS_MODAL_KEY">
<WorkflowSettings />
</ModalRoot>
<ModalRoot :name="EXECUTIONS_MODAL_KEY">
<ExecutionsList />
</ModalRoot>
<ModalRoot :name="WORKFLOW_ACTIVE_MODAL_KEY">
<ActivationModal />
</ModalRoot>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import { CONTACT_PROMPT_MODAL_KEY, CREDENTIAL_LIST_MODAL_KEY, DUPLICATE_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, PERSONALIZATION_MODAL_KEY, WORKFLOW_OPEN_MODAL_KEY, VERSIONS_MODAL_KEY, CREDENTIAL_EDIT_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY, VALUE_SURVEY_MODAL_KEY } from '@/constants';
import {
CONTACT_PROMPT_MODAL_KEY,
CREDENTIAL_EDIT_MODAL_KEY,
CREDENTIAL_LIST_MODAL_KEY,
CREDENTIAL_SELECT_MODAL_KEY,
DUPLICATE_MODAL_KEY,
EXECUTIONS_MODAL_KEY,
PERSONALIZATION_MODAL_KEY,
TAGS_MANAGER_MODAL_KEY,
VALUE_SURVEY_MODAL_KEY,
VERSIONS_MODAL_KEY,
WORKFLOW_ACTIVE_MODAL_KEY,
WORKFLOW_OPEN_MODAL_KEY,
WORKFLOW_SETTINGS_MODAL_KEY,
} from '@/constants';
import ContactPromptModal from './ContactPromptModal.vue';
import CredentialEdit from "./CredentialEdit/CredentialEdit.vue";
@ -79,15 +101,19 @@ import UpdatesPanel from "./UpdatesPanel.vue";
import ValueSurvey from "./ValueSurvey.vue";
import WorkflowSettings from "./WorkflowSettings.vue";
import WorkflowOpen from "./WorkflowOpen.vue";
import ExecutionsList from "./ExecutionsList.vue";
import ActivationModal from "./ActivationModal.vue";
export default Vue.extend({
name: "Modals",
components: {
ActivationModal,
ContactPromptModal,
CredentialEdit,
CredentialsList,
CredentialsSelectModal,
DuplicateWorkflowDialog,
ExecutionsList,
ModalRoot,
PersonalizationModal,
TagsManager,
@ -108,6 +134,8 @@ export default Vue.extend({
WORKFLOW_OPEN_MODAL_KEY,
WORKFLOW_SETTINGS_MODAL_KEY,
VALUE_SURVEY_MODAL_KEY,
EXECUTIONS_MODAL_KEY,
WORKFLOW_ACTIVE_MODAL_KEY,
}),
});
</script>

View file

@ -92,7 +92,7 @@ import NodeIcon from '@/components/NodeIcon.vue';
import mixins from 'vue-typed-mixins';
import { get } from 'lodash';
import { getStyleTokenValue } from './helpers';
import { getStyleTokenValue, getTriggerNodeServiceName } from './helpers';
import { INodeUi, XYPosition } from '@/Interface';
export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).extend({
@ -131,7 +131,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
'node.waitingForYouToCreateAnEventIn',
{
interpolate: {
nodeType: this.nodeType && this.nodeType.displayName.replace(/Trigger/, ""),
nodeType: this.nodeType && getTriggerNodeServiceName(this.nodeType.displayName),
},
},
);

View file

@ -1,6 +1,7 @@
<template>
<ModalDrawer
:name="VALUE_SURVEY_MODAL_KEY"
:eventBus="modalBus"
:beforeClose="closeDialog"
:modal="false"
:wrapperClosable="false"
@ -60,6 +61,7 @@ import ModalDrawer from './ModalDrawer.vue';
import mixins from 'vue-typed-mixins';
import { workflowHelpers } from '@/components/mixins/workflowHelpers';
import Vue from 'vue';
const DEFAULT_TITLE = `How likely are you to recommend n8n to a friend or colleague?`;
const GREAT_FEEDBACK_TITLE = `Great to hear! Can we reach out to see how we can make n8n even better for you?`;
@ -104,6 +106,7 @@ export default mixins(workflowHelpers).extend({
},
showButtons: true,
VALUE_SURVEY_MODAL_KEY,
modalBus: new Vue(),
};
},
methods: {
@ -119,8 +122,6 @@ export default mixins(workflowHelpers).extend({
email: '',
});
}
this.$store.commit('ui/closeTopModal');
},
onInputChange(value: string) {
this.form.email = value;
@ -169,7 +170,7 @@ export default mixins(workflowHelpers).extend({
this.form.email = '';
this.showButtons = true;
}, 1000);
this.$store.commit('ui/closeTopModal');
this.modalBus.$emit('close');
}
},
},

View file

@ -1,19 +1,22 @@
<template>
<div class="workflow-activator">
<el-switch
v-loading="loading"
element-loading-spinner="el-icon-loading"
:value="workflowActive"
@change="activeChanged"
:title="workflowActive ? $locale.baseText('workflowActivator.deactivateWorkflow') : $locale.baseText('workflowActivator.activateWorkflow')"
:disabled="disabled || loading"
:active-color="getActiveColor"
inactive-color="#8899AA">
</el-switch>
<n8n-tooltip :disabled="!disabled" placement="bottom">
<div slot="content">{{ $locale.baseText('workflowActivator.thisWorkflowHasNoTriggerNodes') }}</div>
<el-switch
v-loading="loading"
:value="workflowActive"
@change="activeChanged"
:title="workflowActive ? $locale.baseText('workflowActivator.deactivateWorkflow') : $locale.baseText('workflowActivator.activateWorkflow')"
:disabled="disabled || loading"
:active-color="getActiveColor"
inactive-color="#8899AA"
element-loading-spinner="el-icon-loading">
</el-switch>
</n8n-tooltip>
<div class="could-not-be-started" v-if="couldNotBeStarted">
<n8n-tooltip placement="top">
<div @click="displayActivationError" slot="content">{{ $locale.baseText('workflowActivator.theWorkflowIsSetToBeActiveBut') }}</div>
<div @click="displayActivationError" slot="content" v-html="$locale.baseText('workflowActivator.theWorkflowIsSetToBeActiveBut')"></div>
<font-awesome-icon @click="displayActivationError" icon="exclamation-triangle" />
</n8n-tooltip>
</div>
@ -27,13 +30,17 @@ 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 {
IWorkflowDataUpdate,
} from '../Interface';
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,
@ -45,7 +52,6 @@ export default mixins(
{
name: 'WorkflowActivator',
props: [
'disabled',
'workflowActive',
'workflowId',
],
@ -74,59 +80,47 @@ export default mixins(
}
return '#13ce66';
},
isCurrentWorkflow(): boolean {
return this.$store.getters['workflowId'] === this.workflowId;
},
disabled(): boolean {
const isNewWorkflow = !this.workflowId;
if (isNewWorkflow || this.isCurrentWorkflow) {
return !this.workflowActive && !this.containsTrigger;
}
return false;
},
containsTrigger(): boolean {
const foundTriggers = getActivatableTriggerNodes(this.$store.getters.workflowTriggerNodes);
return foundTriggers.length > 0;
},
},
methods: {
async activeChanged (newActiveState: boolean) {
if (this.workflowId === undefined) {
this.$showMessage({
title: this.$locale.baseText('workflowActivator.showMessage.activeChangedWorkflowIdUndefined.title'),
message: this.$locale.baseText('workflowActivator.showMessage.activeChangedWorkflowIdUndefined.message'),
type: 'error',
});
return;
}
if (this.nodesIssuesExist === true) {
this.$showMessage({
title: this.$locale.baseText('workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.title'),
message: this.$locale.baseText('workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.message'),
type: 'error',
});
return;
}
// Set that the active state should be changed
let data: IWorkflowDataUpdate = {};
const activeWorkflowId = this.$store.getters.workflowId;
if (newActiveState === true && this.workflowId === activeWorkflowId) {
// If the currently active workflow gets activated save the whole
// workflow. If that would not happen then it could be quite confusing
// for people because it would activate a different version of the workflow
// than the one they can currently see.
if (this.dirtyState) {
const importConfirm = await this.confirmMessage(
this.$locale.baseText('workflowActivator.confirmMessage.message'),
this.$locale.baseText('workflowActivator.confirmMessage.headline'),
'warning',
this.$locale.baseText('workflowActivator.confirmMessage.confirmButtonText'),
this.$locale.baseText('workflowActivator.confirmMessage.cancelButtonText'),
);
if (importConfirm === false) {
return;
}
}
// Get the current workflow data that it gets saved together with the activation
data = await this.getWorkflowDataToSave();
}
data.active = newActiveState;
this.loading = true;
if (!this.workflowId) {
const saved = await this.saveCurrentWorkflow();
if (!saved) {
this.loading = false;
return;
}
}
try {
await this.restApi().updateWorkflow(this.workflowId, data);
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;
}
await this.updateWorkflow({workflowId: this.workflowId, active: newActiveState});
} catch (error) {
const newStateName = newActiveState === true ? 'activated' : 'deactivated';
this.$showError(
@ -141,27 +135,21 @@ export default mixins(
return;
}
const currentWorkflowId = this.$store.getters.workflowId;
let activationEventName = 'workflow.activeChange';
if (currentWorkflowId === this.workflowId) {
// If the status of the current workflow got changed
// commit it specifically
this.$store.commit('setActive', newActiveState);
activationEventName = 'workflow.activeChangeCurrent';
}
if (newActiveState === true) {
this.$store.commit('setWorkflowActive', this.workflowId);
} else {
this.$store.commit('setWorkflowInactive', this.workflowId);
}
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;
this.$store.dispatch('settings/fetchPromptsData');
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');
}
}
},
async displayActivationError () {
let errorMessage: string;
@ -192,7 +180,8 @@ export default mixins(
);
</script>
<style scoped>
<style lang="scss" scoped>
.workflow-activator {
display: inline-block;
}
@ -206,4 +195,5 @@ export default mixins(
::v-deep .el-loading-spinner {
margin-top: -10px;
}
</style>

View file

@ -183,7 +183,7 @@ export default mixins(
params: { name: data.id },
});
}
this.$store.commit('ui/closeTopModal');
this.$store.commit('ui/closeAllModals');
}
},
openDialog () {

View file

@ -1,3 +1,5 @@
import { ERROR_TRIGGER_NODE_TYPE } from '@/constants';
import { INodeUi } from '@/Interface';
import dateformat from 'dateformat';
const KEYWORDS_TO_FILTER = ['API', 'OAuth1', 'OAuth2'];
@ -18,3 +20,14 @@ export function getStyleTokenValue(name: string): string {
const style = getComputedStyle(document.body);
return style.getPropertyValue(name);
}
export function getTriggerNodeServiceName(nodeName: string) {
return nodeName.replace(/ trigger/i, '');
}
export function getActivatableTriggerNodes(nodes: INodeUi[]) {
return nodes.filter((node: INodeUi) => {
// Error Trigger does not behave like other triggers and workflows using it can not be activated
return !node.disabled && node.type !== ERROR_TRIGGER_NODE_TYPE;
});
}

View file

@ -437,6 +437,32 @@ export const workflowHelpers = mixins(
return returnData['__xxxxxxx__'];
},
async updateWorkflow({workflowId, active}: {workflowId: string, active?: boolean}) {
let data: IWorkflowDataUpdate = {};
const isCurrentWorkflow = workflowId === this.$store.getters.workflowId;
if (isCurrentWorkflow) {
data = await this.getWorkflowDataToSave();
}
if (active !== undefined) {
data.active = active;
}
const workflow = await this.restApi().updateWorkflow(workflowId, data);
if (isCurrentWorkflow) {
this.$store.commit('setActive', !!workflow.active);
this.$store.commit('setStateDirty', false);
}
if (workflow.active) {
this.$store.commit('setWorkflowActive', workflowId);
} else {
this.$store.commit('setWorkflowInactive', workflowId);
}
},
async saveCurrentWorkflow({name, tags}: {name?: string, tags?: string[]} = {}): Promise<boolean> {
const currentWorkflow = this.$route.params.name;
if (!currentWorkflow) {

View file

@ -28,6 +28,8 @@ export const CREDENTIAL_LIST_MODAL_KEY = 'credentialsList';
export const PERSONALIZATION_MODAL_KEY = 'personalization';
export const CONTACT_PROMPT_MODAL_KEY = 'contactPrompt';
export const VALUE_SURVEY_MODAL_KEY = 'valueSurvey';
export const EXECUTIONS_MODAL_KEY = 'executions';
export const WORKFLOW_ACTIVE_MODAL_KEY = 'activation';
// breakpoints
export const BREAKPOINT_SM = 768;
@ -135,4 +137,5 @@ export const OTHER_WORK_AREA_KEY = 'otherWorkArea';
export const OTHER_COMPANY_INDUSTRY_KEY = 'otherCompanyIndustry';
export const VALID_EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
export const LOCAL_STORAGE_ACTIVATION_FLAG = 'N8N_HIDE_ACTIVATION_ALERT';

View file

@ -1,4 +1,4 @@
import { CONTACT_PROMPT_MODAL_KEY, CREDENTIAL_EDIT_MODAL_KEY, DUPLICATE_MODAL_KEY, PERSONALIZATION_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, VERSIONS_MODAL_KEY, WORKFLOW_OPEN_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY, CREDENTIAL_LIST_MODAL_KEY, VALUE_SURVEY_MODAL_KEY } from '@/constants';
import { CONTACT_PROMPT_MODAL_KEY, CREDENTIAL_EDIT_MODAL_KEY, DUPLICATE_MODAL_KEY, PERSONALIZATION_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, VERSIONS_MODAL_KEY, WORKFLOW_OPEN_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY, CREDENTIAL_LIST_MODAL_KEY, VALUE_SURVEY_MODAL_KEY, EXECUTIONS_MODAL_KEY, WORKFLOW_ACTIVE_MODAL_KEY } from '@/constants';
import Vue from 'vue';
import { ActionContext, Module } from 'vuex';
import {
@ -45,6 +45,12 @@ const module: Module<IUiState, IRootState> = {
[WORKFLOW_SETTINGS_MODAL_KEY]: {
open: false,
},
[EXECUTIONS_MODAL_KEY]: {
open: false,
},
[WORKFLOW_ACTIVE_MODAL_KEY]: {
open: false,
},
},
modalStack: [],
sidebarMenuCollapsed: true,
@ -81,17 +87,19 @@ const module: Module<IUiState, IRootState> = {
Vue.set(state.modals[name], 'open', true);
state.modalStack = [name].concat(state.modalStack);
},
closeTopModal: (state: IUiState) => {
const name = state.modalStack[0];
closeModal: (state: IUiState, name: string) => {
Vue.set(state.modals[name], 'open', false);
if (state.modals.mode) {
Vue.set(state.modals[name], 'mode', '');
}
if (state.modals.activeId) {
Vue.set(state.modals[name], 'activeId', '');
}
state.modalStack = state.modalStack.slice(1);
state.modalStack = state.modalStack.filter((openModalName: string) => {
return name !== openModalName;
});
},
closeAllModals: (state: IUiState) => {
Object.keys(state.modals).forEach((name: string) => {
if (state.modals[name].open) {
Vue.set(state.modals[name], 'open', false);
}
});
state.modalStack = [];
},
toggleSidebarMenuCollapse: (state: IUiState) => {
state.sidebarMenuCollapsed = !state.sidebarMenuCollapsed;

View file

@ -472,7 +472,7 @@
},
"clickOnTheQuestionMarkIcon": "Click the '?' icon to open this node on n8n.io",
"continueOnFail": {
"description": "If active, the workflow continues even if this node's <br />execution fails. When this occurs, the node passes along input data from<br />previous nodes - so your workflow should account for unexpected output data.",
"description": "If active, the workflow continues even if this node's execution fails. When this occurs, the node passes along input data from previous nodes - so your workflow should account for unexpected output data.",
"displayName": "Continue On Fail"
},
"executeOnce": {
@ -891,12 +891,6 @@
},
"workflowActivator": {
"activateWorkflow": "Activate workflow",
"confirmMessage": {
"cancelButtonText": "",
"confirmButtonText": "Yes, activate and save!",
"headline": "Activate and save?",
"message": "When you activate the workflow all currently unsaved changes of the workflow will be saved."
},
"deactivateWorkflow": "Deactivate workflow",
"showError": {
"message": "There was a problem and the workflow could not be {newStateName}",
@ -920,7 +914,8 @@
"title": "Problem activating workflow"
}
},
"theWorkflowIsSetToBeActiveBut": "The workflow is set to be active but could not be started.<br />Click to display error message."
"theWorkflowIsSetToBeActiveBut": "The workflow is set to be active but could not be started.<br />Click to display error message.",
"thisWorkflowHasNoTriggerNodes": "This workflow has no trigger nodes that require activation"
},
"workflowDetails": {
"active": "Active",
@ -1040,5 +1035,19 @@
"timeoutAfter": "Timeout After",
"timeoutWorkflow": "Timeout Workflow",
"timezone": "Timezone"
},
"activationModal": {
"workflowActivated": "Workflow activated",
"theseExecutionsWillNotShowUp": "These executions will not show up immediately in the editor,",
"butYouCanSeeThem": "but you can see them in the",
"executionList": "execution list",
"ifYouChooseTo": "if you choose to",
"saveExecutions": "save executions.",
"dontShowAgain": "Don't show again",
"yourTriggersWillNowFire": "Your triggers will now fire production executions automatically.",
"yourTriggerWillNowFire": "Your trigger will now fire production executions automatically.",
"yourWorkflowWillNowRegularlyCheck": "Your workflow will now regularly check {serviceName} for events and trigger executions for them.",
"yourWorkflowWillNowListenForEvents": "Your workflow will now listen for events from {serviceName} and trigger executions.",
"gotIt": "Got it"
}
}

View file

@ -761,6 +761,7 @@ export const store = new Vuex.Store({
return getters.nodeType(node.type).group.includes('trigger');
});
},
// Node-Index
getNodeIndex: (state) => (nodeName: string): number => {
return state.nodeIndex.indexOf(nodeName);

View file

@ -26,6 +26,7 @@ export class Cron implements INodeType {
version: 1,
description: 'Triggers the workflow at a specific time',
eventTriggerDescription: '',
activationMessage: 'Your cron trigger will now trigger executions on the schedule you have defined.',
defaults: {
name: 'Cron',
color: '#00FF00',

View file

@ -16,6 +16,7 @@ export class Interval implements INodeType {
version: 1,
description: 'Triggers the workflow in a given interval',
eventTriggerDescription: '',
activationMessage: 'Your interval trigger will now trigger executions on the schedule you have defined.',
defaults: {
name: 'Interval',
color: '#00FF00',

View file

@ -16,6 +16,7 @@ export class SseTrigger implements INodeType {
version: 1,
description: 'Triggers the workflow when Server-Sent Events occur',
eventTriggerDescription: '',
activationMessage: 'You can now make calls to your SSE URL to trigger executions.',
defaults: {
name: 'SSE Trigger',
color: '#225577',

View file

@ -48,6 +48,7 @@ export class Webhook implements INodeType {
version: 1,
description: 'Starts the workflow when a webhook is called',
eventTriggerDescription: 'Waiting for you to call the Test URL',
activationMessage: 'You can now make calls to your production webhook URL.',
defaults: {
name: 'Webhook',
},

View file

@ -17,6 +17,7 @@ export class WorkflowTrigger implements INodeType {
version: 1,
description: 'Triggers based on various lifecycle events, like when a workflow is activated',
eventTriggerDescription: '',
activationMessage: 'Your workflow will now trigger executions on the event you have defined.',
defaults: {
name: 'Workflow Trigger',
color: '#ff6d5a',

View file

@ -807,6 +807,7 @@ export interface INodeTypeDescription extends INodeTypeBaseDescription {
version: number;
defaults: INodeParameters;
eventTriggerDescription?: string;
activationMessage?: string;
inputs: string[];
inputNames?: string[];
outputs: string[];