Add wait node toasts (#2203)

*  Generalize unique entity name generation

*  Standardize variable names

* redo credentials

* revert some changes, replace got with was

* fix v-if order

* fix v-if order

* update linting

* update gulpfile

* update ssh display name

* update height

* update params

* update info tip sizes

* address design comments

* update google button disabled

* update icon size to 28px

* update design issues

* update info tab design

* address design comments

* update tab size

* update run data spacing

* address comments, update logo design

* fix spacing issues

* clean up store

* fix create new bug

* add loading state

* rename prop

* remove unused prop

* fix select bug

* remove label tag

* update word break

* build

* address design comments

* update font family of button

* update menu opacity

* update text

* update title

* address more comments

* update oauth messages

* add oauth validation

* hide disabled state

* update warning modal

* show button on text input

* clean up cred details

* add validation errors

* fix bug when deleting cred

* Frontend hack to display test button

* Created interfaces for testing and endpoint

* Testing slack node credentials working

* Adding test with node to endpoint for credential testing

* Fixed linting and test detectability

* Adding required for slack token

* Added google sheets credential testing

* update message

* Adding suggestions by Ivan and Mutasem

* Address comments

* keep blurred when focused

* update font weight of errors

* add oauth banner

* remove toast

* Fixed code bug and added telegram credential testing

* scroll to top on success

* clean up duplication

* Fixed telegram trigger node and added tests to typeform

* refactor modal

* add more validation support

* refactor info tab

* scroll to bottom on save, handle cred saving

* refactor save button

* save cred on valid

* save cred on valid

* scroll to top if has error

* add targets on input labels

* delete credentails input

* revert fe changes

* update validation logic

* clean interface

* test credentials

* update banner design

* show testing state

* update x position

* fix issues

* fix focus issues

* clean up validation behavior

* make error relative

* update banner component

* update error spacing

* don't close dialog

* rename button

* update how banners behave

* if has unsaved changes first

* move confirm message

* add success banner

* update time state

* disable transitions

* test on open

* clean up banner behavior

* update banner styling

* capitalize

* update error banner styling to handle long texts

* avoid unnessary content jostling

* add loading label

* show validation warnings when opening modal

* retest cred if not all props req

* update scroll to auto

* add error warning

* update color saturation

* set overflow to auto

* fix bug to get credentials when connected

* round down to minutes

* change tab name

* update casing oauth

* disable credential testing if it has expressions

* label same as title

* add more space between close and save

* remove check on making any changes

* hide close on confirm modals

* don't accept clicks outside dialog

* fix build issues

* undo test changes

* fix table scrollbar logs

* rename modals

* fix bug with same name

* refactor modal

* fix tslint issue

* refactor name

* update name behavior

* update monospace font

* remove comment

* refactor inputs

* refactor error handling

* reduce spacing changes

* fix doc url oauth1 oauth2

* build

* add toast for waiting executions

* hide infotip if no inputs

* address most comments

* rename file

* fix menu alignment

* gst

* update types

* update language

* refactor toast behavior, add support for links clicking

* allow closing workflow modal from notification

* refactor how modals work

* fix data display

* update toast behavior

* fix type issues

* rename prop

* update overflow behavior for settings

* only expand used properties

* fix edge bug

* make scrollable prop, add margin to tags footer

* remove max height from tag manager

* rewrite message

* fix notice word break

* update property names

* clear sticky notifications on run

* build

* refactor function out

* use destruction

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
Co-authored-by: Omar Ajoue <krynble@gmail.com>
This commit is contained in:
Mutasem Aldmour 2021-09-22 09:23:37 +02:00 committed by GitHub
parent e3c3a381b6
commit 6461423a5c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 496 additions and 250 deletions

View file

@ -578,7 +578,6 @@ export interface IRootState {
pushConnectionActive: boolean; pushConnectionActive: boolean;
saveDataErrorExecution: string; saveDataErrorExecution: string;
saveDataSuccessExecution: string; saveDataSuccessExecution: string;
saveManualExecutions: boolean;
timezone: string; timezone: string;
stateIsDirty: boolean; stateIsDirty: boolean;
executionTimeout: number; executionTimeout: number;

View file

@ -1,11 +1,12 @@
<template> <template>
<Modal <Modal
:name="modalName" :name="modalName"
size="lg"
:customClass="$style.credentialModal" :customClass="$style.credentialModal"
:eventBus="modalBus" :eventBus="modalBus"
:loading="loading" :loading="loading"
:beforeClose="beforeClose" :beforeClose="beforeClose"
width="70%"
height="80%"
> >
<template slot="header"> <template slot="header">
<div v-if="credentialType" :class="$style.header"> <div v-if="credentialType" :class="$style.header">

View file

@ -2,7 +2,9 @@
<Modal <Modal
:name="modalName" :name="modalName"
:eventBus="modalBus" :eventBus="modalBus"
size="sm" width="50%"
:center="true"
maxWidth="460px"
> >
<template slot="header"> <template slot="header">
<h2 :class="$style.title">Add new credential</h2> <h2 :class="$style.title">Add new credential</h2>

View file

@ -127,6 +127,7 @@ export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
.el-dialog__body { .el-dialog__body {
padding: 0 !important; padding: 0 !important;
height: 100%;
min-height: 400px; min-height: 400px;
overflow: hidden; overflow: hidden;
border-radius: 8px; border-radius: 8px;

View file

@ -3,10 +3,13 @@
:name="modalName" :name="modalName"
:eventBus="modalBus" :eventBus="modalBus"
@enter="save" @enter="save"
size="sm"
title="Duplicate Workflow" title="Duplicate Workflow"
:center="true"
minWidth="420px"
maxWidth="420px"
> >
<template v-slot:content> <template v-slot:content>
<div :class="$style.content">
<el-row> <el-row>
<n8n-input <n8n-input
v-model="name" v-model="name"
@ -27,6 +30,7 @@
ref="dropdown" ref="dropdown"
/> />
</el-row> </el-row>
</div>
</template> </template>
<template v-slot:footer="{ close }"> <template v-slot:footer="{ close }">
<div :class="$style.footer"> <div :class="$style.footer">
@ -127,6 +131,12 @@ export default mixins(showMessage, workflowHelpers).extend({
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.content {
> div {
margin-bottom: 15px;
}
}
.footer { .footer {
> * { > * {
margin-left: var(--spacing-3xs); margin-left: var(--spacing-3xs);

View file

@ -65,7 +65,11 @@ export default mixins(showMessage).extend({
if (!this.name) { if (!this.name) {
this.$emit('input', `Untitled ${this.type}`); this.$emit('input', `Untitled ${this.type}`);
this.$showWarning('Error', `${this.type} name cannot be empty`); this.$showToast({
title: 'Error',
message: `${this.type} name cannot be empty`,
type: 'warning',
});
} }
this.isNameEdit = false; this.isNameEdit = false;

View file

@ -3,7 +3,6 @@
<about :dialogVisible="aboutDialogVisible" @closeDialog="closeAboutDialog"></about> <about :dialogVisible="aboutDialogVisible" @closeDialog="closeAboutDialog"></about>
<executions-list :dialogVisible="executionsListDialogVisible" @closeDialog="closeExecutionsListOpenDialog"></executions-list> <executions-list :dialogVisible="executionsListDialogVisible" @closeDialog="closeExecutionsListOpenDialog"></executions-list>
<credentials-list :dialogVisible="credentialOpenDialogVisible" @closeDialog="closeCredentialOpenDialog"></credentials-list> <credentials-list :dialogVisible="credentialOpenDialogVisible" @closeDialog="closeCredentialOpenDialog"></credentials-list>
<workflow-settings :dialogVisible="workflowSettingsDialogVisible" @closeDialog="closeWorkflowSettingsDialog"></workflow-settings>
<input type="file" ref="importFile" style="display: none" v-on:change="handleFileImport()"> <input type="file" ref="importFile" style="display: none" v-on:change="handleFileImport()">
<div class="side-menu-wrapper" :class="{expanded: !isCollapsed}"> <div class="side-menu-wrapper" :class="{expanded: !isCollapsed}">
@ -229,7 +228,6 @@ export default mixins(
credentialOpenDialogVisible: false, credentialOpenDialogVisible: false,
executionsListDialogVisible: false, executionsListDialogVisible: false,
stopExecutionInProgress: false, stopExecutionInProgress: false,
workflowSettingsDialogVisible: false,
helpMenuItems, helpMenuItems,
}; };
}, },
@ -305,9 +303,6 @@ export default mixins(
closeAboutDialog () { closeAboutDialog () {
this.aboutDialogVisible = false; this.aboutDialogVisible = false;
}, },
closeWorkflowSettingsDialog () {
this.workflowSettingsDialogVisible = false;
},
closeExecutionsListOpenDialog () { closeExecutionsListOpenDialog () {
this.executionsListDialogVisible = false; this.executionsListDialogVisible = false;
}, },
@ -436,7 +431,7 @@ export default mixins(
} else if (key === 'help-about') { } else if (key === 'help-about') {
this.aboutDialogVisible = true; this.aboutDialogVisible = true;
} else if (key === 'workflow-settings') { } else if (key === 'workflow-settings') {
this.workflowSettingsDialogVisible = true; this.$store.dispatch('ui/openWorkflowSettingsModal');
} else if (key === 'workflow-new') { } else if (key === 'workflow-new') {
const result = this.$store.getters.getStateIsDirty; const result = this.$store.getters.getStateIsDirty;
if(result) { if(result) {

View file

@ -1,28 +1,13 @@
<template> <template>
<div>
<el-drawer
v-if="drawer"
:direction="drawerDirection"
:visible="visible && visibleDrawer"
:size="drawerWidth"
:before-close="closeDrawer"
>
<template v-slot:title>
<slot name="header" />
</template>
<template>
<slot name="content"/>
</template>
</el-drawer>
<el-dialog <el-dialog
v-else :visible="visible"
:visible="dialogVisible"
:before-close="closeDialog" :before-close="closeDialog"
:title="title" :title="title"
:class="{ 'dialog-wrapper': true, [size]: true }" :class="{'dialog-wrapper': true, 'center': center, 'scrollable': scrollable}"
:width="width" :width="width"
:show-close="showClose" :show-close="showClose"
:custom-class="getCustomClass()" :custom-class="getCustomClass()"
:style="styles"
append-to-body append-to-body
> >
<template v-slot:title> <template v-slot:title>
@ -38,26 +23,62 @@
<slot name="footer" :close="closeDialog" /> <slot name="footer" :close="closeDialog" />
</el-row> </el-row>
</el-dialog> </el-dialog>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from "vue"; import Vue from "vue";
const sizeMap: {[size: string]: string} = {
xl: '80%',
lg: '70%',
m: '50%',
default: '50%',
};
export default Vue.extend({ export default Vue.extend({
name: "Modal", name: "Modal",
props: ['name', 'title', 'eventBus', 'size', 'drawer', 'drawerDirection', 'drawerWidth', 'visible', 'showClose', 'loading', 'classic', 'beforeClose', 'customClass'], props: {
data() { name: {
return { type: String,
visibleDrawer: this.drawer, },
}; title: {
type: String,
},
eventBus: {
type: Vue,
},
showClose: {
type: Boolean,
default: true,
},
loading: {
type: Boolean,
},
classic: {
type: Boolean,
},
beforeClose: {
type: Function,
},
customClass: {
type: String,
},
center: {
type: Boolean,
},
width: {
type: String,
default: '50%',
},
minWidth: {
type: String,
},
maxWidth: {
type: String,
},
height: {
type: String,
},
maxHeight: {
type: String,
},
scrollable: {
type: Boolean,
default: false,
},
}, },
mounted() { mounted() {
window.addEventListener('keydown', this.onWindowKeydown); window.addEventListener('keydown', this.onWindowKeydown);
@ -108,13 +129,6 @@ export default Vue.extend({
callback(); callback();
} }
}, },
closeDrawer() {
this.visibleDrawer = false;
setTimeout(() =>{
this.$store.commit('ui/closeTopModal');
this.visibleDrawer = true;
}, 300); // delayed for closing animation to take effect
},
getCustomClass() { getCustomClass() {
let classes = this.$props.customClass || ''; let classes = this.$props.customClass || '';
@ -126,60 +140,64 @@ export default Vue.extend({
}, },
}, },
computed: { computed: {
width(): string {
return this.$props.size ? sizeMap[this.$props.size] : sizeMap.default;
},
isActive(): boolean { isActive(): boolean {
return this.$store.getters['ui/isModalActive'](this.$props.name); return this.$store.getters['ui/isModalActive'](this.$props.name);
}, },
dialogVisible(): boolean { visible(): boolean {
return this.$store.getters['ui/isModalOpen'](this.$props.name); return this.$store.getters['ui/isModalOpen'](this.$props.name);
}, },
styles() {
const styles: {[prop: string]: string} = {};
if (this.height) {
styles['--dialog-height'] = this.height;
}
if (this.maxHeight) {
styles['--dialog-max-height'] = this.maxHeight;
}
if (this.maxWidth) {
styles['--dialog-max-width'] = this.maxWidth;
}
if (this.minWidth) {
styles['--dialog-min-width'] = this.minWidth;
}
return styles;
},
}, },
}); });
</script> </script>
<style lang="scss"> <style lang="scss">
.el-drawer__header {
margin: 0;
padding: 30px 30px 0 30px;
}
.el-drawer__body {
overflow: hidden;
}
.el-dialog__body {
height: 100%;
}
.dialog-wrapper { .dialog-wrapper {
&.xl > div, &.md > div { .el-dialog {
min-width: 620px; display: flex;
flex-direction: column;
max-width: var(--dialog-max-width, 80%);
min-width: var(--dialog-min-width, 420px);
height: var(--dialog-height);
max-height: var(--dialog-max-height);
} }
&.lg > div { .el-dialog__body {
height: 80%;
overflow: hidden; overflow: hidden;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.modal-content { .modal-content {
height: 100%; overflow: hidden;
} flex-grow: 1;
} }
}
&.sm { .scrollable .modal-content {
overflow-y: auto;
}
.center {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
> div {
max-width: 460px;
}
}
}
.modal-content > .el-row {
margin-bottom: 15px;
} }
.loader { .loader {

View file

@ -0,0 +1,92 @@
<template>
<el-drawer
:direction="direction"
:visible="visible"
:size="width"
:before-close="close"
>
<template v-slot:title>
<slot name="header" />
</template>
<template>
<slot name="content"/>
</template>
</el-drawer>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name: "ModalDrawer",
props: {
name: {
type: String,
},
eventBus: {
type: Vue,
},
direction: {
type: String,
},
width: {
type: String,
},
},
mounted() {
window.addEventListener('keydown', this.onWindowKeydown);
if (this.$props.eventBus) {
this.$props.eventBus.$on('close', () => {
this.close();
});
}
const activeElement = document.activeElement as HTMLElement;
if (activeElement) {
activeElement.blur();
}
},
beforeDestroy() {
window.removeEventListener('keydown', this.onWindowKeydown);
},
methods: {
onWindowKeydown(event: KeyboardEvent) {
if (!this.isActive) {
return;
}
if (event && event.keyCode === 13) {
this.handleEnter();
}
},
handleEnter() {
if (this.isActive) {
this.$emit('enter');
}
},
close() {
this.$store.commit('ui/closeTopModal');
},
},
computed: {
isActive(): boolean {
return this.$store.getters['ui/isModalActive'](this.$props.name);
},
visible(): boolean {
return this.$store.getters['ui/isModalOpen'](this.$props.name);
},
},
});
</script>
<style lang="scss">
.el-drawer__header {
margin: 0;
padding: 30px 30px 0 30px;
}
.el-drawer__body {
overflow: hidden;
}
</style>

View file

@ -26,10 +26,16 @@
</ModalRoot> </ModalRoot>
<ModalRoot :name="VERSIONS_MODAL_KEY" :keepAlive="true"> <ModalRoot :name="VERSIONS_MODAL_KEY" :keepAlive="true">
<template v-slot="{ modalName, open }"> <template v-slot="{ modalName }">
<UpdatesPanel <UpdatesPanel
:modalName="modalName" :modalName="modalName"
:visible="open" />
</template>
</ModalRoot>
<ModalRoot :name="WORKFLOW_SETTINGS_MODAL_KEY">
<template v-slot="{ modalName }">
<WorkflowSettings
:modalName="modalName"
/> />
</template> </template>
</ModalRoot> </ModalRoot>
@ -56,7 +62,7 @@
<script lang="ts"> <script lang="ts">
import Vue from "vue"; import Vue from "vue";
import { DUPLICATE_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, WORKLOW_OPEN_MODAL_KEY, VERSIONS_MODAL_KEY, CREDENTIAL_EDIT_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY } from '@/constants'; import { DUPLICATE_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, WORKLOW_OPEN_MODAL_KEY, VERSIONS_MODAL_KEY, CREDENTIAL_EDIT_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY } from '@/constants';
import CredentialEdit from "./CredentialEdit/CredentialEdit.vue"; import CredentialEdit from "./CredentialEdit/CredentialEdit.vue";
import DuplicateWorkflowDialog from "@/components/DuplicateWorkflowDialog.vue"; import DuplicateWorkflowDialog from "@/components/DuplicateWorkflowDialog.vue";
@ -64,6 +70,7 @@ import WorkflowOpen from "@/components/WorkflowOpen.vue";
import ModalRoot from "./ModalRoot.vue"; import ModalRoot from "./ModalRoot.vue";
import CredentialsSelectModal from "./CredentialsSelectModal.vue"; import CredentialsSelectModal from "./CredentialsSelectModal.vue";
import UpdatesPanel from "./UpdatesPanel.vue"; import UpdatesPanel from "./UpdatesPanel.vue";
import WorkflowSettings from "./WorkflowSettings.vue";
import TagsManager from "@/components/TagsManager/TagsManager.vue"; import TagsManager from "@/components/TagsManager/TagsManager.vue";
export default Vue.extend({ export default Vue.extend({
@ -74,6 +81,7 @@ export default Vue.extend({
ModalRoot, ModalRoot,
CredentialsSelectModal, CredentialsSelectModal,
UpdatesPanel, UpdatesPanel,
WorkflowSettings,
TagsManager, TagsManager,
WorkflowOpen, WorkflowOpen,
}, },
@ -81,6 +89,7 @@ export default Vue.extend({
DUPLICATE_MODAL_KEY, DUPLICATE_MODAL_KEY,
TAGS_MANAGER_MODAL_KEY, TAGS_MANAGER_MODAL_KEY,
WORKLOW_OPEN_MODAL_KEY, WORKLOW_OPEN_MODAL_KEY,
WORKFLOW_SETTINGS_MODAL_KEY,
VERSIONS_MODAL_KEY, VERSIONS_MODAL_KEY,
CREDENTIAL_EDIT_MODAL_KEY, CREDENTIAL_EDIT_MODAL_KEY,
CREDENTIAL_SELECT_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY,

View file

@ -4,7 +4,7 @@
:name="modalName" :name="modalName"
:eventBus="modalBus" :eventBus="modalBus"
@enter="onEnter" @enter="onEnter"
size="md" minWidth="620px"
> >
<template v-slot:content> <template v-slot:content>
<el-row> <el-row>
@ -186,5 +186,6 @@ export default mixins(showMessage).extend({
<style lang="scss" scoped> <style lang="scss" scoped>
.el-row { .el-row {
min-height: $--tags-manager-min-height; min-height: $--tags-manager-min-height;
margin-bottom: 15px;
} }
</style> </style>

View file

@ -1,10 +1,8 @@
<template> <template>
<Modal <ModalDrawer
:name="modalName" :name="modalName"
:drawer="true" direction="ltr"
:visible="visible" width="520px"
drawerDirection="ltr"
drawerWidth="520px"
> >
<template slot="header"> <template slot="header">
<span :class="$style.title">Weve been busy </span> <span :class="$style.title">Weve been busy </span>
@ -40,25 +38,25 @@
</div> </div>
</section> </section>
</template> </template>
</Modal> </ModalDrawer>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import Modal from './Modal.vue'; import ModalDrawer from './ModalDrawer.vue';
import TimeAgo from './TimeAgo.vue'; import TimeAgo from './TimeAgo.vue';
import VersionCard from './VersionCard.vue'; import VersionCard from './VersionCard.vue';
export default Vue.extend({ export default Vue.extend({
name: 'UpdatesPanel', name: 'UpdatesPanel',
components: { components: {
Modal, ModalDrawer,
VersionCard, VersionCard,
TimeAgo, TimeAgo,
}, },
props: ['modalName', 'visible'], props: ['modalName'],
computed: { computed: {
...mapGetters('versions', ['nextVersions', 'currentVersion', 'infoUrl']), ...mapGetters('versions', ['nextVersions', 'currentVersion', 'infoUrl']),
}, },

View file

@ -1,7 +1,8 @@
<template> <template>
<Modal <Modal
:name="modalName" :name="modalName"
size="xl" width="80%"
minWidth="620px"
:classic="true" :classic="true"
> >
<template v-slot:header> <template v-slot:header>

View file

@ -1,7 +1,14 @@
<template> <template>
<span> <Modal
<el-dialog class="workflow-settings" :visible="dialogVisible" append-to-body width="65%" title="Workflow Settings" :before-close="closeDialog"> :name="modalName"
<div v-loading="isLoading"> width="65%"
maxHeight="80%"
title="Workflow Settings"
:eventBus="modalBus"
:scrollable="true"
>
<template v-slot:content>
<div v-loading="isLoading" class="workflow-settings">
<el-row> <el-row>
<el-col :span="10" class="setting-name"> <el-col :span="10" class="setting-name">
Error Workflow: Error Workflow:
@ -156,12 +163,14 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</div>
</template>
<template v-slot:footer>
<div class="action-buttons"> <div class="action-buttons">
<n8n-button label="Save" size="large" @click="saveSettings" /> <n8n-button label="Save" size="large" @click="saveSettings" />
</div> </div>
</div> </template>
</el-dialog> </Modal>
</span>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -177,6 +186,7 @@ import {
IWorkflowSettings, IWorkflowSettings,
IWorkflowShortResponse, IWorkflowShortResponse,
} from '@/Interface'; } from '@/Interface';
import Modal from './Modal.vue';
import mixins from 'vue-typed-mixins'; import mixins from 'vue-typed-mixins';
@ -187,9 +197,14 @@ export default mixins(
showMessage, showMessage,
).extend({ ).extend({
name: 'WorkflowSettings', name: 'WorkflowSettings',
props: [ props: {
'dialogVisible', modalName: {
], type: String,
},
},
components: {
Modal,
},
data () { data () {
return { return {
isLoading: true, isLoading: true,
@ -220,22 +235,74 @@ export default mixins(
executionTimeout: this.$store.getters.executionTimeout, executionTimeout: this.$store.getters.executionTimeout,
maxExecutionTimeout: this.$store.getters.maxExecutionTimeout, maxExecutionTimeout: this.$store.getters.maxExecutionTimeout,
timeoutHMS: { hours: 0, minutes: 0, seconds: 0 } as ITimeoutHMS, timeoutHMS: { hours: 0, minutes: 0, seconds: 0 } as ITimeoutHMS,
modalBus: new Vue(),
}; };
}, },
watch: { async mounted () {
dialogVisible (newValue, oldValue) { if (this.$route.params.name === undefined) {
if (newValue) { this.$showMessage({
this.openDialog(); title: 'No workflow active',
message: `No workflow active to display settings of.`,
type: 'error',
duration: 0,
});
this.closeDialog();
return;
} }
this.$externalHooks().run('workflowSettings.dialogVisibleChanged', { dialogVisible: newValue });
}, this.defaultValues.saveDataErrorExecution = this.$store.getters.saveDataErrorExecution;
this.defaultValues.saveDataSuccessExecution = this.$store.getters.saveDataSuccessExecution;
this.defaultValues.saveManualExecutions = this.$store.getters.saveManualExecutions;
this.defaultValues.timezone = this.$store.getters.timezone;
this.isLoading = true;
const promises = [];
promises.push(this.loadWorkflows());
promises.push(this.loadSaveDataErrorExecutionOptions());
promises.push(this.loadSaveDataSuccessExecutionOptions());
promises.push(this.loadSaveExecutionProgressOptions());
promises.push(this.loadSaveManualOptions());
promises.push(this.loadTimezones());
try {
await Promise.all(promises);
} catch (error) {
this.$showError(error, 'Problem loading settings', 'The following error occurred loading the data:');
}
const workflowSettings = JSON.parse(JSON.stringify(this.$store.getters.workflowSettings));
if (workflowSettings.timezone === undefined) {
workflowSettings.timezone = 'DEFAULT';
}
if (workflowSettings.saveDataErrorExecution === undefined) {
workflowSettings.saveDataErrorExecution = 'DEFAULT';
}
if (workflowSettings.saveDataSuccessExecution === undefined) {
workflowSettings.saveDataSuccessExecution = 'DEFAULT';
}
if (workflowSettings.saveExecutionProgress === undefined) {
workflowSettings.saveExecutionProgress = 'DEFAULT';
}
if (workflowSettings.saveManualExecutions === undefined) {
workflowSettings.saveManualExecutions = 'DEFAULT';
}
if (workflowSettings.executionTimeout === undefined) {
workflowSettings.executionTimeout = this.$store.getters.executionTimeout;
}
if (workflowSettings.maxExecutionTimeout === undefined) {
workflowSettings.maxExecutionTimeout = this.$store.getters.maxExecutionTimeout;
}
Vue.set(this, 'workflowSettings', workflowSettings);
this.timeoutHMS = this.convertToHMS(workflowSettings.executionTimeout);
this.isLoading = false;
this.$externalHooks().run('workflowSettings.dialogVisibleChanged', { dialogVisible: true });
}, },
methods: { methods: {
closeDialog () { closeDialog () {
// Handle the close externally as the visible parameter is an external prop this.modalBus.$emit('close');
// and is so not allowed to be changed here.
this.$emit('closeDialog');
return false;
}, },
setTimeout (key: string, value: string) { setTimeout (key: string, value: string) {
const time = value ? parseInt(value, 10) : 0; const time = value ? parseInt(value, 10) : 0;
@ -362,66 +429,6 @@ export default mixins(
Vue.set(this, 'workflows', workflows); Vue.set(this, 'workflows', workflows);
}, },
async openDialog () {
if (this.$route.params.name === undefined) {
this.$showMessage({
title: 'No workflow active',
message: `No workflow active to display settings of.`,
type: 'error',
duration: 0,
});
this.closeDialog();
return;
}
this.defaultValues.saveDataErrorExecution = this.$store.getters.saveDataErrorExecution;
this.defaultValues.saveDataSuccessExecution = this.$store.getters.saveDataSuccessExecution;
this.defaultValues.saveManualExecutions = this.$store.getters.saveManualExecutions;
this.defaultValues.timezone = this.$store.getters.timezone;
this.isLoading = true;
const promises = [];
promises.push(this.loadWorkflows());
promises.push(this.loadSaveDataErrorExecutionOptions());
promises.push(this.loadSaveDataSuccessExecutionOptions());
promises.push(this.loadSaveExecutionProgressOptions());
promises.push(this.loadSaveManualOptions());
promises.push(this.loadTimezones());
try {
await Promise.all(promises);
} catch (error) {
this.$showError(error, 'Problem loading settings', 'The following error occurred loading the data:');
}
const workflowSettings = JSON.parse(JSON.stringify(this.$store.getters.workflowSettings));
if (workflowSettings.timezone === undefined) {
workflowSettings.timezone = 'DEFAULT';
}
if (workflowSettings.saveDataErrorExecution === undefined) {
workflowSettings.saveDataErrorExecution = 'DEFAULT';
}
if (workflowSettings.saveDataSuccessExecution === undefined) {
workflowSettings.saveDataSuccessExecution = 'DEFAULT';
}
if (workflowSettings.saveExecutionProgress === undefined) {
workflowSettings.saveExecutionProgress = 'DEFAULT';
}
if (workflowSettings.saveManualExecutions === undefined) {
workflowSettings.saveManualExecutions = 'DEFAULT';
}
if (workflowSettings.executionTimeout === undefined) {
workflowSettings.executionTimeout = this.$store.getters.executionTimeout;
}
if (workflowSettings.maxExecutionTimeout === undefined) {
workflowSettings.maxExecutionTimeout = this.$store.getters.maxExecutionTimeout;
}
Vue.set(this, 'workflowSettings', workflowSettings);
this.timeoutHMS = this.convertToHMS(workflowSettings.executionTimeout);
this.isLoading = false;
},
async saveSettings () { async saveSettings () {
// Set that the active state should be changed // Set that the active state should be changed
const data: IWorkflowDataUpdate = { const data: IWorkflowDataUpdate = {

View file

@ -0,0 +1,11 @@
export function isChildOf(parent: Element, child: Element): boolean {
if (child.parentElement === null) {
return false;
}
if (child.parentElement === parent) {
return true;
}
return isChildOf(parent, child.parentElement);
}

View file

@ -26,12 +26,15 @@ export const newVersions = mixins(
} }
message = `${message} <a class="primary-color">More info</a>`; message = `${message} <a class="primary-color">More info</a>`;
this.$showWarning('Critical update available', message, { this.$showToast({
title: 'Critical update available',
message,
onClick: () => { onClick: () => {
this.$store.dispatch('ui/openUpdatesPanel'); this.$store.dispatch('ui/openUpdatesPanel');
}, },
closeOnClick: true, closeOnClick: true,
customClass: 'clickable', customClass: 'clickable',
type: 'warning',
duration: 0, duration: 0,
}); });
} }

View file

@ -218,12 +218,35 @@ export const pushConnection = mixins(
// @ts-ignore // @ts-ignore
const workflow = this.getWorkflow(); const workflow = this.getWorkflow();
if (runDataExecuted.waitTill !== undefined) { if (runDataExecuted.waitTill !== undefined) {
const {
isNewWorkflow,
activeExecutionId,
saveManualExecutions,
} = this.$store.getters;
let action;
if (isNewWorkflow || !saveManualExecutions) {
action = '<a class="open-settings">Turn on saving manual executions</a> and run again to see what happened after this node.';
}
else {
action = `<a href="/execution/${activeExecutionId}" target="_blank">View the execution</a> to see what happened after this node.`;
}
// Workflow did start but had been put to wait // Workflow did start but had been put to wait
this.$titleSet(workflow.name as string, 'IDLE'); this.$titleSet(workflow.name as string, 'IDLE');
this.$showMessage({ this.$showToast({
title: 'Workflow got started', title: 'Workflow started waiting',
message: 'Workflow execution has started and is now waiting!', message: `${action} <a href="https://docs.n8n.io/nodes/n8n-nodes-base.wait/" target="_blank">More info</a>`,
type: 'success', type: 'success',
duration: 0,
onLinkClick: async (e: HTMLLinkElement) => {
if (e.classList.contains('open-settings')) {
if (this.$store.getters.isNewWorkflow) {
await this.saveAsNewWorkflow();
}
this.$store.dispatch('ui/openWorkflowSettingsModal');
}
},
}); });
} else if (runDataExecuted.finished !== true) { } else if (runDataExecuted.finished !== true) {
this.$titleSet(workflow.name as string, 'ERROR'); this.$titleSet(workflow.name as string, 'ERROR');
@ -237,8 +260,8 @@ export const pushConnection = mixins(
// Workflow did execute without a problem // Workflow did execute without a problem
this.$titleSet(workflow.name as string, 'IDLE'); this.$titleSet(workflow.name as string, 'IDLE');
this.$showMessage({ this.$showMessage({
title: 'Workflow got executed', title: 'Workflow was executed',
message: 'Workflow did get executed successfully!', message: 'Workflow was executed successfully!',
type: 'success', type: 'success',
}); });
} }

View file

@ -6,6 +6,9 @@ import { externalHooks } from '@/components/mixins/externalHooks';
import { ExecutionError } from 'n8n-workflow'; import { ExecutionError } from 'n8n-workflow';
import { ElMessageBoxOptions } from 'element-ui/types/message-box'; import { ElMessageBoxOptions } from 'element-ui/types/message-box';
import { MessageType } from 'element-ui/types/message'; import { MessageType } from 'element-ui/types/message';
import { isChildOf } from './helpers';
let stickyNotificationQueue: ElNotificationComponent[] = [];
export const showMessage = mixins(externalHooks).extend({ export const showMessage = mixins(externalHooks).extend({
methods: { methods: {
@ -15,13 +18,29 @@ export const showMessage = mixins(externalHooks).extend({
messageData.position = 'bottom-right'; messageData.position = 'bottom-right';
} }
return this.$notify(messageData); const notification = this.$notify(messageData);
if (messageData.duration === 0) {
stickyNotificationQueue.push(notification);
}
return notification;
}, },
$showWarning(title: string, message: string, config?: {onClick?: () => void, duration?: number, customClass?: string, closeOnClick?: boolean}) { $showToast(config: {
title: string,
message: string,
onClick?: () => void,
onClose?: () => void,
duration?: number,
customClass?: string,
closeOnClick?: boolean,
onLinkClick?: (e: HTMLLinkElement) => void,
type?: MessageType,
}) {
// eslint-disable-next-line prefer-const // eslint-disable-next-line prefer-const
let notification: ElNotificationComponent; let notification: ElNotificationComponent;
if (config && config.closeOnClick) { if (config.closeOnClick) {
const cb = config.onClick; const cb = config.onClick;
config.onClick = () => { config.onClick = () => {
if (notification) { if (notification) {
@ -33,11 +52,34 @@ export const showMessage = mixins(externalHooks).extend({
}; };
} }
if (config.onLinkClick) {
const onLinkClick = (e: MouseEvent) => {
if (e && e.target && config.onLinkClick && isChildOf(notification.$el, e.target as Element)) {
const target = e.target as HTMLElement;
if (target && target.tagName === 'A') {
config.onLinkClick(e.target as HTMLLinkElement);
}
}
};
window.addEventListener('click', onLinkClick);
const cb = config.onClose;
config.onClose = () => {
window.removeEventListener('click', onLinkClick);
if (cb) {
cb();
}
};
}
notification = this.$showMessage({ notification = this.$showMessage({
title, title: config.title,
message, message: config.message,
type: 'warning', onClick: config.onClick,
...(config || {}), onClose: config.onClose,
duration: config.duration,
customClass: config.customClass,
type: config.type,
}); });
return notification; return notification;
@ -99,6 +141,16 @@ export const showMessage = mixins(externalHooks).extend({
} }
}, },
clearAllStickyNotifications() {
stickyNotificationQueue.map((notification: ElNotificationComponent) => {
if (notification) {
notification.close();
}
});
stickyNotificationQueue = [];
},
// @ts-ignore // @ts-ignore
collapsableDetails({ description, node }: Error) { collapsableDetails({ description, node }: Error) {
if (!description) return ''; if (!description) return '';

View file

@ -13,6 +13,7 @@ import {
import { externalHooks } from '@/components/mixins/externalHooks'; import { externalHooks } from '@/components/mixins/externalHooks';
import { restApi } from '@/components/mixins/restApi'; import { restApi } from '@/components/mixins/restApi';
import { workflowHelpers } from '@/components/mixins/workflowHelpers'; import { workflowHelpers } from '@/components/mixins/workflowHelpers';
import { showMessage } from '@/components/mixins/showMessage';
import mixins from 'vue-typed-mixins'; import mixins from 'vue-typed-mixins';
import { titleChange } from './titleChange'; import { titleChange } from './titleChange';
@ -21,6 +22,7 @@ export const workflowRun = mixins(
externalHooks, externalHooks,
restApi, restApi,
workflowHelpers, workflowHelpers,
showMessage,
titleChange, titleChange,
).extend({ ).extend({
methods: { methods: {
@ -61,6 +63,8 @@ export const workflowRun = mixins(
const workflow = this.getWorkflow(); const workflow = this.getWorkflow();
this.$titleSet(workflow.name as string, 'EXECUTING'); this.$titleSet(workflow.name as string, 'EXECUTING');
this.clearAllStickyNotifications();
try { try {
// Check first if the workflow has any issues before execute it // Check first if the workflow has any issues before execute it
const issuesExist = this.$store.getters.nodesIssuesExist; const issuesExist = this.$store.getters.nodesIssuesExist;

View file

@ -20,6 +20,7 @@ export const DUPLICATE_MODAL_KEY = 'duplicate';
export const TAGS_MANAGER_MODAL_KEY = 'tagsManager'; export const TAGS_MANAGER_MODAL_KEY = 'tagsManager';
export const WORKLOW_OPEN_MODAL_KEY = 'workflowOpen'; export const WORKLOW_OPEN_MODAL_KEY = 'workflowOpen';
export const VERSIONS_MODAL_KEY = 'versions'; export const VERSIONS_MODAL_KEY = 'versions';
export const WORKFLOW_SETTINGS_MODAL_KEY = 'settings';
export const CREDENTIAL_EDIT_MODAL_KEY = 'editCredential'; export const CREDENTIAL_EDIT_MODAL_KEY = 'editCredential';
export const CREDENTIAL_SELECT_MODAL_KEY = 'selectCredential'; export const CREDENTIAL_SELECT_MODAL_KEY = 'selectCredential';

View file

@ -1,4 +1,4 @@
import { CREDENTIAL_EDIT_MODAL_KEY, DUPLICATE_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, VERSIONS_MODAL_KEY, WORKLOW_OPEN_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY } from '@/constants'; import { CREDENTIAL_EDIT_MODAL_KEY, DUPLICATE_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, VERSIONS_MODAL_KEY, WORKLOW_OPEN_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY } from '@/constants';
import Vue from 'vue'; import Vue from 'vue';
import { ActionContext, Module } from 'vuex'; import { ActionContext, Module } from 'vuex';
import { import {
@ -27,6 +27,9 @@ const module: Module<IUiState, IRootState> = {
[VERSIONS_MODAL_KEY]: { [VERSIONS_MODAL_KEY]: {
open: false, open: false,
}, },
[WORKFLOW_SETTINGS_MODAL_KEY]: {
open: false,
},
[CREDENTIAL_SELECT_MODAL_KEY]: { [CREDENTIAL_SELECT_MODAL_KEY]: {
open: false, open: false,
}, },
@ -95,6 +98,9 @@ const module: Module<IUiState, IRootState> = {
openUpdatesPanel: async (context: ActionContext<IUiState, IRootState>) => { openUpdatesPanel: async (context: ActionContext<IUiState, IRootState>) => {
context.commit('openModal', VERSIONS_MODAL_KEY); context.commit('openModal', VERSIONS_MODAL_KEY);
}, },
openWorkflowSettingsModal: async (context: ActionContext<IUiState, IRootState>) => {
context.commit('openModal', WORKFLOW_SETTINGS_MODAL_KEY);
},
openExisitngCredential: async (context: ActionContext<IUiState, IRootState>, { id }: {id: string}) => { openExisitngCredential: async (context: ActionContext<IUiState, IRootState>, { id }: {id: string}) => {
context.commit('setActiveId', {name: CREDENTIAL_EDIT_MODAL_KEY, id}); context.commit('setActiveId', {name: CREDENTIAL_EDIT_MODAL_KEY, id});
context.commit('setMode', {name: CREDENTIAL_EDIT_MODAL_KEY, mode: 'edit'}); context.commit('setMode', {name: CREDENTIAL_EDIT_MODAL_KEY, mode: 'edit'});

View file

@ -56,7 +56,6 @@ const state: IRootState = {
pushConnectionActive: true, pushConnectionActive: true,
saveDataErrorExecution: 'all', saveDataErrorExecution: 'all',
saveDataSuccessExecution: 'all', saveDataSuccessExecution: 'all',
saveManualExecutions: false,
timezone: 'America/New_York', timezone: 'America/New_York',
stateIsDirty: false, stateIsDirty: false,
executionTimeout: -1, executionTimeout: -1,
@ -497,9 +496,6 @@ export const store = new Vuex.Store({
setSaveDataSuccessExecution (state, newValue: string) { setSaveDataSuccessExecution (state, newValue: string) {
Vue.set(state, 'saveDataSuccessExecution', newValue); Vue.set(state, 'saveDataSuccessExecution', newValue);
}, },
setSaveManualExecutions (state, saveManualExecutions: boolean) {
Vue.set(state, 'saveManualExecutions', saveManualExecutions);
},
setTimezone (state, timezone: string) { setTimezone (state, timezone: string) {
Vue.set(state, 'timezone', timezone); Vue.set(state, 'timezone', timezone);
}, },
@ -606,6 +602,10 @@ export const store = new Vuex.Store({
return state.activeActions.includes(action); return state.activeActions.includes(action);
}, },
isNewWorkflow: (state) => {
return state.workflow.id === PLACEHOLDER_EMPTY_WORKFLOW_ID;
},
getActiveExecutions: (state): IExecutionsCurrentSummaryExtended[] => { getActiveExecutions: (state): IExecutionsCurrentSummaryExtended[] => {
return state.activeExecutions; return state.activeExecutions;
}, },
@ -650,8 +650,8 @@ export const store = new Vuex.Store({
saveDataSuccessExecution: (state): string => { saveDataSuccessExecution: (state): string => {
return state.saveDataSuccessExecution; return state.saveDataSuccessExecution;
}, },
saveManualExecutions: (state): boolean => { saveManualExecutions: (state, getters): boolean => {
return state.saveManualExecutions; return !!getters.workflowSettings.saveManualExecutions;
}, },
timezone: (state): string => { timezone: (state): string => {
return state.timezone; return state.timezone;

View file

@ -161,6 +161,7 @@ import {
IPushDataExecutionFinished, IPushDataExecutionFinished,
ITag, ITag,
IWorkflowTemplate, IWorkflowTemplate,
IExecutionsSummary,
} from '../Interface'; } from '../Interface';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
@ -403,6 +404,15 @@ export default mixins(
} }
} }
} }
if ((data as IExecutionsSummary).waitTill) {
this.$showMessage({
title: `This execution hasn't finished yet`,
message: `<a onclick="window.location.reload(false);">Refresh</a> to see the latest status.<br/> <a href="https://docs.n8n.io/nodes/n8n-nodes-base.wait/" target="_blank">More info</a>`,
type: 'warning',
duration: 0,
});
}
}, },
async openWorkflowTemplate (templateId: string) { async openWorkflowTemplate (templateId: string) {
this.setLoadingText('Loading template'); this.setLoadingText('Loading template');
@ -911,7 +921,7 @@ export default mixins(
}); });
} catch (error) { } catch (error) {
// Execution stop might fail when the execution has already finished. Let's treat this here. // Execution stop might fail when the execution has already finished. Let's treat this here.
const execution = await this.restApi().getExecution(executionId) as IExecutionResponse; const execution = await this.restApi().getExecution(executionId);
if (execution.finished) { if (execution.finished) {
const executedData = { const executedData = {
data: execution.data, data: execution.data,
@ -2182,13 +2192,11 @@ export default mixins(
}, },
async loadSettings (): Promise<void> { async loadSettings (): Promise<void> {
const settings = await this.restApi().getSettings() as IN8nUISettings; const settings = await this.restApi().getSettings() as IN8nUISettings;
this.$store.commit('setUrlBaseWebhook', settings.urlBaseWebhook); this.$store.commit('setUrlBaseWebhook', settings.urlBaseWebhook);
this.$store.commit('setEndpointWebhook', settings.endpointWebhook); this.$store.commit('setEndpointWebhook', settings.endpointWebhook);
this.$store.commit('setEndpointWebhookTest', settings.endpointWebhookTest); this.$store.commit('setEndpointWebhookTest', settings.endpointWebhookTest);
this.$store.commit('setSaveDataErrorExecution', settings.saveDataErrorExecution); this.$store.commit('setSaveDataErrorExecution', settings.saveDataErrorExecution);
this.$store.commit('setSaveDataSuccessExecution', settings.saveDataSuccessExecution); this.$store.commit('setSaveDataSuccessExecution', settings.saveDataSuccessExecution);
this.$store.commit('setSaveManualExecutions', settings.saveManualExecutions);
this.$store.commit('setTimezone', settings.timezone); this.$store.commit('setTimezone', settings.timezone);
this.$store.commit('setExecutionTimeout', settings.executionTimeout); this.$store.commit('setExecutionTimeout', settings.executionTimeout);
this.$store.commit('setMaxExecutionTimeout', settings.maxExecutionTimeout); this.$store.commit('setMaxExecutionTimeout', settings.maxExecutionTimeout);

View file

@ -283,7 +283,7 @@ export class Wait implements INodeType {
description: 'The HTTP Response code to return', description: 'The HTTP Response code to return',
}, },
{ {
displayName: 'Response Mode', displayName: 'Respond when',
name: 'responseMode', name: 'responseMode',
type: 'options', type: 'options',
displayOptions: { displayOptions: {
@ -295,12 +295,12 @@ export class Wait implements INodeType {
}, },
options: [ options: [
{ {
name: 'On Received', name: 'Webhook received',
value: 'onReceived', value: 'onReceived',
description: 'Returns directly with defined Response Code', description: 'Returns directly with defined Response Code',
}, },
{ {
name: 'Last Node', name: 'Last node finishes',
value: 'lastNode', value: 'lastNode',
description: 'Returns data of the last executed node', description: 'Returns data of the last executed node',
}, },

View file

@ -155,17 +155,17 @@ export class Webhook implements INodeType {
description: 'The HTTP Response code to return', description: 'The HTTP Response code to return',
}, },
{ {
displayName: 'Response Mode', displayName: 'Respond when',
name: 'responseMode', name: 'responseMode',
type: 'options', type: 'options',
options: [ options: [
{ {
name: 'On Received', name: 'Webhook received',
value: 'onReceived', value: 'onReceived',
description: 'Returns directly with defined Response Code', description: 'Returns directly with defined Response Code',
}, },
{ {
name: 'Last Node', name: 'Last node finishes',
value: 'lastNode', value: 'lastNode',
description: 'Returns data of the last executed node', description: 'Returns data of the last executed node',
}, },