mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-10 14:44:05 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

🚚 Rename $i to $locale

Browse source
This commit is contained in:
Iván Ovejero 2021-12-15 13:16:53 +01:00
parent cd1bfe5365
commit 1d991824d1
66 changed files with 711 additions and 711 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/editor-ui/src/components/About.vue
View file

@ -1,10 +1,10 @@
<template> <template>
<span> <span>
<el-dialog class="n8n-about" :visible="dialogVisible" append-to-body width="50%" :title="$i.baseText('about.aboutN8n')" :before-close="closeDialog"> <el-dialog class="n8n-about" :visible="dialogVisible" append-to-body width="50%" :title="$locale.baseText('about.aboutN8n')" :before-close="closeDialog">
<div> <div>
<el-row> <el-row>
<el-col :span="8" class="info-name"> <el-col :span="8" class="info-name">
{{ $i.baseText('about.n8nVersion') }} {{ $locale.baseText('about.n8nVersion') }}
</el-col> </el-col>
<el-col :span="16"> <el-col :span="16">
{{ versionCli }} {{ versionCli }}
@ -12,7 +12,7 @@
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="8" class="info-name"> <el-col :span="8" class="info-name">
{{ $i.baseText('about.sourceCode') }} {{ $locale.baseText('about.sourceCode') }}
</el-col> </el-col>
<el-col :span="16"> <el-col :span="16">
<a href="https://github.com/n8n-io/n8n" target="_blank">https://github.com/n8n-io/n8n</a> <a href="https://github.com/n8n-io/n8n" target="_blank">https://github.com/n8n-io/n8n</a>
@ -20,17 +20,17 @@
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="8" class="info-name"> <el-col :span="8" class="info-name">
{{ $i.baseText('about.license') }} {{ $locale.baseText('about.license') }}
</el-col> </el-col>
<el-col :span="16"> <el-col :span="16">
<a href="https://github.com/n8n-io/n8n/blob/master/packages/cli/LICENSE.md" target="_blank"> <a href="https://github.com/n8n-io/n8n/blob/master/packages/cli/LICENSE.md" target="_blank">
{{ $i.baseText('about.apacheWithCommons20Clause') }} {{ $locale.baseText('about.apacheWithCommons20Clause') }}
</a> </a>
</el-col> </el-col>
</el-row> </el-row>
<div class="action-buttons"> <div class="action-buttons">
<n8n-button @click="closeDialog" :label="$i.baseText('about.close')" /> <n8n-button @click="closeDialog" :label="$locale.baseText('about.close')" />
</div> </div>
</div> </div>
</el-dialog> </el-dialog>

8
packages/editor-ui/src/components/BinaryDataDisplay.vue
View file

@ -4,18 +4,18 @@
@click.stop="closeWindow" @click.stop="closeWindow"
size="small" size="small"
class="binary-data-window-back" class="binary-data-window-back"
:title="$i.baseText('binaryDataDisplay.backToOverviewPage')" :title="$locale.baseText('binaryDataDisplay.backToOverviewPage')"
icon="arrow-left" icon="arrow-left"
:label="$i.baseText('binaryDataDisplay.backToList')" :label="$locale.baseText('binaryDataDisplay.backToList')"
/> />
<div class="binary-data-window-wrapper"> <div class="binary-data-window-wrapper">
<div v-if="!binaryData"> <div v-if="!binaryData">
{{ $i.baseText('binaryDataDisplay.noDataFoundToDisplay') }} {{ $locale.baseText('binaryDataDisplay.noDataFoundToDisplay') }}
</div> </div>
<video v-else-if="binaryData.mimeType && binaryData.mimeType.startsWith('video/')" controls autoplay> <video v-else-if="binaryData.mimeType && binaryData.mimeType.startsWith('video/')" controls autoplay>
<source :src="'data:' + binaryData.mimeType + ';base64,' + binaryData.data" :type="binaryData.mimeType"> <source :src="'data:' + binaryData.mimeType + ';base64,' + binaryData.data" :type="binaryData.mimeType">
{{ $i.baseText('binaryDataDisplay.yourBrowserDoesNotSupport') }} {{ $locale.baseText('binaryDataDisplay.yourBrowserDoesNotSupport') }}
</video> </video>
<embed v-else :src="'data:' + binaryData.mimeType + ';base64,' + binaryData.data" class="binary-data" :class="embedClass"/> <embed v-else :src="'data:' + binaryData.mimeType + ';base64,' + binaryData.data" class="binary-data" :class="embedClass"/>
</div> </div>

4
packages/editor-ui/src/components/CodeEdit.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<div v-if="dialogVisible"> <div v-if="dialogVisible">
<el-dialog :visible="dialogVisible" append-to-body :close-on-click-modal="false" width="80%" :title="`${$i.baseText('codeEdit.edit')} ${$i.nodeText().topParameterDisplayName(parameter)}`" :before-close="closeDialog"> <el-dialog :visible="dialogVisible" append-to-body :close-on-click-modal="false" width="80%" :title="`${$locale.baseText('codeEdit.edit')} ${$locale.nodeText().topParameterDisplayName(parameter)}`" :before-close="closeDialog">
<div class="ignore-key-press"> <div class="ignore-key-press">
<n8n-input-label :label="$i.nodeText().topParameterDisplayName(parameter)"> <n8n-input-label :label="$locale.nodeText().topParameterDisplayName(parameter)">
<div :class="$style.editor" @keydown.stop> <div :class="$style.editor" @keydown.stop>
<prism-editor :lineNumbers="true" :code="value" :readonly="isReadOnly" @change="valueChanged" language="js"></prism-editor> <prism-editor :lineNumbers="true" :code="value" :readonly="isReadOnly" @change="valueChanged" language="js"></prism-editor>
</div> </div>

8
packages/editor-ui/src/components/CollectionParameter.vue
View file

