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
2023-07-28 10:51:07 +03:00
committed by GitHub
parent d050b99fb2
commit dd6a4c956a
459 changed files with 8815 additions and 9913 deletions

View File

@@ -1,7 +1,6 @@
import Vue from 'vue';
import type { PluginObject } from 'vue';
import type { Plugin } from 'vue';
import axios from 'axios';
import VueI18n from 'vue-i18n';
import { createI18n } from 'vue-i18n';
import type { INodeTranslationHeaders } from '@/Interface';
import {
deriveMiddleKey,
@@ -15,19 +14,17 @@ import englishBaseText from './locales/en.json';
import { useUIStore } from '@/stores/ui.store';
import { useNDVStore } from '@/stores/ndv.store';
import type { INodeProperties, INodePropertyCollection, INodePropertyOptions } from 'n8n-workflow';
import { useRootStore } from '@/stores';
Vue.use(VueI18n);
export const i18nInstance = new VueI18n({
export const i18nInstance = createI18n({
locale: 'en',
fallbackLocale: 'en',
messages: { en: englishBaseText },
silentTranslationWarn: true,
});
export class I18nClass {
private get i18n(): VueI18n {
return i18nInstance;
private get i18n() {
return i18nInstance.global;
}
// ----------------------------------
@@ -315,6 +312,19 @@ export class I18nClass {
};
}
localizeNodeName(nodeName: string, type: string) {
const isEnglishLocale = useRootStore().defaultLocale === 'en';
if (isEnglishLocale) return nodeName;
const nodeTypeName = this.shortNodeType(type);
return this.headerText({
key: `headers.${nodeTypeName}.displayName`,
fallback: nodeName,
});
}
rootVars: Record<string, string | undefined> = {
$binary: this.baseText('codeNodeEditor.completer.binary'),
$execution: this.baseText('codeNodeEditor.completer.$execution'),
@@ -500,13 +510,13 @@ export class I18nClass {
const loadedLanguages = ['en'];
function setLanguage(language: string) {
i18nInstance.locale = language;
async function setLanguage(language: string) {
i18nInstance.global.locale = language as 'en';
axios.defaults.headers.common['Accept-Language'] = language;
document!.querySelector('html')!.setAttribute('lang', language);
// update n8n design system and element ui
locale.use(language);
await locale.use(language);
return language;
}
@@ -514,27 +524,25 @@ function setLanguage(language: string) {
export async function loadLanguage(language?: string) {
if (!language) return;
if (i18nInstance.locale === language) {
setLanguage(language);
return;
if (i18nInstance.global.locale === language) {
return setLanguage(language);
}
if (loadedLanguages.includes(language)) {
setLanguage(language);
return;
return setLanguage(language);
}
const { numberFormats, ...rest } = (await import(`./locales/${language}.json`)).default;
i18nInstance.setLocaleMessage(language, rest);
i18nInstance.global.setLocaleMessage(language, rest);
if (numberFormats) {
i18nInstance.setNumberFormat(language, numberFormats);
i18nInstance.global.setNumberFormat(language, numberFormats);
}
loadedLanguages.push(language);
setLanguage(language);
return setLanguage(language);
}
/**
@@ -544,7 +552,7 @@ export function addNodeTranslation(
nodeTranslation: { [nodeType: string]: object },
language: string,
) {
const oldNodesBase = i18nInstance.messages[language]['n8n-nodes-base'] || {};
const oldNodesBase = i18nInstance.global.messages[language]['n8n-nodes-base'] || {};
const updatedNodes = {
// @ts-ignore
@@ -556,9 +564,9 @@ export function addNodeTranslation(
'n8n-nodes-base': Object.assign(oldNodesBase, { nodes: updatedNodes }),
};
i18nInstance.setLocaleMessage(
i18nInstance.global.setLocaleMessage(
language,
Object.assign(i18nInstance.messages[language], newNodesBase),
Object.assign(i18nInstance.global.messages[language], newNodesBase),
);
}
@@ -569,7 +577,7 @@ export function addCredentialTranslation(
nodeCredentialTranslation: { [credentialType: string]: object },
language: string,
) {
const oldNodesBase = i18nInstance.messages[language]['n8n-nodes-base'] || {};
const oldNodesBase = i18nInstance.global.messages[language]['n8n-nodes-base'] || {};
const updatedCredentials = {
// @ts-ignore
@@ -581,9 +589,9 @@ export function addCredentialTranslation(
'n8n-nodes-base': Object.assign(oldNodesBase, { credentials: updatedCredentials }),
};
i18nInstance.setLocaleMessage(
i18nInstance.global.setLocaleMessage(
language,
Object.assign(i18nInstance.messages[language], newNodesBase),
Object.assign(i18nInstance.global.messages[language], newNodesBase),
);
}
@@ -591,32 +599,23 @@ export function addCredentialTranslation(
* Add a node's header strings to the i18n instance's `messages` object.
*/
export function addHeaders(headers: INodeTranslationHeaders, language: string) {
i18nInstance.setLocaleMessage(
i18nInstance.global.setLocaleMessage(
language,
Object.assign(i18nInstance.messages[language], { headers }),
Object.assign(i18nInstance.global.messages[language], { headers }),
);
}
export const i18n: I18nClass = new I18nClass();
export const I18nPlugin: PluginObject<{}> = {
install(app): void {
locale.use('en');
locale.i18n((key: string, options?: { interpolate: object }) =>
i18nInstance.t(key, options && options.interpolate),
export const I18nPlugin: Plugin<{}> = {
async install(app) {
locale.i18n((key: string, options?: { interpolate: Record<string, unknown> }) =>
i18nInstance.global.t(key, options?.interpolate || {}),
);
Object.defineProperty(app, '$locale', {
get() {
return i18n;
},
});
app.config.globalProperties.$locale = i18n;
Object.defineProperty(app.prototype, '$locale', {
get() {
return i18n;
},
});
await locale.use('en');
},
};
@@ -624,12 +623,6 @@ export const I18nPlugin: PluginObject<{}> = {
// typings
// ----------------------------------
declare module 'vue/types/vue' {
interface Vue {
$locale: I18nClass;
}
}
type GetBaseTextKey<T> = T extends `_${string}` ? never : T;
export type BaseTextKey = GetBaseTextKey<keyof typeof englishBaseText>;

View File

@@ -1,21 +1,33 @@
{
"_reusableBaseText.cancel": "Cancel",
"_reusableBaseText.codeNodeEditor.linter.useJson": "Access the properties of an item under `.json`, e.g. `item.json`",
"_reusableBaseText.codeNodeEditor.completer.all": "Get all items",
"_reusableBaseText.codeNodeEditor.completer.first": "Get the first item",
"_reusableBaseText.codeNodeEditor.completer.last": "Get the last item",
"_reusableBaseText.codeNodeEditor.completer.itemMatching": "Get the item matching a specified input item. Pass the input item index",
"_reusableBaseText.name": "Name",
"_reusableBaseText.save": "Save",
"_reusableBaseText.dismiss": "Dismiss",
"_reusableDynamicText.readMore": "Read more",
"_reusableDynamicText.learnMore": "Learn more",
"_reusableDynamicText.moreInfo": "More info",
"_reusableDynamicText.oauth2.clientId": "Client ID",
"_reusableDynamicText.oauth2.clientSecret": "Client Secret",
"_reusableBaseText.unlimited": "Unlimited",
"_reusableBaseText.activate": "Activate",
"_reusableBaseText.error": "Error",
"_reusableBaseText": {
"cancel": "Cancel",
"codeNodeEditor": {
"linter": {
"useJson": "Access the properties of an item under `.json`, e.g. `item.json`"
},
"completer": {
"all": "Get all items",
"first": "Get the first item",
"last": "Get the last item",
"itemMatching": "Get the item matching a specified input item. Pass the input item index"
}
},
"name": "Name",
"save": "Save",
"dismiss": "Dismiss",
"unlimited": "Unlimited",
"activate": "Activate",
"error": "Error"
},
"_reusableDynamicText": {
"readMore": "Read more",
"learnMore": "Learn more",
"moreInfo": "More info",
"oauth2": {
"clientId": "Client ID",
"clientSecret": "Client Secret"
}
},
"generic.any": "Any",
"generic.cancel": "Cancel",
"generic.confirm": "Confirm",
@@ -398,9 +410,9 @@
"dataMapping.dragFromPreviousHint": "Map data from previous nodes to <b>{name}</b> by first clicking this button",
"dataMapping.success.title": "You just mapped some data!",
"dataMapping.success.moreInfo": "Check out our <a href=\"https://docs.n8n.io/data/data-mapping\" target=\"_blank\">docs</a> for more details on mapping data in n8n",
"dataMapping.tableHint": "<img src='/static/data-mapping-gif.gif'/> Drag a column onto <b>{name}</b> to map it",
"dataMapping.jsonHint": "<img src='/static/json-mapping-gif.gif'/> Drag a JSON key onto <b>{name}</b> to map data",
"dataMapping.schemaHint": "<img src='/static/schema-mapping-gif.gif'/> Drag a datapill onto <b>{name}</b> to map data",
"dataMapping.tableHint": "<img src='/static/data-mapping-gif.gif'/><br/> Drag a column onto <b>{name}</b> to map it",
"dataMapping.jsonHint": "<img src='/static/json-mapping-gif.gif'/><br/> Drag a JSON key onto <b>{name}</b> to map data",
"dataMapping.schemaHint": "<img src='/static/schema-mapping-gif.gif'/><br/> Drag a datapill onto <b>{name}</b> to map data",
"dataMapping.tableView.tableColumnsExceeded": "Some columns are hidden",
"dataMapping.tableView.tableColumnsExceeded.tooltip": "Your data has more than {columnLimit} columns so some are hidden. Switch to {link} to see all data.",
"dataMapping.tableView.tableColumnsExceeded.tooltip.link": "JSON view",
@@ -541,8 +553,8 @@
"executionsFilter.customData.inputTooltip.link": "View plans",
"executionsFilter.customData.docsTooltip": "Filter executions by data that you have explicitly saved in them (by calling $execution.customData.set(key, value)). {link}",
"executionsFilter.customData.docsTooltip.link": "More info",
"expressionEdit.anythingInside": "Anything inside",
"expressionEdit.isJavaScript": "is JavaScript.",
"expressionEdit.anythingInside": "Anything inside ",
"expressionEdit.isJavaScript": " is JavaScript.",
"expressionEdit.learnMore": "Learn more",
"expressionEdit.editExpression": "Edit Expression",
"expressionEdit.expression": "Expression",
@@ -914,8 +926,8 @@
"openWorkflow.workflowImportError": "Could not import workflow",
"openWorkflow.workflowNotFoundError": "Could not find workflow",
"parameterInput.expressionResult": "e.g. {result}",
"parameterInput.anythingInside": "Anything inside",
"parameterInput.isJavaScript": "is JavaScript.",
"parameterInput.anythingInside": "Anything inside ",
"parameterInput.isJavaScript": " is JavaScript.",
"parameterInput.learnMore": "Learn more",
"parameterInput.resultForItem": "Result for Item",
"parameterInput.emptyString": "[empty]",
@@ -1151,7 +1163,7 @@
"settings.communityNodes.installModal.description": "Find community nodes to add on the npm public registry.",
"settings.communityNodes.browseButton.label": "Browse",
"settings.communityNodes.installModal.packageName.label": "npm Package Name",
"settings.communityNodes.installModal.packageName.tooltip": "<img src='/static/community_package_tooltip_img.png'/><p>This is the title of the package on <a href='{npmURL}'>npmjs.com</a></p><p>Install a specific version by adding it after @, e.g. <code>package-name@0.15.0</code></p>",
"settings.communityNodes.installModal.packageName.tooltip": "<img src='/static/community_package_tooltip_img.png'/><p>This is the title of the package on <a href='{npmURL}'>npmjs.com</a></p><p>Install a specific version by adding it after {'@'}, e.g. <code>package-name{'@'}0.15.0</code></p>",
"settings.communityNodes.installModal.packageName.placeholder": "e.g. n8n-nodes-chatwork",
"settings.communityNodes.installModal.checkbox.label": "I understand the risks of installing unverified code from a public source.",
"settings.communityNodes.installModal.installButton.label": "Install",
@@ -1278,7 +1290,7 @@
"settings.log-streaming.addDestination": "Add new destination",
"settings.log-streaming.destinations": "Log destinations",
"settings.api.trial.upgradePlan.title": "Upgrade to use API",
"settings.api.trial.upgradePlan.description": "To prevent abuse, we limit API access to your workspace during your trial. If this is hindering your evaluation of n8n, please contact <a href=\"mailto:support@n8n.io\">support@n8n.io</a>",
"settings.api.trial.upgradePlan.description": "To prevent abuse, we limit API access to your workspace during your trial. If this is hindering your evaluation of n8n, please contact <a href=\"mailto:support{'@'}n8n.io\">support{'@'}n8n.io</a>",
"settings.api.trial.upgradePlan.cta": "Upgrade plan",
"settings.api.create.description": "Control n8n programmatically using the <a href=\"https://docs.n8n.io/api\" target=\"_blank\">n8n API</a>",
"settings.api.create.button": "Create an API Key",
@@ -1330,7 +1342,7 @@
"settings.sourceControl.description.link": "More info",
"settings.sourceControl.gitConfig": "Git configuration",
"settings.sourceControl.repoUrl": "Git repository URL (SSH)",
"settings.sourceControl.repoUrlPlaceholder": "e.g. git@github.com:my-team/my-repository",
"settings.sourceControl.repoUrlPlaceholder": "e.g. git{'@'}github.com:my-team/my-repository",
"settings.sourceControl.repoUrlInvalid": "The Git repository URL is not valid",
"settings.sourceControl.authorName": "Commit author name",
"settings.sourceControl.authorEmail": "Commit author email",