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
@@ -5,7 +5,7 @@
|
||||
:data-test-id="`resource-locator-${parameter.name}`"
|
||||
>
|
||||
<resource-locator-dropdown
|
||||
:value="value ? value.value : ''"
|
||||
:modelValue="modelValue ? modelValue.value : ''"
|
||||
:show="showResourceDropdown"
|
||||
:filterable="isSearchable"
|
||||
:filterRequired="requiresSearchFilter"
|
||||
@@ -16,7 +16,7 @@
|
||||
:errorView="currentQueryError"
|
||||
:width="width"
|
||||
:event-bus="eventBus"
|
||||
@input="onListItemSelected"
|
||||
@update:modelValue="onListItemSelected"
|
||||
@hide="onDropdownHide"
|
||||
@filter="onSearchFilter"
|
||||
@loadMore="loadResourcesDebounced"
|
||||
@@ -45,18 +45,17 @@
|
||||
>
|
||||
<div v-if="hasMultipleModes" :class="$style.modeSelector">
|
||||
<n8n-select
|
||||
:value="selectedMode"
|
||||
:modelValue="selectedMode"
|
||||
filterable
|
||||
:size="inputSize"
|
||||
:disabled="isReadOnly"
|
||||
@change="onModeSelected"
|
||||
@update:modelValue="onModeSelected"
|
||||
:placeholder="$locale.baseText('resourceLocator.modeSelector.placeholder')"
|
||||
data-test-id="rlc-mode-selector"
|
||||
>
|
||||
<n8n-option
|
||||
v-for="mode in parameter.modes"
|
||||
:key="mode.name"
|
||||
:label="$locale.baseText(getModeLabel(mode.name)) || mode.displayName"
|
||||
:value="mode.name"
|
||||
:disabled="isValueExpression && mode.name === 'list'"
|
||||
:title="
|
||||
@@ -65,6 +64,7 @@
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{ getModeLabel(mode.name) || mode.displayName }}
|
||||
</n8n-option>
|
||||
</n8n-select>
|
||||
</div>
|
||||
@@ -88,10 +88,10 @@
|
||||
>
|
||||
<ExpressionParameterInput
|
||||
v-if="isValueExpression || forceShowExpression"
|
||||
:value="expressionDisplayValue"
|
||||
:modelValue="expressionDisplayValue"
|
||||
:path="path"
|
||||
isForRecordLocator
|
||||
@valueChanged="onInputChange"
|
||||
@update:modelValue="onInputChange"
|
||||
@modalOpenerClick="$emit('modalOpenerClick')"
|
||||
ref="input"
|
||||
/>
|
||||
@@ -99,7 +99,7 @@
|
||||
v-else
|
||||
:class="{ [$style.selectInput]: isListMode }"
|
||||
:size="inputSize"
|
||||
:value="valueToDisplay"
|
||||
:modelValue="valueToDisplay"
|
||||
:disabled="isReadOnly"
|
||||
:readonly="isListMode"
|
||||
:title="displayTitle"
|
||||
@@ -107,7 +107,7 @@
|
||||
type="text"
|
||||
ref="input"
|
||||
data-test-id="rlc-input"
|
||||
@input="onInputChange"
|
||||
@update:modelValue="onInputChange"
|
||||
@focus="onInputFocus"
|
||||
@blur="onInputBlur"
|
||||
>
|
||||
@@ -200,7 +200,7 @@ export default defineComponent({
|
||||
type: Object as PropType<INodeProperties>,
|
||||
required: true,
|
||||
},
|
||||
value: {
|
||||
modelValue: {
|
||||
type: [Object, String] as PropType<
|
||||
INodeParameterResourceLocator | NodeParameterValue | undefined
|
||||
>,
|
||||
@@ -281,16 +281,16 @@ export default defineComponent({
|
||||
return getAppNameFromNodeName(nodeType?.displayName || '');
|
||||
},
|
||||
selectedMode(): string {
|
||||
if (typeof this.value !== 'object') {
|
||||
if (typeof this.modelValue !== 'object') {
|
||||
// legacy mode
|
||||
return '';
|
||||
}
|
||||
|
||||
if (!this.value) {
|
||||
if (!this.modelValue) {
|
||||
return this.parameter.modes ? this.parameter.modes[0].name : '';
|
||||
}
|
||||
|
||||
return this.value.mode;
|
||||
return this.modelValue.mode;
|
||||
},
|
||||
isListMode(): boolean {
|
||||
return this.selectedMode === 'list';
|
||||
@@ -335,19 +335,19 @@ export default defineComponent({
|
||||
return hasOnlyListMode(this.parameter);
|
||||
},
|
||||
valueToDisplay(): NodeParameterValue {
|
||||
if (typeof this.value !== 'object') {
|
||||
return this.value;
|
||||
if (typeof this.modelValue !== 'object') {
|
||||
return this.modelValue;
|
||||
}
|
||||
|
||||
if (this.isListMode) {
|
||||
return this.value ? this.value.cachedResultName || this.value.value : '';
|
||||
return this.modelValue ? this.modelValue.cachedResultName || this.modelValue.value : '';
|
||||
}
|
||||
|
||||
return this.value ? this.value.value : '';
|
||||
return this.modelValue ? this.modelValue.value : '';
|
||||
},
|
||||
urlValue(): string | null {
|
||||
if (this.isListMode && typeof this.value === 'object') {
|
||||
return (this.value && this.value.cachedResultUrl) || null;
|
||||
if (this.isListMode && typeof this.modelValue === 'object') {
|
||||
return (this.modelValue && this.modelValue.cachedResultUrl) || null;
|
||||
}
|
||||
|
||||
if (this.selectedMode === 'url') {
|
||||
@@ -454,10 +454,10 @@ export default defineComponent({
|
||||
if (
|
||||
mode.extractValue &&
|
||||
mode.extractValue.regex &&
|
||||
isResourceLocatorValue(this.value) &&
|
||||
this.value.__regex !== mode.extractValue.regex
|
||||
isResourceLocatorValue(this.modelValue) &&
|
||||
this.modelValue.__regex !== mode.extractValue.regex
|
||||
) {
|
||||
this.$emit('input', { ...this.value, __regex: mode.extractValue.regex });
|
||||
this.$emit('update:modelValue', { ...this.modelValue, __regex: mode.extractValue.regex });
|
||||
}
|
||||
},
|
||||
dependentParametersValues(currentValue, oldValue) {
|
||||
@@ -465,12 +465,12 @@ export default defineComponent({
|
||||
// Reset value if dependent parameters change
|
||||
if (
|
||||
isUpdated &&
|
||||
this.value &&
|
||||
isResourceLocatorValue(this.value) &&
|
||||
this.value.value !== ''
|
||||
this.modelValue &&
|
||||
isResourceLocatorValue(this.modelValue) &&
|
||||
this.modelValue.value !== ''
|
||||
) {
|
||||
this.$emit('input', {
|
||||
...this.value,
|
||||
this.$emit('update:modelValue', {
|
||||
...this.modelValue,
|
||||
cachedResultName: '',
|
||||
cachedResultUrl: '',
|
||||
value: '',
|
||||
@@ -491,7 +491,7 @@ export default defineComponent({
|
||||
this.setWidth();
|
||||
}, 0);
|
||||
},
|
||||
beforeDestroy() {
|
||||
beforeUnmount() {
|
||||
this.eventBus.off('refreshList', this.refreshList);
|
||||
window.removeEventListener('resize', this.setWidth);
|
||||
},
|
||||
@@ -590,17 +590,26 @@ export default defineComponent({
|
||||
params.cachedResultUrl = resource.url;
|
||||
}
|
||||
}
|
||||
this.$emit('input', params);
|
||||
this.$emit('update:modelValue', params);
|
||||
},
|
||||
onModeSelected(value: string): void {
|
||||
if (typeof this.value !== 'object') {
|
||||
this.$emit('input', { __rl: true, value: this.value, mode: value });
|
||||
} else if (value === 'url' && this.value && this.value.cachedResultUrl) {
|
||||
this.$emit('input', { __rl: true, mode: value, value: this.value.cachedResultUrl });
|
||||
} else if (value === 'id' && this.selectedMode === 'list' && this.value && this.value.value) {
|
||||
this.$emit('input', { __rl: true, mode: value, value: this.value.value });
|
||||
if (typeof this.modelValue !== 'object') {
|
||||
this.$emit('update:modelValue', { __rl: true, value: this.modelValue, mode: value });
|
||||
} else if (value === 'url' && this.modelValue && this.modelValue.cachedResultUrl) {
|
||||
this.$emit('update:modelValue', {
|
||||
__rl: true,
|
||||
mode: value,
|
||||
value: this.modelValue.cachedResultUrl,
|
||||
});
|
||||
} else if (
|
||||
value === 'id' &&
|
||||
this.selectedMode === 'list' &&
|
||||
this.modelValue &&
|
||||
this.modelValue.value
|
||||
) {
|
||||
this.$emit('update:modelValue', { __rl: true, mode: value, value: this.modelValue.value });
|
||||
} else {
|
||||
this.$emit('input', { __rl: true, mode: value, value: '' });
|
||||
this.$emit('update:modelValue', { __rl: true, mode: value, value: '' });
|
||||
}
|
||||
|
||||
this.trackEvent('User changed resource locator mode', { mode: value });
|
||||
@@ -728,9 +737,10 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
if (mode) {
|
||||
this.$emit('input', {
|
||||
this.$emit('update:modelValue', {
|
||||
__rl: true,
|
||||
value: this.value && typeof this.value === 'object' ? this.value.value : '',
|
||||
value:
|
||||
this.modelValue && typeof this.modelValue === 'object' ? this.modelValue.value : '',
|
||||
mode: mode.name,
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user