@ -2,7 +2,7 @@
<div @keydown.stop class="collection-parameter"> <div @keydown.stop class="collection-parameter">
<div class="collection-parameter-wrapper"> <div class="collection-parameter-wrapper">
<div v-if="getProperties.length === 0" class="no-items-exist"> <div v-if="getProperties.length === 0" class="no-items-exist">
<n8n-text size="small">{{ $i.baseText('collectionParameter.noProperties') }}</n8n-text> <n8n-text size="small">{{ $locale.baseText('collectionParameter.noProperties') }}</n8n-text>
</div> </div>
<parameter-input-list :parameters="getProperties" :nodeValues="nodeValues" :path="path" :hideDelete="hideDelete" :indent="true" @valueChanged="valueChanged" /> <parameter-input-list :parameters="getProperties" :nodeValues="nodeValues" :path="path" :hideDelete="hideDelete" :indent="true" @valueChanged="valueChanged" />
@ -19,7 +19,7 @@
<n8n-option <n8n-option
v-for="item in parameterOptions" v-for="item in parameterOptions"
:key="item.name" :key="item.name"
:label="$i.nodeText().collectionOptionDisplayName(parameter, item)" :label="$locale.nodeText().collectionOptionDisplayName(parameter, item)"
:value="item.name"> :value="item.name">
</n8n-option> </n8n-option>
</n8n-select> </n8n-select>
@ -67,8 +67,8 @@ export default mixins(
}, },
computed: { computed: {
getPlaceholderText (): string { getPlaceholderText (): string {
const placeholder = this.$i.nodeText().placeholder(this.parameter); const placeholder = this.$locale.nodeText().placeholder(this.parameter);
return placeholder ? placeholder : this.$i.baseText('collectionParameter.choose'); return placeholder ? placeholder : this.$locale.baseText('collectionParameter.choose');
}, },
getProperties (): INodeProperties[] { getProperties (): INodeProperties[] {
const returnProperties = []; const returnProperties = [];

2
packages/editor-ui/src/components/CopyInput.vue
View file

@ -38,7 +38,7 @@ export default mixins(copyPaste, showMessage).extend({
this.copyToClipboard(this.$props.copyContent); this.copyToClipboard(this.$props.copyContent);
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('credentialsEdit.showMessage.title'), title: this.$locale.baseText('credentialsEdit.showMessage.title'),
message: this.$props.successMessage, message: this.$props.successMessage,
type: 'success', type: 'success',
}); });

36
packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
View file

@ -3,17 +3,17 @@
<banner <banner
v-show="showValidationWarning" v-show="showValidationWarning"
theme="danger" theme="danger"
:message="$i.baseText('credentialEdit.credentialConfig.pleaseCheckTheErrorsBelow')" :message="$locale.baseText('credentialEdit.credentialConfig.pleaseCheckTheErrorsBelow')"
/> />
<banner <banner
v-if="authError && !showValidationWarning" v-if="authError && !showValidationWarning"
theme="danger" theme="danger"
:message="$i.baseText('credentialEdit.credentialConfig.couldntConnectWithTheseSettings')" :message="$locale.baseText('credentialEdit.credentialConfig.couldntConnectWithTheseSettings')"
:details="authError" :details="authError"
:buttonLabel="$i.baseText('credentialEdit.credentialConfig.retry')" :buttonLabel="$locale.baseText('credentialEdit.credentialConfig.retry')"
buttonLoadingLabel="Retrying" buttonLoadingLabel="Retrying"
:buttonTitle="$i.baseText('credentialEdit.credentialConfig.retryCredentialTest')" :buttonTitle="$locale.baseText('credentialEdit.credentialConfig.retryCredentialTest')"
:buttonLoading="isRetesting" :buttonLoading="isRetesting"
@click="$emit('retest')" @click="$emit('retest')"
/> />
@ -21,37 +21,37 @@
<banner <banner
v-show="showOAuthSuccessBanner && !showValidationWarning" v-show="showOAuthSuccessBanner && !showValidationWarning"
theme="success" theme="success"
:message="$i.baseText('credentialEdit.credentialConfig.accountConnected')" :message="$locale.baseText('credentialEdit.credentialConfig.accountConnected')"
:buttonLabel="$i.baseText('credentialEdit.credentialConfig.reconnect')" :buttonLabel="$locale.baseText('credentialEdit.credentialConfig.reconnect')"
:buttonTitle="$i.baseText('credentialEdit.credentialConfig.reconnectOAuth2Credential')" :buttonTitle="$locale.baseText('credentialEdit.credentialConfig.reconnectOAuth2Credential')"
@click="$emit('oauth')" @click="$emit('oauth')"
/> />
<banner <banner
v-show="testedSuccessfully && !showValidationWarning" v-show="testedSuccessfully && !showValidationWarning"
theme="success" theme="success"
:message="$i.baseText('credentialEdit.credentialConfig.connectionTestedSuccessfully')" :message="$locale.baseText('credentialEdit.credentialConfig.connectionTestedSuccessfully')"
:buttonLabel="$i.baseText('credentialEdit.credentialConfig.retry')" :buttonLabel="$locale.baseText('credentialEdit.credentialConfig.retry')"
:buttonLoadingLabel="$i.baseText('credentialEdit.credentialConfig.retrying')" :buttonLoadingLabel="$locale.baseText('credentialEdit.credentialConfig.retrying')"
:buttonTitle="$i.baseText('credentialEdit.credentialConfig.retryCredentialTest')" :buttonTitle="$locale.baseText('credentialEdit.credentialConfig.retryCredentialTest')"
:buttonLoading="isRetesting" :buttonLoading="isRetesting"
@click="$emit('retest')" @click="$emit('retest')"
/> />
<n8n-info-tip v-if="documentationUrl && credentialProperties.length"> <n8n-info-tip v-if="documentationUrl && credentialProperties.length">
{{ $i.baseText('credentialEdit.credentialConfig.needHelpFillingOutTheseFields') }} {{ $locale.baseText('credentialEdit.credentialConfig.needHelpFillingOutTheseFields') }}
<a :href="documentationUrl" target="_blank" @click="onDocumentationUrlClick"> <a :href="documentationUrl" target="_blank" @click="onDocumentationUrlClick">
{{ $i.baseText('credentialEdit.credentialConfig.openDocs') }} {{ $locale.baseText('credentialEdit.credentialConfig.openDocs') }}
</a> </a>
</n8n-info-tip> </n8n-info-tip>
<CopyInput <CopyInput
v-if="isOAuthType && credentialProperties.length" v-if="isOAuthType && credentialProperties.length"
:label="$i.baseText('credentialEdit.credentialConfig.oAuthRedirectUrl')" :label="$locale.baseText('credentialEdit.credentialConfig.oAuthRedirectUrl')"
:copyContent="oAuthCallbackUrl" :copyContent="oAuthCallbackUrl"
:copyButtonText="$i.baseText('credentialEdit.credentialConfig.clickToCopy')" :copyButtonText="$locale.baseText('credentialEdit.credentialConfig.clickToCopy')"
:subtitle="$i.baseText('credentialEdit.credentialConfig.subtitle', { interpolate: { appName } })" :subtitle="$locale.baseText('credentialEdit.credentialConfig.subtitle', { interpolate: { appName } })"
:successMessage="$i.baseText('credentialEdit.credentialConfig.redirectUrlCopiedToClipboard')" :successMessage="$locale.baseText('credentialEdit.credentialConfig.redirectUrlCopiedToClipboard')"
/> />
<CredentialInputs <CredentialInputs
@ -143,7 +143,7 @@ export default mixins(restApi).extend({
(this.credentialType as ICredentialType).displayName, (this.credentialType as ICredentialType).displayName,
); );
return appName || this.$i.baseText('credentialEdit.credentialConfig.theServiceYouReConnectingTo'); return appName || this.$locale.baseText('credentialEdit.credentialConfig.theServiceYouReConnectingTo');
}, },
credentialTypeName(): string { credentialTypeName(): string {
return (this.credentialType as ICredentialType).name; return (this.credentialType as ICredentialType).name;

60
packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
View file

@ -25,7 +25,7 @@
<n8n-icon-button <n8n-icon-button
v-if="currentCredential" v-if="currentCredential"
size="small" size="small"
:title="$i.baseText('credentialEdit.credentialEdit.delete')" :title="$locale.baseText('credentialEdit.credentialEdit.delete')"
icon="trash" icon="trash"
type="text" type="text"
:disabled="isSaving" :disabled="isSaving"
@ -37,8 +37,8 @@
:saved="!hasUnsavedChanges && !isTesting" :saved="!hasUnsavedChanges && !isTesting"
:isSaving="isSaving || isTesting" :isSaving="isSaving || isTesting"
:savingLabel="isTesting :savingLabel="isTesting
? $i.baseText('credentialEdit.credentialEdit.testing') ? $locale.baseText('credentialEdit.credentialEdit.testing')
: $i.baseText('credentialEdit.credentialEdit.saving')" : $locale.baseText('credentialEdit.credentialEdit.saving')"
@click="saveCredential" @click="saveCredential"
/> />
</div> </div>
@ -55,10 +55,10 @@
:light="true" :light="true"
> >
<n8n-menu-item index="connection" :class="$style.credTab" <n8n-menu-item index="connection" :class="$style.credTab"
><span slot="title">{{ $i.baseText('credentialEdit.credentialEdit.connection') }}</span></n8n-menu-item ><span slot="title">{{ $locale.baseText('credentialEdit.credentialEdit.connection') }}</span></n8n-menu-item
> >
<n8n-menu-item index="details" :class="$style.credTab" <n8n-menu-item index="details" :class="$style.credTab"
><span slot="title">{{ $i.baseText('credentialEdit.credentialEdit.details') }}</span></n8n-menu-item ><span slot="title">{{ $locale.baseText('credentialEdit.credentialEdit.details') }}</span></n8n-menu-item
> >
</n8n-menu> </n8n-menu>
</div> </div>
@ -351,20 +351,20 @@ export default mixins(showMessage, nodeHelpers).extend({
if (this.hasUnsavedChanges) { if (this.hasUnsavedChanges) {
const displayName = this.credentialType ? this.credentialType.displayName : ''; const displayName = this.credentialType ? this.credentialType.displayName : '';
keepEditing = await this.confirmMessage( keepEditing = await this.confirmMessage(
this.$i.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.message', { interpolate: { credentialDisplayName: displayName } }), this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.message', { interpolate: { credentialDisplayName: displayName } }),
this.$i.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.headline'), this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.headline'),
null, null,
this.$i.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.cancelButtonText'), this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.cancelButtonText'),
this.$i.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.confirmButtonText'), this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.confirmButtonText'),
); );
} }
else if (this.isOAuthType && !this.isOAuthConnected) { else if (this.isOAuthType && !this.isOAuthConnected) {
keepEditing = await this.confirmMessage( keepEditing = await this.confirmMessage(
this.$i.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.message'), this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.message'),
this.$i.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.headline'), this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.headline'),
null, null,
this.$i.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.cancelButtonText'), this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.cancelButtonText'),
this.$i.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.confirmButtonText'), this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.confirmButtonText'),
); );
} }
@ -403,7 +403,7 @@ export default mixins(showMessage, nodeHelpers).extend({
if (!credentialsData) { if (!credentialsData) {
throw new Error( throw new Error(
this.$i.baseText('credentialEdit.credentialEdit.couldNotFindCredentialOfType') + ':' + name, this.$locale.baseText('credentialEdit.credentialEdit.couldNotFindCredentialOfType') + ':' + name,
); );
} }
@ -440,7 +440,7 @@ export default mixins(showMessage, nodeHelpers).extend({
}); });
if (!currentCredentials) { if (!currentCredentials) {
throw new Error( throw new Error(
this.$i.baseText('credentialEdit.credentialEdit.couldNotFindCredentialWithId') + ':' + this.credentialId, this.$locale.baseText('credentialEdit.credentialEdit.couldNotFindCredentialWithId') + ':' + this.credentialId,
); );
} }
@ -455,8 +455,8 @@ export default mixins(showMessage, nodeHelpers).extend({
} catch (error) { } catch (error) {
this.$showError( this.$showError(
error, error,
this.$i.baseText('credentialEdit.credentialEdit.showError.loadCredential.title'), this.$locale.baseText('credentialEdit.credentialEdit.showError.loadCredential.title'),
this.$i.baseText('credentialEdit.credentialEdit.showError.loadCredential.message'), this.$locale.baseText('credentialEdit.credentialEdit.showError.loadCredential.message'),
); );
this.closeDialog(); this.closeDialog();
@ -661,8 +661,8 @@ export default mixins(showMessage, nodeHelpers).extend({
} catch (error) { } catch (error) {
this.$showError( this.$showError(
error, error,
this.$i.baseText('credentialEdit.credentialEdit.showError.createCredential.title'), this.$locale.baseText('credentialEdit.credentialEdit.showError.createCredential.title'),
this.$i.baseText('credentialEdit.credentialEdit.showError.createCredential.message'), this.$locale.baseText('credentialEdit.credentialEdit.showError.createCredential.message'),
); );
return null; return null;
@ -690,8 +690,8 @@ export default mixins(showMessage, nodeHelpers).extend({
} catch (error) { } catch (error) {
this.$showError( this.$showError(
error, error,
this.$i.baseText('credentialEdit.credentialEdit.showError.updateCredential.title'), this.$locale.baseText('credentialEdit.credentialEdit.showError.updateCredential.title'),
this.$i.baseText('credentialEdit.credentialEdit.showError.updateCredential.message'), this.$locale.baseText('credentialEdit.credentialEdit.showError.updateCredential.message'),
); );
return null; return null;
@ -712,10 +712,10 @@ export default mixins(showMessage, nodeHelpers).extend({
const savedCredentialName = this.currentCredential.name; const savedCredentialName = this.currentCredential.name;
const deleteConfirmed = await this.confirmMessage( const deleteConfirmed = await this.confirmMessage(
this.$i.baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.message', { interpolate: { savedCredentialName } }), this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.message', { interpolate: { savedCredentialName } }),
this.$i.baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.headline'), this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.headline'),
null, null,
this.$i.baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.confirmButtonText'), this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.confirmButtonText'),
); );
if (deleteConfirmed === false) { if (deleteConfirmed === false) {
@ -731,8 +731,8 @@ export default mixins(showMessage, nodeHelpers).extend({
} catch (error) { } catch (error) {
this.$showError( this.$showError(
error, error,
this.$i.baseText('credentialEdit.credentialEdit.showError.deleteCredential.title'), this.$locale.baseText('credentialEdit.credentialEdit.showError.deleteCredential.title'),
this.$i.baseText('credentialEdit.credentialEdit.showError.deleteCredential.message'), this.$locale.baseText('credentialEdit.credentialEdit.showError.deleteCredential.message'),
); );
this.isDeleting = false; this.isDeleting = false;
@ -744,8 +744,8 @@ export default mixins(showMessage, nodeHelpers).extend({
this.updateNodesCredentialsIssues(); this.updateNodesCredentialsIssues();
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('credentialEdit.credentialEdit.showMessage.title'), title: this.$locale.baseText('credentialEdit.credentialEdit.showMessage.title'),
message: this.$i.baseText( message: this.$locale.baseText(
'credentialEdit.credentialEdit.showMessage.message', 'credentialEdit.credentialEdit.showMessage.message',
{ interpolate: { savedCredentialName } }, { interpolate: { savedCredentialName } },
), ),
@ -785,8 +785,8 @@ export default mixins(showMessage, nodeHelpers).extend({
} catch (error) { } catch (error) {
this.$showError( this.$showError(
error, error,
this.$i.baseText('credentialEdit.credentialEdit.showError.generateAuthorizationUrl.title'), this.$locale.baseText('credentialEdit.credentialEdit.showError.generateAuthorizationUrl.title'),
this.$i.baseText('credentialEdit.credentialEdit.showError.generateAuthorizationUrl.message'), this.$locale.baseText('credentialEdit.credentialEdit.showError.generateAuthorizationUrl.message'),
); );
return; return;

12
packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue
View file

@ -3,7 +3,7 @@
<el-row> <el-row>
<el-col :span="8" :class="$style.accessLabel"> <el-col :span="8" :class="$style.accessLabel">
<n8n-text :compact="true" :bold="true"> <n8n-text :compact="true" :bold="true">
{{ $i.baseText('credentialEdit.credentialInfo.allowUseBy') }} {{ $locale.baseText('credentialEdit.credentialInfo.allowUseBy') }}
</n8n-text> </n8n-text>
</el-col> </el-col>
<el-col :span="16"> <el-col :span="16">
@ -13,7 +13,7 @@
:class="$style.valueLabel" :class="$style.valueLabel"
> >
<el-checkbox <el-checkbox
:label="$i.headerText({ :label="$locale.headerText({
key: `headers.${shortNodeType(node)}.displayName`, key: `headers.${shortNodeType(node)}.displayName`,
fallback: node.displayName, fallback: node.displayName,
})" })"
@ -26,7 +26,7 @@
<el-row v-if="currentCredential"> <el-row v-if="currentCredential">
<el-col :span="8" :class="$style.label"> <el-col :span="8" :class="$style.label">
<n8n-text :compact="true" :bold="true"> <n8n-text :compact="true" :bold="true">
{{ $i.baseText('credentialEdit.credentialInfo.created') }} {{ $locale.baseText('credentialEdit.credentialInfo.created') }}
</n8n-text> </n8n-text>
</el-col> </el-col>
<el-col :span="16" :class="$style.valueLabel"> <el-col :span="16" :class="$style.valueLabel">
@ -36,7 +36,7 @@
<el-row v-if="currentCredential"> <el-row v-if="currentCredential">
<el-col :span="8" :class="$style.label"> <el-col :span="8" :class="$style.label">
<n8n-text :compact="true" :bold="true"> <n8n-text :compact="true" :bold="true">
{{ $i.baseText('credentialEdit.credentialInfo.lastModified') }} {{ $locale.baseText('credentialEdit.credentialInfo.lastModified') }}
</n8n-text> </n8n-text>
</el-col> </el-col>
<el-col :span="16" :class="$style.valueLabel"> <el-col :span="16" :class="$style.valueLabel">
@ -46,7 +46,7 @@
<el-row v-if="currentCredential"> <el-row v-if="currentCredential">
<el-col :span="8" :class="$style.label"> <el-col :span="8" :class="$style.label">
<n8n-text :compact="true" :bold="true"> <n8n-text :compact="true" :bold="true">
{{ $i.baseText('credentialEdit.credentialInfo.id') }} {{ $locale.baseText('credentialEdit.credentialInfo.id') }}
</n8n-text> </n8n-text>
</el-col> </el-col>
<el-col :span="16" :class="$style.valueLabel"> <el-col :span="16" :class="$style.valueLabel">
@ -76,7 +76,7 @@ export default Vue.extend({
}); });
}, },
shortNodeType(nodeType: INodeTypeDescription) { shortNodeType(nodeType: INodeTypeDescription) {
return this.$i.shortNodeType(nodeType.name); return this.$locale.shortNodeType(nodeType.name);
}, },
}, },
}); });

4
packages/editor-ui/src/components/CredentialEdit/OauthButton.vue
View file

@ -4,12 +4,12 @@
v-if="isGoogleOAuthType" v-if="isGoogleOAuthType"
:src="basePath + 'google-signin-light.png'" :src="basePath + 'google-signin-light.png'"
:class="$style.googleIcon" :class="$style.googleIcon"
:alt="$i.baseText('credentialEdit.oAuthButton.signInWithGoogle')" :alt="$locale.baseText('credentialEdit.oAuthButton.signInWithGoogle')"
@click.stop="$emit('click')" @click.stop="$emit('click')"
/> />
<n8n-button <n8n-button
v-else v-else
:label="$i.baseText('credentialEdit.oAuthButton.connectMyAccount')" :label="$locale.baseText('credentialEdit.oAuthButton.connectMyAccount')"
size="large" size="large"
@click.stop="$emit('click')" @click.stop="$emit('click')"
/> />

38
packages/editor-ui/src/components/CredentialsList.vue
View file

@ -2,32 +2,32 @@
<Modal <Modal
:name="CREDENTIAL_LIST_MODAL_KEY" :name="CREDENTIAL_LIST_MODAL_KEY"
width="80%" width="80%"
:title="$i.baseText('credentialsList.credentials')" :title="$locale.baseText('credentialsList.credentials')"
> >
<template v-slot:content> <template v-slot:content>
<n8n-heading tag="h3" size="small" color="text-light">{{ $i.baseText('credentialsList.yourSavedCredentials') + ':' }}</n8n-heading> <n8n-heading tag="h3" size="small" color="text-light">{{ $locale.baseText('credentialsList.yourSavedCredentials') + ':' }}</n8n-heading>
<div class="new-credentials-button"> <div class="new-credentials-button">
<n8n-button <n8n-button
:title="$i.baseText('credentialsList.createNewCredential')" :title="$locale.baseText('credentialsList.createNewCredential')"
icon="plus" icon="plus"
:label="$i.baseText('credentialsList.addNew')" :label="$locale.baseText('credentialsList.addNew')"
size="large" size="large"
@click="createCredential()" @click="createCredential()"
/> />
</div> </div>
<el-table :data="credentialsToDisplay" :default-sort = "{prop: 'name', order: 'ascending'}" stripe max-height="450" @row-click="editCredential"> <el-table :data="credentialsToDisplay" :default-sort = "{prop: 'name', order: 'ascending'}" stripe max-height="450" @row-click="editCredential">
<el-table-column property="name" :label="$i.baseText('credentialsList.name')" class-name="clickable" sortable></el-table-column> <el-table-column property="name" :label="$locale.baseText('credentialsList.name')" class-name="clickable" sortable></el-table-column>
<el-table-column property="type" :label="$i.baseText('credentialsList.type')" class-name="clickable" sortable></el-table-column> <el-table-column property="type" :label="$locale.baseText('credentialsList.type')" class-name="clickable" sortable></el-table-column>
<el-table-column property="createdAt" :label="$i.baseText('credentialsList.created')" class-name="clickable" sortable></el-table-column> <el-table-column property="createdAt" :label="$locale.baseText('credentialsList.created')" class-name="clickable" sortable></el-table-column>
<el-table-column property="updatedAt" :label="$i.baseText('credentialsList.updated')" class-name="clickable" sortable></el-table-column> <el-table-column property="updatedAt" :label="$locale.baseText('credentialsList.updated')" class-name="clickable" sortable></el-table-column>
<el-table-column <el-table-column
:label="$i.baseText('credentialsList.operations')" :label="$locale.baseText('credentialsList.operations')"
width="120"> width="120">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="cred-operations"> <div class="cred-operations">
<n8n-icon-button :title="$i.baseText('credentialsList.editCredential')" @click.stop="editCredential(scope.row)" size="small" icon="pen" /> <n8n-icon-button :title="$locale.baseText('credentialsList.editCredential')" @click.stop="editCredential(scope.row)" size="small" icon="pen" />
<n8n-icon-button :title="$i.baseText('credentialsList.deleteCredential')" @click.stop="deleteCredential(scope.row)" size="small" icon="trash" /> <n8n-icon-button :title="$locale.baseText('credentialsList.deleteCredential')" @click.stop="deleteCredential(scope.row)" size="small" icon="trash" />
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
@ -104,14 +104,14 @@ export default mixins(
async deleteCredential (credential: ICredentialsResponse) { async deleteCredential (credential: ICredentialsResponse) {
const deleteConfirmed = await this.confirmMessage( const deleteConfirmed = await this.confirmMessage(
this.$i.baseText( this.$locale.baseText(
'credentialsList.confirmMessage.message', 'credentialsList.confirmMessage.message',
{ interpolate: { credentialName: credential.name }}, { interpolate: { credentialName: credential.name }},
), ),
this.$i.baseText('credentialsList.confirmMessage.headline'), this.$locale.baseText('credentialsList.confirmMessage.headline'),
null, null,
this.$i.baseText('credentialsList.confirmMessage.confirmButtonText'), this.$locale.baseText('credentialsList.confirmMessage.confirmButtonText'),
this.$i.baseText('credentialsList.confirmMessage.cancelButtonText'), this.$locale.baseText('credentialsList.confirmMessage.cancelButtonText'),
); );
if (deleteConfirmed === false) { if (deleteConfirmed === false) {
@ -123,8 +123,8 @@ export default mixins(
} catch (error) { } catch (error) {
this.$showError( this.$showError(
error, error,
this.$i.baseText('credentialsList.showError.deleteCredential.title'), this.$locale.baseText('credentialsList.showError.deleteCredential.title'),
this.$i.baseText('credentialsList.showError.deleteCredential.message'), this.$locale.baseText('credentialsList.showError.deleteCredential.message'),
); );
return; return;
@ -134,8 +134,8 @@ export default mixins(
this.updateNodesCredentialsIssues(); this.updateNodesCredentialsIssues();
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('credentialsList.showMessage.title'), title: this.$locale.baseText('credentialsList.showMessage.title'),
message: this.$i.baseText( message: this.$locale.baseText(
'credentialsList.showMessage.message', 'credentialsList.showMessage.message',
{ interpolate: { credentialName: credential.name }}, { interpolate: { credentialName: credential.name }},
), ),

8
packages/editor-ui/src/components/CredentialsSelectModal.vue
View file

@ -7,15 +7,15 @@
maxWidth="460px" maxWidth="460px"
> >
<template slot="header"> <template slot="header">
<h2 :class="$style.title">{{ $i.baseText('credentialSelectModal.addNewCredential') }}</h2> <h2 :class="$style.title">{{ $locale.baseText('credentialSelectModal.addNewCredential') }}</h2>
</template> </template>
<template slot="content"> <template slot="content">
<div> <div>
<div :class="$style.subtitle">{{ $i.baseText('credentialSelectModal.selectAnAppOrServiceToConnectTo') }}</div> <div :class="$style.subtitle">{{ $locale.baseText('credentialSelectModal.selectAnAppOrServiceToConnectTo') }}</div>
<n8n-select <n8n-select
filterable filterable
defaultFirstOption defaultFirstOption
:placeholder="$i.baseText('credentialSelectModal.searchForApp')" :placeholder="$locale.baseText('credentialSelectModal.searchForApp')"
size="xlarge" size="xlarge"
ref="select" ref="select"
:value="selected" :value="selected"
@ -35,7 +35,7 @@
<template slot="footer"> <template slot="footer">
<div :class="$style.footer"> <div :class="$style.footer">
<n8n-button <n8n-button
:label="$i.baseText('credentialSelectModal.continue')" :label="$locale.baseText('credentialSelectModal.continue')"
float="right" float="right"
size="large" size="large"
:disabled="!selected" :disabled="!selected"

4
packages/editor-ui/src/components/DataDisplay.vue
View file

@ -15,7 +15,7 @@
<transition name="fade"> <transition name="fade">
<div v-if="nodeType && showDocumentHelp" class="doc-help-wrapper"> <div v-if="nodeType && showDocumentHelp" class="doc-help-wrapper">
<svg id="help-logo" :href="documentationUrl" target="_blank" width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg id="help-logo" :href="documentationUrl" target="_blank" width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>{{ $i.baseText('dataDisplay.nodeDocumentation') }}</title> <title>{{ $locale.baseText('dataDisplay.nodeDocumentation') }}</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1127.000000, -836.000000)" fill-rule="nonzero"> <g transform="translate(-1127.000000, -836.000000)" fill-rule="nonzero">
<g transform="translate(1117.000000, 825.000000)"> <g transform="translate(1117.000000, 825.000000)">
@ -31,7 +31,7 @@
</svg> </svg>
<div class="text"> <div class="text">
{{ $i.baseText('dataDisplay.needHelp') }} <a id="doc-hyperlink" :href="documentationUrl" target="_blank" @click="onDocumentationUrlClick">{{ $i.baseText('dataDisplay.openDocumentationFor', { interpolate: { nodeTypeDisplayName: nodeType.displayName } }) }}</a> {{ $locale.baseText('dataDisplay.needHelp') }} <a id="doc-hyperlink" :href="documentationUrl" target="_blank" @click="onDocumentationUrlClick">{{ $locale.baseText('dataDisplay.openDocumentationFor', { interpolate: { nodeTypeDisplayName: nodeType.displayName } }) }}</a>
</div> </div>
</div> </div>
</transition> </transition>

10
packages/editor-ui/src/components/DisplayWithChange.vue
View file

@ -1,12 +1,12 @@
<template> <template>
<span class="static-text-wrapper"> <span class="static-text-wrapper">
<span v-show="!editActive" :title="$i.baseText('displayWithChange.clickToChange')"> <span v-show="!editActive" :title="$locale.baseText('displayWithChange.clickToChange')">
<span class="static-text" @mousedown="startEdit">{{currentValue}}</span> <span class="static-text" @mousedown="startEdit">{{currentValue}}</span>
</span> </span>
<span v-show="editActive"> <span v-show="editActive">
<input class="edit-field" ref="inputField" type="text" v-model="newValue" @keydown.enter.stop.prevent="setValue" @keydown.escape.stop.prevent="cancelEdit" @keydown.stop="noOp" @blur="cancelEdit" /> <input class="edit-field" ref="inputField" type="text" v-model="newValue" @keydown.enter.stop.prevent="setValue" @keydown.escape.stop.prevent="cancelEdit" @keydown.stop="noOp" @blur="cancelEdit" />
<font-awesome-icon icon="times" @mousedown="cancelEdit" class="icons clickable" :title="$i.baseText('displayWithChange.cancelEdit')" /> <font-awesome-icon icon="times" @mousedown="cancelEdit" class="icons clickable" :title="$locale.baseText('displayWithChange.cancelEdit')" />
<font-awesome-icon icon="check" @mousedown="setValue" class="icons clickable" :title="$i.baseText('displayWithChange.setValue')" /> <font-awesome-icon icon="check" @mousedown="setValue" class="icons clickable" :title="$locale.baseText('displayWithChange.setValue')" />
</span> </span>
</span> </span>
</template> </template>
@ -34,9 +34,9 @@ export default mixins(genericHelpers).extend({
}; };
if (this.keyName === 'name' && this.node.type.startsWith('n8n-nodes-base.')) { if (this.keyName === 'name' && this.node.type.startsWith('n8n-nodes-base.')) {
const shortNodeType = this.$i.shortNodeType(this.node.type); const shortNodeType = this.$locale.shortNodeType(this.node.type);
return this.$i.headerText({ return this.$locale.headerText({
key: `headers.${shortNodeType}.displayName`, key: `headers.${shortNodeType}.displayName`,
fallback: getDescendantProp(this.node, this.keyName), fallback: getDescendantProp(this.node, this.keyName),
}); });

14
packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
View file

@ -3,7 +3,7 @@
:name="modalName" :name="modalName"
:eventBus="modalBus" :eventBus="modalBus"
@enter="save" @enter="save"
:title="$i.baseText('duplicateWorkflowDialog.duplicateWorkflow')" :title="$locale.baseText('duplicateWorkflowDialog.duplicateWorkflow')"
:center="true" :center="true"
minWidth="420px" minWidth="420px"
maxWidth="420px" maxWidth="420px"
@ -13,7 +13,7 @@
<n8n-input <n8n-input
v-model="name" v-model="name"
ref="nameInput" ref="nameInput"
:placeholder="$i.baseText('duplicateWorkflowDialog.enterWorkflowName')" :placeholder="$locale.baseText('duplicateWorkflowDialog.enterWorkflowName')"
:maxlength="MAX_WORKFLOW_NAME_LENGTH" :maxlength="MAX_WORKFLOW_NAME_LENGTH"
/> />
<TagsDropdown <TagsDropdown
@ -23,15 +23,15 @@
@blur="onTagsBlur" @blur="onTagsBlur"
@esc="onTagsEsc" @esc="onTagsEsc"
@update="onTagsUpdate" @update="onTagsUpdate"
:placeholder="$i.baseText('duplicateWorkflowDialog.chooseOrCreateATag')" :placeholder="$locale.baseText('duplicateWorkflowDialog.chooseOrCreateATag')"
ref="dropdown" ref="dropdown"
/> />
</div> </div>
</template> </template>
<template v-slot:footer="{ close }"> <template v-slot:footer="{ close }">
<div :class="$style.footer"> <div :class="$style.footer">
<n8n-button @click="save" :loading="isSaving" :label="$i.baseText('duplicateWorkflowDialog.save')" float="right" /> <n8n-button @click="save" :loading="isSaving" :label="$locale.baseText('duplicateWorkflowDialog.save')" float="right" />
<n8n-button type="outline" @click="close" :disabled="isSaving" :label="$i.baseText('duplicateWorkflowDialog.cancel')" float="right" /> <n8n-button type="outline" @click="close" :disabled="isSaving" :label="$locale.baseText('duplicateWorkflowDialog.cancel')" float="right" />
</div> </div>
</template> </template>
</Modal> </Modal>
@ -101,8 +101,8 @@ export default mixins(showMessage, workflowHelpers).extend({
const name = this.name.trim(); const name = this.name.trim();
if (!name) { if (!name) {
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('duplicateWorkflowDialog.showMessage.title'), title: this.$locale.baseText('duplicateWorkflowDialog.showMessage.title'),
message: this.$i.baseText('duplicateWorkflowDialog.showMessage.message'), message: this.$locale.baseText('duplicateWorkflowDialog.showMessage.message'),
type: "error", type: "error",
}); });

22
packages/editor-ui/src/components/Error/NodeErrorView.vue
View file

@ -1,18 +1,18 @@
<template> <template>
<div> <div>
<div class="error-header"> <div class="error-header">
<div class="error-message">{{ $i.baseText('nodeErrorView.error') + ':' + error.message }}</div> <div class="error-message">{{ $locale.baseText('nodeErrorView.error') + ':' + error.message }}</div>
<div class="error-description" v-if="error.description">{{error.description}}</div> <div class="error-description" v-if="error.description">{{error.description}}</div>
</div> </div>
<details> <details>
<summary class="error-details__summary"> <summary class="error-details__summary">
<font-awesome-icon class="error-details__icon" icon="angle-right" /> {{ $i.baseText('nodeErrorView.details') }} <font-awesome-icon class="error-details__icon" icon="angle-right" /> {{ $locale.baseText('nodeErrorView.details') }}
</summary> </summary>
<div class="error-details__content"> <div class="error-details__content">
<div v-if="error.timestamp"> <div v-if="error.timestamp">
<el-card class="box-card" shadow="never"> <el-card class="box-card" shadow="never">
<div slot="header" class="clearfix box-card__title"> <div slot="header" class="clearfix box-card__title">
<span>{{ $i.baseText('nodeErrorView.time') }}</span> <span>{{ $locale.baseText('nodeErrorView.time') }}</span>
</div> </div>
<div> <div>
{{new Date(error.timestamp).toLocaleString()}} {{new Date(error.timestamp).toLocaleString()}}
@ -22,7 +22,7 @@
<div v-if="error.httpCode"> <div v-if="error.httpCode">
<el-card class="box-card" shadow="never"> <el-card class="box-card" shadow="never">
<div slot="header" class="clearfix box-card__title"> <div slot="header" class="clearfix box-card__title">
<span>{{ $i.baseText('nodeErrorView.httpCode') }}</span> <span>{{ $locale.baseText('nodeErrorView.httpCode') }}</span>
</div> </div>
<div> <div>
{{error.httpCode}} {{error.httpCode}}
@ -32,13 +32,13 @@
<div v-if="error.cause"> <div v-if="error.cause">
<el-card class="box-card" shadow="never"> <el-card class="box-card" shadow="never">
<div slot="header" class="clearfix box-card__title"> <div slot="header" class="clearfix box-card__title">
<span>{{ $i.baseText('nodeErrorView.cause') }}</span> <span>{{ $locale.baseText('nodeErrorView.cause') }}</span>
<br> <br>
<span class="box-card__subtitle">{{ $i.baseText('nodeErrorView.dataBelowMayContain') }}</span> <span class="box-card__subtitle">{{ $locale.baseText('nodeErrorView.dataBelowMayContain') }}</span>
</div> </div>
<div> <div>
<div class="copy-button" v-if="displayCause"> <div class="copy-button" v-if="displayCause">
<n8n-icon-button @click="copyCause" :title="$i.baseText('nodeErrorView.copyToClipboard')" icon="copy" /> <n8n-icon-button @click="copyCause" :title="$locale.baseText('nodeErrorView.copyToClipboard')" icon="copy" />
</div> </div>
<vue-json-pretty <vue-json-pretty
v-if="displayCause" v-if="displayCause"
@ -50,7 +50,7 @@
class="json-data" class="json-data"
/> />
<span v-else> <span v-else>
<font-awesome-icon icon="info-circle" />{{ $i.baseText('nodeErrorView.theErrorCauseIsTooLargeToBeDisplayed') }} <font-awesome-icon icon="info-circle" />{{ $locale.baseText('nodeErrorView.theErrorCauseIsTooLargeToBeDisplayed') }}
</span> </span>
</div> </div>
</el-card> </el-card>
@ -58,7 +58,7 @@
<div v-if="error.stack"> <div v-if="error.stack">
<el-card class="box-card" shadow="never"> <el-card class="box-card" shadow="never">
<div slot="header" class="clearfix box-card__title"> <div slot="header" class="clearfix box-card__title">
<span>{{ $i.baseText('nodeErrorView.stack') }}</span> <span>{{ $locale.baseText('nodeErrorView.stack') }}</span>
</div> </div>
<div> <div>
<pre><code>{{error.stack}}</code></pre> <pre><code>{{error.stack}}</code></pre>
@ -103,8 +103,8 @@ export default mixins(
}, },
copySuccess() { copySuccess() {
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('nodeErrorView.showMessage.title'), title: this.$locale.baseText('nodeErrorView.showMessage.title'),
message: this.$i.baseText('nodeErrorView.showMessage.message'), message: this.$locale.baseText('nodeErrorView.showMessage.message'),
type: 'info', type: 'info',
}); });
}, },

132
packages/editor-ui/src/components/ExecutionsList.vue
View file

@ -1,13 +1,13 @@
<template> <template>
<span> <span>
<el-dialog :visible="dialogVisible" append-to-body width="80%" :title="`${$i.baseText('executionsList.workflowExecutions')} ${combinedExecutions.length}/${finishedExecutionsCountEstimated === true ? '~' : ''}${combinedExecutionsCount}`" :before-close="closeDialog"> <el-dialog :visible="dialogVisible" append-to-body width="80%" :title="`${$locale.baseText('executionsList.workflowExecutions')} ${combinedExecutions.length}/${finishedExecutionsCountEstimated === true ? '~' : ''}${combinedExecutionsCount}`" :before-close="closeDialog">
<div class="filters"> <div class="filters">
<el-row> <el-row>
<el-col :span="2" class="filter-headline"> <el-col :span="2" class="filter-headline">
{{ $i.baseText('executionsList.filters') }}: {{ $locale.baseText('executionsList.filters') }}:
</el-col> </el-col>
<el-col :span="7"> <el-col :span="7">
<n8n-select v-model="filter.workflowId" :placeholder="$i.baseText('executionsList.selectWorkflow')" size="medium" filterable @change="handleFilterChanged"> <n8n-select v-model="filter.workflowId" :placeholder="$locale.baseText('executionsList.selectWorkflow')" size="medium" filterable @change="handleFilterChanged">
<n8n-option <n8n-option
v-for="item in workflows" v-for="item in workflows"
:key="item.id" :key="item.id"
@ -17,7 +17,7 @@
</n8n-select> </n8n-select>
</el-col> </el-col>
<el-col :span="5" :offset="1"> <el-col :span="5" :offset="1">
<n8n-select v-model="filter.status" :placeholder="$i.baseText('executionsList.selectStatus')" size="medium" filterable @change="handleFilterChanged"> <n8n-select v-model="filter.status" :placeholder="$locale.baseText('executionsList.selectStatus')" size="medium" filterable @change="handleFilterChanged">
<n8n-option <n8n-option
v-for="item in statuses" v-for="item in statuses"
:key="item.id" :key="item.id"
@ -27,15 +27,15 @@
</n8n-select> </n8n-select>
</el-col> </el-col>
<el-col :span="4" :offset="5" class="autorefresh"> <el-col :span="4" :offset="5" class="autorefresh">
<el-checkbox v-model="autoRefresh" @change="handleAutoRefreshToggle">{{ $i.baseText('executionsList.autoRefresh') }}</el-checkbox> <el-checkbox v-model="autoRefresh" @change="handleAutoRefreshToggle">{{ $locale.baseText('executionsList.autoRefresh') }}</el-checkbox>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div class="selection-options"> <div class="selection-options">
<span v-if="checkAll === true || isIndeterminate === true"> <span v-if="checkAll === true || isIndeterminate === true">
{{ $i.baseText('executionsList.selected') }}: {{numSelected}} / <span v-if="finishedExecutionsCountEstimated === true">~</span>{{finishedExecutionsCount}} {{ $locale.baseText('executionsList.selected') }}: {{numSelected}} / <span v-if="finishedExecutionsCountEstimated === true">~</span>{{finishedExecutionsCount}}
<n8n-icon-button :title="$i.baseText('executionsList.deleteSelected')" icon="trash" size="mini" @click="handleDeleteSelected" /> <n8n-icon-button :title="$locale.baseText('executionsList.deleteSelected')" icon="trash" size="mini" @click="handleDeleteSelected" />
</span> </span>
</div> </div>
@ -49,45 +49,45 @@
<el-checkbox v-if="scope.row.stoppedAt !== undefined && scope.row.id" :value="selectedItems[scope.row.id.toString()] || checkAll" @change="handleCheckboxChanged(scope.row.id)" label=" "></el-checkbox> <el-checkbox v-if="scope.row.stoppedAt !== undefined && scope.row.id" :value="selectedItems[scope.row.id.toString()] || checkAll" @change="handleCheckboxChanged(scope.row.id)" label=" "></el-checkbox>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="startedAt" :label="$i.baseText('executionsList.startedAtId')" width="205"> <el-table-column property="startedAt" :label="$locale.baseText('executionsList.startedAtId')" width="205">
<template slot-scope="scope"> <template slot-scope="scope">
{{convertToDisplayDate(scope.row.startedAt)}}<br /> {{convertToDisplayDate(scope.row.startedAt)}}<br />
<small v-if="scope.row.id">ID: {{scope.row.id}}</small> <small v-if="scope.row.id">ID: {{scope.row.id}}</small>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="workflowName" :label="$i.baseText('executionsList.name')"> <el-table-column property="workflowName" :label="$locale.baseText('executionsList.name')">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="workflow-name"> <span class="workflow-name">
{{ scope.row.workflowName || $i.baseText('executionsList.unsavedWorkflow') }} {{ scope.row.workflowName || $locale.baseText('executionsList.unsavedWorkflow') }}
</span> </span>
<span v-if="scope.row.stoppedAt === undefined"> <span v-if="scope.row.stoppedAt === undefined">
({{ $i.baseText('executionsList.running') }}) ({{ $locale.baseText('executionsList.running') }})
</span> </span>
<span v-if="scope.row.retryOf !== undefined"> <span v-if="scope.row.retryOf !== undefined">
<br /><small>{{ $i.baseText('executionsList.retryOf') }} "{{scope.row.retryOf}}"</small> <br /><small>{{ $locale.baseText('executionsList.retryOf') }} "{{scope.row.retryOf}}"</small>
</span> </span>
<span v-else-if="scope.row.retrySuccessId !== undefined"> <span v-else-if="scope.row.retrySuccessId !== undefined">
<br /><small>{{ $i.baseText('executionsList.successRetry') }} "{{scope.row.retrySuccessId}}"</small> <br /><small>{{ $locale.baseText('executionsList.successRetry') }} "{{scope.row.retrySuccessId}}"</small>
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$i.baseText('executionsList.status')" width="122" align="center"> <el-table-column :label="$locale.baseText('executionsList.status')" width="122" align="center">
<template slot-scope="scope" align="center"> <template slot-scope="scope" align="center">
<n8n-tooltip placement="top" > <n8n-tooltip placement="top" >
<div slot="content" v-html="statusTooltipText(scope.row)"></div> <div slot="content" v-html="statusTooltipText(scope.row)"></div>
<span class="status-badge running" v-if="scope.row.stoppedAt === undefined"> <span class="status-badge running" v-if="scope.row.stoppedAt === undefined">
{{ $i.baseText('executionsList.running') }} {{ $locale.baseText('executionsList.running') }}
</span> </span>
<span class="status-badge success" v-else-if="scope.row.finished"> <span class="status-badge success" v-else-if="scope.row.finished">
{{ $i.baseText('executionsList.success') }} {{ $locale.baseText('executionsList.success') }}
</span> </span>
<span class="status-badge error" v-else-if="scope.row.stoppedAt !== null"> <span class="status-badge error" v-else-if="scope.row.stoppedAt !== null">
{{ $i.baseText('executionsList.error') }} {{ $locale.baseText('executionsList.error') }}
</span> </span>
<span class="status-badge warning" v-else> <span class="status-badge warning" v-else>
{{ $i.baseText('executionsList.unknown') }} {{ $locale.baseText('executionsList.unknown') }}
</span> </span>
</n8n-tooltip> </n8n-tooltip>
@ -98,28 +98,28 @@
type="light" type="light"
:theme="scope.row.stoppedAt === null ? 'warning': 'danger'" :theme="scope.row.stoppedAt === null ? 'warning': 'danger'"
size="mini" size="mini"
:title="$i.baseText('executionsList.retryExecution')" :title="$locale.baseText('executionsList.retryExecution')"
icon="redo" icon="redo"
/> />
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="{command: 'currentlySaved', row: scope.row}"> <el-dropdown-item :command="{command: 'currentlySaved', row: scope.row}">
{{ $i.baseText('executionsList.retryWithCurrentlySavedWorkflow') }} {{ $locale.baseText('executionsList.retryWithCurrentlySavedWorkflow') }}
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item :command="{command: 'original', row: scope.row}"> <el-dropdown-item :command="{command: 'original', row: scope.row}">
{{ $i.baseText('executionsList.retryWithOriginalworkflow') }} {{ $locale.baseText('executionsList.retryWithOriginalworkflow') }}
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="mode" :label="$i.baseText('executionsList.mode')" width="100" align="center"> <el-table-column property="mode" :label="$locale.baseText('executionsList.mode')" width="100" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
{{ $i.baseText(`executionsList.modes.${scope.row.mode}`) }} {{ $locale.baseText(`executionsList.modes.${scope.row.mode}`) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$i.baseText('executionsList.runningTime')" width="150" align="center"> <el-table-column :label="$locale.baseText('executionsList.runningTime')" width="150" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="scope.row.stoppedAt === undefined"> <span v-if="scope.row.stoppedAt === undefined">
<font-awesome-icon icon="spinner" spin /> <font-awesome-icon icon="spinner" spin />
@ -138,10 +138,10 @@
<template slot-scope="scope"> <template slot-scope="scope">
<div class="actions-container"> <div class="actions-container">
<span v-if="scope.row.stoppedAt === undefined || scope.row.waitTill"> <span v-if="scope.row.stoppedAt === undefined || scope.row.waitTill">
<n8n-icon-button icon="stop" size="small" :title="$i.baseText('executionsList.stopExecution')" @click.stop="stopExecution(scope.row.id)" :loading="stoppingExecutions.includes(scope.row.id)" /> <n8n-icon-button icon="stop" size="small" :title="$locale.baseText('executionsList.stopExecution')" @click.stop="stopExecution(scope.row.id)" :loading="stoppingExecutions.includes(scope.row.id)" />
</span> </span>
<span v-if="scope.row.stoppedAt !== undefined && scope.row.id" > <span v-if="scope.row.stoppedAt !== undefined && scope.row.id" >
<n8n-icon-button icon="folder-open" size="small" :title="$i.baseText('executionsList.openPastExecution')" @click.stop="(e) => displayExecution(scope.row, e)" /> <n8n-icon-button icon="folder-open" size="small" :title="$locale.baseText('executionsList.openPastExecution')" @click.stop="(e) => displayExecution(scope.row, e)" />
</span> </span>
</div> </div>
</template> </template>
@ -149,7 +149,7 @@
</el-table> </el-table>
<div class="load-more" v-if="finishedExecutionsCount > finishedExecutions.length || finishedExecutionsCountEstimated === true"> <div class="load-more" v-if="finishedExecutionsCount > finishedExecutions.length || finishedExecutionsCountEstimated === true">
<n8n-button icon="sync" :title="$i.baseText('executionsList.loadMore')" :label="$i.baseText('executionsList.loadMore')" @click="loadMore()" :loading="isDataLoading" /> <n8n-button icon="sync" :title="$locale.baseText('executionsList.loadMore')" :label="$locale.baseText('executionsList.loadMore')" @click="loadMore()" :loading="isDataLoading" />
</div> </div>
</el-dialog> </el-dialog>
@ -235,23 +235,23 @@ export default mixins(
return [ return [
{ {
id: 'ALL', id: 'ALL',
name: this.$i.baseText('executionsList.anyStatus'), name: this.$locale.baseText('executionsList.anyStatus'),
}, },
{ {
id: 'error', id: 'error',
name: this.$i.baseText('executionsList.error'), name: this.$locale.baseText('executionsList.error'),
}, },
{ {
id: 'running', id: 'running',
name: this.$i.baseText('executionsList.running'), name: this.$locale.baseText('executionsList.running'),
}, },
{ {
id: 'success', id: 'success',
name: this.$i.baseText('executionsList.success'), name: this.$locale.baseText('executionsList.success'),
}, },
{ {
id: 'waiting', id: 'waiting',
name: this.$i.baseText('executionsList.waiting'), name: this.$locale.baseText('executionsList.waiting'),
}, },
]; ];
}, },
@ -369,14 +369,14 @@ export default mixins(
}, },
async handleDeleteSelected () { async handleDeleteSelected () {
const deleteExecutions = await this.confirmMessage( const deleteExecutions = await this.confirmMessage(
this.$i.baseText( this.$locale.baseText(
'executionsList.confirmMessage.message', 'executionsList.confirmMessage.message',
{ interpolate: { numSelected: this.numSelected.toString() }}, { interpolate: { numSelected: this.numSelected.toString() }},
), ),
this.$i.baseText('executionsList.confirmMessage.headline'), this.$locale.baseText('executionsList.confirmMessage.headline'),
'warning', 'warning',
this.$i.baseText('executionsList.confirmMessage.confirmButtonText'), this.$locale.baseText('executionsList.confirmMessage.confirmButtonText'),
this.$i.baseText('executionsList.confirmMessage.cancelButtonText'), this.$locale.baseText('executionsList.confirmMessage.cancelButtonText'),
); );
if (deleteExecutions === false) { if (deleteExecutions === false) {
@ -400,8 +400,8 @@ export default mixins(
this.isDataLoading = false; this.isDataLoading = false;
this.$showError( this.$showError(
error, error,
this.$i.baseText('executionsList.showError.handleDeleteSelected.title'), this.$locale.baseText('executionsList.showError.handleDeleteSelected.title'),
this.$i.baseText('executionsList.showError.handleDeleteSelected.message'), this.$locale.baseText('executionsList.showError.handleDeleteSelected.message'),
); );
return; return;
@ -409,8 +409,8 @@ export default mixins(
this.isDataLoading = false; this.isDataLoading = false;
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('executionsList.showMessage.handleDeleteSelected.title'), title: this.$locale.baseText('executionsList.showMessage.handleDeleteSelected.title'),
message: this.$i.baseText('executionsList.showMessage.handleDeleteSelected.message'), message: this.$locale.baseText('executionsList.showMessage.handleDeleteSelected.message'),
type: 'success', type: 'success',
}); });
@ -563,8 +563,8 @@ export default mixins(
this.isDataLoading = false; this.isDataLoading = false;
this.$showError( this.$showError(
error, error,
this.$i.baseText('executionsList.showError.loadMore.title'), this.$locale.baseText('executionsList.showError.loadMore.title'),
this.$i.baseText('executionsList.showError.loadMore.message') + ':', this.$locale.baseText('executionsList.showError.loadMore.message') + ':',
); );
return; return;
} }
@ -596,15 +596,15 @@ export default mixins(
// @ts-ignore // @ts-ignore
workflows.unshift({ workflows.unshift({
id: 'ALL', id: 'ALL',
name: this.$i.baseText('executionsList.allWorkflows'), name: this.$locale.baseText('executionsList.allWorkflows'),
}); });
Vue.set(this, 'workflows', workflows); Vue.set(this, 'workflows', workflows);
} catch (error) { } catch (error) {
this.$showError( this.$showError(
error, error,
this.$i.baseText('executionsList.showError.loadWorkflows.title'), this.$locale.baseText('executionsList.showError.loadWorkflows.title'),
this.$i.baseText('executionsList.showError.loadWorkflows.message') + ':', this.$locale.baseText('executionsList.showError.loadWorkflows.message') + ':',
); );
} }
}, },
@ -628,14 +628,14 @@ export default mixins(
if (retrySuccessful === true) { if (retrySuccessful === true) {
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('executionsList.showMessage.retrySuccessfulTrue.title'), title: this.$locale.baseText('executionsList.showMessage.retrySuccessfulTrue.title'),
message: this.$i.baseText('executionsList.showMessage.retrySuccessfulTrue.message'), message: this.$locale.baseText('executionsList.showMessage.retrySuccessfulTrue.message'),
type: 'success', type: 'success',
}); });
} else { } else {
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('executionsList.showMessage.retrySuccessfulFalse.title'), title: this.$locale.baseText('executionsList.showMessage.retrySuccessfulFalse.title'),
message: this.$i.baseText('executionsList.showMessage.retrySuccessfulFalse.message'), message: this.$locale.baseText('executionsList.showMessage.retrySuccessfulFalse.message'),
type: 'error', type: 'error',
}); });
} }
@ -644,8 +644,8 @@ export default mixins(
} catch (error) { } catch (error) {
this.$showError( this.$showError(
error, error,
this.$i.baseText('executionsList.showError.retryExecution.title'), this.$locale.baseText('executionsList.showError.retryExecution.title'),
this.$i.baseText('executionsList.showError.retryExecution.message') + ':', this.$locale.baseText('executionsList.showError.retryExecution.message') + ':',
); );
this.isDataLoading = false; this.isDataLoading = false;
@ -661,8 +661,8 @@ export default mixins(
} catch (error) { } catch (error) {
this.$showError( this.$showError(
error, error,
this.$i.baseText('executionsList.showError.refreshData.title'), this.$locale.baseText('executionsList.showError.refreshData.title'),
this.$i.baseText('executionsList.showError.refreshData.message') + ':', this.$locale.baseText('executionsList.showError.refreshData.message') + ':',
); );
} }
@ -672,10 +672,10 @@ export default mixins(
if (entry.waitTill) { if (entry.waitTill) {
const waitDate = new Date(entry.waitTill); const waitDate = new Date(entry.waitTill);
if (waitDate.toISOString() === WAIT_TIME_UNLIMITED) { if (waitDate.toISOString() === WAIT_TIME_UNLIMITED) {
return this.$i.baseText('executionsList.statusTooltipText.theWorkflowIsWaitingIndefinitely'); return this.$locale.baseText('executionsList.statusTooltipText.theWorkflowIsWaitingIndefinitely');
} }
return this.$i.baseText( return this.$locale.baseText(
'executionsList.statusTooltipText.theWorkflowIsWaitingTill', 'executionsList.statusTooltipText.theWorkflowIsWaitingTill',
{ {
interpolate: { interpolate: {
@ -685,28 +685,28 @@ export default mixins(
}, },
); );
} else if (entry.stoppedAt === undefined) { } else if (entry.stoppedAt === undefined) {
return this.$i.baseText('executionsList.statusTooltipText.theWorkflowIsCurrentlyExecuting'); return this.$locale.baseText('executionsList.statusTooltipText.theWorkflowIsCurrentlyExecuting');
} else if (entry.finished === true && entry.retryOf !== undefined) { } else if (entry.finished === true && entry.retryOf !== undefined) {
return this.$i.baseText( return this.$locale.baseText(
'executionsList.statusTooltipText.theWorkflowExecutionWasARetryOfAndItWasSuccessful', 'executionsList.statusTooltipText.theWorkflowExecutionWasARetryOfAndItWasSuccessful',
{ interpolate: { entryRetryOf: entry.retryOf }}, { interpolate: { entryRetryOf: entry.retryOf }},
); );
} else if (entry.finished === true) { } else if (entry.finished === true) {
return this.$i.baseText('executionsList.statusTooltipText.theWorkflowExecutionWasSuccessful'); return this.$locale.baseText('executionsList.statusTooltipText.theWorkflowExecutionWasSuccessful');
} else if (entry.retryOf !== undefined) { } else if (entry.retryOf !== undefined) {
return this.$i.baseText( return this.$locale.baseText(
'executionsList.statusTooltipText.theWorkflowExecutionWasARetryOfAndFailed', 'executionsList.statusTooltipText.theWorkflowExecutionWasARetryOfAndFailed',
{ interpolate: { entryRetryOf: entry.retryOf }}, { interpolate: { entryRetryOf: entry.retryOf }},
); );
} else if (entry.retrySuccessId !== undefined) { } else if (entry.retrySuccessId !== undefined) {
return this.$i.baseText( return this.$locale.baseText(
'executionsList.statusTooltipText.theWorkflowExecutionFailedButTheRetryWasSuccessful', 'executionsList.statusTooltipText.theWorkflowExecutionFailedButTheRetryWasSuccessful',
{ interpolate: { entryRetrySuccessId: entry.retrySuccessId }}, { interpolate: { entryRetrySuccessId: entry.retrySuccessId }},
); );
} else if (entry.stoppedAt === null) { } else if (entry.stoppedAt === null) {
return this.$i.baseText('executionsList.statusTooltipText.theWorkflowExecutionIsProbablyStillRunning'); return this.$locale.baseText('executionsList.statusTooltipText.theWorkflowExecutionIsProbablyStillRunning');
} else { } else {
return this.$i.baseText('executionsList.statusTooltipText.theWorkflowExecutionFailed'); return this.$locale.baseText('executionsList.statusTooltipText.theWorkflowExecutionFailed');
} }
}, },
async stopExecution (activeExecutionId: string) { async stopExecution (activeExecutionId: string) {
@ -722,8 +722,8 @@ export default mixins(
this.stoppingExecutions.splice(index, 1); this.stoppingExecutions.splice(index, 1);
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('executionsList.showMessage.stopExecution.title'), title: this.$locale.baseText('executionsList.showMessage.stopExecution.title'),
message: this.$i.baseText( message: this.$locale.baseText(
'executionsList.showMessage.stopExecution.message', 'executionsList.showMessage.stopExecution.message',
{ interpolate: { activeExecutionId } }, { interpolate: { activeExecutionId } },
), ),
@ -734,8 +734,8 @@ export default mixins(
} catch (error) { } catch (error) {
this.$showError( this.$showError(
error, error,
this.$i.baseText('executionsList.showError.stopExecution.title'), this.$locale.baseText('executionsList.showError.stopExecution.title'),
this.$i.baseText('executionsList.showError.stopExecution.message'), this.$locale.baseText('executionsList.showError.stopExecution.message'),
); );
} }
}, },

10
packages/editor-ui/src/components/ExpressionEdit.vue
View file

@ -1,14 +1,14 @@
<template> <template>
<div v-if="dialogVisible" @keydown.stop> <div v-if="dialogVisible" @keydown.stop>
<el-dialog :visible="dialogVisible" custom-class="expression-dialog classic" append-to-body width="80%" :title="$i.baseText('expressionEdit.editExpression')" :before-close="closeDialog"> <el-dialog :visible="dialogVisible" custom-class="expression-dialog classic" append-to-body width="80%" :title="$locale.baseText('expressionEdit.editExpression')" :before-close="closeDialog">
<el-row> <el-row>
<el-col :span="8"> <el-col :span="8">
<div class="header-side-menu"> <div class="header-side-menu">
<div class="headline"> <div class="headline">
{{ $i.baseText('expressionEdit.editExpression') }} {{ $locale.baseText('expressionEdit.editExpression') }}
</div> </div>
<div class="sub-headline"> <div class="sub-headline">
{{ $i.baseText('expressionEdit.variableSelector') }} {{ $locale.baseText('expressionEdit.variableSelector') }}
</div> </div>
</div> </div>
@ -19,7 +19,7 @@
<el-col :span="16" class="right-side"> <el-col :span="16" class="right-side">
<div class="expression-editor-wrapper"> <div class="expression-editor-wrapper">
<div class="editor-description"> <div class="editor-description">
{{ $i.baseText('expressionEdit.expression') }} {{ $locale.baseText('expressionEdit.expression') }}
</div> </div>
<div class="expression-editor"> <div class="expression-editor">
<expression-input :parameter="parameter" ref="inputFieldExpression" rows="8" :value="value" :path="path" @change="valueChanged" @keydown.stop="noOp"></expression-input> <expression-input :parameter="parameter" ref="inputFieldExpression" rows="8" :value="value" :path="path" @change="valueChanged" @keydown.stop="noOp"></expression-input>
@ -28,7 +28,7 @@
<div class="expression-result-wrapper"> <div class="expression-result-wrapper">
<div class="editor-description"> <div class="editor-description">
{{ $i.baseText('expressionEdit.result') }} {{ $locale.baseText('expressionEdit.result') }}
</div> </div>
<expression-input :parameter="parameter" resolvedValue="true" ref="expressionResult" rows="8" :value="displayValue" :path="path"></expression-input> <expression-input :parameter="parameter" resolvedValue="true" ref="expressionResult" rows="8" :value="displayValue" :path="path"></expression-input>
</div> </div>

18
packages/editor-ui/src/components/FixedCollectionParameter.vue
View file

@ -1,12 +1,12 @@
<template> <template>
<div @keydown.stop class="fixed-collection-parameter"> <div @keydown.stop class="fixed-collection-parameter">
<div v-if="getProperties.length === 0" class="no-items-exist"> <div v-if="getProperties.length === 0" class="no-items-exist">
<n8n-text size="small">{{ $i.baseText('fixedCollectionParameter.currentlyNoItemsExist') }}</n8n-text> <n8n-text size="small">{{ $locale.baseText('fixedCollectionParameter.currentlyNoItemsExist') }}</n8n-text>
</div> </div>
<div v-for="property in getProperties" :key="property.name" class="fixed-collection-parameter-property"> <div v-for="property in getProperties" :key="property.name" class="fixed-collection-parameter-property">
<n8n-input-label <n8n-input-label
:label="property.displayName === '' || parameter.options.length === 1 ? '' : $i.nodeText().topParameterDisplayName(property)" :label="property.displayName === '' || parameter.options.length === 1 ? '' : $locale.nodeText().topParameterDisplayName(property)"
:underline="true" :underline="true"
:labelHoverableOnly="true" :labelHoverableOnly="true"
size="small" size="small"
@ -15,10 +15,10 @@
<div v-for="(value, index) in values[property.name]" :key="property.name + index" class="parameter-item"> <div v-for="(value, index) in values[property.name]" :key="property.name + index" class="parameter-item">
<div class="parameter-item-wrapper"> <div class="parameter-item-wrapper">
<div class="delete-option" v-if="!isReadOnly"> <div class="delete-option" v-if="!isReadOnly">
<font-awesome-icon icon="trash" class="reset-icon clickable" :title="$i.baseText('fixedCollectionParameter.deleteItem')" @click="deleteOption(property.name, index)" /> <font-awesome-icon icon="trash" class="reset-icon clickable" :title="$locale.baseText('fixedCollectionParameter.deleteItem')" @click="deleteOption(property.name, index)" />
<div v-if="sortable" class="sort-icon"> <div v-if="sortable" class="sort-icon">
<font-awesome-icon v-if="index !== 0" icon="angle-up" class="clickable" :title="$i.baseText('fixedCollectionParameter.moveUp')" @click="moveOptionUp(property.name, index)" /> <font-awesome-icon v-if="index !== 0" icon="angle-up" class="clickable" :title="$locale.baseText('fixedCollectionParameter.moveUp')" @click="moveOptionUp(property.name, index)" />
<font-awesome-icon v-if="index !== (values[property.name].length -1)" icon="angle-down" class="clickable" :title="$i.baseText('fixedCollectionParameter.moveDown')" @click="moveOptionDown(property.name, index)" /> <font-awesome-icon v-if="index !== (values[property.name].length -1)" icon="angle-down" class="clickable" :title="$locale.baseText('fixedCollectionParameter.moveDown')" @click="moveOptionDown(property.name, index)" />
</div> </div>
</div> </div>
<parameter-input-list :parameters="property.values" :nodeValues="nodeValues" :path="getPropertyPath(property.name, index)" :hideDelete="true" @valueChanged="valueChanged" /> <parameter-input-list :parameters="property.values" :nodeValues="nodeValues" :path="getPropertyPath(property.name, index)" :hideDelete="true" @valueChanged="valueChanged" />
@ -28,7 +28,7 @@
<div v-else class="parameter-item"> <div v-else class="parameter-item">
<div class="parameter-item-wrapper"> <div class="parameter-item-wrapper">
<div class="delete-option" v-if="!isReadOnly"> <div class="delete-option" v-if="!isReadOnly">
<font-awesome-icon icon="trash" class="reset-icon clickable" :title="$i.baseText('fixedCollectionParameter.deleteItem')" @click="deleteOption(property.name)" /> <font-awesome-icon icon="trash" class="reset-icon clickable" :title="$locale.baseText('fixedCollectionParameter.deleteItem')" @click="deleteOption(property.name)" />
</div> </div>
<parameter-input-list :parameters="property.values" :nodeValues="nodeValues" :path="getPropertyPath(property.name)" class="parameter-item" @valueChanged="valueChanged" :hideDelete="true" /> <parameter-input-list :parameters="property.values" :nodeValues="nodeValues" :path="getPropertyPath(property.name)" class="parameter-item" @valueChanged="valueChanged" :hideDelete="true" />
</div> </div>
@ -43,7 +43,7 @@
<n8n-option <n8n-option
v-for="item in parameterOptions" v-for="item in parameterOptions"
:key="item.name" :key="item.name"
:label="$i.nodeText().collectionOptionDisplayName(parameter, item)" :label="$locale.nodeText().collectionOptionDisplayName(parameter, item)"
:value="item.name"> :value="item.name">
</n8n-option> </n8n-option>
</n8n-select> </n8n-select>
@ -85,8 +85,8 @@ export default mixins(genericHelpers)
}, },
computed: { computed: {
getPlaceholderText (): string { getPlaceholderText (): string {
const placeholder = this.$i.nodeText().placeholder(this.parameter); const placeholder = this.$locale.nodeText().placeholder(this.parameter);
return placeholder ? placeholder : this.$i.baseText('fixedCollectionParameter.choose'); return placeholder ? placeholder : this.$locale.baseText('fixedCollectionParameter.choose');
}, },
getProperties (): INodePropertyCollection[] { getProperties (): INodePropertyCollection[] {
const returnProperties = []; const returnProperties = [];

14
packages/editor-ui/src/components/MainHeader/ExecutionDetails/ExecutionDetails.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="container"> <div class="container">
<span class="title"> <span class="title">
{{ $i.baseText('executionDetails.executionId') + ':' }} {{ $locale.baseText('executionDetails.executionId') + ':' }}
<span> <span>
<strong>{{ executionId }}</strong <strong>{{ executionId }}</strong
>&nbsp; >&nbsp;
@ -9,23 +9,23 @@
icon="check" icon="check"
class="execution-icon success" class="execution-icon success"
v-if="executionFinished" v-if="executionFinished"
:title="$i.baseText('executionDetails.executionWasSuccessful')" :title="$locale.baseText('executionDetails.executionWasSuccessful')"
/> />
<font-awesome-icon <font-awesome-icon
icon="clock" icon="clock"
class="execution-icon warning" class="execution-icon warning"
v-else-if="executionWaiting" v-else-if="executionWaiting"
:title="$i.baseText('executionDetails.executionWaiting')" :title="$locale.baseText('executionDetails.executionWaiting')"
/> />
<font-awesome-icon <font-awesome-icon
icon="times" icon="times"
class="execution-icon error" class="execution-icon error"
v-else v-else
:title="$i.baseText('executionDetails.executionFailed')" :title="$locale.baseText('executionDetails.executionFailed')"
/> />
</span> </span>
{{ $i.baseText('executionDetails.of') }} {{ $locale.baseText('executionDetails.of') }}
<span class="primary-color clickable" :title="$i.baseText('executionDetails.openWorkflow')"> <span class="primary-color clickable" :title="$locale.baseText('executionDetails.openWorkflow')">
<WorkflowNameShort :name="workflowName"> <WorkflowNameShort :name="workflowName">
<template v-slot="{ shortenedName }"> <template v-slot="{ shortenedName }">
<span @click="openWorkflow(workflowExecution.workflowId)"> <span @click="openWorkflow(workflowExecution.workflowId)">
@ -34,7 +34,7 @@
</template> </template>
</WorkflowNameShort> </WorkflowNameShort>
</span> </span>
{{ $i.baseText('executionDetails.workflow') }} {{ $locale.baseText('executionDetails.workflow') }}
</span> </span>
<ReadOnly class="read-only" /> <ReadOnly class="read-only" />
</div> </div>

4
packages/editor-ui/src/components/MainHeader/ExecutionDetails/ReadOnly.vue
View file

@ -1,11 +1,11 @@
<template> <template>
<n8n-tooltip class="primary-color" placement="bottom-end" > <n8n-tooltip class="primary-color" placement="bottom-end" >
<div slot="content"> <div slot="content">
<span v-html="$i.baseText('executionDetails.readOnly.youreViewingTheLogOf')"></span> <span v-html="$locale.baseText('executionDetails.readOnly.youreViewingTheLogOf')"></span>
</div> </div>
<div> <div>
<font-awesome-icon icon="exclamation-triangle" /> <font-awesome-icon icon="exclamation-triangle" />
<span v-html="$i.baseText('executionDetails.readOnly.readOnly')"></span> <span v-html="$locale.baseText('executionDetails.readOnly.readOnly')"></span>
</div> </div>
</n8n-tooltip> </n8n-tooltip>
</template> </template>

10
packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
View file

@ -33,7 +33,7 @@
@blur="onTagsBlur" @blur="onTagsBlur"
@update="onTagsUpdate" @update="onTagsUpdate"
@esc="onTagsEditEsc" @esc="onTagsEditEsc"
:placeholder="$i.baseText('workflowDetails.chooseOrCreateATag')" :placeholder="$locale.baseText('workflowDetails.chooseOrCreateATag')"
ref="dropdown" ref="dropdown"
class="tags-edit" class="tags-edit"
/> />
@ -46,7 +46,7 @@
class="add-tag clickable" class="add-tag clickable"
@click="onTagsEditEnable" @click="onTagsEditEnable"
> >
+ {{ $i.baseText('workflowDetails.addTag') }} + {{ $locale.baseText('workflowDetails.addTag') }}
</span> </span>
</div> </div>
<TagsContainer <TagsContainer
@ -62,7 +62,7 @@
<PushConnectionTracker class="actions"> <PushConnectionTracker class="actions">
<template> <template>
<span class="activator"> <span class="activator">
<span>{{ $i.baseText('workflowDetails.active') + ':' }}</span> <span>{{ $locale.baseText('workflowDetails.active') + ':' }}</span>
<WorkflowActivator :workflow-active="isWorkflowActive" :workflow-id="currentWorkflowId" :disabled="!currentWorkflowId"/> <WorkflowActivator :workflow-active="isWorkflowActive" :workflow-id="currentWorkflowId" :disabled="!currentWorkflowId"/>
</span> </span>
<SaveButton <SaveButton
@ -197,8 +197,8 @@ export default mixins(workflowHelpers).extend({
const newName = name.trim(); const newName = name.trim();
if (!newName) { if (!newName) {
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('workflowDetails.showMessage.title'), title: this.$locale.baseText('workflowDetails.showMessage.title'),
message: this.$i.baseText('workflowDetails.showMessage.message'), message: this.$locale.baseText('workflowDetails.showMessage.message'),
type: "error", type: "error",
}); });

94
packages/editor-ui/src/components/MainSidebar.vue
View file

@ -22,94 +22,94 @@
<el-submenu index="workflow" title="Workflow" popperClass="sidebar-popper"> <el-submenu index="workflow" title="Workflow" popperClass="sidebar-popper">
<template slot="title"> <template slot="title">
<font-awesome-icon icon="network-wired"/>&nbsp; <font-awesome-icon icon="network-wired"/>&nbsp;
<span slot="title" class="item-title-root">{{ $i.baseText('mainSidebar.workflows') }}</span> <span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.workflows') }}</span>
</template> </template>
<n8n-menu-item index="workflow-new"> <n8n-menu-item index="workflow-new">
<template slot="title"> <template slot="title">
<font-awesome-icon icon="file"/>&nbsp; <font-awesome-icon icon="file"/>&nbsp;
<span slot="title" class="item-title">{{ $i.baseText('mainSidebar.new') }}</span> <span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.new') }}</span>
</template> </template>
</n8n-menu-item> </n8n-menu-item>
<n8n-menu-item index="workflow-open"> <n8n-menu-item index="workflow-open">
<template slot="title"> <template slot="title">
<font-awesome-icon icon="folder-open"/>&nbsp; <font-awesome-icon icon="folder-open"/>&nbsp;
<span slot="title" class="item-title">{{ $i.baseText('mainSidebar.open') }}</span> <span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.open') }}</span>
</template> </template>
</n8n-menu-item> </n8n-menu-item>
<n8n-menu-item index="workflow-save"> <n8n-menu-item index="workflow-save">
<template slot="title"> <template slot="title">
<font-awesome-icon icon="save"/> <font-awesome-icon icon="save"/>
<span slot="title" class="item-title">{{ $i.baseText('mainSidebar.save') }}</span> <span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.save') }}</span>
</template> </template>
</n8n-menu-item> </n8n-menu-item>
<n8n-menu-item index="workflow-duplicate" :disabled="!currentWorkflow"> <n8n-menu-item index="workflow-duplicate" :disabled="!currentWorkflow">
<template slot="title"> <template slot="title">
<font-awesome-icon icon="copy"/> <font-awesome-icon icon="copy"/>
<span slot="title" class="item-title">{{ $i.baseText('mainSidebar.duplicate') }}</span> <span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.duplicate') }}</span>
</template> </template>
</n8n-menu-item> </n8n-menu-item>
<n8n-menu-item index="workflow-delete" :disabled="!currentWorkflow"> <n8n-menu-item index="workflow-delete" :disabled="!currentWorkflow">
<template slot="title"> <template slot="title">
<font-awesome-icon icon="trash"/> <font-awesome-icon icon="trash"/>
<span slot="title" class="item-title">{{ $i.baseText('mainSidebar.delete') }}</span> <span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.delete') }}</span>
</template> </template>
</n8n-menu-item> </n8n-menu-item>
<n8n-menu-item index="workflow-download"> <n8n-menu-item index="workflow-download">
<template slot="title"> <template slot="title">
<font-awesome-icon icon="file-download"/> <font-awesome-icon icon="file-download"/>
<span slot="title" class="item-title">{{ $i.baseText('mainSidebar.download') }}</span> <span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.download') }}</span>
</template> </template>
</n8n-menu-item> </n8n-menu-item>
<n8n-menu-item index="workflow-import-url"> <n8n-menu-item index="workflow-import-url">
<template slot="title"> <template slot="title">
<font-awesome-icon icon="cloud"/> <font-awesome-icon icon="cloud"/>
<span slot="title" class="item-title">{{ $i.baseText('mainSidebar.importFromUrl') }}</span> <span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.importFromUrl') }}</span>
</template> </template>
</n8n-menu-item> </n8n-menu-item>
<n8n-menu-item index="workflow-import-file"> <n8n-menu-item index="workflow-import-file">
<template slot="title"> <template slot="title">
<font-awesome-icon icon="hdd"/> <font-awesome-icon icon="hdd"/>
<span slot="title" class="item-title">{{ $i.baseText('mainSidebar.importFromFile') }}</span> <span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.importFromFile') }}</span>
</template> </template>
</n8n-menu-item> </n8n-menu-item>
<n8n-menu-item index="workflow-settings" :disabled="!currentWorkflow"> <n8n-menu-item index="workflow-settings" :disabled="!currentWorkflow">
<template slot="title"> <template slot="title">
<font-awesome-icon icon="cog"/> <font-awesome-icon icon="cog"/>
<span slot="title" class="item-title">{{ $i.baseText('mainSidebar.settings') }}</span> <span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.settings') }}</span>
</template> </template>
</n8n-menu-item> </n8n-menu-item>
</el-submenu> </el-submenu>
<el-submenu index="credentials" :title="$i.baseText('mainSidebar.credentials')" popperClass="sidebar-popper"> <el-submenu index="credentials" :title="$locale.baseText('mainSidebar.credentials')" popperClass="sidebar-popper">
<template slot="title"> <template slot="title">
<font-awesome-icon icon="key"/>&nbsp; <font-awesome-icon icon="key"/>&nbsp;
<span slot="title" class="item-title-root">{{ $i.baseText('mainSidebar.credentials') }}</span> <span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.credentials') }}</span>
</template> </template>
<n8n-menu-item index="credentials-new"> <n8n-menu-item index="credentials-new">
<template slot="title"> <template slot="title">
<font-awesome-icon icon="file"/> <font-awesome-icon icon="file"/>
<span slot="title" class="item-title">{{ $i.baseText('mainSidebar.new') }}</span> <span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.new') }}</span>
</template> </template>
</n8n-menu-item> </n8n-menu-item>
<n8n-menu-item index="credentials-open"> <n8n-menu-item index="credentials-open">
<template slot="title"> <template slot="title">
<font-awesome-icon icon="folder-open"/> <font-awesome-icon icon="folder-open"/>
<span slot="title" class="item-title">{{ $i.baseText('mainSidebar.open') }}</span> <span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.open') }}</span>
</template> </template>
</n8n-menu-item> </n8n-menu-item>
</el-submenu> </el-submenu>
<n8n-menu-item index="executions"> <n8n-menu-item index="executions">
<font-awesome-icon icon="tasks"/>&nbsp; <font-awesome-icon icon="tasks"/>&nbsp;
<span slot="title" class="item-title-root">{{ $i.baseText('mainSidebar.executions') }}</span> <span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.executions') }}</span>
</n8n-menu-item> </n8n-menu-item>
<el-submenu index="help" class="help-menu" title="Help" popperClass="sidebar-popper"> <el-submenu index="help" class="help-menu" title="Help" popperClass="sidebar-popper">
<template slot="title"> <template slot="title">
<font-awesome-icon icon="question"/>&nbsp; <font-awesome-icon icon="question"/>&nbsp;
<span slot="title" class="item-title-root">{{ $i.baseText('mainSidebar.help') }}</span> <span slot="title" class="item-title-root">{{ $locale.baseText('mainSidebar.help') }}</span>
</template> </template>
<MenuItemsIterator :items="helpMenuItems" :afterItemClick="trackHelpItemClick" /> <MenuItemsIterator :items="helpMenuItems" :afterItemClick="trackHelpItemClick" />
@ -117,7 +117,7 @@
<n8n-menu-item index="help-about"> <n8n-menu-item index="help-about">
<template slot="title"> <template slot="title">
<font-awesome-icon class="about-icon" icon="info"/> <font-awesome-icon class="about-icon" icon="info"/>
<span slot="title" class="item-title">{{ $i.baseText('mainSidebar.aboutN8n') }}</span> <span slot="title" class="item-title">{{ $locale.baseText('mainSidebar.aboutN8n') }}</span>
</template> </template>
</n8n-menu-item> </n8n-menu-item>
</el-submenu> </el-submenu>
@ -209,7 +209,7 @@ export default mixins(
type: 'link', type: 'link',
properties: { properties: {
href: 'https://docs.n8n.io', href: 'https://docs.n8n.io',
title: this.$i.baseText('mainSidebar.helpMenuItems.documentation'), title: this.$locale.baseText('mainSidebar.helpMenuItems.documentation'),
icon: 'book', icon: 'book',
newWindow: true, newWindow: true,
}, },
@ -219,7 +219,7 @@ export default mixins(
type: 'link', type: 'link',
properties: { properties: {
href: 'https://community.n8n.io', href: 'https://community.n8n.io',
title: this.$i.baseText('mainSidebar.helpMenuItems.forum'), title: this.$locale.baseText('mainSidebar.helpMenuItems.forum'),
icon: 'users', icon: 'users',
newWindow: true, newWindow: true,
}, },
@ -229,7 +229,7 @@ export default mixins(
type: 'link', type: 'link',
properties: { properties: {
href: 'https://n8n.io/workflows', href: 'https://n8n.io/workflows',
title: this.$i.baseText('mainSidebar.helpMenuItems.workflows'), title: this.$locale.baseText('mainSidebar.helpMenuItems.workflows'),
icon: 'network-wired', icon: 'network-wired',
newWindow: true, newWindow: true,
}, },
@ -322,8 +322,8 @@ export default mixins(
this.stopExecutionInProgress = true; this.stopExecutionInProgress = true;
await this.restApi().stopCurrentExecution(executionId); await this.restApi().stopCurrentExecution(executionId);
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('mainSidebar.showMessage.stopExecution.title'), title: this.$locale.baseText('mainSidebar.showMessage.stopExecution.title'),
message: this.$i.baseText( message: this.$locale.baseText(
'mainSidebar.showMessage.stopExecution.message', 'mainSidebar.showMessage.stopExecution.message',
{ interpolate: { executionId }}, { interpolate: { executionId }},
), ),
@ -332,8 +332,8 @@ export default mixins(
} catch (error) { } catch (error) {
this.$showError( this.$showError(
error, error,
this.$i.baseText('mainSidebar.showError.stopExecution.title'), this.$locale.baseText('mainSidebar.showError.stopExecution.title'),
this.$i.baseText('mainSidebar.showError.stopExecution.message') + ':', this.$locale.baseText('mainSidebar.showError.stopExecution.message') + ':',
); );
} }
this.stopExecutionInProgress = false; this.stopExecutionInProgress = false;
@ -358,8 +358,8 @@ export default mixins(
worflowData = JSON.parse(data as string); worflowData = JSON.parse(data as string);
} catch (error) { } catch (error) {
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('mainSidebar.showMessage.handleFileImport.title'), title: this.$locale.baseText('mainSidebar.showMessage.handleFileImport.title'),
message: this.$i.baseText('mainSidebar.showMessage.handleFileImport.message'), message: this.$locale.baseText('mainSidebar.showMessage.handleFileImport.message'),
type: 'error', type: 'error',
}); });
return; return;
@ -382,12 +382,12 @@ export default mixins(
} else if (key === 'workflow-import-url') { } else if (key === 'workflow-import-url') {
try { try {
const promptResponse = await this.$prompt( const promptResponse = await this.$prompt(
this.$i.baseText('mainSidebar.prompt.workflowUrl') + ':', this.$locale.baseText('mainSidebar.prompt.workflowUrl') + ':',
this.$i.baseText('mainSidebar.prompt.importWorkflowFromUrl') + ':', this.$locale.baseText('mainSidebar.prompt.importWorkflowFromUrl') + ':',
{ {
confirmButtonText: this.$i.baseText('mainSidebar.prompt.import'), confirmButtonText: this.$locale.baseText('mainSidebar.prompt.import'),
cancelButtonText: this.$i.baseText('mainSidebar.prompt.cancel'), cancelButtonText: this.$locale.baseText('mainSidebar.prompt.cancel'),
inputErrorMessage: this.$i.baseText('mainSidebar.prompt.invalidUrl'), inputErrorMessage: this.$locale.baseText('mainSidebar.prompt.invalidUrl'),
inputPattern: /^http[s]?:\/\/.*\.json$/i, inputPattern: /^http[s]?:\/\/.*\.json$/i,
}, },
) as MessageBoxInputData; ) as MessageBoxInputData;
@ -396,14 +396,14 @@ export default mixins(
} catch (e) {} } catch (e) {}
} else if (key === 'workflow-delete') { } else if (key === 'workflow-delete') {
const deleteConfirmed = await this.confirmMessage( const deleteConfirmed = await this.confirmMessage(
this.$i.baseText( this.$locale.baseText(
'mainSidebar.confirmMessage.workflowDelete.message', 'mainSidebar.confirmMessage.workflowDelete.message',
{ interpolate: { workflowName: this.workflowName } }, { interpolate: { workflowName: this.workflowName } },
), ),
this.$i.baseText('mainSidebar.confirmMessage.workflowDelete.headline'), this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.headline'),
'warning', 'warning',
this.$i.baseText('mainSidebar.confirmMessage.workflowDelete.confirmButtonText'), this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.confirmButtonText'),
this.$i.baseText('mainSidebar.confirmMessage.workflowDelete.cancelButtonText'), this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.cancelButtonText'),
); );
if (deleteConfirmed === false) { if (deleteConfirmed === false) {
@ -415,8 +415,8 @@ export default mixins(
} catch (error) { } catch (error) {
this.$showError( this.$showError(
error, error,
this.$i.baseText('mainSidebar.showError.stopExecution.title'), this.$locale.baseText('mainSidebar.showError.stopExecution.title'),
this.$i.baseText('mainSidebar.showError.stopExecution.message') + ':', this.$locale.baseText('mainSidebar.showError.stopExecution.message') + ':',
); );
return; return;
} }
@ -424,8 +424,8 @@ export default mixins(
// Reset tab title since workflow is deleted. // Reset tab title since workflow is deleted.
this.$titleReset(); this.$titleReset();
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('mainSidebar.showMessage.handleSelect1.title'), title: this.$locale.baseText('mainSidebar.showMessage.handleSelect1.title'),
message: this.$i.baseText( message: this.$locale.baseText(
'mainSidebar.showMessage.handleSelect1.message', 'mainSidebar.showMessage.handleSelect1.message',
{ interpolate: { workflowName: this.workflowName }}, { interpolate: { workflowName: this.workflowName }},
), ),
@ -465,11 +465,11 @@ export default mixins(
const result = this.$store.getters.getStateIsDirty; const result = this.$store.getters.getStateIsDirty;
if(result) { if(result) {
const importConfirm = await this.confirmMessage( const importConfirm = await this.confirmMessage(
this.$i.baseText('mainSidebar.confirmMessage.workflowNew.message'), this.$locale.baseText('mainSidebar.confirmMessage.workflowNew.message'),
this.$i.baseText('mainSidebar.confirmMessage.workflowNew.headline'), this.$locale.baseText('mainSidebar.confirmMessage.workflowNew.headline'),
'warning', 'warning',
this.$i.baseText('mainSidebar.confirmMessage.workflowNew.confirmButtonText'), this.$locale.baseText('mainSidebar.confirmMessage.workflowNew.confirmButtonText'),
this.$i.baseText('mainSidebar.confirmMessage.workflowNew.cancelButtonText'), this.$locale.baseText('mainSidebar.confirmMessage.workflowNew.cancelButtonText'),
); );
if (importConfirm === true) { if (importConfirm === true) {
this.$store.commit('setStateDirty', false); this.$store.commit('setStateDirty', false);
@ -480,8 +480,8 @@ export default mixins(
} }
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('mainSidebar.showMessage.handleSelect2.title'), title: this.$locale.baseText('mainSidebar.showMessage.handleSelect2.title'),
message: this.$i.baseText('mainSidebar.showMessage.handleSelect2.message'), message: this.$locale.baseText('mainSidebar.showMessage.handleSelect2.message'),
type: 'success', type: 'success',
}); });
} }
@ -491,8 +491,8 @@ export default mixins(
} }
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('mainSidebar.showMessage.handleSelect3.title'), title: this.$locale.baseText('mainSidebar.showMessage.handleSelect3.title'),
message: this.$i.baseText('mainSidebar.showMessage.handleSelect3.message'), message: this.$locale.baseText('mainSidebar.showMessage.handleSelect3.message'),
type: 'success', type: 'success',
}); });
} }

