mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-21 11:49:59 +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
@@ -3,7 +3,7 @@
|
||||
<template #aside v-if="showAside">
|
||||
<div :class="[$style['heading-wrapper'], 'mb-xs']">
|
||||
<n8n-heading size="2xlarge">
|
||||
{{ $locale.baseText(`${resourceKey}.heading`) }}
|
||||
{{ i18n.baseText(`${resourceKey}.heading`) }}
|
||||
</n8n-heading>
|
||||
</div>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
@click="$emit('click:add', $event)"
|
||||
data-test-id="resources-list-add"
|
||||
>
|
||||
{{ $locale.baseText(`${resourceKey}.add`) }}
|
||||
{{ i18n.baseText(`${resourceKey}.add`) }}
|
||||
</n8n-button>
|
||||
</slot>
|
||||
</div>
|
||||
@@ -24,8 +24,8 @@
|
||||
<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]" v-if="shareable">
|
||||
<resource-ownership-select
|
||||
v-model="isOwnerSubview"
|
||||
:my-resources-label="$locale.baseText(`${resourceKey}.menu.my`)"
|
||||
:all-resources-label="$locale.baseText(`${resourceKey}.menu.all`)"
|
||||
:my-resources-label="i18n.baseText(`${resourceKey}.menu.my`)"
|
||||
:all-resources-label="i18n.baseText(`${resourceKey}.menu.all`)"
|
||||
/>
|
||||
</enterprise-edition>
|
||||
</template>
|
||||
@@ -42,7 +42,7 @@
|
||||
data-test-id="empty-resources-list"
|
||||
emoji="👋"
|
||||
:heading="
|
||||
$locale.baseText(
|
||||
i18n.baseText(
|
||||
usersStore.currentUser.firstName
|
||||
? `${resourceKey}.empty.heading`
|
||||
: `${resourceKey}.empty.heading.userNotSetup`,
|
||||
@@ -51,10 +51,10 @@
|
||||
},
|
||||
)
|
||||
"
|
||||
:description="$locale.baseText(`${resourceKey}.empty.description`)"
|
||||
:buttonText="$locale.baseText(`${resourceKey}.empty.button`)"
|
||||
:description="i18n.baseText(`${resourceKey}.empty.description`)"
|
||||
:buttonText="i18n.baseText(`${resourceKey}.empty.button`)"
|
||||
buttonType="secondary"
|
||||
@click="$emit('click:add', $event)"
|
||||
@click:button="$emit('click:add', $event)"
|
||||
/>
|
||||
</slot>
|
||||
</div>
|
||||
@@ -63,34 +63,35 @@
|
||||
<div class="mb-xs">
|
||||
<div :class="$style['filters-row']">
|
||||
<n8n-input
|
||||
:modelValue="filtersModel.search"
|
||||
:class="[$style['search'], 'mr-2xs']"
|
||||
:placeholder="$locale.baseText(`${resourceKey}.search.placeholder`)"
|
||||
v-model="filters.search"
|
||||
size="medium"
|
||||
:placeholder="i18n.baseText(`${resourceKey}.search.placeholder`)"
|
||||
clearable
|
||||
ref="search"
|
||||
data-test-id="resources-list-search"
|
||||
@update:modelValue="onSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<n8n-icon icon="search" />
|
||||
</template>
|
||||
</n8n-input>
|
||||
<div :class="$style['sort-and-filter']">
|
||||
<n8n-select v-model="sortBy" size="medium" data-test-id="resources-list-sort">
|
||||
<n8n-select v-model="sortBy" data-test-id="resources-list-sort">
|
||||
<n8n-option
|
||||
v-for="sortOption in sortOptions"
|
||||
data-test-id="resources-list-sort-item"
|
||||
:key="sortOption"
|
||||
:value="sortOption"
|
||||
:label="$locale.baseText(`${resourceKey}.sort.${sortOption}`)"
|
||||
:label="i18n.baseText(`${resourceKey}.sort.${sortOption}`)"
|
||||
/>
|
||||
</n8n-select>
|
||||
<resource-filters-dropdown
|
||||
v-if="showFiltersDropdown"
|
||||
:keys="filterKeys"
|
||||
:reset="resetFilters"
|
||||
:value="filters"
|
||||
:modelValue="filtersModel"
|
||||
:shareable="shareable"
|
||||
@input="$emit('update:filters', $event)"
|
||||
@update:modelValue="$emit('update:filters', $event)"
|
||||
@update:filtersLength="onUpdateFiltersLength"
|
||||
>
|
||||
<template #default="resourceFiltersSlotProps">
|
||||
@@ -103,11 +104,11 @@
|
||||
|
||||
<slot name="callout"></slot>
|
||||
|
||||
<div v-show="hasFilters" class="mt-xs">
|
||||
<div v-if="showFiltersDropdown" v-show="hasFilters" class="mt-xs">
|
||||
<n8n-info-tip :bold="false">
|
||||
{{ $locale.baseText(`${resourceKey}.filters.active`) }}
|
||||
{{ i18n.baseText(`${resourceKey}.filters.active`) }}
|
||||
<n8n-link @click="resetFilters" size="small">
|
||||
{{ $locale.baseText(`${resourceKey}.filters.active.reset`) }}
|
||||
{{ i18n.baseText(`${resourceKey}.filters.active.reset`) }}
|
||||
</n8n-link>
|
||||
</n8n-info-tip>
|
||||
</div>
|
||||
@@ -152,22 +153,20 @@
|
||||
</div>
|
||||
|
||||
<n8n-text color="text-base" size="medium" data-test-id="resources-list-empty" v-else>
|
||||
{{ $locale.baseText(`${resourceKey}.noResults`) }}
|
||||
{{ i18n.baseText(`${resourceKey}.noResults`) }}
|
||||
<template v-if="shouldSwitchToAllSubview">
|
||||
<span v-if="!filters.search">
|
||||
({{ $locale.baseText(`${resourceKey}.noResults.switchToShared.preamble`) }}
|
||||
<span v-if="!filtersModel.search">
|
||||
({{ i18n.baseText(`${resourceKey}.noResults.switchToShared.preamble`) }}
|
||||
<n8n-link @click="setOwnerSubview(false)">
|
||||
{{ $locale.baseText(`${resourceKey}.noResults.switchToShared.link`) }} </n8n-link
|
||||
{{ i18n.baseText(`${resourceKey}.noResults.switchToShared.link`) }} </n8n-link
|
||||
>)
|
||||
</span>
|
||||
|
||||
<span v-else>
|
||||
({{
|
||||
$locale.baseText(`${resourceKey}.noResults.withSearch.switchToShared.preamble`)
|
||||
}}
|
||||
({{ i18n.baseText(`${resourceKey}.noResults.withSearch.switchToShared.preamble`) }}
|
||||
<n8n-link @click="setOwnerSubview(false)">
|
||||
{{
|
||||
$locale.baseText(`${resourceKey}.noResults.withSearch.switchToShared.link`)
|
||||
i18n.baseText(`${resourceKey}.noResults.withSearch.switchToShared.link`)
|
||||
}} </n8n-link
|
||||
>)
|
||||
</span>
|
||||
@@ -196,6 +195,7 @@ import { useSettingsStore } from '@/stores/settings.store';
|
||||
import { useUsersStore } from '@/stores/users.store';
|
||||
import type { N8nInput } from 'n8n-design-system';
|
||||
import type { DatatableColumn } from 'n8n-design-system';
|
||||
import { useI18n } from '@/composables';
|
||||
|
||||
export interface IResource {
|
||||
id: string;
|
||||
@@ -285,12 +285,20 @@ export default defineComponent({
|
||||
}),
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const i18n = useI18n();
|
||||
|
||||
return {
|
||||
i18n,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
isOwnerSubview: false,
|
||||
sortBy: this.sortOptions[0],
|
||||
hasFilters: false,
|
||||
filtersModel: { ...this.filters },
|
||||
currentPage: 1,
|
||||
rowsPerPage: 10 as number | '*',
|
||||
resettingFilters: false,
|
||||
@@ -316,33 +324,34 @@ export default defineComponent({
|
||||
});
|
||||
},
|
||||
filterKeys(): string[] {
|
||||
return Object.keys(this.filters);
|
||||
return Object.keys(this.filtersModel);
|
||||
},
|
||||
filteredAndSortedSubviewResources(): IResource[] {
|
||||
const filtered: IResource[] = this.subviewResources.filter((resource: IResource) => {
|
||||
let matches = true;
|
||||
|
||||
if (this.filters.ownedBy) {
|
||||
matches = matches && !!(resource.ownedBy && resource.ownedBy.id === this.filters.ownedBy);
|
||||
if (this.filtersModel.ownedBy) {
|
||||
matches =
|
||||
matches && !!(resource.ownedBy && resource.ownedBy.id === this.filtersModel.ownedBy);
|
||||
}
|
||||
|
||||
if (this.filters.sharedWith) {
|
||||
if (this.filtersModel.sharedWith) {
|
||||
matches =
|
||||
matches &&
|
||||
!!(
|
||||
resource.sharedWith &&
|
||||
resource.sharedWith.find((sharee) => sharee.id === this.filters.sharedWith)
|
||||
resource.sharedWith.find((sharee) => sharee.id === this.filtersModel.sharedWith)
|
||||
);
|
||||
}
|
||||
|
||||
if (this.filters.search) {
|
||||
const searchString = this.filters.search.toLowerCase();
|
||||
if (this.filtersModel.search) {
|
||||
const searchString = this.filtersModel.search.toLowerCase();
|
||||
|
||||
matches = matches && this.displayName(resource).toLowerCase().includes(searchString);
|
||||
}
|
||||
|
||||
if (this.additionalFiltersHandler) {
|
||||
matches = this.additionalFiltersHandler(resource, this.filters, matches);
|
||||
matches = this.additionalFiltersHandler(resource, this.filtersModel, matches);
|
||||
}
|
||||
|
||||
return matches;
|
||||
@@ -385,7 +394,8 @@ export default defineComponent({
|
||||
await this.initialize();
|
||||
|
||||
this.loading = false;
|
||||
this.$nextTick(this.focusSearchInput);
|
||||
await this.$nextTick();
|
||||
this.focusSearchInput();
|
||||
},
|
||||
setCurrentPage(page: number) {
|
||||
this.currentPage = page;
|
||||
@@ -394,8 +404,8 @@ export default defineComponent({
|
||||
this.rowsPerPage = rowsPerPage;
|
||||
},
|
||||
resetFilters() {
|
||||
Object.keys(this.filters).forEach((key) => {
|
||||
this.filters[key] = Array.isArray(this.filters[key]) ? [] : '';
|
||||
Object.keys(this.filtersModel).forEach((key) => {
|
||||
this.filtersModel[key] = Array.isArray(this.filtersModel[key]) ? [] : '';
|
||||
});
|
||||
|
||||
this.resettingFilters = true;
|
||||
@@ -410,7 +420,7 @@ export default defineComponent({
|
||||
this.isOwnerSubview = active;
|
||||
},
|
||||
getTelemetrySubview(): string {
|
||||
return this.$locale.baseText(
|
||||
return this.i18n.baseText(
|
||||
`${this.resourceKey as IResourceKeyType}.menu.${this.isOwnerSubview ? 'my' : 'all'}`,
|
||||
);
|
||||
},
|
||||
@@ -436,7 +446,7 @@ export default defineComponent({
|
||||
setTimeout(() => (this.resettingFilters = false), 1500);
|
||||
}
|
||||
|
||||
const filters = this.filters as Record<string, string[] | string | boolean>;
|
||||
const filters = this.filtersModel as Record<string, string[] | string | boolean>;
|
||||
const filtersSet: string[] = [];
|
||||
const filterValues: Array<string[] | string | boolean | null> = [];
|
||||
|
||||
@@ -458,6 +468,10 @@ export default defineComponent({
|
||||
onUpdateFiltersLength(length: number) {
|
||||
this.hasFilters = length > 0;
|
||||
},
|
||||
onSearch(search: string) {
|
||||
this.filtersModel.search = search;
|
||||
this.$emit('update:filters', this.filtersModel);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
void this.onMounted();
|
||||
@@ -466,16 +480,19 @@ export default defineComponent({
|
||||
isOwnerSubview() {
|
||||
this.sendSubviewTelemetry();
|
||||
},
|
||||
'filters.ownedBy'(value) {
|
||||
filters(value) {
|
||||
this.filtersModel = value;
|
||||
},
|
||||
'filtersModel.ownedBy'(value) {
|
||||
if (value) {
|
||||
this.setOwnerSubview(false);
|
||||
}
|
||||
this.sendFiltersTelemetry('ownedBy');
|
||||
},
|
||||
'filters.sharedWith'() {
|
||||
'filtersModel.sharedWith'() {
|
||||
this.sendFiltersTelemetry('sharedWith');
|
||||
},
|
||||
'filters.search'() {
|
||||
'filtersModel.search'() {
|
||||
void this.callDebounced(
|
||||
'sendFiltersTelemetry',
|
||||
{ debounceTime: 1000, trailing: true },
|
||||
|
||||
Reference in New Issue
Block a user