mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 10:02:05 +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
@@ -13,7 +13,7 @@
|
||||
size="small"
|
||||
underline
|
||||
bold
|
||||
@click="onTogglePinData({ source: 'banner-link' })"
|
||||
@click.stop="onTogglePinData({ source: 'banner-link' })"
|
||||
>
|
||||
{{ $locale.baseText('runData.pindata.unpin') }}
|
||||
</n8n-link>
|
||||
@@ -53,10 +53,10 @@
|
||||
((jsonData && jsonData.length > 0) || (binaryData && binaryData.length > 0)) &&
|
||||
!editMode.enabled
|
||||
"
|
||||
:value="displayMode"
|
||||
:modelValue="displayMode"
|
||||
:options="buttons"
|
||||
@input="onDisplayModeChange"
|
||||
data-test-id="ndv-run-data-display-mode"
|
||||
@update:modelValue="onDisplayModeChange"
|
||||
/>
|
||||
<n8n-icon-button
|
||||
v-if="canPinData && !isReadOnlyRoute && !readOnlyEnv"
|
||||
@@ -74,8 +74,11 @@
|
||||
placement="bottom-end"
|
||||
v-if="canPinData && jsonData && jsonData.length > 0"
|
||||
v-show="!editMode.enabled"
|
||||
:value="pinDataDiscoveryTooltipVisible"
|
||||
:manual="isControlledPinDataTooltip"
|
||||
:visible="
|
||||
isControlledPinDataTooltip
|
||||
? isControlledPinDataTooltip && pinDataDiscoveryTooltipVisible
|
||||
: undefined
|
||||
"
|
||||
>
|
||||
<template #content v-if="!isControlledPinDataTooltip">
|
||||
<div :class="$style.tooltipContainer">
|
||||
@@ -134,10 +137,10 @@
|
||||
>
|
||||
<n8n-select
|
||||
size="small"
|
||||
:value="runIndex"
|
||||
@input="onRunIndexChange"
|
||||
:modelValue="runIndex"
|
||||
@update:modelValue="onRunIndexChange"
|
||||
@click.stop
|
||||
popper-append-to-body
|
||||
teleported
|
||||
>
|
||||
<template #prepend>{{ $locale.baseText('ndv.output.run') }}</template>
|
||||
<n8n-option
|
||||
@@ -148,20 +151,17 @@
|
||||
></n8n-option>
|
||||
</n8n-select>
|
||||
|
||||
<n8n-tooltip
|
||||
placement="right"
|
||||
v-if="canLinkRuns"
|
||||
:content="$locale.baseText(linkedRuns ? 'runData.unlinking.hint' : 'runData.linking.hint')"
|
||||
>
|
||||
<n8n-tooltip placement="right" v-if="canLinkRuns">
|
||||
<template #content>
|
||||
{{ $locale.baseText(linkedRuns ? 'runData.unlinking.hint' : 'runData.linking.hint') }}
|
||||
</template>
|
||||
<n8n-icon-button
|
||||
v-if="linkedRuns"
|
||||
icon="unlink"
|
||||
:icon="linkedRuns ? 'unlink' : 'link'"
|
||||
text
|
||||
type="tertiary"
|
||||
size="small"
|
||||
@click="unlinkRun"
|
||||
@click="toggleLinkRuns"
|
||||
/>
|
||||
<n8n-icon-button v-else icon="link" text type="tertiary" size="small" @click="linkRun" />
|
||||
</n8n-tooltip>
|
||||
|
||||
<slot name="run-info"></slot>
|
||||
@@ -172,7 +172,11 @@
|
||||
:class="$style.tabs"
|
||||
data-test-id="branches"
|
||||
>
|
||||
<n8n-tabs :value="currentOutputIndex" @input="onBranchChange" :options="branches" />
|
||||
<n8n-tabs
|
||||
:modelValue="currentOutputIndex"
|
||||
:options="branches"
|
||||
@update:modelValue="onBranchChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -196,9 +200,9 @@
|
||||
<div v-else-if="editMode.enabled" :class="$style.editMode">
|
||||
<div :class="[$style.editModeBody, 'ignore-key-press']">
|
||||
<code-node-editor
|
||||
:value="editMode.value"
|
||||
:modelValue="editMode.value"
|
||||
language="json"
|
||||
@valueChanged="ndvStore.setOutputPanelEditModeValue($event)"
|
||||
@update:modelValue="ndvStore.setOutputPanelEditModeValue($event)"
|
||||
/>
|
||||
</div>
|
||||
<div :class="$style.editModeFooter">
|
||||
@@ -300,49 +304,51 @@
|
||||
</n8n-text>
|
||||
</div>
|
||||
|
||||
<run-data-table
|
||||
v-else-if="hasNodeRun && displayMode === 'table'"
|
||||
:node="node"
|
||||
:inputData="inputData"
|
||||
:mappingEnabled="mappingEnabled"
|
||||
:distanceFromActive="distanceFromActive"
|
||||
:runIndex="runIndex"
|
||||
:pageOffset="currentPageOffset"
|
||||
:totalRuns="maxRunIndex"
|
||||
:hasDefaultHoverState="paneType === 'input'"
|
||||
@mounted="$emit('tableMounted', $event)"
|
||||
@activeRowChanged="onItemHover"
|
||||
@displayModeChange="onDisplayModeChange"
|
||||
/>
|
||||
<Suspense v-else-if="hasNodeRun && displayMode === 'table'">
|
||||
<run-data-table
|
||||
:node="node"
|
||||
:inputData="inputData"
|
||||
:mappingEnabled="mappingEnabled"
|
||||
:distanceFromActive="distanceFromActive"
|
||||
:runIndex="runIndex"
|
||||
:pageOffset="currentPageOffset"
|
||||
:totalRuns="maxRunIndex"
|
||||
:hasDefaultHoverState="paneType === 'input'"
|
||||
@mounted="$emit('tableMounted', $event)"
|
||||
@activeRowChanged="onItemHover"
|
||||
@displayModeChange="onDisplayModeChange"
|
||||
/>
|
||||
</Suspense>
|
||||
|
||||
<run-data-json
|
||||
v-else-if="hasNodeRun && displayMode === 'json'"
|
||||
:paneType="paneType"
|
||||
:editMode="editMode"
|
||||
:sessioId="sessionId"
|
||||
:node="node"
|
||||
:inputData="inputData"
|
||||
:mappingEnabled="mappingEnabled"
|
||||
:distanceFromActive="distanceFromActive"
|
||||
:runIndex="runIndex"
|
||||
:totalRuns="maxRunIndex"
|
||||
/>
|
||||
<Suspense v-else-if="hasNodeRun && displayMode === 'json'">
|
||||
<run-data-json
|
||||
:paneType="paneType"
|
||||
:editMode="editMode"
|
||||
:sessioId="sessionId"
|
||||
:node="node"
|
||||
:inputData="inputData"
|
||||
:mappingEnabled="mappingEnabled"
|
||||
:distanceFromActive="distanceFromActive"
|
||||
:runIndex="runIndex"
|
||||
:totalRuns="maxRunIndex"
|
||||
/>
|
||||
</Suspense>
|
||||
|
||||
<run-data-html
|
||||
v-else-if="hasNodeRun && isPaneTypeOutput && displayMode === 'html'"
|
||||
:inputData="inputData"
|
||||
/>
|
||||
<Suspense v-else-if="hasNodeRun && isPaneTypeOutput && displayMode === 'html'">
|
||||
<run-data-html :inputData="inputData" />
|
||||
</Suspense>
|
||||
|
||||
<run-data-schema
|
||||
v-else-if="hasNodeRun && isSchemaView"
|
||||
:data="jsonData"
|
||||
:mappingEnabled="mappingEnabled"
|
||||
:distanceFromActive="distanceFromActive"
|
||||
:node="node"
|
||||
:paneType="paneType"
|
||||
:runIndex="runIndex"
|
||||
:totalRuns="maxRunIndex"
|
||||
/>
|
||||
<Suspense v-else-if="hasNodeRun && isSchemaView">
|
||||
<run-data-schema
|
||||
:data="jsonData"
|
||||
:mappingEnabled="mappingEnabled"
|
||||
:distanceFromActive="distanceFromActive"
|
||||
:node="node"
|
||||
:paneType="paneType"
|
||||
:runIndex="runIndex"
|
||||
:totalRuns="maxRunIndex"
|
||||
/>
|
||||
</Suspense>
|
||||
|
||||
<div v-else-if="displayMode === 'binary' && binaryData.length === 0" :class="$style.center">
|
||||
<n8n-text align="center" tag="div">{{
|
||||
@@ -446,17 +452,22 @@
|
||||
<el-pagination
|
||||
background
|
||||
:hide-on-single-page="true"
|
||||
:current-page.sync="currentPage"
|
||||
:current-page="currentPage"
|
||||
:pager-count="5"
|
||||
:page-size="pageSize"
|
||||
layout="prev, pager, next"
|
||||
@current-change="onCurrentPageChange"
|
||||
@update:current-page="onCurrentPageChange"
|
||||
:total="dataCount"
|
||||
>
|
||||
</el-pagination>
|
||||
|
||||
<div :class="$style.pageSizeSelector">
|
||||
<n8n-select size="mini" :value="pageSize" @input="onPageSizeChange" popper-append-to-body>
|
||||
<n8n-select
|
||||
size="mini"
|
||||
:modelValue="pageSize"
|
||||
@update:modelValue="onPageSizeChange"
|
||||
teleported
|
||||
>
|
||||
<template #prepend>{{ $locale.baseText('ndv.output.pageSize') }}</template>
|
||||
<n8n-option v-for="size in pageSizes" :key="size" :label="size" :value="size">
|
||||
</n8n-option>
|
||||
@@ -469,7 +480,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { defineAsyncComponent, defineComponent } from 'vue';
|
||||
import type { PropType } from 'vue';
|
||||
import { mapStores } from 'pinia';
|
||||
import { saveAs } from 'file-saver';
|
||||
@@ -519,10 +530,10 @@ import { useNDVStore } from '@/stores/ndv.store';
|
||||
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
|
||||
import { useToast } from '@/composables';
|
||||
|
||||
const RunDataTable = async () => import('@/components/RunDataTable.vue');
|
||||
const RunDataJson = async () => import('@/components/RunDataJson.vue');
|
||||
const RunDataSchema = async () => import('@/components/RunDataSchema.vue');
|
||||
const RunDataHtml = async () => import('@/components/RunDataHtml.vue');
|
||||
const RunDataTable = defineAsyncComponent(async () => import('@/components/RunDataTable.vue'));
|
||||
const RunDataJson = defineAsyncComponent(async () => import('@/components/RunDataJson.vue'));
|
||||
const RunDataSchema = defineAsyncComponent(async () => import('@/components/RunDataSchema.vue'));
|
||||
const RunDataHtml = defineAsyncComponent(async () => import('@/components/RunDataHtml.vue'));
|
||||
|
||||
export type EnterEditModeArgs = {
|
||||
origin: 'editIconButton' | 'insertTestDataLink';
|
||||
@@ -629,7 +640,7 @@ export default defineComponent({
|
||||
|
||||
if (this.paneType === 'output') this.setDisplayMode();
|
||||
},
|
||||
destroyed() {
|
||||
beforeUnmount() {
|
||||
this.hidePinDataDiscoveryTooltip();
|
||||
dataPinningEventBus.off('data-pinning-error', this.onDataPinningError);
|
||||
dataPinningEventBus.off('data-unpinning', this.onDataUnpinning);
|
||||
@@ -1123,13 +1134,17 @@ export default defineComponent({
|
||||
type: 'showTooMuchData',
|
||||
});
|
||||
},
|
||||
toggleLinkRuns() {
|
||||
this.linkedRuns ? this.unlinkRun() : this.linkRun();
|
||||
},
|
||||
linkRun() {
|
||||
this.$emit('linkRun');
|
||||
},
|
||||
unlinkRun() {
|
||||
this.$emit('unlinkRun');
|
||||
},
|
||||
onCurrentPageChange() {
|
||||
onCurrentPageChange(value) {
|
||||
this.currentPage = value;
|
||||
this.$telemetry.track('User changed ndv page', {
|
||||
node_type: this.activeNode?.type,
|
||||
workflow_id: this.workflowsStore.workflowId,
|
||||
|
||||
Reference in New Issue
Block a user