16
packages/editor-ui/src/components/MultipleParameter.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<div @keydown.stop class="duplicate-parameter"> <div @keydown.stop class="duplicate-parameter">
<n8n-input-label <n8n-input-label
:label="$i.nodeText().topParameterDisplayName(parameter)" :label="$locale.nodeText().topParameterDisplayName(parameter)"
:tooltipText="$i.nodeText().topParameterDescription(parameter)" :tooltipText="$locale.nodeText().topParameterDescription(parameter)"
:underline="true" :underline="true"
:labelHoverableOnly="true" :labelHoverableOnly="true"
size="small" size="small"
@ -10,10 +10,10 @@
<div v-for="(value, index) in values" :key="index" class="duplicate-parameter-item" :class="parameter.type"> <div v-for="(value, index) in values" :key="index" class="duplicate-parameter-item" :class="parameter.type">
<div class="delete-item clickable" v-if="!isReadOnly"> <div class="delete-item clickable" v-if="!isReadOnly">
<font-awesome-icon icon="trash" :title="$i.baseText('multipleParameter.deleteItem')" @click="deleteItem(index)" /> <font-awesome-icon icon="trash" :title="$locale.baseText('multipleParameter.deleteItem')" @click="deleteItem(index)" />
<div v-if="sortable"> <div v-if="sortable">
<font-awesome-icon v-if="index !== 0" icon="angle-up" class="clickable" :title="$i.baseText('multipleParameter.moveUp')" @click="moveOptionUp(index)" /> <font-awesome-icon v-if="index !== 0" icon="angle-up" class="clickable" :title="$locale.baseText('multipleParameter.moveUp')" @click="moveOptionUp(index)" />
<font-awesome-icon v-if="index !== (values.length -1)" icon="angle-down" class="clickable" :title="$i.baseText('multipleParameter.moveDown')" @click="moveOptionDown(index)" /> <font-awesome-icon v-if="index !== (values.length -1)" icon="angle-down" class="clickable" :title="$locale.baseText('multipleParameter.moveDown')" @click="moveOptionDown(index)" />
</div> </div>
</div> </div>
<div v-if="parameter.type === 'collection'"> <div v-if="parameter.type === 'collection'">
@ -26,7 +26,7 @@
<div class="add-item-wrapper"> <div class="add-item-wrapper">
<div v-if="values && Object.keys(values).length === 0 || isReadOnly" class="no-items-exist"> <div v-if="values && Object.keys(values).length === 0 || isReadOnly" class="no-items-exist">
<n8n-text size="small">{{ $i.baseText('multipleParameter.currentlyNoItemsExist') }}</n8n-text> <n8n-text size="small">{{ $locale.baseText('multipleParameter.currentlyNoItemsExist') }}</n8n-text>
</div> </div>
<n8n-button v-if="!isReadOnly" fullWidth @click="addItem()" :label="addButtonText" /> <n8n-button v-if="!isReadOnly" fullWidth @click="addItem()" :label="addButtonText" />
</div> </div>
@ -68,10 +68,10 @@ export default mixins(genericHelpers)
!this.parameter.typeOptions && !this.parameter.typeOptions &&
!this.parameter.typeOptions.multipleValueButtonText !this.parameter.typeOptions.multipleValueButtonText
) { ) {
return this.$i.baseText('multipleParameter.addItem'); return this.$locale.baseText('multipleParameter.addItem');
} }
return this.$i.nodeText().multipleValueButtonText(this.parameter); return this.$locale.nodeText().multipleValueButtonText(this.parameter);
}, },
hideDelete (): boolean { hideDelete (): boolean {
return this.parameter.options.length === 1; return this.parameter.options.length === 1;

24
packages/editor-ui/src/components/Node.vue
View file

@ -22,7 +22,7 @@
</span> </span>
</div> </div>
<div class="node-executing-info" :title="$i.baseText('node.nodeIsExecuting')"> <div class="node-executing-info" :title="$locale.baseText('node.nodeIsExecuting')">
<font-awesome-icon icon="sync-alt" spin /> <font-awesome-icon icon="sync-alt" spin />
</div> </div>
@ -37,20 +37,20 @@
</div> </div>
<div class="node-options no-select-on-click" v-if="!isReadOnly" v-show="!hideActions"> <div class="node-options no-select-on-click" v-if="!isReadOnly" v-show="!hideActions">
<div v-touch:tap="deleteNode" class="option" :title="$i.baseText('node.deleteNode')" > <div v-touch:tap="deleteNode" class="option" :title="$locale.baseText('node.deleteNode')" >
<font-awesome-icon icon="trash" /> <font-awesome-icon icon="trash" />
</div> </div>
<div v-touch:tap="disableNode" class="option" :title="$i.baseText('node.activateDeactivateNode')"> <div v-touch:tap="disableNode" class="option" :title="$locale.baseText('node.activateDeactivateNode')">
<font-awesome-icon :icon="nodeDisabledIcon" /> <font-awesome-icon :icon="nodeDisabledIcon" />
</div> </div>
<div v-touch:tap="duplicateNode" class="option" :title="$i.baseText('node.duplicateNode')"> <div v-touch:tap="duplicateNode" class="option" :title="$locale.baseText('node.duplicateNode')">
<font-awesome-icon icon="clone" /> <font-awesome-icon icon="clone" />
</div> </div>
<div v-touch:tap="setNodeActive" class="option touch" :title="$i.baseText('node.editNode')" v-if="!isReadOnly"> <div v-touch:tap="setNodeActive" class="option touch" :title="$locale.baseText('node.editNode')" v-if="!isReadOnly">
<font-awesome-icon class="execute-icon" icon="cog" /> <font-awesome-icon class="execute-icon" icon="cog" />
</div> </div>
<div v-touch:tap="executeNode" class="option" :title="$i.baseText('node.executeNode')" v-if="!isReadOnly && !workflowRunning"> <div v-touch:tap="executeNode" class="option" :title="$locale.baseText('node.executeNode')" v-if="!isReadOnly && !workflowRunning">
<font-awesome-icon class="execute-icon" icon="play-circle" /> <font-awesome-icon class="execute-icon" icon="play-circle" />
</div> </div>
</div> </div>
@ -62,7 +62,7 @@
{{ nodeTitle }} {{ nodeTitle }}
</p> </p>
<p v-if="data.disabled"> <p v-if="data.disabled">
({{ $i.baseText('node.disabled') }}) ({{ $locale.baseText('node.disabled') }})
</p> </p>
</div> </div>
<div v-if="nodeSubtitle !== undefined" class="node-subtitle" :title="nodeSubtitle"> <div v-if="nodeSubtitle !== undefined" class="node-subtitle" :title="nodeSubtitle">
@ -171,7 +171,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
const nodeIssues = NodeHelpers.nodeIssuesToString(this.data.issues, this.data); const nodeIssues = NodeHelpers.nodeIssuesToString(this.data.issues, this.data);
return `${this.$i.baseText('node.issues')}:<br />&nbsp;&nbsp;- ` + nodeIssues.join('<br />&nbsp;&nbsp;- '); return `${this.$locale.baseText('node.issues')}:<br />&nbsp;&nbsp;- ` + nodeIssues.join('<br />&nbsp;&nbsp;- ');
}, },
nodeDisabledIcon (): string { nodeDisabledIcon (): string {
if (this.data.disabled === false) { if (this.data.disabled === false) {
@ -197,11 +197,11 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
return returnStyles; return returnStyles;
}, },
shortNodeType (): string { shortNodeType (): string {
return this.$i.shortNodeType(this.data.type); return this.$locale.shortNodeType(this.data.type);
}, },
nodeTitle (): string { nodeTitle (): string {
if (this.data.name === 'Start') { if (this.data.name === 'Start') {
return this.$i.headerText({ return this.$locale.headerText({
key: `headers.start.displayName`, key: `headers.start.displayName`,
fallback: 'Start', fallback: 'Start',
}); });
@ -217,9 +217,9 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
if (this.name === lastNodeExecuted) { if (this.name === lastNodeExecuted) {
const waitDate = new Date(workflowExecution.waitTill); const waitDate = new Date(workflowExecution.waitTill);
if (waitDate.toISOString() === WAIT_TIME_UNLIMITED) { if (waitDate.toISOString() === WAIT_TIME_UNLIMITED) {
return this.$i.baseText('node.theNodeIsWaitingIndefinitelyForAnIncomingWebhookCall'); return this.$locale.baseText('node.theNodeIsWaitingIndefinitelyForAnIncomingWebhookCall');
} }
return this.$i.baseText( return this.$locale.baseText(
'node.nodeIsWaitingTill', 'node.nodeIsWaitingTill',
{ {
interpolate: { interpolate: {

2
packages/editor-ui/src/components/NodeCreator/CategoryItem.vue
View file

@ -27,7 +27,7 @@ export default Vue.extend({
renderCategoryName(categoryName: string) { renderCategoryName(categoryName: string) {
const key = `nodeCreator.categoryNames.${categoryName}`; const key = `nodeCreator.categoryNames.${categoryName}`;
return this.$i.exists(key) ? this.$i.baseText(key) : categoryName; return this.$locale.exists(key) ? this.$locale.baseText(key) : categoryName;
}, },
}, },
}); });

6
packages/editor-ui/src/components/NodeCreator/MainPanel.vue
View file

@ -11,9 +11,9 @@
/> />
<div class="type-selector"> <div class="type-selector">
<el-tabs v-model="selectedType" stretch> <el-tabs v-model="selectedType" stretch>
<el-tab-pane :label="$i.baseText('nodeCreator.mainPanel.all')" :name="ALL_NODE_FILTER"></el-tab-pane> <el-tab-pane :label="$locale.baseText('nodeCreator.mainPanel.all')" :name="ALL_NODE_FILTER"></el-tab-pane>
<el-tab-pane :label="$i.baseText('nodeCreator.mainPanel.regular')" :name="REGULAR_NODE_FILTER"></el-tab-pane> <el-tab-pane :label="$locale.baseText('nodeCreator.mainPanel.regular')" :name="REGULAR_NODE_FILTER"></el-tab-pane>
<el-tab-pane :label="$i.baseText('nodeCreator.mainPanel.trigger')" :name="TRIGGER_NODE_FILTER"></el-tab-pane> <el-tab-pane :label="$locale.baseText('nodeCreator.mainPanel.trigger')" :name="TRIGGER_NODE_FILTER"></el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<div v-if="searchFilter.length === 0" class="scrollable"> <div v-if="searchFilter.length === 0" class="scrollable">

14
packages/editor-ui/src/components/NodeCreator/NoResults.vue
View file

@ -5,30 +5,30 @@
</div> </div>
<div class="title"> <div class="title">
<div> <div>
{{ $i.baseText('nodeCreator.noResults.weDidntMakeThatYet') }} {{ $locale.baseText('nodeCreator.noResults.weDidntMakeThatYet') }}
</div> </div>
<div class="action"> <div class="action">
{{ $i.baseText('nodeCreator.noResults.dontWorryYouCanProbablyDoItWithThe') }} {{ $locale.baseText('nodeCreator.noResults.dontWorryYouCanProbablyDoItWithThe') }}
<a @click="selectHttpRequest">{{ $i.baseText('nodeCreator.noResults.httpRequest') }}</a> or <a @click="selectHttpRequest">{{ $locale.baseText('nodeCreator.noResults.httpRequest') }}</a> or
<a @click="selectWebhook">{{ $i.baseText('nodeCreator.noResults.webhook') }}</a> {{ $i.baseText('nodeCreator.noResults.node') }} <a @click="selectWebhook">{{ $locale.baseText('nodeCreator.noResults.webhook') }}</a> {{ $locale.baseText('nodeCreator.noResults.node') }}
</div> </div>
</div> </div>
<div class="request"> <div class="request">
<div> <div>
{{ $i.baseText('nodeCreator.noResults.wantUsToMakeItFaster') }} {{ $locale.baseText('nodeCreator.noResults.wantUsToMakeItFaster') }}
</div> </div>
<div> <div>
<a <a
:href="REQUEST_NODE_FORM_URL" :href="REQUEST_NODE_FORM_URL"
target="_blank" target="_blank"
> >
<span>{{ $i.baseText('nodeCreator.noResults.requestTheNode') }}</span>&nbsp; <span>{{ $locale.baseText('nodeCreator.noResults.requestTheNode') }}</span>&nbsp;
<span> <span>
<font-awesome-icon <font-awesome-icon
class="external" class="external"
icon="external-link-alt" icon="external-link-alt"
:title="$i.baseText('nodeCreator.noResults.requestTheNode')" :title="$locale.baseText('nodeCreator.noResults.requestTheNode')"
/> />
</span> </span>
</a> </a>

6
packages/editor-ui/src/components/NodeCreator/NodeItem.vue
View file

@ -4,7 +4,7 @@
<div> <div>
<div :class="$style.details"> <div :class="$style.details">
<span :class="$style.name"> <span :class="$style.name">
{{ $i.headerText({ {{ $locale.headerText({
key: `headers.${shortNodeType}.displayName`, key: `headers.${shortNodeType}.displayName`,
fallback: nodeType.displayName, fallback: nodeType.displayName,
}) })
@ -15,7 +15,7 @@
</span> </span>
</div> </div>
<div :class="$style.description"> <div :class="$style.description">
{{ $i.headerText({ {{ $locale.headerText({
key: `headers.${shortNodeType}.description`, key: `headers.${shortNodeType}.description`,
fallback: nodeType.description, fallback: nodeType.description,
}) })
@ -46,7 +46,7 @@ export default Vue.extend({
], ],
computed: { computed: {
shortNodeType() { shortNodeType() {
return this.$i.shortNodeType(this.nodeType.name); return this.$locale.shortNodeType(this.nodeType.name);
}, },
}, },
// @ts-ignore // @ts-ignore

2
packages/editor-ui/src/components/NodeCreator/SearchBar.vue
View file

@ -5,7 +5,7 @@
</div> </div>
<div class="text"> <div class="text">
<input <input
:placeholder="$i.baseText('nodeCreator.searchBar.searchNodes')" :placeholder="$locale.baseText('nodeCreator.searchBar.searchNodes')"
ref="input" ref="input"
:value="value" :value="value"
@input="onInput" @input="onInput"

4
packages/editor-ui/src/components/NodeCreator/SubcategoryItem.vue
View file

@ -2,10 +2,10 @@
<div :class="$style.subcategory"> <div :class="$style.subcategory">
<div :class="$style.details"> <div :class="$style.details">
<div :class="$style.title"> <div :class="$style.title">
{{ $i.baseText(`nodeCreator.subcategoryNames.${subcategoryName}`) }} {{ $locale.baseText(`nodeCreator.subcategoryNames.${subcategoryName}`) }}
</div> </div>
<div v-if="item.properties.description" :class="$style.description"> <div v-if="item.properties.description" :class="$style.description">
{{ $i.baseText(`nodeCreator.subcategoryDescriptions.${subcategoryDescription}`) }} {{ $locale.baseText(`nodeCreator.subcategoryDescriptions.${subcategoryDescription}`) }}
</div> </div>
</div> </div>
<div :class="$style.action"> <div :class="$style.action">

2
packages/editor-ui/src/components/NodeCreator/SubcategoryPanel.vue
View file

@ -5,7 +5,7 @@
<font-awesome-icon class="back-arrow" icon="arrow-left" /> <font-awesome-icon class="back-arrow" icon="arrow-left" />
</div> </div>
<span> <span>
{{ $i.baseText(`nodeCreator.subcategoryNames.${subcategoryName}`) }} {{ $locale.baseText(`nodeCreator.subcategoryNames.${subcategoryName}`) }}
</span> </span>
</div> </div>

14
packages/editor-ui/src/components/NodeCredentials.vue
View file

@ -2,7 +2,7 @@
<div v-if="credentialTypesNodeDescriptionDisplayed.length" :class="$style.container"> <div v-if="credentialTypesNodeDescriptionDisplayed.length" :class="$style.container">
<div v-for="credentialTypeDescription in credentialTypesNodeDescriptionDisplayed" :key="credentialTypeDescription.name"> <div v-for="credentialTypeDescription in credentialTypesNodeDescriptionDisplayed" :key="credentialTypeDescription.name">
<n8n-input-label <n8n-input-label
:label="$i.baseText( :label="$locale.baseText(
'nodeCredentials.credentialFor', 'nodeCredentials.credentialFor',
{ {
interpolate: { interpolate: {
@ -20,7 +20,7 @@
</div> </div>
<div :class="issues.length ? $style.hasIssues : $style.input" v-else > <div :class="issues.length ? $style.hasIssues : $style.input" v-else >
<n8n-select :value="getSelectedId(credentialTypeDescription.name)" @change="(value) => onCredentialSelected(credentialTypeDescription.name, value)" :placeholder="$i.baseText('nodeCredentials.selectCredential')" size="small"> <n8n-select :value="getSelectedId(credentialTypeDescription.name)" @change="(value) => onCredentialSelected(credentialTypeDescription.name, value)" :placeholder="$locale.baseText('nodeCredentials.selectCredential')" size="small">
<n8n-option <n8n-option
v-for="(item) in credentialOptions[credentialTypeDescription.name]" v-for="(item) in credentialOptions[credentialTypeDescription.name]"
:key="item.id" :key="item.id"
@ -37,13 +37,13 @@
<div :class="$style.warning" v-if="issues.length"> <div :class="$style.warning" v-if="issues.length">
<n8n-tooltip placement="top" > <n8n-tooltip placement="top" >
<div slot="content" v-html="`${$i.baseText('nodeCredentials.issues')}:<br />&nbsp;&nbsp;- ` + issues.join('<br />&nbsp;&nbsp;- ')"></div> <div slot="content" v-html="`${$locale.baseText('nodeCredentials.issues')}:<br />&nbsp;&nbsp;- ` + issues.join('<br />&nbsp;&nbsp;- ')"></div>
<font-awesome-icon icon="exclamation-triangle" /> <font-awesome-icon icon="exclamation-triangle" />
</n8n-tooltip> </n8n-tooltip>
</div> </div>
<div :class="$style.edit" v-if="selected[credentialTypeDescription.name] && isCredentialExisting(credentialTypeDescription.name)"> <div :class="$style.edit" v-if="selected[credentialTypeDescription.name] && isCredentialExisting(credentialTypeDescription.name)">
<font-awesome-icon icon="pen" @click="editCredential(credentialTypeDescription.name)" class="clickable" :title="$i.baseText('nodeCredentials.updateCredential')" /> <font-awesome-icon icon="pen" @click="editCredential(credentialTypeDescription.name)" class="clickable" :title="$locale.baseText('nodeCredentials.updateCredential')" />
</div> </div>
</div> </div>
</n8n-input-label> </n8n-input-label>
@ -85,7 +85,7 @@ export default mixins(
], ],
data () { data () {
return { return {
NEW_CREDENTIALS_TEXT: `- ${this.$i.baseText('nodeCredentials.createNew')} -`, NEW_CREDENTIALS_TEXT: `- ${this.$locale.baseText('nodeCredentials.createNew')} -`,
newCredentialUnsubscribe: null as null | (() => void), newCredentialUnsubscribe: null as null | (() => void),
}; };
}, },
@ -215,8 +215,8 @@ export default mixins(
}); });
this.updateNodesCredentialsIssues(); this.updateNodesCredentialsIssues();
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('nodeCredentials.showMessage.title'), title: this.$locale.baseText('nodeCredentials.showMessage.title'),
message: this.$i.baseText( message: this.$locale.baseText(
'nodeCredentials.showMessage.message', 'nodeCredentials.showMessage.message',
{ {
interpolate: { interpolate: {

56
packages/editor-ui/src/components/NodeSettings.vue
View file

@ -5,7 +5,7 @@
<display-with-change :key-name="'name'" @valueChanged="valueChanged"></display-with-change> <display-with-change :key-name="'name'" @valueChanged="valueChanged"></display-with-change>
<a v-if="nodeType" :href="'http://n8n.io/nodes/' + nodeType.name" target="_blank" class="node-info"> <a v-if="nodeType" :href="'http://n8n.io/nodes/' + nodeType.name" target="_blank" class="node-info">
<n8n-tooltip class="clickable" placement="top" > <n8n-tooltip class="clickable" placement="top" >
<div slot="content" v-html="`<strong>${$i.baseText('nodeSettings.nodeDescription')}:</strong><br />` + nodeTypeDescription + `<br /><br /><strong>${$i.baseText('nodeSettings.clickOnTheQuestionMarkIcon')}</strong>`"></div> <div slot="content" v-html="`<strong>${$locale.baseText('nodeSettings.nodeDescription')}:</strong><br />` + nodeTypeDescription + `<br /><br /><strong>${$locale.baseText('nodeSettings.clickOnTheQuestionMarkIcon')}</strong>`"></div>
<font-awesome-icon icon="question-circle" /> <font-awesome-icon icon="question-circle" />
</n8n-tooltip> </n8n-tooltip>
</a> </a>
@ -14,7 +14,7 @@
<div class="node-is-not-valid" v-if="node && !nodeValid"> <div class="node-is-not-valid" v-if="node && !nodeValid">
<n8n-text> <n8n-text>
{{ {{
$i.baseText( $locale.baseText(
'nodeSettings.theNodeIsNotValidAsItsTypeIsUnknown', 'nodeSettings.theNodeIsNotValidAsItsTypeIsUnknown',
{ interpolate: { nodeType: node.type } }, { interpolate: { nodeType: node.type } },
) )
@ -23,17 +23,17 @@
</div> </div>
<div class="node-parameters-wrapper" v-if="node && nodeValid"> <div class="node-parameters-wrapper" v-if="node && nodeValid">
<el-tabs stretch @tab-click="handleTabClick"> <el-tabs stretch @tab-click="handleTabClick">
<el-tab-pane :label="$i.baseText('nodeSettings.parameters')"> <el-tab-pane :label="$locale.baseText('nodeSettings.parameters')">
<node-credentials :node="node" @credentialSelected="credentialSelected"></node-credentials> <node-credentials :node="node" @credentialSelected="credentialSelected"></node-credentials>
<node-webhooks :node="node" :nodeType="nodeType" /> <node-webhooks :node="node" :nodeType="nodeType" />
<parameter-input-list :parameters="parametersNoneSetting" :hideDelete="true" :nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged" /> <parameter-input-list :parameters="parametersNoneSetting" :hideDelete="true" :nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged" />
<div v-if="parametersNoneSetting.length === 0" class="no-parameters"> <div v-if="parametersNoneSetting.length === 0" class="no-parameters">
<n8n-text> <n8n-text>
{{ $i.baseText('nodeSettings.thisNodeDoesNotHaveAnyParameters') }} {{ $locale.baseText('nodeSettings.thisNodeDoesNotHaveAnyParameters') }}
</n8n-text> </n8n-text>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$i.baseText('nodeSettings.settings')"> <el-tab-pane :label="$locale.baseText('nodeSettings.settings')">
<parameter-input-list :parameters="nodeSettings" :hideDelete="true" :nodeValues="nodeValues" path="" @valueChanged="valueChanged" /> <parameter-input-list :parameters="nodeSettings" :hideDelete="true" :nodeValues="nodeValues" path="" @valueChanged="valueChanged" />
<parameter-input-list :parameters="parametersSetting" :nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged" /> <parameter-input-list :parameters="parametersSetting" :nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged" />
</el-tab-pane> </el-tab-pane>
@ -97,9 +97,9 @@ export default mixins(
}, },
nodeTypeName(): string { nodeTypeName(): string {
if (this.nodeType) { if (this.nodeType) {
const shortNodeType = this.$i.shortNodeType(this.nodeType.name); const shortNodeType = this.$locale.shortNodeType(this.nodeType.name);
return this.$i.headerText({ return this.$locale.headerText({
key: `headers.${shortNodeType}.displayName`, key: `headers.${shortNodeType}.displayName`,
fallback: this.nodeType.name, fallback: this.nodeType.name,
}); });
@ -109,14 +109,14 @@ export default mixins(
}, },
nodeTypeDescription (): string { nodeTypeDescription (): string {
if (this.nodeType && this.nodeType.description) { if (this.nodeType && this.nodeType.description) {
const shortNodeType = this.$i.shortNodeType(this.nodeType.name); const shortNodeType = this.$locale.shortNodeType(this.nodeType.name);
return this.$i.headerText({ return this.$locale.headerText({
key: `headers.${shortNodeType}.description`, key: `headers.${shortNodeType}.description`,
fallback: this.nodeType.description, fallback: this.nodeType.description,
}); });
} else { } else {
return this.$i.baseText('nodeSettings.noDescriptionFound'); return this.$locale.baseText('nodeSettings.noDescriptionFound');
} }
}, },
headerStyle (): object { headerStyle (): object {
@ -171,7 +171,7 @@ export default mixins(
nodeSettings: [ nodeSettings: [
{ {
displayName: this.$i.baseText('nodeSettings.notes.displayName'), displayName: this.$locale.baseText('nodeSettings.notes.displayName'),
name: 'notes', name: 'notes',
type: 'string', type: 'string',
typeOptions: { typeOptions: {
@ -179,50 +179,50 @@ export default mixins(
}, },
default: '', default: '',
noDataExpression: true, noDataExpression: true,
description: this.$i.baseText('nodeSettings.notes.description'), description: this.$locale.baseText('nodeSettings.notes.description'),
}, },
{ {
displayName: this.$i.baseText('nodeSettings.notesInFlow.displayName'), displayName: this.$locale.baseText('nodeSettings.notesInFlow.displayName'),
name: 'notesInFlow', name: 'notesInFlow',
type: 'boolean', type: 'boolean',
default: false, default: false,
noDataExpression: true, noDataExpression: true,
description: this.$i.baseText('nodeSettings.notesInFlow.description'), description: this.$locale.baseText('nodeSettings.notesInFlow.description'),
}, },
{ {
displayName: this.$i.baseText('nodeSettings.color.displayName'), displayName: this.$locale.baseText('nodeSettings.color.displayName'),
name: 'color', name: 'color',
type: 'color', type: 'color',
default: '#ff0000', default: '#ff0000',
noDataExpression: true, noDataExpression: true,
description: this.$i.baseText('nodeSettings.color.description'), description: this.$locale.baseText('nodeSettings.color.description'),
}, },
{ {
displayName: this.$i.baseText('nodeSettings.alwaysOutputData.displayName'), displayName: this.$locale.baseText('nodeSettings.alwaysOutputData.displayName'),
name: 'alwaysOutputData', name: 'alwaysOutputData',
type: 'boolean', type: 'boolean',
default: false, default: false,
noDataExpression: true, noDataExpression: true,
description: this.$i.baseText('nodeSettings.alwaysOutputData.description'), description: this.$locale.baseText('nodeSettings.alwaysOutputData.description'),
}, },
{ {
displayName: this.$i.baseText('nodeSettings.executeOnce.displayName'), displayName: this.$locale.baseText('nodeSettings.executeOnce.displayName'),
name: 'executeOnce', name: 'executeOnce',
type: 'boolean', type: 'boolean',
default: false, default: false,
noDataExpression: true, noDataExpression: true,
description: this.$i.baseText('nodeSettings.executeOnce.description'), description: this.$locale.baseText('nodeSettings.executeOnce.description'),
}, },
{ {
displayName: this.$i.baseText('nodeSettings.retryOnFail.displayName'), displayName: this.$locale.baseText('nodeSettings.retryOnFail.displayName'),
name: 'retryOnFail', name: 'retryOnFail',
type: 'boolean', type: 'boolean',
default: false, default: false,
noDataExpression: true, noDataExpression: true,
description: this.$i.baseText('nodeSettings.retryOnFail.description'), description: this.$locale.baseText('nodeSettings.retryOnFail.description'),
}, },
{ {
displayName: this.$i.baseText('nodeSettings.maxTries.displayName'), displayName: this.$locale.baseText('nodeSettings.maxTries.displayName'),
name: 'maxTries', name: 'maxTries',
type: 'number', type: 'number',
typeOptions: { typeOptions: {
@ -238,10 +238,10 @@ export default mixins(
}, },
}, },
noDataExpression: true, noDataExpression: true,
description: this.$i.baseText('nodeSettings.maxTries.description'), description: this.$locale.baseText('nodeSettings.maxTries.description'),
}, },
{ {
displayName: this.$i.baseText('nodeSettings.waitBetweenTries.displayName'), displayName: this.$locale.baseText('nodeSettings.waitBetweenTries.displayName'),
name: 'waitBetweenTries', name: 'waitBetweenTries',
type: 'number', type: 'number',
typeOptions: { typeOptions: {
@ -257,15 +257,15 @@ export default mixins(
}, },
}, },
noDataExpression: true, noDataExpression: true,
description: this.$i.baseText('nodeSettings.waitBetweenTries.description'), description: this.$locale.baseText('nodeSettings.waitBetweenTries.description'),
}, },
{ {
displayName: this.$i.baseText('nodeSettings.continueOnFail.displayName'), displayName: this.$locale.baseText('nodeSettings.continueOnFail.displayName'),
name: 'continueOnFail', name: 'continueOnFail',
type: 'boolean', type: 'boolean',
default: false, default: false,
noDataExpression: true, noDataExpression: true,
description: this.$i.baseText('nodeSettings.continueOnFail.description'), description: this.$locale.baseText('nodeSettings.continueOnFail.description'),
}, },
] as INodeProperties[], ] as INodeProperties[],

16
packages/editor-ui/src/components/NodeWebhooks.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<div v-if="webhooksNode.length" class="webhoooks"> <div v-if="webhooksNode.length" class="webhoooks">
<div class="clickable headline" :class="{expanded: !isMinimized}" @click="isMinimized=!isMinimized" :title="isMinimized ? $i.baseText('nodeWebhooks.clickToDisplayWebhookUrls') : $i.baseText('nodeWebhooks.clickToHideWebhookUrls')"> <div class="clickable headline" :class="{expanded: !isMinimized}" @click="isMinimized=!isMinimized" :title="isMinimized ? $locale.baseText('nodeWebhooks.clickToDisplayWebhookUrls') : $locale.baseText('nodeWebhooks.clickToHideWebhookUrls')">
<font-awesome-icon icon="angle-down" class="minimize-button minimize-icon" /> <font-awesome-icon icon="angle-down" class="minimize-button minimize-icon" />
{{ $i.baseText('nodeWebhooks.webhookUrls') }} {{ $locale.baseText('nodeWebhooks.webhookUrls') }}
</div> </div>
<el-collapse-transition> <el-collapse-transition>
<div class="node-webhooks" v-if="!isMinimized"> <div class="node-webhooks" v-if="!isMinimized">
@ -10,14 +10,14 @@
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-radio-group v-model="showUrlFor" size="mini"> <el-radio-group v-model="showUrlFor" size="mini">
<el-radio-button label="test">{{ $i.baseText('nodeWebhooks.testUrl') }}</el-radio-button> <el-radio-button label="test">{{ $locale.baseText('nodeWebhooks.testUrl') }}</el-radio-button>
<el-radio-button label="production">{{ $i.baseText('nodeWebhooks.productionUrl') }}</el-radio-button> <el-radio-button label="production">{{ $locale.baseText('nodeWebhooks.productionUrl') }}</el-radio-button>
</el-radio-group> </el-radio-group>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<n8n-tooltip v-for="(webhook, index) in webhooksNode" :key="index" class="item" :content="$i.baseText('nodeWebhooks.clickToCopyWebhookUrls')" placement="left"> <n8n-tooltip v-for="(webhook, index) in webhooksNode" :key="index" class="item" :content="$locale.baseText('nodeWebhooks.clickToCopyWebhookUrls')" placement="left">
<div class="webhook-wrapper"> <div class="webhook-wrapper">
<div class="http-field"> <div class="http-field">
<div class="http-method"> <div class="http-method">
@ -83,8 +83,8 @@ export default mixins(
this.copyToClipboard(webhookUrl); this.copyToClipboard(webhookUrl);
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('nodeWebhooks.showMessage.title'), title: this.$locale.baseText('nodeWebhooks.showMessage.title'),
message: this.$i.baseText('nodeWebhooks.showMessage.message'), message: this.$locale.baseText('nodeWebhooks.showMessage.message'),
type: 'success', type: 'success',
}); });
}, },
@ -95,7 +95,7 @@ export default mixins(
try { try {
return this.resolveExpression(webhookData[key] as string) as string; return this.resolveExpression(webhookData[key] as string) as string;
} catch (e) { } catch (e) {
return this.$i.baseText('nodeWebhooks.invalidExpression'); return this.$locale.baseText('nodeWebhooks.invalidExpression');
} }
}, },
getWebhookUrl (webhookData: IWebhookDescription): string { getWebhookUrl (webhookData: IWebhookDescription): string {

40
packages/editor-ui/src/components/ParameterInput.vue
View file

@ -38,7 +38,7 @@
:placeholder="isValueExpression ? '' : getPlaceholder()" :placeholder="isValueExpression ? '' : getPlaceholder()"
> >
<div slot="suffix" class="expand-input-icon-container"> <div slot="suffix" class="expand-input-icon-container">
<font-awesome-icon v-if="!isValueExpression && !isReadOnly" icon="external-link-alt" class="edit-window-button clickable" :title="$i.baseText('parameterInput.openEditWindow')" @click="displayEditDialog()" /> <font-awesome-icon v-if="!isValueExpression && !isReadOnly" icon="external-link-alt" class="edit-window-button clickable" :title="$locale.baseText('parameterInput.openEditWindow')" @click="displayEditDialog()" />
</div> </div>
</n8n-input> </n8n-input>
</div> </div>
@ -78,7 +78,7 @@
:value="displayValue" :value="displayValue"
:title="displayTitle" :title="displayTitle"
:disabled="isReadOnly" :disabled="isReadOnly"
:placeholder="parameter.placeholder ? getPlaceholder() : $i.baseText('parameterInput.selectDateAndTime')" :placeholder="parameter.placeholder ? getPlaceholder() : $locale.baseText('parameterInput.selectDateAndTime')"
:picker-options="dateTimePickerOptions" :picker-options="dateTimePickerOptions"
@change="valueChanged" @change="valueChanged"
@focus="setFocus" @focus="setFocus"
@ -171,7 +171,7 @@
<div class="parameter-issues" v-if="getIssues.length"> <div class="parameter-issues" v-if="getIssues.length">
<n8n-tooltip placement="top" > <n8n-tooltip placement="top" >
<div slot="content" v-html="`${$i.baseText('parameterInput.issues')}:<br />&nbsp;&nbsp;- ` + getIssues.join('<br />&nbsp;&nbsp;- ')"></div> <div slot="content" v-html="`${$locale.baseText('parameterInput.issues')}:<br />&nbsp;&nbsp;- ` + getIssues.join('<br />&nbsp;&nbsp;- ')"></div>
<font-awesome-icon icon="exclamation-triangle" /> <font-awesome-icon icon="exclamation-triangle" />
</n8n-tooltip> </n8n-tooltip>
</div> </div>
@ -179,13 +179,13 @@
<div class="parameter-options" v-if="displayOptionsComputed"> <div class="parameter-options" v-if="displayOptionsComputed">
<el-dropdown trigger="click" @command="optionSelected" size="mini"> <el-dropdown trigger="click" @command="optionSelected" size="mini">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
<font-awesome-icon icon="cogs" class="reset-icon clickable" :title="$i.baseText('parameterInput.parameterOptions')"/> <font-awesome-icon icon="cogs" class="reset-icon clickable" :title="$locale.baseText('parameterInput.parameterOptions')"/>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="addExpression" v-if="parameter.noDataExpression !== true && !isValueExpression">{{ $i.baseText('parameterInput.addExpression') }}</el-dropdown-item> <el-dropdown-item command="addExpression" v-if="parameter.noDataExpression !== true && !isValueExpression">{{ $locale.baseText('parameterInput.addExpression') }}</el-dropdown-item>
<el-dropdown-item command="removeExpression" v-if="parameter.noDataExpression !== true && isValueExpression">{{ $i.baseText('parameterInput.removeExpression') }}</el-dropdown-item> <el-dropdown-item command="removeExpression" v-if="parameter.noDataExpression !== true && isValueExpression">{{ $locale.baseText('parameterInput.removeExpression') }}</el-dropdown-item>
<el-dropdown-item command="refreshOptions" v-if="Boolean(remoteMethod)">{{ $i.baseText('parameterInput.refreshList') }}</el-dropdown-item> <el-dropdown-item command="refreshOptions" v-if="Boolean(remoteMethod)">{{ $locale.baseText('parameterInput.refreshList') }}</el-dropdown-item>
<el-dropdown-item command="resetValue" :disabled="isDefault" divided>{{ $i.baseText('parameterInput.resetValue') }}</el-dropdown-item> <el-dropdown-item command="resetValue" :disabled="isDefault" divided>{{ $locale.baseText('parameterInput.resetValue') }}</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
@ -331,23 +331,23 @@ export default mixins(
const interpolation = { interpolate: { shortPath: this.shortPath } }; const interpolation = { interpolate: { shortPath: this.shortPath } };
if (this.getIssues.length && this.isValueExpression) { if (this.getIssues.length && this.isValueExpression) {
return this.$i.baseText( return this.$locale.baseText(
'parameterInput.parameterHasIssuesAndExpression', 'parameterInput.parameterHasIssuesAndExpression',
interpolation, interpolation,
); );
} else if (this.getIssues.length && !this.isValueExpression) { } else if (this.getIssues.length && !this.isValueExpression) {
return this.$i.baseText( return this.$locale.baseText(
'parameterInput.parameterHasIssues', 'parameterInput.parameterHasIssues',
interpolation, interpolation,
); );
} else if (!this.getIssues.length && this.isValueExpression) { } else if (!this.getIssues.length && this.isValueExpression) {
return this.$i.baseText( return this.$locale.baseText(
'parameterInput.parameterHasExpression', 'parameterInput.parameterHasExpression',
interpolation, interpolation,
); );
} }
return this.$i.baseText('parameterInput.parameter', interpolation); return this.$locale.baseText('parameterInput.parameter', interpolation);
}, },
displayValue (): string | number | boolean | null { displayValue (): string | number | boolean | null {
if (this.remoteParameterOptionsLoading === true) { if (this.remoteParameterOptionsLoading === true) {
@ -355,7 +355,7 @@ export default mixins(
// to user that the data is loading. If not it would // to user that the data is loading. If not it would
// display the user the key instead of the value it // display the user the key instead of the value it
// represents // represents
return this.$i.baseText('parameterInput.loadingOptions'); return this.$locale.baseText('parameterInput.loadingOptions');
} }
let returnValue; let returnValue;
@ -424,7 +424,7 @@ export default mixins(
try { try {
computedValue = this.resolveExpression(this.value) as NodeParameterValue; computedValue = this.resolveExpression(this.value) as NodeParameterValue;
} catch (error) { } catch (error) {
computedValue = `[${this.$i.baseText('parameterInput.error')}}: ${error.message}]`; computedValue = `[${this.$locale.baseText('parameterInput.error')}}: ${error.message}]`;
} }
// Try to convert it into the corret type // Try to convert it into the corret type
@ -570,18 +570,18 @@ export default mixins(
methods: { methods: {
getPlaceholder(): string { getPlaceholder(): string {
return this.isForCredential return this.isForCredential
? this.$i.credText().placeholder(this.parameter) ? this.$locale.credText().placeholder(this.parameter)
: this.$i.nodeText().placeholder(this.parameter); : this.$locale.nodeText().placeholder(this.parameter);
}, },
getOptionsOptionDisplayName(option: { value: string; name: string }): string { getOptionsOptionDisplayName(option: { value: string; name: string }): string {
return this.isForCredential return this.isForCredential
? this.$i.credText().optionsOptionDisplayName(this.parameter, option) ? this.$locale.credText().optionsOptionDisplayName(this.parameter, option)
: this.$i.nodeText().optionsOptionDisplayName(this.parameter, option); : this.$locale.nodeText().optionsOptionDisplayName(this.parameter, option);
}, },
getOptionsOptionDescription(option: { value: string; description: string }): string { getOptionsOptionDescription(option: { value: string; description: string }): string {
return this.isForCredential return this.isForCredential
? this.$i.credText().optionsOptionDescription(this.parameter, option) ? this.$locale.credText().optionsOptionDescription(this.parameter, option)
: this.$i.nodeText().optionsOptionDescription(this.parameter, option); : this.$locale.nodeText().optionsOptionDescription(this.parameter, option);
}, },
async loadRemoteParameterOptions () { async loadRemoteParameterOptions () {

6
packages/editor-ui/src/components/ParameterInputExpanded.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<n8n-input-label <n8n-input-label
:label="$i.credText().topParameterDisplayName(parameter)" :label="$locale.credText().topParameterDisplayName(parameter)"
:tooltipText="$i.credText().topParameterDescription(parameter)" :tooltipText="$locale.credText().topParameterDescription(parameter)"
:required="parameter.required" :required="parameter.required"
:showTooltip="focused" :showTooltip="focused"
> >
@ -21,7 +21,7 @@
inputSize="large" inputSize="large"
/> />
<div class="errors" v-if="showRequiredErrors"> <div class="errors" v-if="showRequiredErrors">
{{ $i.baseText('parameterInputExpanded.thisFieldIsRequired') }} <a v-if="documentationUrl" :href="documentationUrl" target="_blank" @click="onDocumentationUrlClick">{{ $i.baseText('parameterInputExpanded.openDocs') }}</a> {{ $locale.baseText('parameterInputExpanded.thisFieldIsRequired') }} <a v-if="documentationUrl" :href="documentationUrl" target="_blank" @click="onDocumentationUrlClick">{{ $locale.baseText('parameterInputExpanded.openDocs') }}</a>
</div> </div>
</n8n-input-label> </n8n-input-label>
</template> </template>

4
packages/editor-ui/src/components/ParameterInputFull.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<n8n-input-label <n8n-input-label
:label="$i.nodeText().topParameterDisplayName(parameter)" :label="$locale.nodeText().topParameterDisplayName(parameter)"
:tooltipText="$i.nodeText().topParameterDescription(parameter)" :tooltipText="$locale.nodeText().topParameterDescription(parameter)"
:showTooltip="focused" :showTooltip="focused"
:bold="false" :bold="false"
size="small" size="small"

14
packages/editor-ui/src/components/ParameterInputList.vue
View file

@ -16,7 +16,7 @@
<div v-else-if="parameter.type === 'notice'" class="parameter-item parameter-notice"> <div v-else-if="parameter.type === 'notice'" class="parameter-item parameter-notice">
<n8n-text size="small"> <n8n-text size="small">
<span v-html="$i.nodeText().topParameterDisplayName(parameter)"></span> <span v-html="$locale.nodeText().topParameterDisplayName(parameter)"></span>
</n8n-text> </n8n-text>
</div> </div>
@ -24,17 +24,17 @@
v-else-if="['collection', 'fixedCollection'].includes(parameter.type)" v-else-if="['collection', 'fixedCollection'].includes(parameter.type)"
class="multi-parameter" class="multi-parameter"
> >
<div class="delete-option clickable" :title="$i.baseText('parameterInputList.delete')" v-if="hideDelete !== true && !isReadOnly"> <div class="delete-option clickable" :title="$locale.baseText('parameterInputList.delete')" v-if="hideDelete !== true && !isReadOnly">
<font-awesome-icon <font-awesome-icon
icon="trash" icon="trash"
class="reset-icon clickable" class="reset-icon clickable"
:title="$i.baseText('parameterInputList.parameterOptions')" :title="$locale.baseText('parameterInputList.parameterOptions')"
@click="deleteOption(parameter.name)" @click="deleteOption(parameter.name)"
/> />
</div> </div>
<n8n-input-label <n8n-input-label
:label="$i.nodeText().topParameterDisplayName(parameter)" :label="$locale.nodeText().topParameterDisplayName(parameter)"
:tooltipText="$i.nodeText().topParameterDescription(parameter)" :tooltipText="$locale.nodeText().topParameterDescription(parameter)"
size="small" size="small"
:underline="true" :underline="true"
:labelHoverableOnly="true" :labelHoverableOnly="true"
@ -59,11 +59,11 @@
</div> </div>
<div v-else-if="displayNodeParameter(parameter)" class="parameter-item"> <div v-else-if="displayNodeParameter(parameter)" class="parameter-item">
<div class="delete-option clickable" :title="$i.baseText('parameterInputList.delete')" v-if="hideDelete !== true && !isReadOnly"> <div class="delete-option clickable" :title="$locale.baseText('parameterInputList.delete')" v-if="hideDelete !== true && !isReadOnly">
<font-awesome-icon <font-awesome-icon
icon="trash" icon="trash"
class="reset-icon clickable" class="reset-icon clickable"
:title="$i.baseText('parameterInputList.deleteParameter')" :title="$locale.baseText('parameterInputList.deleteParameter')"
@click="deleteOption(parameter.name)" @click="deleteOption(parameter.name)"
/> />
</div> </div>

86
packages/editor-ui/src/components/PersonalizationModal.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<Modal <Modal
:name="PERSONALIZATION_MODAL_KEY" :name="PERSONALIZATION_MODAL_KEY"
:title="!submitted? $i.baseText('personalizationModal.getStarted') : $i.baseText('personalizationModal.thanks')" :title="!submitted? $locale.baseText('personalizationModal.getStarted') : $locale.baseText('personalizationModal.thanks')"
:subtitle="!submitted? $i.baseText('personalizationModal.theseQuestionsHelpUs') : ''" :subtitle="!submitted? $locale.baseText('personalizationModal.theseQuestionsHelpUs') : ''"
:centerTitle="true" :centerTitle="true"
:showClose="false" :showClose="false"
:eventBus="modalBus" :eventBus="modalBus"
@ -14,11 +14,11 @@
<template v-slot:content> <template v-slot:content>
<div v-if="submitted" :class="$style.submittedContainer"> <div v-if="submitted" :class="$style.submittedContainer">
<img :class="$style.demoImage" :src="baseUrl + 'suggestednodes.png'" /> <img :class="$style.demoImage" :src="baseUrl + 'suggestednodes.png'" />
<n8n-text>{{ $i.baseText('personalizationModal.lookOutForThingsMarked') }}</n8n-text> <n8n-text>{{ $locale.baseText('personalizationModal.lookOutForThingsMarked') }}</n8n-text>
</div> </div>
<div :class="$style.container" v-else> <div :class="$style.container" v-else>
<n8n-input-label :label="$i.baseText('personalizationModal.howAreYourCodingSkills')"> <n8n-input-label :label="$locale.baseText('personalizationModal.howAreYourCodingSkills')">
<n8n-select :value="values[CODING_SKILL_KEY]" :placeholder="$i.baseText('personalizationModal.select')" @change="(value) => values[CODING_SKILL_KEY] = value"> <n8n-select :value="values[CODING_SKILL_KEY]" :placeholder="$locale.baseText('personalizationModal.select')" @change="(value) => values[CODING_SKILL_KEY] = value">
<n8n-option <n8n-option
:label="baseText('personalizationModal.neverCoded')" :label="baseText('personalizationModal.neverCoded')"
value="0" value="0"
@ -46,76 +46,76 @@
</n8n-select> </n8n-select>
</n8n-input-label> </n8n-input-label>
<n8n-input-label :label="$i.baseText('personalizationModal.whichOfTheseAreasDoYouMainlyWorkIn')"> <n8n-input-label :label="$locale.baseText('personalizationModal.whichOfTheseAreasDoYouMainlyWorkIn')">
<n8n-select :value="values[WORK_AREA_KEY]" multiple :placeholder="$i.baseText('personalizationModal.select')" @change="(value) => onMultiInput(WORK_AREA_KEY, value)"> <n8n-select :value="values[WORK_AREA_KEY]" multiple :placeholder="$locale.baseText('personalizationModal.select')" @change="(value) => onMultiInput(WORK_AREA_KEY, value)">
<n8n-option :value="FINANCE_WORK_AREA" :label="$i.baseText('personalizationModal.finance')" /> <n8n-option :value="FINANCE_WORK_AREA" :label="$locale.baseText('personalizationModal.finance')" />
<n8n-option :value="HR_WORK_AREA" :label="$i.baseText('personalizationModal.hr')" /> <n8n-option :value="HR_WORK_AREA" :label="$locale.baseText('personalizationModal.hr')" />
<n8n-option :value="IT_ENGINEERING_WORK_AREA" :label="$i.baseText('personalizationModal.itEngineering')" /> <n8n-option :value="IT_ENGINEERING_WORK_AREA" :label="$locale.baseText('personalizationModal.itEngineering')" />
<n8n-option :value="LEGAL_WORK_AREA" :label="$i.baseText('personalizationModal.legal')" /> <n8n-option :value="LEGAL_WORK_AREA" :label="$locale.baseText('personalizationModal.legal')" />
<n8n-option :value="MARKETING_WORK_AREA" :label="$i.baseText('personalizationModal.marketing')" /> <n8n-option :value="MARKETING_WORK_AREA" :label="$locale.baseText('personalizationModal.marketing')" />
<n8n-option :value="OPS_WORK_AREA" :label="$i.baseText('personalizationModal.operations')" /> <n8n-option :value="OPS_WORK_AREA" :label="$locale.baseText('personalizationModal.operations')" />
<n8n-option :value="PRODUCT_WORK_AREA" :label="$i.baseText('personalizationModal.product')" /> <n8n-option :value="PRODUCT_WORK_AREA" :label="$locale.baseText('personalizationModal.product')" />
<n8n-option :value="SALES_BUSINESSDEV_WORK_AREA" :label="$i.baseText('personalizationModal.salesBizDev')" /> <n8n-option :value="SALES_BUSINESSDEV_WORK_AREA" :label="$locale.baseText('personalizationModal.salesBizDev')" />
<n8n-option :value="SECURITY_WORK_AREA" :label="$i.baseText('personalizationModal.security')" /> <n8n-option :value="SECURITY_WORK_AREA" :label="$locale.baseText('personalizationModal.security')" />
<n8n-option :value="SUPPORT_WORK_AREA" :label="$i.baseText('personalizationModal.support')" /> <n8n-option :value="SUPPORT_WORK_AREA" :label="$locale.baseText('personalizationModal.support')" />
<n8n-option :value="EXECUTIVE_WORK_AREA" :label="$i.baseText('personalizationModal.executiveTeam')" /> <n8n-option :value="EXECUTIVE_WORK_AREA" :label="$locale.baseText('personalizationModal.executiveTeam')" />
<n8n-option :value="OTHER_WORK_AREA_OPTION" :label="$i.baseText('personalizationModal.otherPleaseSpecify')" /> <n8n-option :value="OTHER_WORK_AREA_OPTION" :label="$locale.baseText('personalizationModal.otherPleaseSpecify')" />
<n8n-option :value="NOT_APPLICABLE_WORK_AREA" :label="$i.baseText('personalizationModal.imNotUsingN8nForWork')" /> <n8n-option :value="NOT_APPLICABLE_WORK_AREA" :label="$locale.baseText('personalizationModal.imNotUsingN8nForWork')" />
</n8n-select> </n8n-select>
</n8n-input-label> </n8n-input-label>
<n8n-input <n8n-input
v-if="otherWorkAreaFieldVisible" v-if="otherWorkAreaFieldVisible"
:value="values[OTHER_WORK_AREA_KEY]" :value="values[OTHER_WORK_AREA_KEY]"
:placeholder="$i.baseText('personalizationModal.specifyYourWorkArea')" :placeholder="$locale.baseText('personalizationModal.specifyYourWorkArea')"
@input="(value) => values[OTHER_WORK_AREA_KEY] = value" @input="(value) => values[OTHER_WORK_AREA_KEY] = value"
/> />
<section v-if="showAllIndustryQuestions"> <section v-if="showAllIndustryQuestions">
<n8n-input-label :label="$i.baseText('personalizationModal.whichIndustriesIsYourCompanyIn')"> <n8n-input-label :label="$locale.baseText('personalizationModal.whichIndustriesIsYourCompanyIn')">
<n8n-select :value="values[COMPANY_INDUSTRY_KEY]" multiple :placeholder="$i.baseText('personalizationModal.select')" @change="(value) => onMultiInput(COMPANY_INDUSTRY_KEY, value)"> <n8n-select :value="values[COMPANY_INDUSTRY_KEY]" multiple :placeholder="$locale.baseText('personalizationModal.select')" @change="(value) => onMultiInput(COMPANY_INDUSTRY_KEY, value)">
<n8n-option :value="E_COMMERCE_INDUSTRY" :label="$i.baseText('personalizationModal.eCommerce')" /> <n8n-option :value="E_COMMERCE_INDUSTRY" :label="$locale.baseText('personalizationModal.eCommerce')" />
<n8n-option :value="AUTOMATION_CONSULTING_INDUSTRY" :label="$i.baseText('personalizationModal.automationConsulting')" /> <n8n-option :value="AUTOMATION_CONSULTING_INDUSTRY" :label="$locale.baseText('personalizationModal.automationConsulting')" />
<n8n-option :value="SYSTEM_INTEGRATION_INDUSTRY" :label="$i.baseText('personalizationModal.systemsIntegration')" /> <n8n-option :value="SYSTEM_INTEGRATION_INDUSTRY" :label="$locale.baseText('personalizationModal.systemsIntegration')" />
<n8n-option :value="GOVERNMENT_INDUSTRY" :label="$i.baseText('personalizationModal.government')" /> <n8n-option :value="GOVERNMENT_INDUSTRY" :label="$locale.baseText('personalizationModal.government')" />
<n8n-option :value="LEGAL_INDUSTRY" :label="$i.baseText('personalizationModal.legal')" /> <n8n-option :value="LEGAL_INDUSTRY" :label="$locale.baseText('personalizationModal.legal')" />
<n8n-option :value="HEALTHCARE_INDUSTRY" :label="$i.baseText('personalizationModal.healthcare')" /> <n8n-option :value="HEALTHCARE_INDUSTRY" :label="$locale.baseText('personalizationModal.healthcare')" />
<n8n-option :value="FINANCE_INDUSTRY" :label="$i.baseText('personalizationModal.finance')" /> <n8n-option :value="FINANCE_INDUSTRY" :label="$locale.baseText('personalizationModal.finance')" />
<n8n-option :value="SECURITY_INDUSTRY" :label="$i.baseText('personalizationModal.security')" /> <n8n-option :value="SECURITY_INDUSTRY" :label="$locale.baseText('personalizationModal.security')" />
<n8n-option :value="SAAS_INDUSTRY" :label="$i.baseText('personalizationModal.saas')" /> <n8n-option :value="SAAS_INDUSTRY" :label="$locale.baseText('personalizationModal.saas')" />
<n8n-option :value="OTHER_INDUSTRY_OPTION" :label="$i.baseText('personalizationModal.otherPleaseSpecify')" /> <n8n-option :value="OTHER_INDUSTRY_OPTION" :label="$locale.baseText('personalizationModal.otherPleaseSpecify')" />
</n8n-select> </n8n-select>
</n8n-input-label> </n8n-input-label>
<n8n-input <n8n-input
v-if="otherCompanyIndustryFieldVisible" v-if="otherCompanyIndustryFieldVisible"
:value="values[OTHER_COMPANY_INDUSTRY_KEY]" :value="values[OTHER_COMPANY_INDUSTRY_KEY]"
:placeholder="$i.baseText('personalizationModal.specifyYourCompanysIndustry')" :placeholder="$locale.baseText('personalizationModal.specifyYourCompanysIndustry')"
@input="(value) => values[OTHER_COMPANY_INDUSTRY_KEY] = value" @input="(value) => values[OTHER_COMPANY_INDUSTRY_KEY] = value"
/> />
<n8n-input-label :label="$i.baseText('personalizationModal.howBigIsYourCompany')"> <n8n-input-label :label="$locale.baseText('personalizationModal.howBigIsYourCompany')">
<n8n-select :value="values[COMPANY_SIZE_KEY]" placeholder="Select..." @change="(value) => values[COMPANY_SIZE_KEY] = value"> <n8n-select :value="values[COMPANY_SIZE_KEY]" placeholder="Select..." @change="(value) => values[COMPANY_SIZE_KEY] = value">
<n8n-option <n8n-option
:label="$i.baseText('personalizationModal.lessThan20People')" :label="$locale.baseText('personalizationModal.lessThan20People')"
:value="COMPANY_SIZE_20_OR_LESS" :value="COMPANY_SIZE_20_OR_LESS"
/> />
<n8n-option <n8n-option
:label="`20-99 ${$i.baseText('personalizationModal.people')}`" :label="`20-99 ${$locale.baseText('personalizationModal.people')}`"
:value="COMPANY_SIZE_20_99" :value="COMPANY_SIZE_20_99"
/> />
<n8n-option <n8n-option
:label="`100-499 ${$i.baseText('personalizationModal.people')}`" :label="`100-499 ${$locale.baseText('personalizationModal.people')}`"
:value="COMPANY_SIZE_100_499" :value="COMPANY_SIZE_100_499"
/> />
<n8n-option <n8n-option
:label="`500-999 ${$i.baseText('personalizationModal.people')}`" :label="`500-999 ${$locale.baseText('personalizationModal.people')}`"
:value="COMPANY_SIZE_500_999" :value="COMPANY_SIZE_500_999"
/> />
<n8n-option <n8n-option
:label="`1000+ ${$i.baseText('personalizationModal.people')}`" :label="`1000+ ${$locale.baseText('personalizationModal.people')}`"
:value="COMPANY_SIZE_1000_OR_MORE" :value="COMPANY_SIZE_1000_OR_MORE"
/> />
<n8n-option <n8n-option
:label="$i.baseText('personalizationModal.imNotUsingN8nForWork')" :label="$locale.baseText('personalizationModal.imNotUsingN8nForWork')"
:value="COMPANY_SIZE_PERSONAL_USE" :value="COMPANY_SIZE_PERSONAL_USE"
/> />
</n8n-select> </n8n-select>
@ -126,8 +126,8 @@
</template> </template>
<template v-slot:footer> <template v-slot:footer>
<div> <div>
<n8n-button v-if="submitted" @click="closeDialog" :label="$i.baseText('personalizationModal.getStarted')" float="right" /> <n8n-button v-if="submitted" @click="closeDialog" :label="$locale.baseText('personalizationModal.getStarted')" float="right" />
<n8n-button v-else @click="save" :loading="isSaving" :label="$i.baseText('personalizationModal.continue')" float="right" /> <n8n-button v-else @click="save" :loading="isSaving" :label="$locale.baseText('personalizationModal.continue')" float="right" />
</div> </div>
</template> </template>
</Modal> </Modal>

4
packages/editor-ui/src/components/PushConnectionTracker.vue
View file

@ -3,10 +3,10 @@
<div class="push-connection-lost primary-color" v-if="!pushConnectionActive"> <div class="push-connection-lost primary-color" v-if="!pushConnectionActive">
<n8n-tooltip placement="bottom-end" > <n8n-tooltip placement="bottom-end" >
<div slot="content"> <div slot="content">
{{ $i.baseText('pushConnectionTracker.cannotConnectToServer') }} {{ $locale.baseText('pushConnectionTracker.cannotConnectToServer') }}
</div> </div>
<span> <span>
<font-awesome-icon icon="exclamation-triangle" />&nbsp; {{ $i.baseText('pushConnectionTracker.connectionLost') }} <font-awesome-icon icon="exclamation-triangle" />&nbsp; {{ $locale.baseText('pushConnectionTracker.connectionLost') }}
</span> </span>
</n8n-tooltip> </n8n-tooltip>
</div> </div>

54
packages/editor-ui/src/components/RunData.vue
View file

@ -7,10 +7,10 @@
class="execute-node-button" class="execute-node-button"
> >
<n8n-button <n8n-button
:title="$i.baseText('runData.executesThisNodeAfterExecuting', { interpolate: { nodeName: node.name } })" :title="$locale.baseText('runData.executesThisNodeAfterExecuting', { interpolate: { nodeName: node.name } })"
:loading="workflowRunning" :loading="workflowRunning"
icon="play-circle" icon="play-circle"
:label="$i.baseText('runData.executeNode')" :label="$locale.baseText('runData.executeNode')"
@click.stop="runWorkflow(node.name, 'RunData.ExecuteNodeButton')" @click.stop="runWorkflow(node.name, 'RunData.ExecuteNodeButton')"
/> />
</div> </div>
@ -18,10 +18,10 @@
<div class="header"> <div class="header">
<div class="title-text"> <div class="title-text">
<n8n-text :bold="true" v-if="dataCount < maxDisplayItems"> <n8n-text :bold="true" v-if="dataCount < maxDisplayItems">
{{ $i.baseText('runData.items') }}: {{ dataCount }} {{ $locale.baseText('runData.items') }}: {{ dataCount }}
</n8n-text> </n8n-text>
<div v-else class="title-text"> <div v-else class="title-text">
<n8n-text :bold="true">{{ $i.baseText('runData.items') }}:</n8n-text> <n8n-text :bold="true">{{ $locale.baseText('runData.items') }}:</n8n-text>
<span class="opts"> <span class="opts">
<n8n-select size="mini" v-model="maxDisplayItems" @click.stop> <n8n-select size="mini" v-model="maxDisplayItems" @click.stop>
<n8n-option v-for="option in maxDisplayItemsOptions" :label="option" :value="option" :key="option" /> <n8n-option v-for="option in maxDisplayItemsOptions" :label="option" :value="option" :key="option" />
@ -34,13 +34,13 @@
placement="right" placement="right"
> >
<div slot="content"> <div slot="content">
<n8n-text :bold="true" size="small">{{ $i.baseText('runData.startTime') + ':' }}</n8n-text> {{runMetadata.startTime}}<br/> <n8n-text :bold="true" size="small">{{ $locale.baseText('runData.startTime') + ':' }}</n8n-text> {{runMetadata.startTime}}<br/>
<n8n-text :bold="true" size="small">{{ $i.baseText('runData.executionTime') + ':' }}</n8n-text> {{runMetadata.executionTime}} {{ $i.baseText('runData.ms') }} <n8n-text :bold="true" size="small">{{ $locale.baseText('runData.executionTime') + ':' }}</n8n-text> {{runMetadata.executionTime}} {{ $locale.baseText('runData.ms') }}
</div> </div>
<font-awesome-icon icon="info-circle" class="primary-color" /> <font-awesome-icon icon="info-circle" class="primary-color" />
</n8n-tooltip> </n8n-tooltip>
<n8n-text :bold="true" v-if="maxOutputIndex > 0"> <n8n-text :bold="true" v-if="maxOutputIndex > 0">
| {{ $i.baseText('runData.output') }}: | {{ $locale.baseText('runData.output') }}:
</n8n-text> </n8n-text>
<span class="opts" v-if="maxOutputIndex > 0" > <span class="opts" v-if="maxOutputIndex > 0" >
<n8n-select size="mini" v-model="outputIndex" @click.stop> <n8n-select size="mini" v-model="outputIndex" @click.stop>
@ -50,7 +50,7 @@
</span> </span>
<n8n-text :bold="true" v-if="maxRunIndex > 0"> <n8n-text :bold="true" v-if="maxRunIndex > 0">
| {{ $i.baseText('runData.dataOfExecution') }}: | {{ $locale.baseText('runData.dataOfExecution') }}:
</n8n-text> </n8n-text>
<span class="opts"> <span class="opts">
<n8n-select v-if="maxRunIndex > 0" size="mini" v-model="runIndex" @click.stop> <n8n-select v-if="maxRunIndex > 0" size="mini" v-model="runIndex" @click.stop>
@ -62,25 +62,25 @@
</div> </div>
<div v-if="hasNodeRun && !hasRunError" class="title-data-display-selector" @click.stop> <div v-if="hasNodeRun && !hasRunError" class="title-data-display-selector" @click.stop>
<el-radio-group v-model="displayMode" size="mini"> <el-radio-group v-model="displayMode" size="mini">
<el-radio-button :label="$i.baseText('runData.json')" :disabled="showData === false"></el-radio-button> <el-radio-button :label="$locale.baseText('runData.json')" :disabled="showData === false"></el-radio-button>
<el-radio-button :label="$i.baseText('runData.table')"></el-radio-button> <el-radio-button :label="$locale.baseText('runData.table')"></el-radio-button>
<el-radio-button :label="$i.baseText('runData.binary')" v-if="binaryData.length !== 0"></el-radio-button> <el-radio-button :label="$locale.baseText('runData.binary')" v-if="binaryData.length !== 0"></el-radio-button>
</el-radio-group> </el-radio-group>
</div> </div>
<div v-if="hasNodeRun && !hasRunError && displayMode === 'JSON' && state.path !== deselectedPlaceholder" class="select-button"> <div v-if="hasNodeRun && !hasRunError && displayMode === 'JSON' && state.path !== deselectedPlaceholder" class="select-button">
<el-dropdown trigger="click" @command="handleCopyClick"> <el-dropdown trigger="click" @command="handleCopyClick">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
<n8n-icon-button :title="$i.baseText('runData.copyToClipboard')" icon="copy" /> <n8n-icon-button :title="$locale.baseText('runData.copyToClipboard')" icon="copy" />
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="{command: 'itemPath'}"> <el-dropdown-item :command="{command: 'itemPath'}">
{{ $i.baseText('runData.copyItemPath') }} {{ $locale.baseText('runData.copyItemPath') }}
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item :command="{command: 'parameterPath'}"> <el-dropdown-item :command="{command: 'parameterPath'}">
{{ $i.baseText('runData.copyParameterPath') }} {{ $locale.baseText('runData.copyParameterPath') }}
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item :command="{command: 'value'}"> <el-dropdown-item :command="{command: 'value'}">
{{ $i.baseText('runData.copyValue') }} {{ $locale.baseText('runData.copyValue') }}
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
@ -94,7 +94,7 @@
<span v-else> <span v-else>
<div v-if="showData === false" class="too-much-data"> <div v-if="showData === false" class="too-much-data">
<h3> <h3>
{{ $i.baseText('runData.nodeReturnedALargeAmountOfData') }} {{ $locale.baseText('runData.nodeReturnedALargeAmountOfData') }}
</h3> </h3>
<div class="text"> <div class="text">
@ -110,17 +110,17 @@
<n8n-button <n8n-button
icon="eye" icon="eye"
:label="$i.baseText('runData.displayDataAnyway')" :label="$locale.baseText('runData.displayDataAnyway')"
@click="displayMode = 'Table';showData = true;" @click="displayMode = 'Table';showData = true;"
/> />
</div> </div>
<div v-else-if="['JSON', 'Table'].includes(displayMode)"> <div v-else-if="['JSON', 'Table'].includes(displayMode)">
<div v-if="jsonData.length === 0" class="no-data"> <div v-if="jsonData.length === 0" class="no-data">
{{ $i.baseText('runData.noTextDataFound') }} {{ $locale.baseText('runData.noTextDataFound') }}
</div> </div>
<div v-else-if="displayMode === 'Table'"> <div v-else-if="displayMode === 'Table'">
<div v-if="tableData !== null && tableData.columns.length === 0" class="no-data"> <div v-if="tableData !== null && tableData.columns.length === 0" class="no-data">
{{ $i.baseText('runData.entriesExistButThey') }} {{ $locale.baseText('runData.entriesExistButThey') }}
</div> </div>
<table v-else-if="tableData !== null"> <table v-else-if="tableData !== null">
<tr> <tr>
@ -148,7 +148,7 @@
</div> </div>
<div v-else-if="displayMode === 'Binary'"> <div v-else-if="displayMode === 'Binary'">
<div v-if="binaryData.length === 0" class="no-data"> <div v-if="binaryData.length === 0" class="no-data">
{{ $i.baseText('runData.noBinaryDataFound') }} {{ $locale.baseText('runData.noBinaryDataFound') }}
</div> </div>
<div v-else> <div v-else>
@ -166,24 +166,24 @@
{{key}} {{key}}
</div> </div>
<div v-if="binaryData.fileName"> <div v-if="binaryData.fileName">
<div class="label">{{ $i.baseText('runData.fileName') }}: </div> <div class="label">{{ $locale.baseText('runData.fileName') }}: </div>
<div class="value">{{binaryData.fileName}}</div> <div class="value">{{binaryData.fileName}}</div>
</div> </div>
<div v-if="binaryData.directory"> <div v-if="binaryData.directory">
<div class="label">{{ $i.baseText('runData.directory') }}: </div> <div class="label">{{ $locale.baseText('runData.directory') }}: </div>
<div class="value">{{binaryData.directory}}</div> <div class="value">{{binaryData.directory}}</div>
</div> </div>
<div v-if="binaryData.fileExtension"> <div v-if="binaryData.fileExtension">
<div class="label">{{ $i.baseText('runData.fileExtension') }}:</div> <div class="label">{{ $locale.baseText('runData.fileExtension') }}:</div>
<div class="value">{{binaryData.fileExtension}}</div> <div class="value">{{binaryData.fileExtension}}</div>
</div> </div>
<div v-if="binaryData.mimeType"> <div v-if="binaryData.mimeType">
<div class="label">{{ $i.baseText('runData.mimeType') }}: </div> <div class="label">{{ $locale.baseText('runData.mimeType') }}: </div>
<div class="value">{{binaryData.mimeType}}</div> <div class="value">{{binaryData.mimeType}}</div>
</div> </div>
<div class="binary-data-show-data-button-wrapper"> <div class="binary-data-show-data-button-wrapper">
<n8n-button size="small" :label="$i.baseText('runData.showBinaryData')" class="binary-data-show-data-button" @click="displayBinaryData(index, key)" /> <n8n-button size="small" :label="$locale.baseText('runData.showBinaryData')" class="binary-data-show-data-button" @click="displayBinaryData(index, key)" />
</div> </div>
</div> </div>
@ -196,9 +196,9 @@
</span> </span>
<div v-else class="message"> <div v-else class="message">
<div> <div>
<n8n-text :bold="true">{{ $i.baseText('runData.noData') }}</n8n-text ><br /> <n8n-text :bold="true">{{ $locale.baseText('runData.noData') }}</n8n-text ><br />
<br /> <br />
{{ $i.baseText('runData.dataReturnedByThisNodeWillDisplayHere') }}<br /> {{ $locale.baseText('runData.dataReturnedByThisNodeWillDisplayHere') }}<br />
</div> </div>
</div> </div>
</div> </div>

6
packages/editor-ui/src/components/SaveButton.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<span :class="$style.container"> <span :class="$style.container">
<span :class="$style.saved" v-if="saved">{{ $i.baseText('saveButton.saved') }}</span> <span :class="$style.saved" v-if="saved">{{ $locale.baseText('saveButton.saved') }}</span>
<n8n-button <n8n-button
v-else v-else
:label="saveButtonLabel" :label="saveButtonLabel"
@ -39,8 +39,8 @@ export default Vue.extend({
computed: { computed: {
saveButtonLabel() { saveButtonLabel() {
return this.isSaving return this.isSaving
? this.$i.baseText('saveButton.saving') ? this.$locale.baseText('saveButton.saving')
: this.$i.baseText('saveButton.save'); : this.$locale.baseText('saveButton.save');
}, },
}, },
}); });

14
packages/editor-ui/src/components/TagsDropdown.vue
View file

@ -25,13 +25,13 @@
> >
<font-awesome-icon icon="plus-circle" /> <font-awesome-icon icon="plus-circle" />
<span> <span>
{{ $i.baseText('tagsDropdown.createTag', { interpolate: { filter } }) }} {{ $locale.baseText('tagsDropdown.createTag', { interpolate: { filter } }) }}
</span> </span>
</n8n-option> </n8n-option>
<n8n-option v-else-if="options.length === 0" value="message" disabled> <n8n-option v-else-if="options.length === 0" value="message" disabled>
<span v-if="createEnabled">{{ $i.baseText('tagsDropdown.typeToCreateATag') }}</span> <span v-if="createEnabled">{{ $locale.baseText('tagsDropdown.typeToCreateATag') }}</span>
<span v-else-if="allTags.length > 0">{{ $i.baseText('tagsDropdown.noMatchingTagsExist') }}</span> <span v-else-if="allTags.length > 0">{{ $locale.baseText('tagsDropdown.noMatchingTagsExist') }}</span>
<span v-else>{{ $i.baseText('tagsDropdown.noTagsExist') }}</span> <span v-else>{{ $locale.baseText('tagsDropdown.noTagsExist') }}</span>
</n8n-option> </n8n-option>
<!-- key is id+index for keyboard navigation to work well with filter --> <!-- key is id+index for keyboard navigation to work well with filter -->
@ -46,7 +46,7 @@
<n8n-option :key="MANAGE_KEY" :value="MANAGE_KEY" class="ops manage-tags"> <n8n-option :key="MANAGE_KEY" :value="MANAGE_KEY" class="ops manage-tags">
<font-awesome-icon icon="cog" /> <font-awesome-icon icon="cog" />
<span>{{ $i.baseText('tagsDropdown.manageTags') }}</span> <span>{{ $locale.baseText('tagsDropdown.manageTags') }}</span>
</n8n-option> </n8n-option>
</n8n-select> </n8n-select>
</div> </div>
@ -141,8 +141,8 @@ export default mixins(showMessage).extend({
} catch (error) { } catch (error) {
this.$showError( this.$showError(
error, error,
this.$i.baseText('tagsDropdown.showError.title'), this.$locale.baseText('tagsDropdown.showError.title'),
this.$i.baseText( this.$locale.baseText(
'tagsDropdown.showError.message', 'tagsDropdown.showError.message',
{ interpolate: { name } }, { interpolate: { name } },
), ),

4
packages/editor-ui/src/components/TagsManager/NoTagsView.vue
View file

@ -3,9 +3,9 @@
<el-col class="notags" :span="16"> <el-col class="notags" :span="16">
<div class="icon">🗄️</div> <div class="icon">🗄️</div>
<div> <div>
<div class="headline">{{ $i.baseText('noTagsView.readyToOrganizeYourWorkflows') }}</div> <div class="headline">{{ $locale.baseText('noTagsView.readyToOrganizeYourWorkflows') }}</div>
<div class="description"> <div class="description">
{{ $i.baseText('noTagsView.withWorkflowTagsYouReFree') }} {{ $locale.baseText('noTagsView.withWorkflowTagsYouReFree') }}
</div> </div>
</div> </div>
<n8n-button label="Create a tag" size="large" @click="$emit('enableCreate')" /> <n8n-button label="Create a tag" size="large" @click="$emit('enableCreate')" />

30
packages/editor-ui/src/components/TagsManager/TagsManager.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<Modal <Modal
:title="$i.baseText('tagsManager.manageTags')" :title="$locale.baseText('tagsManager.manageTags')"
:name="TAGS_MANAGER_MODAL_KEY" :name="TAGS_MANAGER_MODAL_KEY"
:eventBus="modalBus" :eventBus="modalBus"
@enter="onEnter" @enter="onEnter"
@ -25,7 +25,7 @@
</el-row> </el-row>
</template> </template>
<template v-slot:footer="{ close }"> <template v-slot:footer="{ close }">
<n8n-button :label="$i.baseText('tagsManager.done')" @click="close" float="right" /> <n8n-button :label="$locale.baseText('tagsManager.done')" @click="close" float="right" />
</template> </template>
</Modal> </Modal>
</template> </template>
@ -87,7 +87,7 @@ export default mixins(showMessage).extend({
try { try {
if (!name) { if (!name) {
throw new Error( throw new Error(
this.$i.baseText('tagsManager.tagNameCannotBeEmpty'), this.$locale.baseText('tagsManager.tagNameCannotBeEmpty'),
); );
} }
@ -98,8 +98,8 @@ export default mixins(showMessage).extend({
const escapedName = escape(name); const escapedName = escape(name);
this.$showError( this.$showError(
error, error,
this.$i.baseText('tagsManager.showError.onCreate.title'), this.$locale.baseText('tagsManager.showError.onCreate.title'),
this.$i.baseText( this.$locale.baseText(
'tagsManager.showError.onCreate.message', 'tagsManager.showError.onCreate.message',
{ interpolate: { escapedName } }, { interpolate: { escapedName } },
) + ':', ) + ':',
@ -115,7 +115,7 @@ export default mixins(showMessage).extend({
try { try {
if (!name) { if (!name) {
throw new Error( throw new Error(
this.$i.baseText('tagsManager.tagNameCannotBeEmpty'), this.$locale.baseText('tagsManager.tagNameCannotBeEmpty'),
); );
} }
@ -131,8 +131,8 @@ export default mixins(showMessage).extend({
const escapedOldName = escape(oldName); const escapedOldName = escape(oldName);
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('tagsManager.showMessage.onUpdate.title'), title: this.$locale.baseText('tagsManager.showMessage.onUpdate.title'),
message: this.$i.baseText( message: this.$locale.baseText(
'tagsManager.showMessage.onUpdate.message', 'tagsManager.showMessage.onUpdate.message',
{ interpolate: { escapedName, escapedOldName } }, { interpolate: { escapedName, escapedOldName } },
), ),
@ -142,8 +142,8 @@ export default mixins(showMessage).extend({
const escapedName = escape(oldName); const escapedName = escape(oldName);
this.$showError( this.$showError(
error, error,
this.$i.baseText('tagsManager.showError.onUpdate.title'), this.$locale.baseText('tagsManager.showError.onUpdate.title'),
this.$i.baseText( this.$locale.baseText(
'tagsManager.showError.onUpdate.message', 'tagsManager.showError.onUpdate.message',
{ interpolate: { escapedName } }, { interpolate: { escapedName } },
) + ':', ) + ':',
@ -160,7 +160,7 @@ export default mixins(showMessage).extend({
const deleted = await this.$store.dispatch("tags/delete", id); const deleted = await this.$store.dispatch("tags/delete", id);
if (!deleted) { if (!deleted) {
throw new Error( throw new Error(
this.$i.baseText('tagsManager.couldNotDeleteTag'), this.$locale.baseText('tagsManager.couldNotDeleteTag'),
); );
} }
@ -170,8 +170,8 @@ export default mixins(showMessage).extend({
const escapedName = escape(name); const escapedName = escape(name);
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('tagsManager.showMessage.onDelete.title'), title: this.$locale.baseText('tagsManager.showMessage.onDelete.title'),
message: this.$i.baseText( message: this.$locale.baseText(
'tagsManager.showMessage.onDelete.message', 'tagsManager.showMessage.onDelete.message',
{ interpolate: { escapedName } }, { interpolate: { escapedName } },
), ),
@ -181,8 +181,8 @@ export default mixins(showMessage).extend({
const escapedName = escape(name); const escapedName = escape(name);
this.$showError( this.$showError(
error, error,
this.$i.baseText('tagsManager.showError.onDelete.title'), this.$locale.baseText('tagsManager.showError.onDelete.title'),
this.$i.baseText( this.$locale.baseText(
'tagsManager.showError.onDelete.message', 'tagsManager.showError.onDelete.message',
{ interpolate: { escapedName } }, { interpolate: { escapedName } },
) + ':', ) + ':',

24
packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
View file

@ -3,13 +3,13 @@
stripe stripe
max-height="450" max-height="450"
ref="table" ref="table"
:empty-text="$i.baseText('tagsTable.noMatchingTagsExist')" :empty-text="$locale.baseText('tagsTable.noMatchingTagsExist')"
:data="rows" :data="rows"
:span-method="getSpan" :span-method="getSpan"
:row-class-name="getRowClasses" :row-class-name="getRowClasses"
v-loading="isLoading" v-loading="isLoading"
> >
<el-table-column :label="$i.baseText('tagsTable.name')"> <el-table-column :label="$locale.baseText('tagsTable.name')">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="name" :key="scope.row.id" @keydown.stop> <div class="name" :key="scope.row.id" @keydown.stop>
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
@ -21,7 +21,7 @@
ref="nameInput" ref="nameInput"
></n8n-input> ></n8n-input>
<span v-else-if="scope.row.delete"> <span v-else-if="scope.row.delete">
<span>{{ $i.baseText('tagsTable.areYouSureYouWantToDeleteThisTag') }}</span> <span>{{ $locale.baseText('tagsTable.areYouSureYouWantToDeleteThisTag') }}</span>
<input ref="deleteHiddenInput" class="hidden" /> <input ref="deleteHiddenInput" class="hidden" />
</span> </span>
<span v-else :class="{ disabled: scope.row.disable }"> <span v-else :class="{ disabled: scope.row.disable }">
@ -31,7 +31,7 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="$i.baseText('tagsTable.usage')" width="150"> <el-table-column :label="$locale.baseText('tagsTable.usage')" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<div v-if="!scope.row.create && !scope.row.delete" :class="{ disabled: scope.row.disable }"> <div v-if="!scope.row.create && !scope.row.delete" :class="{ disabled: scope.row.disable }">
@ -44,20 +44,20 @@
<template slot-scope="scope"> <template slot-scope="scope">
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<div class="ops" v-if="scope.row.create"> <div class="ops" v-if="scope.row.create">
<n8n-button :label="$i.baseText('tagsTable.cancel')" @click.stop="cancel" type="outline" :disabled="isSaving" /> <n8n-button :label="$locale.baseText('tagsTable.cancel')" @click.stop="cancel" type="outline" :disabled="isSaving" />
<n8n-button :label="$i.baseText('tagsTable.createTag')" @click.stop="apply" :loading="isSaving" /> <n8n-button :label="$locale.baseText('tagsTable.createTag')" @click.stop="apply" :loading="isSaving" />
</div> </div>
<div class="ops" v-else-if="scope.row.update"> <div class="ops" v-else-if="scope.row.update">
<n8n-button :label="$i.baseText('tagsTable.cancel')" @click.stop="cancel" type="outline" :disabled="isSaving" /> <n8n-button :label="$locale.baseText('tagsTable.cancel')" @click.stop="cancel" type="outline" :disabled="isSaving" />
<n8n-button :label="$i.baseText('tagsTable.saveChanges')" @click.stop="apply" :loading="isSaving" /> <n8n-button :label="$locale.baseText('tagsTable.saveChanges')" @click.stop="apply" :loading="isSaving" />
</div> </div>
<div class="ops" v-else-if="scope.row.delete"> <div class="ops" v-else-if="scope.row.delete">
<n8n-button :label="$i.baseText('tagsTable.cancel')" @click.stop="cancel" type="outline" :disabled="isSaving" /> <n8n-button :label="$locale.baseText('tagsTable.cancel')" @click.stop="cancel" type="outline" :disabled="isSaving" />
<n8n-button :label="$i.baseText('tagsTable.deleteTag')" @click.stop="apply" :loading="isSaving" /> <n8n-button :label="$locale.baseText('tagsTable.deleteTag')" @click.stop="apply" :loading="isSaving" />
</div> </div>
<div class="ops main" v-else-if="!scope.row.disable"> <div class="ops main" v-else-if="!scope.row.disable">
<n8n-icon-button :title="$i.baseText('tagsTable.editTag')" @click.stop="enableUpdate(scope.row)" icon="pen" /> <n8n-icon-button :title="$locale.baseText('tagsTable.editTag')" @click.stop="enableUpdate(scope.row)" icon="pen" />
<n8n-icon-button :title="$i.baseText('tagsTable.deleteTag')" @click.stop="enableDelete(scope.row)" icon="trash" /> <n8n-icon-button :title="$locale.baseText('tagsTable.deleteTag')" @click.stop="enableDelete(scope.row)" icon="trash" />
</div> </div>
</transition> </transition>
</template> </template>

4
packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
View file

@ -2,7 +2,7 @@
<el-row class="tags-header"> <el-row class="tags-header">
<el-col :span="10"> <el-col :span="10">
<n8n-input <n8n-input
:placeholder="$i.baseText('tagsTableHeader.searchTags')" :placeholder="$locale.baseText('tagsTableHeader.searchTags')"
:value="search" :value="search"
@input="onSearchChange" @input="onSearchChange"
:disabled="disabled" :disabled="disabled"
@ -13,7 +13,7 @@
</n8n-input> </n8n-input>
</el-col> </el-col>
<el-col :span="14"> <el-col :span="14">
<n8n-button @click="onAddNew" :disabled="disabled" icon="plus" :label="$i.baseText('tagsTableHeader.addNew')" size="large" float="right" /> <n8n-button @click="onAddNew" :disabled="disabled" icon="plus" :label="$locale.baseText('tagsTableHeader.addNew')" size="large" float="right" />
</el-col> </el-col>
</el-row> </el-row>
</template> </template>

4
packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
View file

@ -56,7 +56,7 @@ export default Vue.extend({
}, },
rows(): ITagRow[] { rows(): ITagRow[] {
const getUsage = (count: number | undefined) => count && count > 0 const getUsage = (count: number | undefined) => count && count > 0
? this.$i.baseText( ? this.$locale.baseText(
count > 1 ? count > 1 ?
'tagsView.inUse.plural' : 'tagsView.inUse.singular', 'tagsView.inUse.plural' : 'tagsView.inUse.singular',
{ {
@ -65,7 +65,7 @@ export default Vue.extend({
}, },
}, },
) )
: this.$i.baseText('tagsView.notBeingUsed'); : this.$locale.baseText('tagsView.notBeingUsed');
const disabled = this.isCreateEnabled || this.$data.updateId || this.$data.deleteId; const disabled = this.isCreateEnabled || this.$data.updateId || this.$data.deleteId;
const tagRows = (this.$props.tags || []) const tagRows = (this.$props.tags || [])

6
packages/editor-ui/src/components/TextEdit.vue
View file

@ -1,11 +1,11 @@
<template> <template>
<div v-if="dialogVisible"> <div v-if="dialogVisible">
<el-dialog :visible="dialogVisible" append-to-body width="80%" :title="`${$i.baseText('textEdit.edit')} ${$i.nodeText().topParameterDisplayName(parameter)}`" :before-close="closeDialog"> <el-dialog :visible="dialogVisible" append-to-body width="80%" :title="`${$locale.baseText('textEdit.edit')} ${$locale.nodeText().topParameterDisplayName(parameter)}`" :before-close="closeDialog">
<div class="ignore-key-press"> <div class="ignore-key-press">
<n8n-input-label :label="$i.nodeText().topParameterDisplayName(parameter)"> <n8n-input-label :label="$locale.nodeText().topParameterDisplayName(parameter)">
<div @keydown.stop @keydown.esc="closeDialog()"> <div @keydown.stop @keydown.esc="closeDialog()">
<n8n-input v-model="tempValue" type="textarea" ref="inputField" :value="value" :placeholder="$i.nodeText().placeholder(parameter)" @change="valueChanged" @keydown.stop="noOp" :rows="15" /> <n8n-input v-model="tempValue" type="textarea" ref="inputField" :value="value" :placeholder="$locale.nodeText().placeholder(parameter)" @change="valueChanged" @keydown.stop="noOp" :rows="15" />
</div> </div>
</n8n-input-label> </n8n-input-label>
</div> </div>

28
packages/editor-ui/src/components/TimeAgo.vue
View file

@ -30,20 +30,20 @@ export default Vue.extend({
// index: the index of array below; // index: the index of array below;
// totalSec: total seconds between date to be formatted and today's date; // totalSec: total seconds between date to be formatted and today's date;
return [ return [
[this.$i.baseText('timeAgo.justNow'), this.$i.baseText('timeAgo.rightNow')], [this.$locale.baseText('timeAgo.justNow'), this.$locale.baseText('timeAgo.rightNow')],
[this.$i.baseText('timeAgo.justNow'), this.$i.baseText('timeAgo.rightNow')], // ['%s seconds ago', 'in %s seconds'], [this.$locale.baseText('timeAgo.justNow'), this.$locale.baseText('timeAgo.rightNow')], // ['%s seconds ago', 'in %s seconds'],
[this.$i.baseText('timeAgo.oneMinuteAgo'), this.$i.baseText('timeAgo.inOneMinute')], [this.$locale.baseText('timeAgo.oneMinuteAgo'), this.$locale.baseText('timeAgo.inOneMinute')],
[this.$i.baseText('timeAgo.minutesAgo'), this.$i.baseText('timeAgo.inMinutes')], [this.$locale.baseText('timeAgo.minutesAgo'), this.$locale.baseText('timeAgo.inMinutes')],
[this.$i.baseText('timeAgo.oneHourAgo'), this.$i.baseText('timeAgo.inOneHour')], [this.$locale.baseText('timeAgo.oneHourAgo'), this.$locale.baseText('timeAgo.inOneHour')],
[this.$i.baseText('timeAgo.hoursAgo'), this.$i.baseText('timeAgo.inHours')], [this.$locale.baseText('timeAgo.hoursAgo'), this.$locale.baseText('timeAgo.inHours')],
[this.$i.baseText('timeAgo.oneDayAgo'), this.$i.baseText('timeAgo.inOneDay')], [this.$locale.baseText('timeAgo.oneDayAgo'), this.$locale.baseText('timeAgo.inOneDay')],
[this.$i.baseText('timeAgo.daysAgo'), this.$i.baseText('timeAgo.inDays')], [this.$locale.baseText('timeAgo.daysAgo'), this.$locale.baseText('timeAgo.inDays')],
[this.$i.baseText('timeAgo.oneWeekAgo'), this.$i.baseText('timeAgo.inOneWeek')], [this.$locale.baseText('timeAgo.oneWeekAgo'), this.$locale.baseText('timeAgo.inOneWeek')],
[this.$i.baseText('timeAgo.weeksAgo'), this.$i.baseText('timeAgo.inWeeks')], [this.$locale.baseText('timeAgo.weeksAgo'), this.$locale.baseText('timeAgo.inWeeks')],
[this.$i.baseText('timeAgo.oneMonthAgo'), this.$i.baseText('timeAgo.inOneMonth')], [this.$locale.baseText('timeAgo.oneMonthAgo'), this.$locale.baseText('timeAgo.inOneMonth')],
[this.$i.baseText('timeAgo.monthsAgo'), this.$i.baseText('timeAgo.inMonths')], [this.$locale.baseText('timeAgo.monthsAgo'), this.$locale.baseText('timeAgo.inMonths')],
[this.$i.baseText('timeAgo.oneYearAgo'), this.$i.baseText('timeAgo.inOneYear')], [this.$locale.baseText('timeAgo.oneYearAgo'), this.$locale.baseText('timeAgo.inOneYear')],
[this.$i.baseText('timeAgo.yearsAgo'), this.$i.baseText('timeAgo.inYears')], [this.$locale.baseText('timeAgo.yearsAgo'), this.$locale.baseText('timeAgo.inYears')],
][index] as [string, string]; ][index] as [string, string];
}, },
}, },

10
packages/editor-ui/src/components/UpdatesPanel.vue
View file

@ -6,17 +6,17 @@
> >
<template slot="header"> <template slot="header">
<span :class="$style.title"> <span :class="$style.title">
{{ $i.baseText('updatesPanel.weVeBeenBusy') }} {{ $locale.baseText('updatesPanel.weVeBeenBusy') }}
</span> </span>
</template> </template>
<template slot="content"> <template slot="content">
<section :class="$style['description']"> <section :class="$style['description']">
<p v-if="currentVersion"> <p v-if="currentVersion">
{{ $i.baseText( {{ $locale.baseText(
'updatesPanel.youReOnVersion', 'updatesPanel.youReOnVersion',
{ interpolate: { currentVersionName: currentVersion.name } } { interpolate: { currentVersionName: currentVersion.name } }
) }} ) }}
<strong><TimeAgo :date="currentVersion.createdAt" /></strong>{{ $i.baseText('updatesPanel.andIs') }} <strong>{{ $i.baseText( <strong><TimeAgo :date="currentVersion.createdAt" /></strong>{{ $locale.baseText('updatesPanel.andIs') }} <strong>{{ $locale.baseText(
'updatesPanel.version', 'updatesPanel.version',
{ {
interpolate: { interpolate: {
@ -24,7 +24,7 @@
howManySuffix: nextVersions.length > 1 ? "s" : "", howManySuffix: nextVersions.length > 1 ? "s" : "",
} }
} }
)}}</strong> {{ $i.baseText('updatesPanel.behindTheLatest') }} )}}</strong> {{ $locale.baseText('updatesPanel.behindTheLatest') }}
</p> </p>
<a <a
@ -35,7 +35,7 @@
> >
<font-awesome-icon icon="info-circle"></font-awesome-icon> <font-awesome-icon icon="info-circle"></font-awesome-icon>
<span> <span>
{{ $i.baseText('updatesPanel.howToUpdateYourN8nVersion') }} {{ $locale.baseText('updatesPanel.howToUpdateYourN8nVersion') }}
</span> </span>
</a> </a>

18
packages/editor-ui/src/components/VariableSelector.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div @keydown.stop class="variable-selector-wrapper"> <div @keydown.stop class="variable-selector-wrapper">
<div class="input-wrapper"> <div class="input-wrapper">
<n8n-input :placeholder="$i.baseText('variableSelector.variableFilter')" v-model="variableFilter" ref="inputField" size="small" type="text"></n8n-input> <n8n-input :placeholder="$locale.baseText('variableSelector.variableFilter')" v-model="variableFilter" ref="inputField" size="small" type="text"></n8n-input>
</div> </div>
<div class="result-wrapper"> <div class="result-wrapper">
@ -525,14 +525,14 @@ export default mixins(
currentNodeData.push( currentNodeData.push(
{ {
name: this.$i.baseText('variableSelector.parameters'), name: this.$locale.baseText('variableSelector.parameters'),
options: this.sortOptions(this.getNodeParameters(activeNode.name, initialPath, skipParameter, filterText) as IVariableSelectorOption[]), options: this.sortOptions(this.getNodeParameters(activeNode.name, initialPath, skipParameter, filterText) as IVariableSelectorOption[]),
}, },
); );
returnData.push( returnData.push(
{ {
name: this.$i.baseText('variableSelector.currentNode'), name: this.$locale.baseText('variableSelector.currentNode'),
options: this.sortOptions(currentNodeData), options: this.sortOptions(currentNodeData),
}, },
); );
@ -557,7 +557,7 @@ export default mixins(
nodeOptions = [ nodeOptions = [
{ {
name: this.$i.baseText('variableSelector.parameters'), name: this.$locale.baseText('variableSelector.parameters'),
options: this.sortOptions(this.getNodeParameters(nodeName, `$node["${nodeName}"].parameter`, undefined, filterText)), options: this.sortOptions(this.getNodeParameters(nodeName, `$node["${nodeName}"].parameter`, undefined, filterText)),
} as IVariableSelectorOption, } as IVariableSelectorOption,
]; ];
@ -570,7 +570,7 @@ export default mixins(
if (tempOptions.length) { if (tempOptions.length) {
nodeOptions = [ nodeOptions = [
{ {
name: this.$i.baseText('variableSelector.context'), name: this.$locale.baseText('variableSelector.context'),
options: this.sortOptions(tempOptions), options: this.sortOptions(tempOptions),
} as IVariableSelectorOption, } as IVariableSelectorOption,
]; ];
@ -583,18 +583,18 @@ export default mixins(
if (tempOutputData) { if (tempOutputData) {
nodeOptions.push( nodeOptions.push(
{ {
name: this.$i.baseText('variableSelector.outputData'), name: this.$locale.baseText('variableSelector.outputData'),
options: this.sortOptions(tempOutputData), options: this.sortOptions(tempOutputData),
} as IVariableSelectorOption, } as IVariableSelectorOption,
); );
} }
} }
const shortNodeType = this.$i.shortNodeType(node.type); const shortNodeType = this.$locale.shortNodeType(node.type);
allNodesData.push( allNodesData.push(
{ {
name: this.$i.headerText({ name: this.$locale.headerText({
key: `headers.${shortNodeType}.displayName`, key: `headers.${shortNodeType}.displayName`,
fallback: nodeName, fallback: nodeName,
}), }),
@ -605,7 +605,7 @@ export default mixins(
returnData.push( returnData.push(
{ {
name: this.$i.baseText('variableSelector.nodes'), name: this.$locale.baseText('variableSelector.nodes'),
options: this.sortOptions(allNodesData), options: this.sortOptions(allNodesData),
}, },
); );

4
packages/editor-ui/src/components/VariableSelectorItem.vue
View file

@ -11,7 +11,7 @@
<el-dropdown trigger="click" @click.stop @command="optionSelected($event, item)" v-if="allowParentSelect === true"> <el-dropdown trigger="click" @click.stop @command="optionSelected($event, item)" v-if="allowParentSelect === true">
<span class="el-dropdown-link clickable" @click.stop> <span class="el-dropdown-link clickable" @click.stop>
<font-awesome-icon icon="dot-circle" :title="$i.baseText('variableSelectorItem.selectItem')" /> <font-awesome-icon icon="dot-circle" :title="$locale.baseText('variableSelectorItem.selectItem')" />
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="operation.command" v-for="operation in itemAddOperations" :key="operation.command">{{operation.displayName}}</el-dropdown-item> <el-dropdown-item :command="operation.command" v-for="operation in itemAddOperations" :key="operation.command">{{operation.displayName}}</el-dropdown-item>
@ -29,7 +29,7 @@
{{item.name}}: {{item.name}}:
<font-awesome-icon icon="dot-circle" title="Select Item" /> <font-awesome-icon icon="dot-circle" title="Select Item" />
</div> </div>
<div class="item-value">{{ item.value !== undefined?item.value: $i.baseText('variableSelectorItem.empty') }}</div> <div class="item-value">{{ item.value !== undefined?item.value: $locale.baseText('variableSelectorItem.empty') }}</div>
</div> </div>
</div> </div>
</template> </template>

12
packages/editor-ui/src/components/VersionCard.vue
View file

@ -4,26 +4,26 @@
<div :class="$style.header"> <div :class="$style.header">
<div> <div>
<div :class="$style.name"> <div :class="$style.name">
{{ `${$i.baseText('versionCard.version')} ${version.name}` }} {{ `${$locale.baseText('versionCard.version')} ${version.name}` }}
</div> </div>
<WarningTooltip v-if="version.hasSecurityIssue"> <WarningTooltip v-if="version.hasSecurityIssue">
<template> <template>
{{ $i.baseText('versionCard.thisVersionHasASecurityIssue') }} {{ $locale.baseText('versionCard.thisVersionHasASecurityIssue') }}
</template> </template>
</WarningTooltip> </WarningTooltip>
<Badge <Badge
v-if="version.hasSecurityFix" v-if="version.hasSecurityFix"
:text="$i.baseText('versionCard.securityUpdate')" :text="$locale.baseText('versionCard.securityUpdate')"
type="danger" type="danger"
/> />
<Badge <Badge
v-if="version.hasBreakingChange" v-if="version.hasBreakingChange"
:text="$i.baseText('versionCard.breakingChanges')" :text="$locale.baseText('versionCard.breakingChanges')"
type="warning" type="warning"
/> />
</div> </div>
<div :class="$style['release-date']"> <div :class="$style['release-date']">
{{ $i.baseText('versionCard.released') }}&nbsp;<TimeAgo :date="version.createdAt" /> {{ $locale.baseText('versionCard.released') }}&nbsp;<TimeAgo :date="version.createdAt" />
</div> </div>
</div> </div>
<div :class="$style.divider" v-if="version.description || (version.nodes && version.nodes.length)"></div> <div :class="$style.divider" v-if="version.description || (version.nodes && version.nodes.length)"></div>
@ -60,7 +60,7 @@ export default Vue.extend({
props: ['version'], props: ['version'],
// @ts-ignore // @ts-ignore
nodeName (node: IVersionNode): string { nodeName (node: IVersionNode): string {
return node !== null ? node.displayName : this.$i.baseText('versionCard.unknown'); return node !== null ? node.displayName : this.$locale.baseText('versionCard.unknown');
}, },
}); });
</script> </script>

32
packages/editor-ui/src/components/WorkflowActivator.vue
View file

@ -5,7 +5,7 @@
element-loading-spinner="el-icon-loading" element-loading-spinner="el-icon-loading"
:value="workflowActive" :value="workflowActive"
@change="activeChanged" @change="activeChanged"
:title="workflowActive ? $i.baseText('workflowActivator.deactivateWorkflow') : $i.baseText('workflowActivator.activateWorkflow')" :title="workflowActive ? $locale.baseText('workflowActivator.deactivateWorkflow') : $locale.baseText('workflowActivator.activateWorkflow')"
:disabled="disabled || loading" :disabled="disabled || loading"
:active-color="getActiveColor" :active-color="getActiveColor"
inactive-color="#8899AA"> inactive-color="#8899AA">
@ -13,7 +13,7 @@
<div class="could-not-be-started" v-if="couldNotBeStarted"> <div class="could-not-be-started" v-if="couldNotBeStarted">
<n8n-tooltip placement="top"> <n8n-tooltip placement="top">
<div @click="displayActivationError" slot="content">{{ $i.baseText('workflowActivator.theWorkflowIsSetToBeActiveBut') }}</div> <div @click="displayActivationError" slot="content">{{ $locale.baseText('workflowActivator.theWorkflowIsSetToBeActiveBut') }}</div>
<font-awesome-icon @click="displayActivationError" icon="exclamation-triangle" /> <font-awesome-icon @click="displayActivationError" icon="exclamation-triangle" />
</n8n-tooltip> </n8n-tooltip>
</div> </div>
@ -79,8 +79,8 @@ export default mixins(
async activeChanged (newActiveState: boolean) { async activeChanged (newActiveState: boolean) {
if (this.workflowId === undefined) { if (this.workflowId === undefined) {
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('workflowActivator.showMessage.activeChangedWorkflowIdUndefined.title'), title: this.$locale.baseText('workflowActivator.showMessage.activeChangedWorkflowIdUndefined.title'),
message: this.$i.baseText('workflowActivator.showMessage.activeChangedWorkflowIdUndefined.message'), message: this.$locale.baseText('workflowActivator.showMessage.activeChangedWorkflowIdUndefined.message'),
type: 'error', type: 'error',
}); });
return; return;
@ -88,8 +88,8 @@ export default mixins(
if (this.nodesIssuesExist === true) { if (this.nodesIssuesExist === true) {
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.title'), title: this.$locale.baseText('workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.title'),
message: this.$i.baseText('workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.message'), message: this.$locale.baseText('workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.message'),
type: 'error', type: 'error',
}); });
return; return;
@ -106,11 +106,11 @@ export default mixins(
// than the one they can currently see. // than the one they can currently see.
if (this.dirtyState) { if (this.dirtyState) {
const importConfirm = await this.confirmMessage( const importConfirm = await this.confirmMessage(
this.$i.baseText('workflowActivator.confirmMessage.message'), this.$locale.baseText('workflowActivator.confirmMessage.message'),
this.$i.baseText('workflowActivator.confirmMessage.headline'), this.$locale.baseText('workflowActivator.confirmMessage.headline'),
'warning', 'warning',
this.$i.baseText('workflowActivator.confirmMessage.confirmButtonText'), this.$locale.baseText('workflowActivator.confirmMessage.confirmButtonText'),
this.$i.baseText('workflowActivator.confirmMessage.cancelButtonText'), this.$locale.baseText('workflowActivator.confirmMessage.cancelButtonText'),
); );
if (importConfirm === false) { if (importConfirm === false) {
return; return;
@ -131,8 +131,8 @@ export default mixins(
const newStateName = newActiveState === true ? 'activated' : 'deactivated'; const newStateName = newActiveState === true ? 'activated' : 'deactivated';
this.$showError( this.$showError(
error, error,
this.$i.baseText('workflowActivator.showError.title'), this.$locale.baseText('workflowActivator.showError.title'),
this.$i.baseText( this.$locale.baseText(
'workflowActivator.showError.message', 'workflowActivator.showError.message',
{ interpolate: { newStateName } }, { interpolate: { newStateName } },
) + ':', ) + ':',
@ -169,19 +169,19 @@ export default mixins(
const errorData = await this.restApi().getActivationError(this.workflowId); const errorData = await this.restApi().getActivationError(this.workflowId);
if (errorData === undefined) { if (errorData === undefined) {
errorMessage = this.$i.baseText('workflowActivator.showMessage.displayActivationError.message.errorDataUndefined'); errorMessage = this.$locale.baseText('workflowActivator.showMessage.displayActivationError.message.errorDataUndefined');
} else { } else {
errorMessage = this.$i.baseText( errorMessage = this.$locale.baseText(
'workflowActivator.showMessage.displayActivationError.message.errorDataNotUndefined', 'workflowActivator.showMessage.displayActivationError.message.errorDataNotUndefined',
{ interpolate: { message: errorData.error.message } }, { interpolate: { message: errorData.error.message } },
); );
} }
} catch (error) { } catch (error) {
errorMessage = this.$i.baseText('workflowActivator.showMessage.displayActivationError.message.catchBlock'); errorMessage = this.$locale.baseText('workflowActivator.showMessage.displayActivationError.message.catchBlock');
} }
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('workflowActivator.showMessage.displayActivationError.title'), title: this.$locale.baseText('workflowActivator.showMessage.displayActivationError.title'),
message: errorMessage, message: errorMessage,
type: 'warning', type: 'warning',
duration: 0, duration: 0,

30
packages/editor-ui/src/components/WorkflowOpen.vue
View file

@ -8,11 +8,11 @@
<template v-slot:header> <template v-slot:header>
<div class="workflows-header"> <div class="workflows-header">
<n8n-heading tag="h1" size="xlarge" class="title"> <n8n-heading tag="h1" size="xlarge" class="title">
{{ $i.baseText('workflowOpen.openWorkflow') }} {{ $locale.baseText('workflowOpen.openWorkflow') }}
</n8n-heading> </n8n-heading>
<div class="tags-filter"> <div class="tags-filter">
<TagsDropdown <TagsDropdown
:placeholder="$i.baseText('workflowOpen.openWorkflow')" :placeholder="$locale.baseText('workflowOpen.openWorkflow')"
:currentTagIds="filterTagIds" :currentTagIds="filterTagIds"
:createEnabled="false" :createEnabled="false"
@update="updateTagsFilter" @update="updateTagsFilter"
@ -21,7 +21,7 @@
/> />
</div> </div>
<div class="search-filter"> <div class="search-filter">
<n8n-input :placeholder="$i.baseText('workflowOpen.searchWorkflows')" ref="inputFieldFilter" v-model="filterText"> <n8n-input :placeholder="$locale.baseText('workflowOpen.searchWorkflows')" ref="inputFieldFilter" v-model="filterText">
<font-awesome-icon slot="prefix" icon="search"></font-awesome-icon> <font-awesome-icon slot="prefix" icon="search"></font-awesome-icon>
</n8n-input> </n8n-input>
</div> </div>
@ -30,7 +30,7 @@
<template v-slot:content> <template v-slot:content>
<el-table class="search-table" :data="filteredWorkflows" stripe @cell-click="openWorkflow" :default-sort = "{prop: 'updatedAt', order: 'descending'}" v-loading="isDataLoading"> <el-table class="search-table" :data="filteredWorkflows" stripe @cell-click="openWorkflow" :default-sort = "{prop: 'updatedAt', order: 'descending'}" v-loading="isDataLoading">
<el-table-column property="name" :label="$i.baseText('workflowOpen.name')" class-name="clickable" sortable> <el-table-column property="name" :label="$locale.baseText('workflowOpen.name')" class-name="clickable" sortable>
<template slot-scope="scope"> <template slot-scope="scope">
<div :key="scope.row.id"> <div :key="scope.row.id">
<span class="name">{{scope.row.name}}</span> <span class="name">{{scope.row.name}}</span>
@ -38,9 +38,9 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="createdAt" :label="$i.baseText('workflowOpen.created')" class-name="clickable" width="155" sortable></el-table-column> <el-table-column property="createdAt" :label="$locale.baseText('workflowOpen.created')" class-name="clickable" width="155" sortable></el-table-column>
<el-table-column property="updatedAt" :label="$i.baseText('workflowOpen.updated')" class-name="clickable" width="155" sortable></el-table-column> <el-table-column property="updatedAt" :label="$locale.baseText('workflowOpen.updated')" class-name="clickable" width="155" sortable></el-table-column>
<el-table-column :label="$i.baseText('workflowOpen.active')" width="75"> <el-table-column :label="$locale.baseText('workflowOpen.active')" width="75">
<template slot-scope="scope"> <template slot-scope="scope">
<workflow-activator :workflow-active="scope.row.active" :workflow-id="scope.row.id" @workflowActiveChanged="workflowActiveChanged" /> <workflow-activator :workflow-active="scope.row.active" :workflow-id="scope.row.id" @workflowActiveChanged="workflowActiveChanged" />
</template> </template>
@ -148,8 +148,8 @@ export default mixins(
if (data.id === currentWorkflowId) { if (data.id === currentWorkflowId) {
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('workflowOpen.showMessage.title'), title: this.$locale.baseText('workflowOpen.showMessage.title'),
message: this.$i.baseText('workflowOpen.showMessage.message'), message: this.$locale.baseText('workflowOpen.showMessage.message'),
type: 'error', type: 'error',
duration: 1500, duration: 1500,
}); });
@ -160,11 +160,11 @@ export default mixins(
const result = this.$store.getters.getStateIsDirty; const result = this.$store.getters.getStateIsDirty;
if(result) { if(result) {
const importConfirm = await this.confirmMessage( const importConfirm = await this.confirmMessage(
this.$i.baseText('workflowOpen.confirmMessage.message'), this.$locale.baseText('workflowOpen.confirmMessage.message'),
this.$i.baseText('workflowOpen.confirmMessage.headline'), this.$locale.baseText('workflowOpen.confirmMessage.headline'),
'warning', 'warning',
this.$i.baseText('workflowOpen.confirmMessage.confirmButtonText'), this.$locale.baseText('workflowOpen.confirmMessage.confirmButtonText'),
this.$i.baseText('workflowOpen.confirmMessage.cancelButtonText'), this.$locale.baseText('workflowOpen.confirmMessage.cancelButtonText'),
); );
if (importConfirm === false) { if (importConfirm === false) {
return; return;
@ -204,8 +204,8 @@ export default mixins(
(error: Error) => { (error: Error) => {
this.$showError( this.$showError(
error, error,
this.$i.baseText('workflowOpen.showError.title'), this.$locale.baseText('workflowOpen.showError.title'),
this.$i.baseText('workflowOpen.showError.message') + ':', this.$locale.baseText('workflowOpen.showError.message') + ':',
); );
this.isDataLoading = false; this.isDataLoading = false;
}, },

110
packages/editor-ui/src/components/WorkflowSettings.vue
View file

@ -3,7 +3,7 @@
:name="WORKFLOW_SETTINGS_MODAL_KEY" :name="WORKFLOW_SETTINGS_MODAL_KEY"
width="65%" width="65%"
maxHeight="80%" maxHeight="80%"
:title="$i.baseText('workflowSettings.settingsFor', { interpolate: { workflowName, workflowId } })" :title="$locale.baseText('workflowSettings.settingsFor', { interpolate: { workflowName, workflowId } })"
:eventBus="modalBus" :eventBus="modalBus"
:scrollable="true" :scrollable="true"
> >
@ -11,7 +11,7 @@
<div v-loading="isLoading" class="workflow-settings"> <div v-loading="isLoading" class="workflow-settings">
<el-row> <el-row>
<el-col :span="10" class="setting-name"> <el-col :span="10" class="setting-name">
{{ $i.baseText('workflowSettings.errorWorkflow') + ":" }} {{ $locale.baseText('workflowSettings.errorWorkflow') + ":" }}
<n8n-tooltip class="setting-info" placement="top" > <n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.errorWorkflow"></div> <div slot="content" v-html="helpTexts.errorWorkflow"></div>
<font-awesome-icon icon="question-circle" /> <font-awesome-icon icon="question-circle" />
@ -30,7 +30,7 @@
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="10" class="setting-name"> <el-col :span="10" class="setting-name">
{{ $i.baseText('workflowSettings.timezone') + ":" }} {{ $locale.baseText('workflowSettings.timezone') + ":" }}
<n8n-tooltip class="setting-info" placement="top" > <n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.timezone"></div> <div slot="content" v-html="helpTexts.timezone"></div>
<font-awesome-icon icon="question-circle" /> <font-awesome-icon icon="question-circle" />
@ -49,14 +49,14 @@
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="10" class="setting-name"> <el-col :span="10" class="setting-name">
{{ $i.baseText('workflowSettings.saveDataErrorExecution') + ":" }} {{ $locale.baseText('workflowSettings.saveDataErrorExecution') + ":" }}
<n8n-tooltip class="setting-info" placement="top" > <n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.saveDataErrorExecution"></div> <div slot="content" v-html="helpTexts.saveDataErrorExecution"></div>
<font-awesome-icon icon="question-circle" /> <font-awesome-icon icon="question-circle" />
</n8n-tooltip> </n8n-tooltip>
</el-col> </el-col>
<el-col :span="14" class="ignore-key-press"> <el-col :span="14" class="ignore-key-press">
<n8n-select v-model="workflowSettings.saveDataErrorExecution" :placeholder="$i.baseText('workflowSettings.selectOption')" size="medium" filterable :limit-popper-width="true"> <n8n-select v-model="workflowSettings.saveDataErrorExecution" :placeholder="$locale.baseText('workflowSettings.selectOption')" size="medium" filterable :limit-popper-width="true">
<n8n-option <n8n-option
v-for="option of saveDataErrorExecutionOptions" v-for="option of saveDataErrorExecutionOptions"
:key="option.key" :key="option.key"
@ -68,14 +68,14 @@
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="10" class="setting-name"> <el-col :span="10" class="setting-name">
{{ $i.baseText('workflowSettings.saveDataSuccessExecution') + ":" }} {{ $locale.baseText('workflowSettings.saveDataSuccessExecution') + ":" }}
<n8n-tooltip class="setting-info" placement="top" > <n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.saveDataSuccessExecution"></div> <div slot="content" v-html="helpTexts.saveDataSuccessExecution"></div>
<font-awesome-icon icon="question-circle" /> <font-awesome-icon icon="question-circle" />
</n8n-tooltip> </n8n-tooltip>
</el-col> </el-col>
<el-col :span="14" class="ignore-key-press"> <el-col :span="14" class="ignore-key-press">
<n8n-select v-model="workflowSettings.saveDataSuccessExecution" :placeholder="$i.baseText('workflowSettings.selectOption')" size="medium" filterable :limit-popper-width="true"> <n8n-select v-model="workflowSettings.saveDataSuccessExecution" :placeholder="$locale.baseText('workflowSettings.selectOption')" size="medium" filterable :limit-popper-width="true">
<n8n-option <n8n-option
v-for="option of saveDataSuccessExecutionOptions" v-for="option of saveDataSuccessExecutionOptions"
:key="option.key" :key="option.key"
@ -87,14 +87,14 @@
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="10" class="setting-name"> <el-col :span="10" class="setting-name">
{{ $i.baseText('workflowSettings.saveManualExecutions') + ":" }} {{ $locale.baseText('workflowSettings.saveManualExecutions') + ":" }}
<n8n-tooltip class="setting-info" placement="top" > <n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.saveManualExecutions"></div> <div slot="content" v-html="helpTexts.saveManualExecutions"></div>
<font-awesome-icon icon="question-circle" /> <font-awesome-icon icon="question-circle" />
</n8n-tooltip> </n8n-tooltip>
</el-col> </el-col>
<el-col :span="14" class="ignore-key-press"> <el-col :span="14" class="ignore-key-press">
<n8n-select v-model="workflowSettings.saveManualExecutions" :placeholder="$i.baseText('workflowSettings.selectOption')" size="medium" filterable :limit-popper-width="true"> <n8n-select v-model="workflowSettings.saveManualExecutions" :placeholder="$locale.baseText('workflowSettings.selectOption')" size="medium" filterable :limit-popper-width="true">
<n8n-option <n8n-option
v-for="option of saveManualOptions" v-for="option of saveManualOptions"
:key="option.key" :key="option.key"
@ -106,14 +106,14 @@
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="10" class="setting-name"> <el-col :span="10" class="setting-name">
{{ $i.baseText('workflowSettings.saveExecutionProgress') + ":" }} {{ $locale.baseText('workflowSettings.saveExecutionProgress') + ":" }}
<n8n-tooltip class="setting-info" placement="top" > <n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.saveExecutionProgress"></div> <div slot="content" v-html="helpTexts.saveExecutionProgress"></div>
<font-awesome-icon icon="question-circle" /> <font-awesome-icon icon="question-circle" />
</n8n-tooltip> </n8n-tooltip>
</el-col> </el-col>
<el-col :span="14" class="ignore-key-press"> <el-col :span="14" class="ignore-key-press">
<n8n-select v-model="workflowSettings.saveExecutionProgress" :placeholder="$i.baseText('workflowSettings.selectOption')" size="medium" filterable :limit-popper-width="true"> <n8n-select v-model="workflowSettings.saveExecutionProgress" :placeholder="$locale.baseText('workflowSettings.selectOption')" size="medium" filterable :limit-popper-width="true">
<n8n-option <n8n-option
v-for="option of saveExecutionProgressOptions" v-for="option of saveExecutionProgressOptions"
:key="option.key" :key="option.key"
@ -125,7 +125,7 @@
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="10" class="setting-name"> <el-col :span="10" class="setting-name">
{{ $i.baseText('workflowSettings.timeoutWorkflow') + ":" }} {{ $locale.baseText('workflowSettings.timeoutWorkflow') + ":" }}
<n8n-tooltip class="setting-info" placement="top" > <n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.executionTimeoutToggle"></div> <div slot="content" v-html="helpTexts.executionTimeoutToggle"></div>
<font-awesome-icon icon="question-circle" /> <font-awesome-icon icon="question-circle" />
@ -140,7 +140,7 @@
<div v-if="workflowSettings.executionTimeout > -1"> <div v-if="workflowSettings.executionTimeout > -1">
<el-row> <el-row>
<el-col :span="10" class="setting-name"> <el-col :span="10" class="setting-name">
{{ $i.baseText('workflowSettings.timeoutAfter') + ":" }} {{ $locale.baseText('workflowSettings.timeoutAfter') + ":" }}
<n8n-tooltip class="setting-info" placement="top" > <n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.executionTimeout"></div> <div slot="content" v-html="helpTexts.executionTimeout"></div>
<font-awesome-icon icon="question-circle" /> <font-awesome-icon icon="question-circle" />
@ -148,17 +148,17 @@
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
<n8n-input size="medium" :value="timeoutHMS.hours" @input="(value) => setTimeout('hours', value)" :min="0"> <n8n-input size="medium" :value="timeoutHMS.hours" @input="(value) => setTimeout('hours', value)" :min="0">
<template slot="append">{{ $i.baseText('workflowSettings.hours') }}</template> <template slot="append">{{ $locale.baseText('workflowSettings.hours') }}</template>
</n8n-input> </n8n-input>
</el-col> </el-col>
<el-col :span="4" class="timeout-input"> <el-col :span="4" class="timeout-input">
<n8n-input size="medium" :value="timeoutHMS.minutes" @input="(value) => setTimeout('minutes', value)" :min="0" :max="60"> <n8n-input size="medium" :value="timeoutHMS.minutes" @input="(value) => setTimeout('minutes', value)" :min="0" :max="60">
<template slot="append">{{ $i.baseText('workflowSettings.minutes') }}</template> <template slot="append">{{ $locale.baseText('workflowSettings.minutes') }}</template>
</n8n-input> </n8n-input>
</el-col> </el-col>
<el-col :span="4" class="timeout-input"> <el-col :span="4" class="timeout-input">
<n8n-input size="medium" :value="timeoutHMS.seconds" @input="(value) => setTimeout('seconds', value)" :min="0" :max="60"> <n8n-input size="medium" :value="timeoutHMS.seconds" @input="(value) => setTimeout('seconds', value)" :min="0" :max="60">
<template slot="append">{{ $i.baseText('workflowSettings.seconds') }}</template> <template slot="append">{{ $locale.baseText('workflowSettings.seconds') }}</template>
</n8n-input> </n8n-input>
</el-col> </el-col>
</el-row> </el-row>
@ -207,14 +207,14 @@ export default mixins(
return { return {
isLoading: true, isLoading: true,
helpTexts: { helpTexts: {
errorWorkflow: this.$i.baseText('workflowSettings.helpTexts.errorWorkflow'), errorWorkflow: this.$locale.baseText('workflowSettings.helpTexts.errorWorkflow'),
timezone: this.$i.baseText('workflowSettings.helpTexts.timezone'), timezone: this.$locale.baseText('workflowSettings.helpTexts.timezone'),
saveDataErrorExecution: this.$i.baseText('workflowSettings.helpTexts.saveDataErrorExecution'), saveDataErrorExecution: this.$locale.baseText('workflowSettings.helpTexts.saveDataErrorExecution'),
saveDataSuccessExecution: this.$i.baseText('workflowSettings.helpTexts.saveDataSuccessExecution'), saveDataSuccessExecution: this.$locale.baseText('workflowSettings.helpTexts.saveDataSuccessExecution'),
saveExecutionProgress: this.$i.baseText('workflowSettings.helpTexts.saveExecutionProgress'), saveExecutionProgress: this.$locale.baseText('workflowSettings.helpTexts.saveExecutionProgress'),
saveManualExecutions: this.$i.baseText('workflowSettings.helpTexts.saveManualExecutions'), saveManualExecutions: this.$locale.baseText('workflowSettings.helpTexts.saveManualExecutions'),
executionTimeoutToggle: this.$i.baseText('workflowSettings.helpTexts.executionTimeoutToggle'), executionTimeoutToggle: this.$locale.baseText('workflowSettings.helpTexts.executionTimeoutToggle'),
executionTimeout: this.$i.baseText('workflowSettings.helpTexts.executionTimeout'), executionTimeout: this.$locale.baseText('workflowSettings.helpTexts.executionTimeout'),
}, },
defaultValues: { defaultValues: {
timezone: 'America/New_York', timezone: 'America/New_York',
@ -324,24 +324,24 @@ export default mixins(
this.saveDataErrorExecutionOptions, [ this.saveDataErrorExecutionOptions, [
{ {
key: 'DEFAULT', key: 'DEFAULT',
value: this.$i.baseText( value: this.$locale.baseText(
'workflowSettings.saveDataErrorExecutionOptions.defaultSave', 'workflowSettings.saveDataErrorExecutionOptions.defaultSave',
{ {
interpolate: { interpolate: {
defaultValue: this.defaultValues.saveDataErrorExecution === 'all' defaultValue: this.defaultValues.saveDataErrorExecution === 'all'
? this.$i.baseText('workflowSettings.saveDataErrorExecutionOptions.save') ? this.$locale.baseText('workflowSettings.saveDataErrorExecutionOptions.save')
: this.$i.baseText('workflowSettings.saveDataErrorExecutionOptions.doNotsave'), : this.$locale.baseText('workflowSettings.saveDataErrorExecutionOptions.doNotsave'),
}, },
}, },
), ),
}, },
{ {
key: 'all', key: 'all',
value: this.$i.baseText('workflowSettings.saveDataErrorExecutionOptions.save'), value: this.$locale.baseText('workflowSettings.saveDataErrorExecutionOptions.save'),
}, },
{ {
key: 'none', key: 'none',
value: this.$i.baseText('workflowSettings.saveDataErrorExecutionOptions.doNotSave'), value: this.$locale.baseText('workflowSettings.saveDataErrorExecutionOptions.doNotSave'),
}, },
], ],
); );
@ -352,24 +352,24 @@ export default mixins(
this.saveDataSuccessExecutionOptions, [ this.saveDataSuccessExecutionOptions, [
{ {
key: 'DEFAULT', key: 'DEFAULT',
value: this.$i.baseText( value: this.$locale.baseText(
'workflowSettings.saveDataSuccessExecutionOptions.defaultSave', 'workflowSettings.saveDataSuccessExecutionOptions.defaultSave',
{ {
interpolate: { interpolate: {
defaultValue: this.defaultValues.saveDataSuccessExecution === 'all' defaultValue: this.defaultValues.saveDataSuccessExecution === 'all'
? this.$i.baseText('workflowSettings.saveDataSuccessExecutionOptions.save') ? this.$locale.baseText('workflowSettings.saveDataSuccessExecutionOptions.save')
: this.$i.baseText('workflowSettings.saveDataSuccessExecutionOptions.doNotSave'), : this.$locale.baseText('workflowSettings.saveDataSuccessExecutionOptions.doNotSave'),
}, },
}, },
), ),
}, },
{ {
key: 'all', key: 'all',
value: this.$i.baseText('workflowSettings.saveDataSuccessExecutionOptions.save'), value: this.$locale.baseText('workflowSettings.saveDataSuccessExecutionOptions.save'),
}, },
{ {
key: 'none', key: 'none',
value: this.$i.baseText('workflowSettings.saveDataSuccessExecutionOptions.doNotSave'), value: this.$locale.baseText('workflowSettings.saveDataSuccessExecutionOptions.doNotSave'),
}, },
], ],
); );
@ -380,22 +380,22 @@ export default mixins(
this.saveExecutionProgressOptions, [ this.saveExecutionProgressOptions, [
{ {
key: 'DEFAULT', key: 'DEFAULT',
value: this.$i.baseText( value: this.$locale.baseText(
'workflowSettings.saveExecutionProgressOptions.defaultSave', 'workflowSettings.saveExecutionProgressOptions.defaultSave',
{ {
interpolate: { interpolate: {
defaultValue: this.defaultValues.saveExecutionProgress ? this.$i.baseText('workflowSettings.saveExecutionProgressOptions.yes') : this.$i.baseText('workflowSettings.saveExecutionProgressOptions.no'), defaultValue: this.defaultValues.saveExecutionProgress ? this.$locale.baseText('workflowSettings.saveExecutionProgressOptions.yes') : this.$locale.baseText('workflowSettings.saveExecutionProgressOptions.no'),
}, },
}, },
), ),
}, },
{ {
key: true, key: true,
value: this.$i.baseText('workflowSettings.saveExecutionProgressOptions.yes'), value: this.$locale.baseText('workflowSettings.saveExecutionProgressOptions.yes'),
}, },
{ {
key: false, key: false,
value: this.$i.baseText('workflowSettings.saveExecutionProgressOptions.no'), value: this.$locale.baseText('workflowSettings.saveExecutionProgressOptions.no'),
}, },
], ],
); );
@ -404,22 +404,22 @@ export default mixins(
this.saveManualOptions.length = 0; this.saveManualOptions.length = 0;
this.saveManualOptions.push({ this.saveManualOptions.push({
key: 'DEFAULT', key: 'DEFAULT',
value: this.$i.baseText( value: this.$locale.baseText(
'workflowSettings.saveManualOptions.defaultSave', 'workflowSettings.saveManualOptions.defaultSave',
{ {
interpolate: { interpolate: {
defaultValue: this.defaultValues.saveManualExecutions ? this.$i.baseText('workflowSettings.saveManualOptions.yes') : this.$i.baseText('workflowSettings.saveManualOptions.no'), defaultValue: this.defaultValues.saveManualExecutions ? this.$locale.baseText('workflowSettings.saveManualOptions.yes') : this.$locale.baseText('workflowSettings.saveManualOptions.no'),
}, },
}, },
), ),
}); });
this.saveManualOptions.push({ this.saveManualOptions.push({
key: true, key: true,
value: this.$i.baseText('workflowSettings.saveManualOptions.yes'), value: this.$locale.baseText('workflowSettings.saveManualOptions.yes'),
}); });
this.saveManualOptions.push({ this.saveManualOptions.push({
key: false, key: false,
value: this.$i.baseText('workflowSettings.saveManualOptions.no'), value: this.$locale.baseText('workflowSettings.saveManualOptions.no'),
}); });
}, },
@ -433,12 +433,12 @@ export default mixins(
let defaultTimezoneValue = timezones[this.defaultValues.timezone] as string | undefined; let defaultTimezoneValue = timezones[this.defaultValues.timezone] as string | undefined;
if (defaultTimezoneValue === undefined) { if (defaultTimezoneValue === undefined) {
defaultTimezoneValue = this.$i.baseText('workflowSettings.defaultTimezoneNotValid'); defaultTimezoneValue = this.$locale.baseText('workflowSettings.defaultTimezoneNotValid');
} }
this.timezones.push({ this.timezones.push({
key: 'DEFAULT', key: 'DEFAULT',
value: this.$i.baseText( value: this.$locale.baseText(
'workflowSettings.defaultTimezone', 'workflowSettings.defaultTimezone',
{ interpolate: { defaultTimezoneValue } }, { interpolate: { defaultTimezoneValue } },
), ),
@ -465,7 +465,7 @@ export default mixins(
// @ts-ignore // @ts-ignore
workflows.unshift({ workflows.unshift({
id: undefined as unknown as string, id: undefined as unknown as string,
name: this.$i.baseText('workflowSettings.noWorkflow'), name: this.$locale.baseText('workflowSettings.noWorkflow'),
}); });
Vue.set(this, 'workflows', workflows); Vue.set(this, 'workflows', workflows);
@ -485,9 +485,9 @@ export default mixins(
if (data.settings!.executionTimeout === 0) { if (data.settings!.executionTimeout === 0) {
this.$showError( this.$showError(
new Error(this.$i.baseText('workflowSettings.showError.saveSettings1.errorMessage')), new Error(this.$locale.baseText('workflowSettings.showError.saveSettings1.errorMessage')),
this.$i.baseText('workflowSettings.showError.saveSettings1.title'), this.$locale.baseText('workflowSettings.showError.saveSettings1.title'),
this.$i.baseText('workflowSettings.showError.saveSettings1.message') + ':', this.$locale.baseText('workflowSettings.showError.saveSettings1.message') + ':',
); );
return; return;
} }
@ -497,7 +497,7 @@ export default mixins(
const { hours, minutes, seconds } = this.convertToHMS(this.workflowSettings.maxExecutionTimeout as number); const { hours, minutes, seconds } = this.convertToHMS(this.workflowSettings.maxExecutionTimeout as number);
this.$showError( this.$showError(
new Error( new Error(
this.$i.baseText( this.$locale.baseText(
'workflowSettings.showError.saveSettings2.errorMessage', 'workflowSettings.showError.saveSettings2.errorMessage',
{ {
interpolate: { interpolate: {
@ -508,8 +508,8 @@ export default mixins(
}, },
), ),
), ),
this.$i.baseText('workflowSettings.showError.saveSettings2.title'), this.$locale.baseText('workflowSettings.showError.saveSettings2.title'),
this.$i.baseText('workflowSettings.showError.saveSettings2.message') + ':', this.$locale.baseText('workflowSettings.showError.saveSettings2.message') + ':',
); );
return; return;
} }
@ -522,8 +522,8 @@ export default mixins(
} catch (error) { } catch (error) {
this.$showError( this.$showError(
error, error,
this.$i.baseText('workflowSettings.showError.saveSettings3.title'), this.$locale.baseText('workflowSettings.showError.saveSettings3.title'),
this.$i.baseText('workflowSettings.showError.saveSettings3.message') + ':', this.$locale.baseText('workflowSettings.showError.saveSettings3.message') + ':',
); );
this.isLoading = false; this.isLoading = false;
return; return;
@ -544,8 +544,8 @@ export default mixins(
this.isLoading = false; this.isLoading = false;
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('workflowSettings.showMessage.saveSettings.title'), title: this.$locale.baseText('workflowSettings.showMessage.saveSettings.title'),
message: this.$i.baseText('workflowSettings.showMessage.saveSettings.message'), message: this.$locale.baseText('workflowSettings.showMessage.saveSettings.message'),
type: 'success', type: 'success',
}); });

12
packages/editor-ui/src/components/mixins/genericHelpers.ts
View file

@ -22,23 +22,23 @@ export const genericHelpers = mixins(showMessage).extend({
displayTimer (msPassed: number, showMs = false): string { displayTimer (msPassed: number, showMs = false): string {
if (msPassed < 60000) { if (msPassed < 60000) {
if (showMs === false) { if (showMs === false) {
return `${this.$n(Math.floor(msPassed / 1000), 'decimal')} ${this.$i.baseText('genericHelpers.sec')}`; return `${this.$n(Math.floor(msPassed / 1000), 'decimal')} ${this.$locale.baseText('genericHelpers.sec')}`;
} }
return `${this.$i.number(msPassed / 1000, 'decimal')} ${this.$i.baseText('genericHelpers.sec')}`; return `${this.$locale.number(msPassed / 1000, 'decimal')} ${this.$locale.baseText('genericHelpers.sec')}`;
} }
const secondsPassed = Math.floor(msPassed / 1000); const secondsPassed = Math.floor(msPassed / 1000);
const minutesPassed = Math.floor(secondsPassed / 60); const minutesPassed = Math.floor(secondsPassed / 60);
return `${this.$i.number(minutesPassed, 'decimal')}:${this.$i.number(secondsPassed, 'decimal')} ${this.$i.baseText('genericHelpers.min')}`; return `${this.$locale.number(minutesPassed, 'decimal')}:${this.$locale.number(secondsPassed, 'decimal')} ${this.$locale.baseText('genericHelpers.min')}`;
}, },
editAllowedCheck (): boolean { editAllowedCheck (): boolean {
if (this.isReadOnly) { if (this.isReadOnly) {
this.$showMessage({ this.$showMessage({
// title: 'Workflow can not be changed!', // title: 'Workflow can not be changed!',
title: this.$i.baseText('genericHelpers.showMessage.title'), title: this.$locale.baseText('genericHelpers.showMessage.title'),
message: this.$i.baseText('genericHelpers.showMessage.message'), message: this.$locale.baseText('genericHelpers.showMessage.message'),
type: 'error', type: 'error',
duration: 0, duration: 0,
}); });
@ -57,7 +57,7 @@ export const genericHelpers = mixins(showMessage).extend({
this.loadingService = this.$loading( this.loadingService = this.$loading(
{ {
lock: true, lock: true,
text: text || this.$i.baseText('genericHelpers.loading'), text: text || this.$locale.baseText('genericHelpers.loading'),
spinner: 'el-icon-loading', spinner: 'el-icon-loading',
background: 'rgba(255, 255, 255, 0.8)', background: 'rgba(255, 255, 255, 0.8)',
}, },

2
packages/editor-ui/src/components/mixins/nodeBase.ts
View file

@ -179,7 +179,7 @@ export const nodeBase = mixins(
hover: false, hover: false,
showOutputLabel: nodeTypeData.outputs.length === 1, showOutputLabel: nodeTypeData.outputs.length === 1,
size: nodeTypeData.outputs.length >= 3 ? 'small' : 'medium', size: nodeTypeData.outputs.length >= 3 ? 'small' : 'medium',
hoverMessage: this.$i.baseText('nodeBase.clickToAddNodeOrDragToConnect'), hoverMessage: this.$locale.baseText('nodeBase.clickToAddNodeOrDragToConnect'),
}, },
endpointHoverStyle: { endpointHoverStyle: {
fill: getStyleTokenValue('--color-primary'), fill: getStyleTokenValue('--color-primary'),

4
packages/editor-ui/src/components/mixins/pushConnection.ts
View file

@ -263,8 +263,8 @@ export const pushConnection = mixins(
// Workflow did execute without a problem // Workflow did execute without a problem
this.$titleSet(workflow.name as string, 'IDLE'); this.$titleSet(workflow.name as string, 'IDLE');
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('pushConnection.showMessage.title'), title: this.$locale.baseText('pushConnection.showMessage.title'),
message: this.$i.baseText('pushConnection.showMessage.message'), message: this.$locale.baseText('pushConnection.showMessage.message'),
type: 'success', type: 'success',
}); });
} }

6
packages/editor-ui/src/components/mixins/showMessage.ts
View file

@ -134,8 +134,8 @@ export const showMessage = mixins(externalHooks).extend({
async confirmMessage (message: string, headline: string, type: MessageType | null = 'warning', confirmButtonText?: string, cancelButtonText?: string): Promise<boolean> { async confirmMessage (message: string, headline: string, type: MessageType | null = 'warning', confirmButtonText?: string, cancelButtonText?: string): Promise<boolean> {
try { try {
const options: ElMessageBoxOptions = { const options: ElMessageBoxOptions = {
confirmButtonText: confirmButtonText || this.$i.baseText('showMessage.ok'), confirmButtonText: confirmButtonText || this.$locale.baseText('showMessage.ok'),
cancelButtonText: cancelButtonText || this.$i.baseText('showMessage.cancel'), cancelButtonText: cancelButtonText || this.$locale.baseText('showMessage.cancel'),
dangerouslyUseHTMLString: true, dangerouslyUseHTMLString: true,
...(type && { type }), ...(type && { type }),
}; };
@ -173,7 +173,7 @@ export const showMessage = mixins(externalHooks).extend({
<summary <summary
style="color: #ff6d5a; font-weight: bold; cursor: pointer;" style="color: #ff6d5a; font-weight: bold; cursor: pointer;"
> >
${this.$i.baseText('showMessage.showDetails')} ${this.$locale.baseText('showMessage.showDetails')}
</summary> </summary>
<p>${node.name}: ${errorDescription}</p> <p>${node.name}: ${errorDescription}</p>
</details> </details>

8
packages/editor-ui/src/components/mixins/workflowHelpers.ts
View file

@ -478,8 +478,8 @@ export const workflowHelpers = mixins(
this.$store.commit('removeActiveAction', 'workflowSaving'); this.$store.commit('removeActiveAction', 'workflowSaving');
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('workflowHelpers.showMessage.title'), title: this.$locale.baseText('workflowHelpers.showMessage.title'),
message: this.$i.baseText('workflowHelpers.showMessage.message') + `: "${e.message}"`, message: this.$locale.baseText('workflowHelpers.showMessage.message') + `: "${e.message}"`,
type: 'error', type: 'error',
}); });
@ -552,8 +552,8 @@ export const workflowHelpers = mixins(
this.$store.commit('removeActiveAction', 'workflowSaving'); this.$store.commit('removeActiveAction', 'workflowSaving');
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('workflowHelpers.showMessage.title'), title: this.$locale.baseText('workflowHelpers.showMessage.title'),
message: this.$i.baseText('workflowHelpers.showMessage.message') + `: "${e.message}"`, message: this.$locale.baseText('workflowHelpers.showMessage.message') + `: "${e.message}"`,
type: 'error', type: 'error',
}); });

10
packages/editor-ui/src/components/mixins/workflowRun.ts
View file

@ -32,7 +32,7 @@ export const workflowRun = mixins(
// Do not start if the connection to server is not active // Do not start if the connection to server is not active
// because then it can not receive the data as it executes. // because then it can not receive the data as it executes.
throw new Error( throw new Error(
this.$i.baseText('workflowRun.noActiveConnectionToTheServer'), this.$locale.baseText('workflowRun.noActiveConnectionToTheServer'),
); );
} }
@ -91,8 +91,8 @@ export const workflowRun = mixins(
} }
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('workflowRun.showMessage.title'), title: this.$locale.baseText('workflowRun.showMessage.title'),
message: this.$i.baseText('workflowRun.showMessage.message') + ':<br />&nbsp;&nbsp;- ' + errorMessages.join('<br />&nbsp;&nbsp;- '), message: this.$locale.baseText('workflowRun.showMessage.message') + ':<br />&nbsp;&nbsp;- ' + errorMessages.join('<br />&nbsp;&nbsp;- '),
type: 'error', type: 'error',
duration: 0, duration: 0,
}); });
@ -204,8 +204,8 @@ export const workflowRun = mixins(
this.$titleSet(workflow.name as string, 'ERROR'); this.$titleSet(workflow.name as string, 'ERROR');
this.$showError( this.$showError(
error, error,
this.$i.baseText('workflowRun.showError.title'), this.$locale.baseText('workflowRun.showError.title'),
this.$i.baseText('workflowRun.showError.message') + ':', this.$locale.baseText('workflowRun.showError.message') + ':',
); );
return undefined; return undefined;
} }

4
packages/editor-ui/src/plugins/i18n/index.ts
View file

@ -15,11 +15,11 @@ const NODE_VIEW_KEY = 'nodeView';
export function I18nPlugin(vue: typeof _Vue, store: Store<IRootState>): void { export function I18nPlugin(vue: typeof _Vue, store: Store<IRootState>): void {
const i18n = new I18nClass(store); const i18n = new I18nClass(store);
Object.defineProperty(vue, '$i', { Object.defineProperty(vue, '$locale', {
get() { return i18n; }, get() { return i18n; },
}); });
Object.defineProperty(vue.prototype, '$i', { Object.defineProperty(vue.prototype, '$locale', {
get() { return i18n; }, get() { return i18n; },
}); });
} }

2
packages/editor-ui/src/plugins/i18n/types.d.ts vendored
View file

@ -2,6 +2,6 @@ import { i18nClass } from '.';
declare module 'vue/types/vue' { declare module 'vue/types/vue' {
interface Vue { interface Vue {
$i: I18nClass; $locale: I18nClass;
} }
} }

144
packages/editor-ui/src/views/NodeView.vue
View file

@ -34,7 +34,7 @@
</div> </div>
</div> </div>
<DataDisplay @valueChanged="valueChanged"/> <DataDisplay @valueChanged="valueChanged"/>
<div v-if="!createNodeActive && !isReadOnly" class="node-creator-button" :title="$i.baseText('nodeView.addNode')" @click="() => openNodeCreator('add_node_button')"> <div v-if="!createNodeActive && !isReadOnly" class="node-creator-button" :title="$locale.baseText('nodeView.addNode')" @click="() => openNodeCreator('add_node_button')">
<n8n-icon-button size="xlarge" icon="plus" /> <n8n-icon-button size="xlarge" icon="plus" />
</div> </div>
<node-creator <node-creator
@ -43,22 +43,22 @@
@closeNodeCreator="closeNodeCreator" @closeNodeCreator="closeNodeCreator"
></node-creator> ></node-creator>
<div :class="{ 'zoom-menu': true, expanded: !sidebarMenuCollapsed }"> <div :class="{ 'zoom-menu': true, expanded: !sidebarMenuCollapsed }">
<button @click="zoomToFit" class="button-white" :title="$i.baseText('nodeView.zoomToFit')"> <button @click="zoomToFit" class="button-white" :title="$locale.baseText('nodeView.zoomToFit')">
<font-awesome-icon icon="expand"/> <font-awesome-icon icon="expand"/>
</button> </button>
<button @click="zoomIn()" class="button-white" :title="$i.baseText('nodeView.zoomIn')"> <button @click="zoomIn()" class="button-white" :title="$locale.baseText('nodeView.zoomIn')">
<font-awesome-icon icon="search-plus"/> <font-awesome-icon icon="search-plus"/>
</button> </button>
<button @click="zoomOut()" class="button-white" :title="$i.baseText('nodeView.zoomOut')"> <button @click="zoomOut()" class="button-white" :title="$locale.baseText('nodeView.zoomOut')">
<font-awesome-icon icon="search-minus"/> <font-awesome-icon icon="search-minus"/>
</button> </button>
<button <button
v-if="nodeViewScale !== 1" v-if="nodeViewScale !== 1"
@click="resetZoom()" @click="resetZoom()"
class="button-white" class="button-white"
:title="$i.baseText('nodeView.resetZoom')" :title="$locale.baseText('nodeView.resetZoom')"
> >
<font-awesome-icon icon="undo" :title="$i.baseText('nodeView.resetZoom')"/> <font-awesome-icon icon="undo" :title="$locale.baseText('nodeView.resetZoom')"/>
</button> </button>
</div> </div>
<div class="workflow-execute-wrapper" v-if="!isReadOnly"> <div class="workflow-execute-wrapper" v-if="!isReadOnly">
@ -68,7 +68,7 @@
:label="runButtonText" :label="runButtonText"
size="large" size="large"
icon="play-circle" icon="play-circle"
:title="$i.baseText('nodeView.executesTheWorkflowFromTheStartOrWebhookNode')" :title="$locale.baseText('nodeView.executesTheWorkflowFromTheStartOrWebhookNode')"
:type="workflowRunning ? 'light' : 'primary'" :type="workflowRunning ? 'light' : 'primary'"
/> />
@ -79,8 +79,8 @@
class="stop-execution" class="stop-execution"
type="light" type="light"
:title="stopExecutionInProgress :title="stopExecutionInProgress
? $i.baseText('nodeView.stoppingCurrentExecution') ? $locale.baseText('nodeView.stoppingCurrentExecution')
: $i.baseText('nodeView.stopCurrentExecution') : $locale.baseText('nodeView.stopCurrentExecution')
" "
:loading="stopExecutionInProgress" :loading="stopExecutionInProgress"
@click.stop="stopExecution()" @click.stop="stopExecution()"
@ -91,14 +91,14 @@
class="stop-execution" class="stop-execution"
icon="stop" icon="stop"
size="large" size="large"
:title="$i.baseText('nodeView.stopWaitingForWebhookCall')" :title="$locale.baseText('nodeView.stopWaitingForWebhookCall')"
type="light" type="light"
@click.stop="stopWaitingForWebhook()" @click.stop="stopWaitingForWebhook()"
/> />
<n8n-icon-button <n8n-icon-button
v-if="!isReadOnly && workflowExecution && !workflowRunning" v-if="!isReadOnly && workflowExecution && !workflowRunning"
:title="$i.baseText('nodeView.deletesTheCurrentExecutionData')" :title="$locale.baseText('nodeView.deletesTheCurrentExecutionData')"
icon="trash" icon="trash"
size="large" size="large"
@click.stop="clearExecutionData()" @click.stop="clearExecutionData()"
@ -243,11 +243,11 @@ export default mixins(
const result = this.$store.getters.getStateIsDirty; const result = this.$store.getters.getStateIsDirty;
if(result) { if(result) {
const importConfirm = await this.confirmMessage( const importConfirm = await this.confirmMessage(
this.$i.baseText('nodeView.confirmMessage.beforeRouteLeave.message'), this.$locale.baseText('nodeView.confirmMessage.beforeRouteLeave.message'),
this.$i.baseText('nodeView.confirmMessage.beforeRouteLeave.headline'), this.$locale.baseText('nodeView.confirmMessage.beforeRouteLeave.headline'),
'warning', 'warning',
this.$i.baseText('nodeView.confirmMessage.beforeRouteLeave.confirmButtonText'), this.$locale.baseText('nodeView.confirmMessage.beforeRouteLeave.confirmButtonText'),
this.$i.baseText('nodeView.confirmMessage.beforeRouteLeave.cancelButtonText'), this.$locale.baseText('nodeView.confirmMessage.beforeRouteLeave.cancelButtonText'),
); );
if (importConfirm === false) { if (importConfirm === false) {
next(false); next(false);
@ -285,14 +285,14 @@ export default mixins(
}, },
runButtonText (): string { runButtonText (): string {
if (this.workflowRunning === false) { if (this.workflowRunning === false) {
return this.$i.baseText('nodeView.runButtonText.executeWorkflow'); return this.$locale.baseText('nodeView.runButtonText.executeWorkflow');
} }
if (this.executionWaitingForWebhook === true) { if (this.executionWaitingForWebhook === true) {
return this.$i.baseText('nodeView.runButtonText.waitingForTriggerEvent'); return this.$locale.baseText('nodeView.runButtonText.waitingForTriggerEvent');
} }
return this.$i.baseText('nodeView.runButtonText.executingWorkflow'); return this.$locale.baseText('nodeView.runButtonText.executingWorkflow');
}, },
workflowStyle (): object { workflowStyle (): object {
const offsetPosition = this.$store.getters.getNodeViewOffsetPosition; const offsetPosition = this.$store.getters.getNodeViewOffsetPosition;
@ -355,8 +355,8 @@ export default mixins(
this.updateNodesExecutionIssues(); this.updateNodesExecutionIssues();
}, },
translateName(type: string, originalName: string) { translateName(type: string, originalName: string) {
return this.$i.headerText({ return this.$locale.headerText({
key: `headers.${this.$i.shortNodeType(type)}.displayName`, key: `headers.${this.$locale.shortNodeType(type)}.displayName`,
fallback: originalName, fallback: originalName,
}); });
}, },
@ -442,8 +442,8 @@ export default mixins(
} catch (error) { } catch (error) {
this.$showError( this.$showError(
error, error,
this.$i.baseText('nodeView.showError.openExecution.title'), this.$locale.baseText('nodeView.showError.openExecution.title'),
this.$i.baseText('nodeView.showError.openExecution.message') + ':', this.$locale.baseText('nodeView.showError.openExecution.message') + ':',
); );
return; return;
} }
@ -503,15 +503,15 @@ export default mixins(
if ((data as IExecutionsSummary).waitTill) { if ((data as IExecutionsSummary).waitTill) {
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('nodeView.thisExecutionHasntFinishedYet'), title: this.$locale.baseText('nodeView.thisExecutionHasntFinishedYet'),
message: `<a onclick="window.location.reload(false);">${this.$i.baseText('nodeView.refresh')}</a> ${this.$i.baseText('nodeView.toSeeTheLatestStatus')}.<br/> <a href="https://docs.n8n.io/nodes/n8n-nodes-base.wait/" target="_blank">${this.$i.baseText('nodeView.moreInfo')}</a>`, message: `<a onclick="window.location.reload(false);">${this.$locale.baseText('nodeView.refresh')}</a> ${this.$locale.baseText('nodeView.toSeeTheLatestStatus')}.<br/> <a href="https://docs.n8n.io/nodes/n8n-nodes-base.wait/" target="_blank">${this.$locale.baseText('nodeView.moreInfo')}</a>`,
type: 'warning', type: 'warning',
duration: 0, duration: 0,
}); });
} }
}, },
async openWorkflowTemplate (templateId: string) { async openWorkflowTemplate (templateId: string) {
this.setLoadingText(this.$i.baseText('nodeView.loadingTemplate')); this.setLoadingText(this.$locale.baseText('nodeView.loadingTemplate'));
this.resetWorkspace(); this.resetWorkspace();
let data: IWorkflowTemplate | undefined; let data: IWorkflowTemplate | undefined;
@ -521,7 +521,7 @@ export default mixins(
if (!data) { if (!data) {
throw new Error( throw new Error(
this.$i.baseText( this.$locale.baseText(
'nodeView.workflowTemplateWithIdCouldNotBeFound', 'nodeView.workflowTemplateWithIdCouldNotBeFound',
{ interpolate: { templateId } }, { interpolate: { templateId } },
), ),
@ -530,11 +530,11 @@ export default mixins(
data.workflow.nodes.forEach((node) => { data.workflow.nodes.forEach((node) => {
if (!this.$store.getters.nodeType(node.type)) { if (!this.$store.getters.nodeType(node.type)) {
throw new Error(`The ${this.$i.shortNodeType(node.type)} node is not supported`); throw new Error(`The ${this.$locale.shortNodeType(node.type)} node is not supported`);
} }
}); });
} catch (error) { } catch (error) {
this.$showError(error, this.$i.baseText('nodeView.couldntImportWorkflow')); this.$showError(error, this.$locale.baseText('nodeView.couldntImportWorkflow'));
this.$router.push({ name: 'NodeViewNew' }); this.$router.push({ name: 'NodeViewNew' });
return; return;
} }
@ -577,15 +577,15 @@ export default mixins(
} catch (error) { } catch (error) {
this.$showError( this.$showError(
error, error,
this.$i.baseText('nodeView.showError.openWorkflow.title'), this.$locale.baseText('nodeView.showError.openWorkflow.title'),
this.$i.baseText('nodeView.showError.openWorkflow.message') + ':', this.$locale.baseText('nodeView.showError.openWorkflow.message') + ':',
); );
return; return;
} }
if (data === undefined) { if (data === undefined) {
throw new Error( throw new Error(
this.$i.baseText( this.$locale.baseText(
'nodeView.workflowWithIdCouldNotBeFound', 'nodeView.workflowWithIdCouldNotBeFound',
{ interpolate: { workflowId } }, { interpolate: { workflowId } },
), ),
@ -746,8 +746,8 @@ export default mixins(
} }
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('nodeView.showMessage.keyDown.title'), title: this.$locale.baseText('nodeView.showMessage.keyDown.title'),
message: this.$i.baseText('nodeView.showMessage.keyDown.message'), message: this.$locale.baseText('nodeView.showMessage.keyDown.message'),
type: 'success', type: 'success',
}); });
} else if ((e.key === 's') && (this.isCtrlKeyPressed(e) === true)) { } else if ((e.key === 's') && (this.isCtrlKeyPressed(e) === true)) {
@ -1044,8 +1044,8 @@ export default mixins(
this.stopExecutionInProgress = true; this.stopExecutionInProgress = true;
await this.restApi().stopCurrentExecution(executionId); await this.restApi().stopCurrentExecution(executionId);
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('nodeView.showMessage.stopExecutionTry.title'), title: this.$locale.baseText('nodeView.showMessage.stopExecutionTry.title'),
message: this.$i.baseText( message: this.$locale.baseText(
'nodeView.showMessage.stopExecutionTry.message', 'nodeView.showMessage.stopExecutionTry.message',
{ interpolate: { executionId } }, { interpolate: { executionId } },
), ),
@ -1073,15 +1073,15 @@ export default mixins(
this.$store.commit('setWorkflowExecutionData', executedData); this.$store.commit('setWorkflowExecutionData', executedData);
this.$store.commit('removeActiveAction', 'workflowRunning'); this.$store.commit('removeActiveAction', 'workflowRunning');
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('nodeView.showMessage.stopExecutionCatch.title'), title: this.$locale.baseText('nodeView.showMessage.stopExecutionCatch.title'),
message: this.$i.baseText('nodeView.showMessage.stopExecutionCatch.message'), message: this.$locale.baseText('nodeView.showMessage.stopExecutionCatch.message'),
type: 'success', type: 'success',
}); });
} else { } else {
this.$showError( this.$showError(
error, error,
this.$i.baseText('nodeView.showError.stopExecution.title'), this.$locale.baseText('nodeView.showError.stopExecution.title'),
this.$i.baseText('nodeView.showError.stopExecution.message') + ':', this.$locale.baseText('nodeView.showError.stopExecution.message') + ':',
); );
} }
} }
@ -1094,15 +1094,15 @@ export default mixins(
} catch (error) { } catch (error) {
this.$showError( this.$showError(
error, error,
this.$i.baseText('nodeView.showError.stopWaitingForWebhook.title'), this.$locale.baseText('nodeView.showError.stopWaitingForWebhook.title'),
this.$i.baseText('nodeView.showError.stopWaitingForWebhook.message') + ':', this.$locale.baseText('nodeView.showError.stopWaitingForWebhook.message') + ':',
); );
return; return;
} }
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('nodeView.showMessage.stopWaitingForWebhook.title'), title: this.$locale.baseText('nodeView.showMessage.stopWaitingForWebhook.title'),
message: this.$i.baseText('nodeView.showMessage.stopWaitingForWebhook.message'), message: this.$locale.baseText('nodeView.showMessage.stopWaitingForWebhook.message'),
type: 'success', type: 'success',
}); });
}, },
@ -1122,14 +1122,14 @@ export default mixins(
} }
const importConfirm = await this.confirmMessage( const importConfirm = await this.confirmMessage(
this.$i.baseText( this.$locale.baseText(
'nodeView.confirmMessage.receivedCopyPasteData.message', 'nodeView.confirmMessage.receivedCopyPasteData.message',
{ interpolate: { plainTextData } }, { interpolate: { plainTextData } },
), ),
this.$i.baseText('nodeView.confirmMessage.receivedCopyPasteData.headline'), this.$locale.baseText('nodeView.confirmMessage.receivedCopyPasteData.headline'),
'warning', 'warning',
this.$i.baseText('nodeView.confirmMessage.receivedCopyPasteData.confirmButtonText'), this.$locale.baseText('nodeView.confirmMessage.receivedCopyPasteData.confirmButtonText'),
this.$i.baseText('nodeView.confirmMessage.receivedCopyPasteData.cancelButtonText'), this.$locale.baseText('nodeView.confirmMessage.receivedCopyPasteData.cancelButtonText'),
); );
if (importConfirm === false) { if (importConfirm === false) {
@ -1174,8 +1174,8 @@ export default mixins(
this.stopLoading(); this.stopLoading();
this.$showError( this.$showError(
error, error,
this.$i.baseText('nodeView.showError.getWorkflowDataFromUrl.title'), this.$locale.baseText('nodeView.showError.getWorkflowDataFromUrl.title'),
this.$i.baseText('nodeView.showError.getWorkflowDataFromUrl.message') + ':', this.$locale.baseText('nodeView.showError.getWorkflowDataFromUrl.message') + ':',
); );
return; return;
} }
@ -1216,8 +1216,8 @@ export default mixins(
} catch (error) { } catch (error) {
this.$showError( this.$showError(
error, error,
this.$i.baseText('nodeView.showError.importWorkflowData.title'), this.$locale.baseText('nodeView.showError.importWorkflowData.title'),
this.$i.baseText('nodeView.showError.importWorkflowData.message') + ':', this.$locale.baseText('nodeView.showError.importWorkflowData.message') + ':',
); );
} }
}, },
@ -1260,8 +1260,8 @@ export default mixins(
showMaxNodeTypeError (nodeTypeData: INodeTypeDescription) { showMaxNodeTypeError (nodeTypeData: INodeTypeDescription) {
const maxNodes = nodeTypeData.maxNodes; const maxNodes = nodeTypeData.maxNodes;
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('nodeView.showMessage.showMaxNodeTypeError.title'), title: this.$locale.baseText('nodeView.showMessage.showMaxNodeTypeError.title'),
message: this.$i.baseText( message: this.$locale.baseText(
maxNodes === 1 maxNodes === 1
? 'nodeView.showMessage.showMaxNodeTypeError.message.singular' ? 'nodeView.showMessage.showMaxNodeTypeError.message.singular'
: 'nodeView.showMessage.showMaxNodeTypeError.message.plural', : 'nodeView.showMessage.showMaxNodeTypeError.message.plural',
@ -1281,8 +1281,8 @@ export default mixins(
if (nodeTypeData === null) { if (nodeTypeData === null) {
this.$showMessage({ this.$showMessage({
title: this.$i.baseText('nodeView.showMessage.addNodeButton.title'), title: this.$locale.baseText('nodeView.showMessage.addNodeButton.title'),
message: this.$i.baseText( message: this.$locale.baseText(
'nodeView.showMessage.addNodeButton.message', 'nodeView.showMessage.addNodeButton.message',
{ interpolate: { nodeTypeName } }, { interpolate: { nodeTypeName } },
), ),
@ -1802,11 +1802,11 @@ export default mixins(
const result = this.$store.getters.getStateIsDirty; const result = this.$store.getters.getStateIsDirty;
if(result) { if(result) {
const importConfirm = await this.confirmMessage( const importConfirm = await this.confirmMessage(
this.$i.baseText('nodeView.confirmMessage.initView.message'), this.$locale.baseText('nodeView.confirmMessage.initView.message'),
this.$i.baseText('nodeView.confirmMessage.initView.headline'), this.$locale.baseText('nodeView.confirmMessage.initView.headline'),
'warning', 'warning',
this.$i.baseText('nodeView.confirmMessage.initView.confirmButtonText'), this.$locale.baseText('nodeView.confirmMessage.initView.confirmButtonText'),
this.$i.baseText('nodeView.confirmMessage.initView.cancelButtonText'), this.$locale.baseText('nodeView.confirmMessage.initView.cancelButtonText'),
); );
if (importConfirm === false) { if (importConfirm === false) {
return Promise.resolve(); return Promise.resolve();
@ -1845,12 +1845,12 @@ export default mixins(
window.addEventListener("beforeunload", (e) => { window.addEventListener("beforeunload", (e) => {
if(this.$store.getters.getStateIsDirty === true) { if(this.$store.getters.getStateIsDirty === true) {
const confirmationMessage = this.$i.baseText('nodeView.itLooksLikeYouHaveBeenEditingSomething'); const confirmationMessage = this.$locale.baseText('nodeView.itLooksLikeYouHaveBeenEditingSomething');
(e || window.event).returnValue = confirmationMessage; //Gecko + IE (e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc. return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
} else { } else {
this.startLoading( this.startLoading(
this.$i.baseText('nodeView.redirecting'), this.$locale.baseText('nodeView.redirecting'),
); );
return; return;
@ -2204,13 +2204,13 @@ export default mixins(
async renameNodePrompt (currentName: string) { async renameNodePrompt (currentName: string) {
try { try {
const promptResponsePromise = this.$prompt( const promptResponsePromise = this.$prompt(
this.$i.baseText('nodeView.prompt.newName') + ':', this.$locale.baseText('nodeView.prompt.newName') + ':',
this.$i.baseText('nodeView.prompt.renameNode') + `: ${currentName}`, this.$locale.baseText('nodeView.prompt.renameNode') + `: ${currentName}`,
{ {
customClass: 'rename-prompt', customClass: 'rename-prompt',
confirmButtonText: this.$i.baseText('nodeView.prompt.rename'), confirmButtonText: this.$locale.baseText('nodeView.prompt.rename'),
cancelButtonText: this.$i.baseText('nodeView.prompt.cancel'), cancelButtonText: this.$locale.baseText('nodeView.prompt.cancel'),
inputErrorMessage: this.$i.baseText('nodeView.prompt.invalidName'), inputErrorMessage: this.$locale.baseText('nodeView.prompt.invalidName'),
inputValue: currentName, inputValue: currentName,
}, },
); );
@ -2348,7 +2348,7 @@ export default mixins(
try { try {
nodeParameters = NodeHelpers.getNodeParameters(nodeType.properties, node.parameters, true, false); nodeParameters = NodeHelpers.getNodeParameters(nodeType.properties, node.parameters, true, false);
} catch (e) { } catch (e) {
console.error(this.$i.baseText('nodeView.thereWasAProblemLoadingTheNodeParametersOfNode') + `: "${node.name}"`); // eslint-disable-line no-console console.error(this.$locale.baseText('nodeView.thereWasAProblemLoadingTheNodeParametersOfNode') + `: "${node.name}"`); // eslint-disable-line no-console
console.error(e); // eslint-disable-line no-console console.error(e); // eslint-disable-line no-console
} }
node.parameters = nodeParameters !== null ? nodeParameters : {}; node.parameters = nodeParameters !== null ? nodeParameters : {};
@ -2424,7 +2424,7 @@ export default mixins(
if (!data.nodes) { if (!data.nodes) {
// No nodes to add // No nodes to add
throw new Error( throw new Error(
this.$i.baseText('nodeView.noNodesGivenToAdd'), this.$locale.baseText('nodeView.noNodesGivenToAdd'),
); );
} }
@ -2718,8 +2718,8 @@ export default mixins(
} catch (error) { } catch (error) {
this.$showError( this.$showError(
error, error,
this.$i.baseText('nodeView.showError.mounted1.title'), this.$locale.baseText('nodeView.showError.mounted1.title'),
this.$i.baseText('nodeView.showError.mounted1.message') + ':', this.$locale.baseText('nodeView.showError.mounted1.message') + ':',
); );
return; return;
} }
@ -2731,8 +2731,8 @@ export default mixins(
} catch (error) { } catch (error) {
this.$showError( this.$showError(
error, error,
this.$i.baseText('nodeView.showError.mounted2.title'), this.$locale.baseText('nodeView.showError.mounted2.title'),
this.$i.baseText('nodeView.showError.mounted2.message') + ':', this.$locale.baseText('nodeView.showError.mounted2.message') + ':',
); );
} }
this.stopLoading(); this.stopLoading();