mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-18 10:31:15 +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,11 +1,11 @@
|
||||
<template>
|
||||
<button
|
||||
:class="classes"
|
||||
:disabled="disabled || loading"
|
||||
:disabled="isDisabled"
|
||||
:aria-disabled="ariaDisabled"
|
||||
:aria-busy="ariaBusy"
|
||||
aria-live="polite"
|
||||
v-on="$listeners"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<span :class="$style.icon" v-if="loading || icon">
|
||||
<n8n-spinner v-if="loading" :size="size" />
|
||||
@@ -17,158 +17,112 @@
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import N8nIcon from '../N8nIcon';
|
||||
import N8nSpinner from '../N8nSpinner';
|
||||
import { useCssModule, computed, useAttrs } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'n8n-button',
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
validator: (value: string): boolean =>
|
||||
['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger'].includes(value),
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'medium',
|
||||
validator: (value: string): boolean =>
|
||||
['xmini', 'mini', 'small', 'medium', 'large', 'xlarge'].includes(value),
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
outline: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
text: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
icon: {
|
||||
type: [String, Array],
|
||||
},
|
||||
block: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
float: {
|
||||
type: String,
|
||||
validator: (value: string): boolean => ['left', 'right'].includes(value),
|
||||
},
|
||||
square: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
const $style = useCssModule();
|
||||
const $attrs = useAttrs();
|
||||
|
||||
const props = defineProps({
|
||||
label: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
components: {
|
||||
N8nSpinner,
|
||||
N8nIcon,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
computed: {
|
||||
ariaBusy(): 'true' | undefined {
|
||||
return this.loading ? 'true' : undefined;
|
||||
},
|
||||
ariaDisabled(): 'true' | undefined {
|
||||
return this.disabled ? 'true' : undefined;
|
||||
},
|
||||
classes(): string {
|
||||
return (
|
||||
`button ${this.$style.button} ${this.$style[this.type]}` +
|
||||
`${this.size ? ` ${this.$style[this.size]}` : ''}` +
|
||||
`${this.outline ? ` ${this.$style.outline}` : ''}` +
|
||||
`${this.loading ? ` ${this.$style.loading}` : ''}` +
|
||||
`${this.float ? ` ${this.$style[`float-${this.float}`]}` : ''}` +
|
||||
`${this.text ? ` ${this.$style.text}` : ''}` +
|
||||
`${this.disabled ? ` ${this.$style.disabled}` : ''}` +
|
||||
`${this.block ? ` ${this.$style.block}` : ''}` +
|
||||
`${this.active ? ` ${this.$style.active}` : ''}` +
|
||||
`${this.icon || this.loading ? ` ${this.$style.withIcon}` : ''}` +
|
||||
`${this.square ? ` ${this.$style.square}` : ''}`
|
||||
);
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'medium',
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
outline: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
text: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
icon: {
|
||||
type: [String, Array],
|
||||
},
|
||||
block: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
float: {
|
||||
type: String,
|
||||
},
|
||||
square: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const ariaBusy = computed(() => (props.loading ? 'true' : undefined));
|
||||
const ariaDisabled = computed(() => (props.disabled ? 'true' : undefined));
|
||||
const isDisabled = computed(() => props.disabled || props.loading);
|
||||
|
||||
const classes = computed(() => {
|
||||
return (
|
||||
`button ${$style.button} ${$style[props.type]}` +
|
||||
`${props.size ? ` ${$style[props.size]}` : ''}` +
|
||||
`${props.outline ? ` ${$style.outline}` : ''}` +
|
||||
`${props.loading ? ` ${$style.loading}` : ''}` +
|
||||
`${props.float ? ` ${$style[`float-${props.float}`]}` : ''}` +
|
||||
`${props.text ? ` ${$style.text}` : ''}` +
|
||||
`${props.disabled ? ` ${$style.disabled}` : ''}` +
|
||||
`${props.block ? ` ${$style.block}` : ''}` +
|
||||
`${props.active ? ` ${$style.active}` : ''}` +
|
||||
`${props.icon || props.loading ? ` ${$style.withIcon}` : ''}` +
|
||||
`${props.square ? ` ${$style.square}` : ''}`
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './Button';
|
||||
|
||||
.el-button {
|
||||
@include n8n-button(true);
|
||||
|
||||
--button-padding-vertical: var(--spacing-2xs);
|
||||
--button-padding-horizontal: var(--spacing-xs);
|
||||
--button-font-size: var(--font-size-2xs);
|
||||
|
||||
+ .el-button {
|
||||
margin-left: var(--spacing-2xs);
|
||||
}
|
||||
|
||||
&.btn--cancel,
|
||||
&.el-color-dropdown__link-btn {
|
||||
@include n8n-button-secondary;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" module>
|
||||
@import './Button';
|
||||
@import '../../css/mixins/utils';
|
||||
@import '../../css/common/var';
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
border: var(--border-width-base) $button-border-color var(--border-style-base);
|
||||
color: $button-font-color;
|
||||
background-color: $button-background-color;
|
||||
font-weight: var(--font-weight-bold);
|
||||
border-radius: $button-border-radius;
|
||||
padding: $button-padding-vertical $button-padding-horizontal;
|
||||
font-size: $button-font-size;
|
||||
|
||||
-webkit-appearance: none;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
transition: 0.3s;
|
||||
|
||||
@include utils-user-select(none);
|
||||
|
||||
&:hover {
|
||||
color: $button-hover-color;
|
||||
border-color: $button-hover-border-color;
|
||||
background-color: $button-hover-background-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $button-focus-outline-color;
|
||||
outline: $focus-outline-width solid $button-focus-outline-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
color: $button-active-color;
|
||||
border-color: $button-active-border-color;
|
||||
background-color: $button-active-background-color;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
> i {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
span + span {
|
||||
margin-left: var(--spacing-3xs);
|
||||
}
|
||||
@include n8n-button;
|
||||
}
|
||||
|
||||
$loading-overlay-background-color: rgba(255, 255, 255, 0);
|
||||
@@ -178,19 +132,7 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0);
|
||||
*/
|
||||
|
||||
.secondary {
|
||||
--button-color: var(--color-primary);
|
||||
--button-border-color: var(--color-primary);
|
||||
--button-background-color: var(--color-background-xlight);
|
||||
|
||||
--button-active-background-color: var(--color-primary-tint-2);
|
||||
--button-active-color: var(--color-primary);
|
||||
--button-active-border-color: var(--color-primary);
|
||||
|
||||
--button-hover-background-color: var(--color-primary-tint-3);
|
||||
--button-hover-color: var(--color-primary);
|
||||
--button-hover-border-color: var(--color-primary);
|
||||
|
||||
--button-focus-outline-color: var(--color-primary-tint-1);
|
||||
@include n8n-button-secondary;
|
||||
}
|
||||
|
||||
.tertiary {
|
||||
|
||||
Reference in New Issue
Block a user