mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-16 09:36:44 +00:00
feat(editor): Migrate Design System and Editor UI to Vue 3 (#6476)
* feat: remove vue-fragment (no-changelog) * feat: partial design-system migration * feat: migrate info-accordion and info-tip components * feat: migrate several components to vue 3 * feat: migrated several components * feat: migrate several components * feat: migrate several components * feat: migrate several components * feat: re-exported all design system components * fix: fix design for popper components * fix: editor kind of working, lots of issues to fix * fix: fix several vue 3 migration issues * fix: replace @change with @update:modelValue in several places * fix: fix translation linking * fix: fix inline-edit input * fix: fix ndv and dialog design * fix: update parameter input event bindings * fix: rename deprecated lifecycle methods * fix: fix json view mapping * build: update lock file * fix(editor): revisit last conflict with master and fix issues * fix(editor): revisit last conflict with master and fix issues * fix: fix expression editor bug causing code mirror to no longer be reactive * fix: fix resource locator bug * fix: fix vue-agile integration * fix: remove global import for vue-agile * fix: replace element-plus buttons with n8n-buttons everywhere * fix(editor): Fix various element-plus styles (#6571) * fix(editor): Fix various element-plus styles Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * Remove debugging code Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * Address PR comments Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix(editor): Fix loading in production mode [Vue 3] (#6578) Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix(editor): First round of e2e tests fixes with Vue 3 (#6579) * fix(editor): Fix broken smoke and workflow list e2e tests * ✔️ Fix failing canvas action tests. Updating some selectors used in credentials and workflow tests * feat: add vue 3 eslint rules and fix issues * fix: fix tags-dropdown * fix: fix white-space issues caused by i18n-t * fix: rename non-generic click events * fix: fix search in resources list layout * fix: fix datatable paginator * fix: fix popper select caret and dropdown size * fix: add width to action-dropdown * fix: fix workflow settings icon not being hidden * fix: refactor newly added code * fix: fix merge issue * fix: fix ndv credentials watcher * fix: fix workflow saving and grabber notch * fix: fix nodes list panel transition * fix: fix node title visibility * fix: fix data unpinning * fix: fix value access * fix: show input panel only if trigger panel enabled or not trigger node * fix: fix tags dropdown and executions status spcing * fix(editor): Prevent execution list to load back when leaving the route (#6697) fix(editor): prevent execution list to load back when leaving the route * fix: fix drawer visibility * fix: fix expression toggle padding * fix: fix expressions editor styling * chore: prepare for testing * fix: fix styling for el-button without patching * test: fix unit tests in design-system * test: fix most unit tests * fix: remove import cycle. * fix: fix personalization modal tests * fix further resource mapper test adjustments * fix: fix multiple tests and n8n-route attr duplication * fix: fix source control tets * fix: fixed remaining unit tests * fix: fix workflows and credentials e2e tests * fix: fix localizeNodeNames * fix: update ndv e2e tests * fix: fix popper left placement arrow * fix: fix 5-ndv e2e tests * fix: fix 6-code-node e2e tests * fix(editor): Drop click outside directive from NodeCreator (#6716) * fix(editor): Drop click outside directive from NodeCreator * fix(editor): make sure mouseup outside is unbound at least before the component is unmounted * fix: fix 10-settings-log-streaming e2e tests * fix: fix node redrawing * fix: fix tooltip buttons styling * fix: fix varous e2e suites * fix: fix 15-scheduler-node e2e suite * fix: fix route watcher * fix: fixed param name update and credential edit * feat: update event names * refactor: Remove deprecated `$data` (#6576) Co-authored-by: Alex Grozav <alex@grozav.com> * fix: fix 17-sharing e2e suite * fix: fix tags dropdown * fix: fix tags manager * fix(editor): move :deep selectors to a separate scoped style block * fix: fix sticky component and inline text edit * fix: update e2e tests * fix: remove button override references * fix(editor): Adjust spacing in templates for Vue 3 (#6744) * fix(editor): Adjust spacing in templates * fix: Undo unneeded change * fix: Undo unneeded change * fix(editor): Adjust NDV height for Vue 3 (#6742) fix(editor): Adjust NDV height * fix(editor): Restore collapsed sidebar items for Vue 3 (#6743) fix(editor): Restore collapsed sidebar items * fix: fix linting issues * fix: fix design-system deps * fix: post-merge fixes * fix: update tests * fix: increase timeout for executionslist tets * chore: fix linting issue * fix: fix 14-mapping e2e tests in ci * fix: re-enable tests * fix: fix workflow duplication e2e tests after tags update * fix(editor): Change component prop to be typed * fix: fix tags dropdown in duplicate wf modal * fix: fix focus behaviour in tags selector * fix: fix tag creation * fix: fix log streaming e2e race condition * fix(editor): Fix Vue 3 linting issues (#6748) * fix(editor): Fix Vue 3 linting issues Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix MainSidebar linter issues * revert pnpm lock * update pnpm lock file --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> Co-authored-by: Alex Grozav <alex@grozav.com> * fix(editor): Some css fixes for vue3 branch (#6749) * ✨ Fixing filter button height * ✨ Update input modal button position * ✨ Updating tags styling * ✨ Fix event logging settings spacing * 👕 Fixing lint errors * fix: fix linting issues * Revert to `// eslint-disable-next-line @typescript-eslint/no-misused-promises` disabling of mixins init Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix: fix css issue * fix(editor): Lint fix * fix(editor): Fix settings initialisation (#6750) Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix: fix initial settings loading * fix: replace realClick with click force * fix: fix randomly failing mapping e2e tests * fix(editor): Fix menu item event handling * fix: fix resource filters dropdown events (#6752) * fix: fix resource filters dropdown events * fix: remove teleported:false * fix: fix event selection event naming (#6753) * fix: removed console.log (#6754) * fix: rever await nextTick changes * fix: redo linting changes * fix(editor): Redraw node connections if adding more than one node to canvas (#6755) * fix(editor): Redraw node connections if adding more than one node to canvas Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * Update position before connection two nodes * Lint fix --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> Co-authored-by: Alex Grozav <alex@grozav.com> * fix(editor): Fix `ResourceMapper` unit tests (#6758) * ✔️ Fix matching columns test * ✔️ Fix multiple matching columns test * ✔️ Removing `skip` from the last test * fix: Allow pasting a big workflow (#6760) * fix: pasting a big workflow * chore: update comment * refactor: move try/catch to function * refactor: move try/catch to function * fix(editor): Fix modal layer width * fix: fix position changes * fix: undo it.only * fix: make undo/redo multiple steps more verbose * fix: Fix value survey styles (#6764) * fix: fix value survey styles * fix: lint * Revert "fix: lint" 72869c431f1448861df021be041b61c62f1e3118 * fix: lint * fix(editor): Fix collapsed sub menu * fix: Fix drawer animation (#6767) fix: drawer animation * fix(editor): Fix source control buttons (#6769) * fix(editor): Fix App loading & auth (#6768) * fix(editor): Fix App loading & auth Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * Await promises Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * Fix eslint error Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> Co-authored-by: Csaba Tuncsik <csaba@n8n.io> Co-authored-by: OlegIvaniv <me@olegivaniv.com> Co-authored-by: Milorad FIlipović <milorad@n8n.io> Co-authored-by: Iván Ovejero <ivov.src@gmail.com> Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
This commit is contained in:
Alex Grozav
@@ -1,262 +0,0 @@
|
||||
diff --git a/lib/element-ui.common.js b/lib/element-ui.common.js
|
||||
index 6209b8b7f21c6eea447dd4671b7c4cfc1ef5e9c2..a26772af8dcdcbc0e3a6058bda30c7f9f143cd5d 100644
|
||||
--- a/lib/element-ui.common.js
|
||||
+++ b/lib/element-ui.common.js
|
||||
@@ -21471,14 +21471,8 @@ mainvue_type_template_id_52060272_render._withStripped = true
|
||||
popper.setAttribute('tabindex', 0);
|
||||
|
||||
if (this.trigger !== 'click') {
|
||||
- Object(dom_["on"])(reference, 'focusin', function () {
|
||||
- _this.handleFocus();
|
||||
- var instance = reference.__vue__;
|
||||
- if (instance && typeof instance.focus === 'function') {
|
||||
- instance.focus();
|
||||
- }
|
||||
- });
|
||||
- Object(dom_["on"])(popper, 'focusin', this.handleFocus);
|
||||
+ Object(dom_["on"])(reference, 'focusin', this.handleRefrenceFocus);
|
||||
+ Object(dom_["on"])(popper, 'focusin', this.handlePopperFocus);
|
||||
Object(dom_["on"])(reference, 'focusout', this.handleBlur);
|
||||
Object(dom_["on"])(popper, 'focusout', this.handleBlur);
|
||||
}
|
||||
@@ -21524,7 +21518,17 @@ mainvue_type_template_id_52060272_render._withStripped = true
|
||||
doClose: function doClose() {
|
||||
this.showPopper = false;
|
||||
},
|
||||
- handleFocus: function handleFocus() {
|
||||
+ handleRefrenceFocus: function handleRefrenceFocus() {
|
||||
+ this.handlePopperFocus();
|
||||
+ if (!this.referenceElm) {
|
||||
+ return;
|
||||
+ }
|
||||
+ const instance = this.referenceElm.__vue__;
|
||||
+ if (instance && typeof instance.focus === 'function') {
|
||||
+ instance.focus();
|
||||
+ }
|
||||
+ },
|
||||
+ handlePopperFocus: function handlePopperFocus() {
|
||||
Object(dom_["addClass"])(this.referenceElm, 'focusing');
|
||||
if (this.trigger === 'click' || this.trigger === 'focus') this.showPopper = true;
|
||||
},
|
||||
@@ -21570,7 +21574,7 @@ mainvue_type_template_id_52060272_render._withStripped = true
|
||||
var popper = this.popper || this.$refs.popper;
|
||||
|
||||
if (!reference && this.$refs.wrapper.children) {
|
||||
- reference = this.referenceElm = this.$refs.wrapper.children[0];
|
||||
+ reference = this.$refs.wrapper.children[0];
|
||||
}
|
||||
if (!this.$el || !reference || this.$el.contains(e.target) || reference.contains(e.target) || !popper || popper.contains(e.target)) return;
|
||||
this.showPopper = false;
|
||||
@@ -21590,18 +21594,28 @@ mainvue_type_template_id_52060272_render._withStripped = true
|
||||
},
|
||||
|
||||
destroyed: function destroyed() {
|
||||
- var reference = this.reference;
|
||||
+ var reference = this.referenceElm;
|
||||
+ var popper = this.popper || this.$refs.popper;
|
||||
|
||||
+ Object(dom_["off"])(reference, 'focusin', this.handleRefrenceFocus);
|
||||
+ Object(dom_["off"])(popper, 'focusin', this.handlePopperFocus);
|
||||
+ Object(dom_["off"])(reference, 'focusout', this.handleBlur);
|
||||
+ Object(dom_["off"])(popper, 'focusout', this.handleBlur);
|
||||
+ Object(dom_["off"])(reference, 'keydown', this.handleKeydown);
|
||||
+ Object(dom_["off"])(reference, 'click', this.handleClick);
|
||||
Object(dom_["off"])(reference, 'click', this.doToggle);
|
||||
+ Object(dom_["off"])(document, 'click', this.handleDocumentClick);
|
||||
+ Object(dom_["off"])(reference, 'mouseenter', this.handleMouseEnter);
|
||||
+ Object(dom_["off"])(popper, 'mouseenter', this.handleMouseEnter);
|
||||
+ Object(dom_["off"])(reference, 'mouseleave', this.handleMouseLeave);
|
||||
+ Object(dom_["off"])(popper, 'mouseleave', this.handleMouseLeave);
|
||||
Object(dom_["off"])(reference, 'mouseup', this.doClose);
|
||||
Object(dom_["off"])(reference, 'mousedown', this.doShow);
|
||||
Object(dom_["off"])(reference, 'focusin', this.doShow);
|
||||
Object(dom_["off"])(reference, 'focusout', this.doClose);
|
||||
Object(dom_["off"])(reference, 'mousedown', this.doShow);
|
||||
Object(dom_["off"])(reference, 'mouseup', this.doClose);
|
||||
- Object(dom_["off"])(reference, 'mouseleave', this.handleMouseLeave);
|
||||
- Object(dom_["off"])(reference, 'mouseenter', this.handleMouseEnter);
|
||||
- Object(dom_["off"])(document, 'click', this.handleDocumentClick);
|
||||
+ this.referenceElm = undefined;
|
||||
}
|
||||
});
|
||||
// CONCATENATED MODULE: ./packages/popover/src/main.vue?vue&type=script&lang=js&
|
||||
@@ -21805,18 +21819,7 @@ main.directive = directive;
|
||||
this.$el.setAttribute('tabindex', this.tabindex);
|
||||
Object(dom_["on"])(this.referenceElm, 'mouseenter', this.show);
|
||||
Object(dom_["on"])(this.referenceElm, 'mouseleave', this.hide);
|
||||
- Object(dom_["on"])(this.referenceElm, 'focus', function () {
|
||||
- if (!_this3.$slots.default || !_this3.$slots.default.length) {
|
||||
- _this3.handleFocus();
|
||||
- return;
|
||||
- }
|
||||
- var instance = _this3.$slots.default[0].componentInstance;
|
||||
- if (instance && instance.focus) {
|
||||
- instance.focus();
|
||||
- } else {
|
||||
- _this3.handleFocus();
|
||||
- }
|
||||
- });
|
||||
+ Object(dom_["on"])(this.referenceElm, 'focus', this.handleFocus);
|
||||
Object(dom_["on"])(this.referenceElm, 'blur', this.handleBlur);
|
||||
Object(dom_["on"])(this.referenceElm, 'click', this.removeFocusing);
|
||||
}
|
||||
@@ -21849,8 +21852,18 @@ main.directive = directive;
|
||||
this.debounceClose();
|
||||
},
|
||||
handleFocus: function handleFocus() {
|
||||
- this.focusing = true;
|
||||
- this.show();
|
||||
+ if (!this.$slots.default || !this.$slots.default.length) {
|
||||
+ this.focusing = true;
|
||||
+ this.show();
|
||||
+ return;
|
||||
+ }
|
||||
+ var instance = this.$slots.default[0].componentInstance;
|
||||
+ if (instance && instance.focus) {
|
||||
+ instance.focus();
|
||||
+ } else {
|
||||
+ this.focusing = true;
|
||||
+ this.show();
|
||||
+ }
|
||||
},
|
||||
handleBlur: function handleBlur() {
|
||||
this.focusing = false;
|
||||
@@ -21918,6 +21931,7 @@ main.directive = directive;
|
||||
this.popperVM && this.popperVM.$destroy();
|
||||
},
|
||||
destroyed: function destroyed() {
|
||||
+ this.popperVM && this.popperVM.$destroy();
|
||||
var reference = this.referenceElm;
|
||||
if (reference.nodeType === 1) {
|
||||
Object(dom_["off"])(reference, 'mouseenter', this.show);
|
||||
diff --git a/packages/popover/src/main.vue b/packages/popover/src/main.vue
|
||||
index ab5d060182c2e671989f1aba190c85a074d2c754..8b464ad39a78ac6efead5f687d977500642e45dc 100644
|
||||
--- a/packages/popover/src/main.vue
|
||||
+++ b/packages/popover/src/main.vue
|
||||
@@ -98,16 +98,9 @@ export default {
|
||||
reference.setAttribute('aria-describedby', this.tooltipId);
|
||||
reference.setAttribute('tabindex', this.tabindex); // tab序列
|
||||
popper.setAttribute('tabindex', 0);
|
||||
-
|
||||
if (this.trigger !== 'click') {
|
||||
- on(reference, 'focusin', () => {
|
||||
- this.handleFocus();
|
||||
- const instance = reference.__vue__;
|
||||
- if (instance && typeof instance.focus === 'function') {
|
||||
- instance.focus();
|
||||
- }
|
||||
- });
|
||||
- on(popper, 'focusin', this.handleFocus);
|
||||
+ on(reference, 'focusin', this.handleRefrenceFocus);
|
||||
+ on(popper, 'focusin', this.handlePopperFocus);
|
||||
on(reference, 'focusout', this.handleBlur);
|
||||
on(popper, 'focusout', this.handleBlur);
|
||||
}
|
||||
@@ -154,7 +147,17 @@ export default {
|
||||
doClose() {
|
||||
this.showPopper = false;
|
||||
},
|
||||
- handleFocus() {
|
||||
+ handleRefrenceFocus() {
|
||||
+ this.handlePopperFocus();
|
||||
+ if (!this.referenceElm) {
|
||||
+ return;
|
||||
+ }
|
||||
+ const instance = this.referenceElm.__vue__;
|
||||
+ if (instance && typeof instance.focus === 'function') {
|
||||
+ instance.focus();
|
||||
+ }
|
||||
+ },
|
||||
+ handlePopperFocus() {
|
||||
addClass(this.referenceElm, 'focusing');
|
||||
if (this.trigger === 'click' || this.trigger === 'focus') this.showPopper = true;
|
||||
},
|
||||
@@ -193,9 +196,8 @@ export default {
|
||||
handleDocumentClick(e) {
|
||||
let reference = this.reference || this.$refs.reference;
|
||||
const popper = this.popper || this.$refs.popper;
|
||||
-
|
||||
if (!reference && this.$refs.wrapper.children) {
|
||||
- reference = this.referenceElm = this.$refs.wrapper.children[0];
|
||||
+ reference = this.$refs.wrapper.children[0];
|
||||
}
|
||||
if (!this.$el ||
|
||||
!reference ||
|
||||
@@ -218,20 +220,26 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
-
|
||||
destroyed() {
|
||||
- const reference = this.reference;
|
||||
-
|
||||
+ const reference = this.referenceElm;
|
||||
+ const popper = this.popper || this.$refs.popper;
|
||||
+ off(reference, 'focusin', this.handleRefrenceFocus);
|
||||
+ off(popper, 'focusin', this.handlePopperFocus);
|
||||
+ off(reference, 'focusout', this.handleBlur);
|
||||
+ off(popper, 'focusout', this.handleBlur);
|
||||
+ off(reference, 'keydown', this.handleKeydown);
|
||||
+ off(reference, 'click', this.handleClick);
|
||||
off(reference, 'click', this.doToggle);
|
||||
- off(reference, 'mouseup', this.doClose);
|
||||
- off(reference, 'mousedown', this.doShow);
|
||||
+ off(document, 'click', this.handleDocumentClick);
|
||||
+ off(reference, 'mouseenter', this.handleMouseEnter);
|
||||
+ off(popper, 'mouseenter', this.handleMouseEnter);
|
||||
+ off(reference, 'mouseleave', this.handleMouseLeave);
|
||||
+ off(popper, 'mouseleave', this.handleMouseLeave);
|
||||
off(reference, 'focusin', this.doShow);
|
||||
off(reference, 'focusout', this.doClose);
|
||||
off(reference, 'mousedown', this.doShow);
|
||||
off(reference, 'mouseup', this.doClose);
|
||||
- off(reference, 'mouseleave', this.handleMouseLeave);
|
||||
- off(reference, 'mouseenter', this.handleMouseEnter);
|
||||
- off(document, 'click', this.handleDocumentClick);
|
||||
+ this.referenceElm = undefined;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
diff --git a/packages/tooltip/src/main.js b/packages/tooltip/src/main.js
|
||||
index dc930ec58d42328a4d62cddb22fd513db31793cf..d9a6afc80d27ea89b838a47f395e249131c1370c 100644
|
||||
--- a/packages/tooltip/src/main.js
|
||||
+++ b/packages/tooltip/src/main.js
|
||||
@@ -113,18 +113,7 @@ export default {
|
||||
this.$el.setAttribute('tabindex', this.tabindex);
|
||||
on(this.referenceElm, 'mouseenter', this.show);
|
||||
on(this.referenceElm, 'mouseleave', this.hide);
|
||||
- on(this.referenceElm, 'focus', () => {
|
||||
- if (!this.$slots.default || !this.$slots.default.length) {
|
||||
- this.handleFocus();
|
||||
- return;
|
||||
- }
|
||||
- const instance = this.$slots.default[0].componentInstance;
|
||||
- if (instance && instance.focus) {
|
||||
- instance.focus();
|
||||
- } else {
|
||||
- this.handleFocus();
|
||||
- }
|
||||
- });
|
||||
+ on(this.referenceElm, 'focus', this.handleFocus);
|
||||
on(this.referenceElm, 'blur', this.handleBlur);
|
||||
on(this.referenceElm, 'click', this.removeFocusing);
|
||||
}
|
||||
@@ -157,6 +146,18 @@ export default {
|
||||
this.debounceClose();
|
||||
},
|
||||
handleFocus() {
|
||||
+ if (!this.$slots.default || !this.$slots.default.length) {
|
||||
+ this.doFocus();
|
||||
+ return;
|
||||
+ }
|
||||
+ const instance = this.$slots.default[0].componentInstance;
|
||||
+ if (instance && instance.focus) {
|
||||
+ instance.focus();
|
||||
+ } else {
|
||||
+ this.doFocus();
|
||||
+ }
|
||||
+ },
|
||||
+ doFocus() {
|
||||
this.focusing = true;
|
||||
this.show();
|
||||
},
|
||||
Reference in New Issue
Block a user