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
GitHub
@@ -1,9 +1,3 @@
|
||||
const hasOwnProperty = Object.prototype.hasOwnProperty;
|
||||
|
||||
export function hasOwn(obj, key) {
|
||||
return hasOwnProperty.call(obj, key);
|
||||
}
|
||||
|
||||
const RE_NARGS = /(%|)\{([0-9a-zA-Z_]+)\}/g;
|
||||
/**
|
||||
* String format template
|
||||
@@ -12,34 +6,30 @@ const RE_NARGS = /(%|)\{([0-9a-zA-Z_]+)\}/g;
|
||||
* https://github.com/Matt-Esch/string-template/index.js
|
||||
*/
|
||||
export default function () {
|
||||
/**
|
||||
* template
|
||||
*
|
||||
* @param {String | Function} string
|
||||
* @param {Array} ...args
|
||||
* @return {String}
|
||||
*/
|
||||
|
||||
function template(value, ...args) {
|
||||
function template(
|
||||
value: string | ((...args: unknown[]) => string),
|
||||
...args: Array<string | object>
|
||||
) {
|
||||
if (typeof value === 'function') {
|
||||
return value(args);
|
||||
}
|
||||
const string = value;
|
||||
|
||||
const str = value;
|
||||
if (args.length === 1 && typeof args[0] === 'object') {
|
||||
args = args[0];
|
||||
args = args[0] as unknown as Array<string | object>;
|
||||
}
|
||||
|
||||
if (!args || !args.hasOwnProperty) {
|
||||
args = {};
|
||||
args = {} as unknown as Array<string | object>;
|
||||
}
|
||||
|
||||
return string.replace(RE_NARGS, (match, prefix, i, index) => {
|
||||
return str.replace(RE_NARGS, (match, prefix, i, index: number) => {
|
||||
let result;
|
||||
|
||||
if (string[index - 1] === '{' && string[index + match.length] === '}') {
|
||||
if (str[index - 1] === '{' && str[index + match.length] === '}') {
|
||||
return i;
|
||||
} else {
|
||||
result = hasOwn(args, i) ? args[i] : null;
|
||||
result = Object.hasOwn(args, i) ? args[i] : null;
|
||||
if (result === null || result === undefined) {
|
||||
return '';
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
import defaultLang from '../locale/lang/en';
|
||||
import Format from './format';
|
||||
|
||||
import ElementLocale from 'element-ui/lib/locale';
|
||||
import ElementLang from 'element-ui/lib/locale/lang/en';
|
||||
ElementLocale.use(ElementLang);
|
||||
|
||||
const format = Format();
|
||||
let lang = defaultLang;
|
||||
|
||||
let i18nHandler;
|
||||
|
||||
export const t = function (path, options) {
|
||||
if (typeof i18nHandler === 'function') {
|
||||
const value = i18nHandler.apply(this, arguments);
|
||||
if (value !== null && value !== undefined && value !== path) return String(value);
|
||||
}
|
||||
|
||||
// only support flat keys
|
||||
if (lang[path] !== undefined) {
|
||||
return format(lang[path], options);
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
export const use = function (l) {
|
||||
try {
|
||||
const ndsLang = require(`./lang/${l}`);
|
||||
lang = ndsLang.default;
|
||||
|
||||
// todo breaks select empty data
|
||||
// const elLang = require(`element-ui/lib/locale/lang/${l}`);;
|
||||
// ElementLocale.use(elLang);
|
||||
} catch (e) {}
|
||||
};
|
||||
|
||||
export const i18n = function (fn) {
|
||||
i18nHandler = fn || i18nHandler;
|
||||
};
|
||||
|
||||
export default { use, t, i18n };
|
||||
51
packages/design-system/src/locale/index.ts
Normal file
51
packages/design-system/src/locale/index.ts
Normal file
@@ -0,0 +1,51 @@
|
||||
import defaultLang from '../locale/lang/en';
|
||||
import createFormatTemplate from './format';
|
||||
import type { N8nLocale, N8nLocaleTranslateFn } from '@/types';
|
||||
|
||||
// import { ElementLocale } from 'element-plus';
|
||||
// import ElementLang from 'element-plus/lib/locale/lang/en';
|
||||
//
|
||||
// ElementLocale.use(ElementLang);
|
||||
|
||||
const format = createFormatTemplate();
|
||||
let lang = defaultLang;
|
||||
|
||||
let i18nHandler: N8nLocaleTranslateFn;
|
||||
|
||||
export const t = function (
|
||||
path: Parameters<typeof i18nHandler>[0],
|
||||
options: Parameters<typeof i18nHandler>[1],
|
||||
) {
|
||||
if (typeof i18nHandler === 'function') {
|
||||
const value = i18nHandler(path, options);
|
||||
|
||||
if (value !== null && value !== undefined && value !== path) {
|
||||
return String(value);
|
||||
}
|
||||
}
|
||||
|
||||
// only support flat keys
|
||||
if (lang[path] !== undefined) {
|
||||
return format(lang[path], options);
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
export async function use(l: string) {
|
||||
try {
|
||||
const ndsLang = (await import(`./lang/${l}.ts`)) as { default: N8nLocale };
|
||||
|
||||
lang = ndsLang.default;
|
||||
|
||||
// todo breaks select empty data
|
||||
// const elLang = require(`element-ui/lib/locale/lang/${l}`);;
|
||||
// ElementLocale.use(elLang);
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
export const i18n = function (fn: N8nLocaleTranslateFn) {
|
||||
i18nHandler = fn || i18nHandler;
|
||||
};
|
||||
|
||||
export default { use, t, i18n };
|
||||
@@ -1,3 +1,6 @@
|
||||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
import type { N8nLocale } from '@/types';
|
||||
|
||||
export default {
|
||||
'nds.auth.roles.owner': 'Owner',
|
||||
'nds.userInfo.you': '(you)',
|
||||
@@ -8,15 +11,16 @@ export default {
|
||||
'formInput.validator.fieldRequired': 'This field is required',
|
||||
'formInput.validator.minCharactersRequired': 'Must be at least {minimum} characters',
|
||||
'formInput.validator.maxCharactersRequired': 'Must be at most {maximum} characters',
|
||||
'formInput.validator.oneNumbersRequired': (config) => {
|
||||
'formInput.validator.oneNumbersRequired': (config: { minimum: number }) => {
|
||||
return `Must have at least ${config.minimum} number${config.minimum > 1 ? 's' : ''}`;
|
||||
},
|
||||
'formInput.validator.validEmailRequired': 'Must be a valid email',
|
||||
'formInput.validator.uppercaseCharsRequired': (config) =>
|
||||
'formInput.validator.uppercaseCharsRequired': (config: { minimum: number }) =>
|
||||
`Must have at least ${config.minimum} uppercase character${config.minimum > 1 ? 's' : ''}`,
|
||||
'formInput.validator.defaultPasswordRequirements':
|
||||
'8+ characters, at least 1 number and 1 capital letter',
|
||||
'sticky.markdownHint': `You can style with <a href="https://docs.n8n.io/workflows/sticky-notes/" target="_blank">Markdown</a>`,
|
||||
'tags.showMore': (count) => `+${count} more`,
|
||||
'sticky.markdownHint':
|
||||
'You can style with <a href="https://docs.n8n.io/workflows/sticky-notes/" target="_blank">Markdown</a>',
|
||||
'tags.showMore': (count: number) => `+${count} more`,
|
||||
'datatable.pageSize': 'Page size',
|
||||
};
|
||||
} as N8nLocale;
|
||||
Reference in New Issue
Block a user