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;
saveDataErrorExecution: string;
saveDataSuccessExecution: string;
saveManualExecutions: boolean;
timezone: string;
stateIsDirty: boolean;
executionTimeout: number;

View file

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

View file

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

View file

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

View file

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

View file

@ -65,7 +65,11 @@ export default mixins(showMessage).extend({
if (!this.name) {
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;

View file

@ -3,7 +3,6 @@
<about :dialogVisible="aboutDialogVisible" @closeDialog="closeAboutDialog"></about>
<executions-list :dialogVisible="executionsListDialogVisible" @closeDialog="closeExecutionsListOpenDialog"></executions-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()">
<div class="side-menu-wrapper" :class="{expanded: !isCollapsed}">
@ -229,7 +228,6 @@ export default mixins(
credentialOpenDialogVisible: false,
executionsListDialogVisible: false,
stopExecutionInProgress: false,
workflowSettingsDialogVisible: false,
helpMenuItems,
};
},
@ -305,9 +303,6 @@ export default mixins(
closeAboutDialog () {
this.aboutDialogVisible = false;
},
closeWorkflowSettingsDialog () {
this.workflowSettingsDialogVisible = false;
},
closeExecutionsListOpenDialog () {
this.executionsListDialogVisible = false;
},
@ -436,7 +431,7 @@ export default mixins(
} else if (key === 'help-about') {
this.aboutDialogVisible = true;
} else if (key === 'workflow-settings') {
this.workflowSettingsDialogVisible = true;
this.$store.dispatch('ui/openWorkflowSettingsModal');
} else if (key === 'workflow-new') {
const result = this.$store.getters.getStateIsDirty;
if(result) {

View file

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

View file

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

View file

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

View file

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

View file

@ -1,7 +1,14 @@
<template>
<span>
<el-dialog class="workflow-settings" :visible="dialogVisible" append-to-body width="65%" title="Workflow Settings" :before-close="closeDialog">
<div v-loading="isLoading">
<Modal
:name="modalName"
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-col :span="10" class="setting-name">
Error Workflow:
@ -156,12 +163,14 @@
</el-col>
</el-row>
</div>
</div>
</template>
<template v-slot:footer>
<div class="action-buttons">
<n8n-button label="Save" size="large" @click="saveSettings" />
</div>
</div>
</el-dialog>
</span>
</template>
</Modal>
</template>
<script lang="ts">
@ -177,6 +186,7 @@ import {
IWorkflowSettings,
IWorkflowShortResponse,
} from '@/Interface';
import Modal from './Modal.vue';
import mixins from 'vue-typed-mixins';
@ -187,9 +197,14 @@ export default mixins(
showMessage,
).extend({
name: 'WorkflowSettings',
props: [
'dialogVisible',
],
props: {
modalName: {
type: String,
},
},
components: {
Modal,
},
data () {
return {
isLoading: true,
@ -220,22 +235,74 @@ export default mixins(
executionTimeout: this.$store.getters.executionTimeout,
maxExecutionTimeout: this.$store.getters.maxExecutionTimeout,
timeoutHMS: { hours: 0, minutes: 0, seconds: 0 } as ITimeoutHMS,
modalBus: new Vue(),
};
},
watch: {
dialogVisible (newValue, oldValue) {
if (newValue) {
this.openDialog();
async mounted () {
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.$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: {
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');
return false;
this.modalBus.$emit('close');
},
setTimeout (key: string, value: string) {
const time = value ? parseInt(value, 10) : 0;
@ -362,66 +429,6 @@ export default mixins(
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 () {
// Set that the active state should be changed
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>`;
this.$showWarning('Critical update available', message, {
this.$showToast({
title: 'Critical update available',
message,
onClick: () => {
this.$store.dispatch('ui/openUpdatesPanel');
},
closeOnClick: true,
customClass: 'clickable',
type: 'warning',
duration: 0,
});
}

View file

@ -218,12 +218,35 @@ export const pushConnection = mixins(
// @ts-ignore
const workflow = this.getWorkflow();
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
this.$titleSet(workflow.name as string, 'IDLE');
this.$showMessage({
title: 'Workflow got started',
message: 'Workflow execution has started and is now waiting!',
this.$showToast({
title: 'Workflow started waiting',
message: `${action} <a href="https://docs.n8n.io/nodes/n8n-nodes-base.wait/" target="_blank">More info</a>`,
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) {
this.$titleSet(workflow.name as string, 'ERROR');
@ -237,8 +260,8 @@ export const pushConnection = mixins(
// Workflow did execute without a problem
this.$titleSet(workflow.name as string, 'IDLE');
this.$showMessage({
title: 'Workflow got executed',
message: 'Workflow did get executed successfully!',
title: 'Workflow was executed',
message: 'Workflow was executed successfully!',
type: 'success',
});
}

View file

@ -6,6 +6,9 @@ import { externalHooks } from '@/components/mixins/externalHooks';
import { ExecutionError } from 'n8n-workflow';
import { ElMessageBoxOptions } from 'element-ui/types/message-box';
import { MessageType } from 'element-ui/types/message';
import { isChildOf } from './helpers';
let stickyNotificationQueue: ElNotificationComponent[] = [];
export const showMessage = mixins(externalHooks).extend({
methods: {
@ -15,13 +18,29 @@ export const showMessage = mixins(externalHooks).extend({
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
let notification: ElNotificationComponent;
if (config && config.closeOnClick) {
if (config.closeOnClick) {
const cb = config.onClick;
config.onClick = () => {
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({
title,
message,
type: 'warning',
...(config || {}),
title: config.title,
message: config.message,
onClick: config.onClick,
onClose: config.onClose,
duration: config.duration,
customClass: config.customClass,
type: config.type,
});
return notification;
@ -99,6 +141,16 @@ export const showMessage = mixins(externalHooks).extend({
}
},
clearAllStickyNotifications() {
stickyNotificationQueue.map((notification: ElNotificationComponent) => {
if (notification) {
notification.close();
}
});
stickyNotificationQueue = [];
},
// @ts-ignore
collapsableDetails({ description, node }: Error) {
if (!description) return '';

View file

@ -13,6 +13,7 @@ import {
import { externalHooks } from '@/components/mixins/externalHooks';
import { restApi } from '@/components/mixins/restApi';
import { workflowHelpers } from '@/components/mixins/workflowHelpers';
import { showMessage } from '@/components/mixins/showMessage';
import mixins from 'vue-typed-mixins';
import { titleChange } from './titleChange';
@ -21,6 +22,7 @@ export const workflowRun = mixins(
externalHooks,
restApi,
workflowHelpers,
showMessage,
titleChange,
).extend({
methods: {
@ -61,6 +63,8 @@ export const workflowRun = mixins(
const workflow = this.getWorkflow();
this.$titleSet(workflow.name as string, 'EXECUTING');
this.clearAllStickyNotifications();
try {
// Check first if the workflow has any issues before execute it
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 WORKLOW_OPEN_MODAL_KEY = 'workflowOpen';
export const VERSIONS_MODAL_KEY = 'versions';
export const WORKFLOW_SETTINGS_MODAL_KEY = 'settings';
export const CREDENTIAL_EDIT_MODAL_KEY = 'editCredential';
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 { ActionContext, Module } from 'vuex';
import {
@ -27,6 +27,9 @@ const module: Module<IUiState, IRootState> = {
[VERSIONS_MODAL_KEY]: {
open: false,
},
[WORKFLOW_SETTINGS_MODAL_KEY]: {
open: false,
},
[CREDENTIAL_SELECT_MODAL_KEY]: {
open: false,
},
@ -95,6 +98,9 @@ const module: Module<IUiState, IRootState> = {
openUpdatesPanel: async (context: ActionContext<IUiState, IRootState>) => {
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}) => {
context.commit('setActiveId', {name: CREDENTIAL_EDIT_MODAL_KEY, id});
context.commit('setMode', {name: CREDENTIAL_EDIT_MODAL_KEY, mode: 'edit'});

View file

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

View file

@ -161,6 +161,7 @@ import {
IPushDataExecutionFinished,
ITag,
IWorkflowTemplate,
IExecutionsSummary,
} from '../Interface';
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) {
this.setLoadingText('Loading template');
@ -911,7 +921,7 @@ export default mixins(
});
} catch (error) {
// 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) {
const executedData = {
data: execution.data,
@ -2182,13 +2192,11 @@ export default mixins(
},
async loadSettings (): Promise<void> {
const settings = await this.restApi().getSettings() as IN8nUISettings;
this.$store.commit('setUrlBaseWebhook', settings.urlBaseWebhook);
this.$store.commit('setEndpointWebhook', settings.endpointWebhook);
this.$store.commit('setEndpointWebhookTest', settings.endpointWebhookTest);
this.$store.commit('setSaveDataErrorExecution', settings.saveDataErrorExecution);
this.$store.commit('setSaveDataSuccessExecution', settings.saveDataSuccessExecution);
this.$store.commit('setSaveManualExecutions', settings.saveManualExecutions);
this.$store.commit('setTimezone', settings.timezone);
this.$store.commit('setExecutionTimeout', settings.executionTimeout);
this.$store.commit('setMaxExecutionTimeout', settings.maxExecutionTimeout);

View file

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