mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ Render base strings

Browse source
This commit is contained in:
Iván Ovejero 2021-11-10 19:41:40 +01:00
parent 61bb8de352
commit 2d8e158012
57 changed files with 2203 additions and 1456 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.vscode/settings.json vendored
View file

@ -1,3 +1,3 @@
{
"vetur.experimental.templateInterpolationService": true,
// "vetur.experimental.templateInterpolationService": true,
}

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

@ -4,18 +4,18 @@
@click.stop="closeWindow"
size="small"
class="binary-data-window-back"
title="Back to overview page"
:title="$baseText('binaryDataDisplay.backToOverviewPage')"
icon="arrow-left"
label="Back to list"
:label="$baseText('binaryDataDisplay.backToList')"
/>
<div class="binary-data-window-wrapper">
<div v-if="!binaryData">
Data to display did not get found
{{ $baseText('binaryDataDisplay.noDataFoundToDisplay') }}
</div>
<video v-else-if="binaryData.mimeType && binaryData.mimeType.startsWith('video/')" controls autoplay>
<source :src="'data:' + binaryData.mimeType + ';base64,' + binaryData.data" :type="binaryData.mimeType">
Your browser does not support the video element. Kindly update it to latest version.
{{ $baseText('binaryDataDisplay.yourBrowserDoesNotSupport') }}
</video>
<embed v-else :src="'data:' + binaryData.mimeType + ';base64,' + binaryData.data" class="binary-data" :class="embedClass"/>
</div>
@ -31,11 +31,13 @@ import {
} from 'n8n-workflow';
import { nodeHelpers } from '@/components/mixins/nodeHelpers';
import { renderText } from '@/components/mixins/renderText';
import mixins from 'vue-typed-mixins';
export default mixins(
nodeHelpers,
renderText,
)
.extend({
name: 'BinaryDataDisplay',

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

@ -2,7 +2,7 @@
<div @keydown.stop class="collection-parameter">
<div class="collection-parameter-wrapper">
<div v-if="getProperties.length === 0" class="no-items-exist">
<n8n-text size="small">Currently no properties exist</n8n-text>
<n8n-text size="small">{{ $baseText('collectionParameter.noProperties') }}</n8n-text>
</div>
<parameter-input-list :parameters="getProperties" :nodeValues="nodeValues" :path="path" :hideDelete="hideDelete" :indent="true" @valueChanged="valueChanged" />
@ -67,7 +67,7 @@ export default mixins(
},
computed: {
getPlaceholderText (): string {
return this.parameter.placeholder ? this.parameter.placeholder : 'Choose Option To Add';
return this.parameter.placeholder ? this.parameter.placeholder : this.$baseText('collectionParameter.choose');
},
getProperties (): INodeProperties[] {
const returnProperties = [];

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

@ -13,9 +13,10 @@
<script lang="ts">
import mixins from 'vue-typed-mixins';
import { copyPaste } from './mixins/copyPaste';
import { renderText } from './mixins/renderText';
import { showMessage } from './mixins/showMessage';
export default mixins(copyPaste, showMessage).extend({
export default mixins(copyPaste, showMessage, renderText).extend({
props: {
label: {
type: String,
@ -38,7 +39,7 @@ export default mixins(copyPaste, showMessage).extend({
this.copyToClipboard(this.$props.copyContent);
this.$showMessage({
title: 'Copied',
title: this.$baseText('credentialsEdit.showMessage.title'),
message: this.$props.successMessage,
type: 'success',
});

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

@ -3,17 +3,17 @@
<banner
v-show="showValidationWarning"
theme="danger"
message="Please check the errors below"
:message="$baseText('credentialEdit.credentialConfig.pleaseCheckTheErrorsBelow')"
/>
<banner
v-if="authError && !showValidationWarning"
theme="danger"
message="Couldn’t connect with these settings"
:message="$baseText('credentialEdit.credentialConfig.couldntConnectWithTheseSettings')"
:details="authError"
buttonLabel="Retry"
:buttonLabel="$baseText('credentialEdit.credentialConfig.retry')"
buttonLoadingLabel="Retrying"
buttonTitle="Retry credentials test"
:buttonTitle="$baseText('credentialEdit.credentialConfig.retryCredentialTest')"
:buttonLoading="isRetesting"
@click="$emit('retest')"
/>
@ -21,35 +21,37 @@
<banner
v-show="showOAuthSuccessBanner && !showValidationWarning"
theme="success"
message="Account connected"
buttonLabel="Reconnect"
buttonTitle="Reconnect OAuth Credentials"
:message="$baseText('credentialEdit.credentialConfig.accountConnected')"
:buttonLabel="$baseText('credentialEdit.credentialConfig.reconnect')"
:buttonTitle="$baseText('credentialEdit.credentialConfig.reconnectOAuth2Credential')"
@click="$emit('oauth')"
/>
<banner
v-show="testedSuccessfully && !showValidationWarning"
theme="success"
message="Connection tested successfully"
buttonLabel="Retry"
buttonLoadingLabel="Retrying"
buttonTitle="Retry credentials test"
:message="$baseText('credentialEdit.credentialConfig.connectionTestedSuccessfully')"
:buttonLabel="$baseText('credentialEdit.credentialConfig.retry')"
:buttonLoadingLabel="$baseText('credentialEdit.credentialConfig.retrying')"
:buttonTitle="$baseText('credentialEdit.credentialConfig.retryCredentialTest')"
:buttonLoading="isRetesting"
@click="$emit('retest')"
/>
<n8n-info-tip v-if="documentationUrl && credentialProperties.length">
Need help filling out these fields?
<a :href="documentationUrl" target="_blank" @click="onDocumentationUrlClick">Open docs</a>
{{ $baseText('credentialEdit.credentialConfig.needHelpFillingOutTheseFields') }}
<a :href="documentationUrl" target="_blank" @click="onDocumentationUrlClick">
{{ $baseText('credentialEdit.credentialConfig.openDocs') }}
</a>
</n8n-info-tip>
<CopyInput
v-if="isOAuthType && credentialProperties.length"
label="OAuth Redirect URL"
:label="$baseText('credentialEdit.credentialConfig.oAuthRedirectUrl')"
:copyContent="oAuthCallbackUrl"
copyButtonText="Click to copy"
:subtitle="`In ${appName}, use the URL above when prompted to enter an OAuth callback or redirect URL`"
successMessage="Redirect URL copied to clipboard"
:copyButtonText="$baseText('credentialEdit.credentialConfig.clickToCopy')"
:subtitle="$baseText('credentialEdit.credentialConfig.subtitle', { interpolate: { appName } })"
:successMessage="$baseText('credentialEdit.credentialConfig.redirectUrlCopiedToClipboard')"
/>
<CredentialInputs
@ -78,8 +80,11 @@ import Banner from '../Banner.vue';
import CopyInput from '../CopyInput.vue';
import CredentialInputs from './CredentialInputs.vue';
import OauthButton from './OauthButton.vue';
import { renderText } from '../mixins/renderText';
export default Vue.extend({
import mixins from 'vue-typed-mixins';
export default mixins(renderText).extend({
name: 'CredentialConfig',
components: {
Banner,

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

@ -53,10 +53,10 @@
:light="true"
>
<n8n-menu-item index="connection" :class="$style.credTab"
><span slot="title">Connection</span></n8n-menu-item
><span slot="title">{{ $baseText('credentialEdit.credentialEdit.connection') }}</span></n8n-menu-item
>
<n8n-menu-item index="details" :class="$style.credTab"
><span slot="title">Details</span></n8n-menu-item
><span slot="title">{{ $baseText('credentialEdit.credentialEdit.details') }}</span></n8n-menu-item
>
</n8n-menu>
</div>
@ -116,6 +116,7 @@ import CredentialIcon from '../CredentialIcon.vue';
import mixins from 'vue-typed-mixins';
import { nodeHelpers } from '../mixins/nodeHelpers';
import { renderText } from '../mixins/renderText';
import { showMessage } from '../mixins/showMessage';
import CredentialConfig from './CredentialConfig.vue';
@ -128,7 +129,7 @@ interface NodeAccessMap {
[nodeType: string]: ICredentialNodeAccess | null;
}
export default mixins(showMessage, nodeHelpers).extend({
export default mixins(renderText, showMessage, nodeHelpers).extend({
name: 'CredentialsDetail',
components: {
CredentialConfig,
@ -349,20 +350,20 @@ export default mixins(showMessage, nodeHelpers).extend({
if (this.hasUnsavedChanges) {
const displayName = this.credentialType ? this.credentialType.displayName : '';
keepEditing = await this.confirmMessage(
`Are you sure you want to throw away the changes you made to the ${displayName} credential?`,
'Close without saving?',
this.$baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.message', { interpolate: { credentialDisplayName: displayName } }),
this.$baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.headline'),
null,
'Keep editing',
'Close',
this.$baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.cancelButtonText'),
this.$baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.confirmButtonText'),
);
}
else if (this.isOAuthType && !this.isOAuthConnected) {
keepEditing = await this.confirmMessage(
`You need to connect your credential for it to work`,
'Close without connecting?',
this.$baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.message'),
this.$baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.headline'),
null,
'Keep editing',
'Close',
this.$baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.cancelButtonText'),
this.$baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.confirmButtonText'),
);
}
@ -400,7 +401,9 @@ export default mixins(showMessage, nodeHelpers).extend({
this.$store.getters['credentials/getCredentialTypeByName'](name);
if (!credentialsData) {
throw new Error(`Could not find credentials of type: ${name}`);
throw new Error(
this.$baseText('credentialEdit.credentialEdit.couldNotFindCredentialOfType') + ':' + name,
);
}
if (credentialsData.extends === undefined) {
@ -436,7 +439,7 @@ export default mixins(showMessage, nodeHelpers).extend({
});
if (!currentCredentials) {
throw new Error(
`Could not find the credentials with the id: ${this.credentialId}`,
this.$baseText('credentialEdit.credentialEdit.couldNotFindCredentialWithId') + ':' + this.credentialId,
);
}
@ -448,11 +451,11 @@ export default mixins(showMessage, nodeHelpers).extend({
this.nodeAccess[access.nodeType] = access;
},
);
} catch (e) {
} catch (error) {
this.$showError(
e,
'Problem loading credentials',
'There was a problem loading the credentials:',
error,
this.$baseText('credentialEdit.credentialEdit.showError.loadCredential.title'),
this.$baseText('credentialEdit.credentialEdit.showError.loadCredential.message'),
);
this.closeDialog();
@ -657,8 +660,8 @@ export default mixins(showMessage, nodeHelpers).extend({
} catch (error) {
this.$showError(
error,
'Problem creating credentials',
'There was a problem creating the credentials:',
this.$baseText('credentialEdit.credentialEdit.showError.createCredential.title'),
this.$baseText('credentialEdit.credentialEdit.showError.createCredential.message'),
);
return null;
@ -686,8 +689,8 @@ export default mixins(showMessage, nodeHelpers).extend({
} catch (error) {
this.$showError(
error,
'Problem updating credentials',
'There was a problem updating the credentials:',
this.$baseText('credentialEdit.credentialEdit.showError.updateCredential.title'),
this.$baseText('credentialEdit.credentialEdit.showError.updateCredential.message'),
);
return null;
@ -708,10 +711,10 @@ export default mixins(showMessage, nodeHelpers).extend({
const savedCredentialName = this.currentCredential.name;
const deleteConfirmed = await this.confirmMessage(
`Are you sure you want to delete "${savedCredentialName}" credentials?`,
'Delete Credentials?',
this.$baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.message', { interpolate: { savedCredentialName } }),
this.$baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.headline'),
null,
'Yes, delete!',
this.$baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.confirmButtonText'),
);
if (deleteConfirmed === false) {
@ -727,8 +730,8 @@ export default mixins(showMessage, nodeHelpers).extend({
} catch (error) {
this.$showError(
error,
'Problem deleting credentials',
'There was a problem deleting the credentials:',
this.$baseText('credentialEdit.credentialEdit.showError.deleteCredential.title'),
this.$baseText('credentialEdit.credentialEdit.showError.deleteCredential.message'),
);
this.isDeleting = false;
@ -740,8 +743,11 @@ export default mixins(showMessage, nodeHelpers).extend({
this.updateNodesCredentialsIssues();
this.$showMessage({
title: 'Credentials deleted',
message: `The credential "${savedCredentialName}" was deleted!`,
title: this.$baseText('credentialEdit.credentialEdit.showMessage.title'),
message: this.$baseText(
'credentialEdit.credentialEdit.showMessage.message',
{ interpolate: { savedCredentialName } },
),
type: 'success',
});
this.closeDialog();
@ -778,8 +784,8 @@ export default mixins(showMessage, nodeHelpers).extend({
} catch (error) {
this.$showError(
error,
'OAuth Authorization Error',
'Error generating authorization URL:',
this.$baseText('credentialEdit.credentialEdit.showError.generateAuthorizationUrl.title'),
this.$baseText('credentialEdit.credentialEdit.showError.generateAuthorizationUrl.message'),
);
return;

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

@ -2,7 +2,7 @@
<div :class="$style.container">
<el-row>
<el-col :span="8" :class="$style.accessLabel">
<n8n-text :compact="true" :bold="true">Allow use by</n8n-text>
<n8n-text :compact="true" :bold="true">{{ $baseText('credentialEdit.credentialInfo.allowUseBy') }}</n8n-text>
</el-col>
<el-col :span="16">
<div
@ -20,7 +20,7 @@
</el-row>
<el-row v-if="currentCredential">
<el-col :span="8" :class="$style.label">
<n8n-text :compact="true" :bold="true">Created</n8n-text>
<n8n-text :compact="true" :bold="true">{{ $baseText('credentialEdit.credentialInfo.created') }}</n8n-text>
</el-col>
<el-col :span="16" :class="$style.valueLabel">
<n8n-text :compact="true"><TimeAgo :date="currentCredential.createdAt" :capitalize="true" /></n8n-text>
@ -28,7 +28,7 @@
</el-row>
<el-row v-if="currentCredential">
<el-col :span="8" :class="$style.label">
<n8n-text :compact="true" :bold="true">Last modified</n8n-text>
<n8n-text :compact="true" :bold="true">{{ $baseText('credentialEdit.credentialInfo.lastModified') }}</n8n-text>
</el-col>
<el-col :span="16" :class="$style.valueLabel">
<n8n-text :compact="true"><TimeAgo :date="currentCredential.updatedAt" :capitalize="true" /></n8n-text>
@ -36,7 +36,7 @@
</el-row>
<el-row v-if="currentCredential">
<el-col :span="8" :class="$style.label">
<n8n-text :compact="true" :bold="true">ID</n8n-text>
<n8n-text :compact="true" :bold="true">{{ $baseText('credentialEdit.credentialInfo.id') }}</n8n-text>
</el-col>
<el-col :span="16" :class="$style.valueLabel">
<n8n-text :compact="true">{{currentCredential.id}}</n8n-text>
@ -47,10 +47,12 @@
<script lang="ts">
import Vue from 'vue';
import { renderText } from '../mixins/renderText';
import TimeAgo from '../TimeAgo.vue';
import mixins from 'vue-typed-mixins';
export default Vue.extend({
export default mixins(renderText).extend({
name: 'CredentialInfo',
props: ['nodesWithAccess', 'nodeAccess', 'currentCredential'],
components: {

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

@ -4,12 +4,12 @@
v-if="isGoogleOAuthType"
:src="basePath + 'google-signin-light.png'"
:class="$style.googleIcon"
alt="Sign in with Google"
:alt="$baseText('credentialEdit.oAuthButton.signInWithGoogle')"
@click.stop="$emit('click')"
/>
<n8n-button
v-else
label="Connect my account"
:label="$baseText('credentialEdit.oAuthButton.connectMyAccount')"
size="large"
@click.stop="$emit('click')"
/>
@ -18,8 +18,10 @@
<script lang="ts">
import Vue from 'vue';
import { renderText } from '../mixins/renderText';
import mixins from 'vue-typed-mixins';
export default Vue.extend({
export default mixins(renderText).extend({
props: {
isGoogleOAuthType: {
type: Boolean,

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

@ -2,32 +2,32 @@
<Modal
:name="CREDENTIAL_LIST_MODAL_KEY"
width="80%"
title="Credentials"
:title="$baseText('credentialsList.credentials')"
>
<template v-slot:content>
<n8n-heading tag="h3" size="small" color="text-light">Your saved credentials:</n8n-heading>
<n8n-heading tag="h3" size="small" color="text-light">{{ $baseText('credentialsList.yourSavedCredentials') + ':' }}</n8n-heading>
<div class="new-credentials-button">
<n8n-button
title="Create New Credentials"
:title="$baseText('credentialsList.createNewCredential')"
icon="plus"
label="Add New"
:label="$baseText('credentialsList.addNew')"
size="large"
@click="createCredential()"
/>
</div>
<el-table :data="credentialsToDisplay" :default-sort = "{prop: 'name', order: 'ascending'}" stripe max-height="450" @row-click="editCredential">
<el-table-column property="name" label="Name" class-name="clickable" sortable></el-table-column>
<el-table-column property="type" label="Type" class-name="clickable" sortable></el-table-column>
<el-table-column property="createdAt" label="Created" class-name="clickable" sortable></el-table-column>
<el-table-column property="updatedAt" label="Updated" class-name="clickable" sortable></el-table-column>
<el-table-column property="name" :label="$baseText('credentialsList.name')" class-name="clickable" sortable></el-table-column>
<el-table-column property="type" :label="$baseText('credentialsList.type')" class-name="clickable" sortable></el-table-column>
<el-table-column property="createdAt" :label="$baseText('credentialsList.created')" class-name="clickable" sortable></el-table-column>
<el-table-column property="updatedAt" :label="$baseText('credentialsList.updated')" class-name="clickable" sortable></el-table-column>
<el-table-column
label="Operations"
:label="$baseText('credentialsList.operations')"
width="120">
<template slot-scope="scope">
<div class="cred-operations">
<n8n-icon-button title="Edit Credentials" @click.stop="editCredential(scope.row)" size="small" icon="pen" />
<n8n-icon-button title="Delete Credentials" @click.stop="deleteCredential(scope.row)" size="small" icon="trash" />
<n8n-icon-button :title="$baseText('credentialsList.editCredential')" @click.stop="editCredential(scope.row)" size="small" icon="pen" />
<n8n-icon-button :title="$baseText('credentialsList.deleteCredential')" @click.stop="deleteCredential(scope.row)" size="small" icon="trash" />
</div>
</template>
</el-table-column>
@ -103,7 +103,16 @@ export default mixins(
},
async deleteCredential (credential: ICredentialsResponse) {
const deleteConfirmed = await this.confirmMessage(`Are you sure you want to delete "${credential.name}" credentials?`, 'Delete Credentials?', null, 'Yes, delete!');
const deleteConfirmed = await this.confirmMessage(
this.$baseText(
'credentialsList.confirmMessage.message',
{ interpolate: { credentialName: credential.name }},
),
this.$baseText('credentialsList.confirmMessage.headline'),
null,
this.$baseText('credentialsList.confirmMessage.confirmButtonText'),
this.$baseText('credentialsList.confirmMessage.cancelButtonText'),
);
if (deleteConfirmed === false) {
return;
@ -112,7 +121,11 @@ export default mixins(
try {
await this.$store.dispatch('credentials/deleteCredential', {id: credential.id});
} catch (error) {
this.$showError(error, 'Problem deleting credentials', 'There was a problem deleting the credentials:');
this.$showError(
error,
this.$baseText('credentialsList.showError.deleteCredential.title'),
this.$baseText('credentialsList.showError.deleteCredential.message'),
);
return;
}
@ -121,8 +134,11 @@ export default mixins(
this.updateNodesCredentialsIssues();
this.$showMessage({
title: 'Credentials deleted',
message: `The credential "${credential.name}" was deleted!`,
title: this.$baseText('credentialsList.showMessage.title'),
message: this.$baseText(
'credentialsList.showMessage.message',
{ interpolate: { credentialName: credential.name }},
),
type: 'success',
});
},

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

@ -7,15 +7,15 @@
maxWidth="460px"
>
<template slot="header">
<h2 :class="$style.title">Add new credential</h2>
<h2 :class="$style.title">{{ $baseText('credentialSelectModal.addNewCredential') }}</h2>
</template>
<template slot="content">
<div>
<div :class="$style.subtitle">Select an app or service to connect to</div>
<div :class="$style.subtitle">{{ $baseText('credentialSelectModal.selectAnAppOrServiceToConnectTo') }}</div>
<n8n-select
filterable
defaultFirstOption
placeholder="Search for app..."
:placeholder="$baseText('credentialSelectModal.searchForApp')"
size="xlarge"
ref="select"
:value="selected"
@ -35,7 +35,7 @@
<template slot="footer">
<div :class="$style.footer">
<n8n-button
label="Continue"
:label="$baseText('credentialSelectModal.continue')"
float="right"
size="large"
:disabled="!selected"
@ -52,8 +52,10 @@ import { mapGetters } from "vuex";
import Modal from './Modal.vue';
import { CREDENTIAL_SELECT_MODAL_KEY } from '../constants';
import mixins from 'vue-typed-mixins';
import { renderText } from './mixins/renderText';
export default Vue.extend({
export default mixins(renderText).extend({
name: 'CredentialsSelectModal',
components: {
Modal,

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

@ -15,7 +15,7 @@
<transition name="fade">
<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">
<title>Node Documentation</title>
<title>{{ $baseText('dataDisplay.nodeDocumentation') }}</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1127.000000, -836.000000)" fill-rule="nonzero">
<g transform="translate(1117.000000, 825.000000)">
@ -31,7 +31,7 @@
</svg>
<div class="text">
Need help? <a id="doc-hyperlink" :href="documentationUrl" target="_blank" @click="onDocumentationUrlClick">Open {{nodeType.displayName}} documentation</a>
{{ $baseText('dataDisplay.needHelp') }} <a id="doc-hyperlink" :href="documentationUrl" target="_blank" @click="onDocumentationUrlClick">{{ $baseText('dataDisplay.openDocumentationFor', { interpolate: { nodeTypeDisplayName: nodeType.displayName } }) }}</a>
</div>
</div>
</transition>
@ -49,6 +49,7 @@ import {
import { externalHooks } from '@/components/mixins/externalHooks';
import { nodeHelpers } from '@/components/mixins/nodeHelpers';
import { renderText } from '@/components/mixins/renderText';
import { workflowHelpers } from '@/components/mixins/workflowHelpers';
import NodeSettings from '@/components/NodeSettings.vue';
@ -56,7 +57,7 @@ import RunData from '@/components/RunData.vue';
import mixins from 'vue-typed-mixins';
export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
export default mixins(externalHooks, nodeHelpers, renderText, workflowHelpers).extend({
name: 'DataDisplay',
components: {
NodeSettings,

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

@ -1,12 +1,12 @@
<template >
<span class="static-text-wrapper">
<span v-show="!editActive" title="Click to change">
<span v-show="!editActive" :title="$baseText('displayWithChange.clickToChange')">
<span class="static-text" @mousedown="startEdit">{{currentValue}}</span>
</span>
<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" />
<font-awesome-icon icon="times" @mousedown="cancelEdit" class="icons clickable" title="Cancel Edit" />
<font-awesome-icon icon="check" @mousedown="setValue" class="icons clickable" title="Set Value" />
<font-awesome-icon icon="times" @mousedown="cancelEdit" class="icons clickable" :title="$baseText('displayWithChange.cancelEdit')" />
<font-awesome-icon icon="check" @mousedown="setValue" class="icons clickable" :title="$baseText('displayWithChange.setValue')" />
</span>
</span>
</template>

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

@ -3,7 +3,7 @@
:name="modalName"
:eventBus="modalBus"
@enter="save"
title="Duplicate Workflow"
:title="$baseText('duplicateWorkflowDialog.duplicateWorkflow')"
:center="true"
minWidth="420px"
maxWidth="420px"
@ -13,7 +13,7 @@
<n8n-input
v-model="name"
ref="nameInput"
placeholder="Enter workflow name"
:placeholder="$baseText('duplicateWorkflowDialog.enterWorkflowName')"
:maxlength="MAX_WORKFLOW_NAME_LENGTH"
/>
<TagsDropdown
@ -23,15 +23,15 @@
@blur="onTagsBlur"
@esc="onTagsEsc"
@update="onTagsUpdate"
placeholder="Choose or create a tag"
:placeholder="$baseText('duplicateWorkflowDialog.chooseOrCreateATag')"
ref="dropdown"
/>
</div>
</template>
<template v-slot:footer="{ close }">
<div :class="$style.footer">
<n8n-button @click="save" :loading="isSaving" label="Save" float="right" />
<n8n-button type="outline" @click="close" :disabled="isSaving" label="Cancel" float="right" />
<n8n-button @click="save" :loading="isSaving" :label="$baseText('duplicateWorkflowDialog.save')" float="right" />
<n8n-button type="outline" @click="close" :disabled="isSaving" :label="$baseText('duplicateWorkflowDialog.cancel')" float="right" />
</div>
</template>
</Modal>
@ -44,10 +44,11 @@ import mixins from "vue-typed-mixins";
import { MAX_WORKFLOW_NAME_LENGTH } from "@/constants";
import { workflowHelpers } from "@/components/mixins/workflowHelpers";
import { showMessage } from "@/components/mixins/showMessage";
import { renderText } from "@/components/mixins/renderText";
import TagsDropdown from "@/components/TagsDropdown.vue";
import Modal from "./Modal.vue";
export default mixins(showMessage, workflowHelpers).extend({
export default mixins(showMessage, renderText, workflowHelpers).extend({
components: { TagsDropdown, Modal },
name: "DuplicateWorkflow",
props: ["modalName", "isActive"],
@ -101,8 +102,8 @@ export default mixins(showMessage, workflowHelpers).extend({
const name = this.name.trim();
if (!name) {
this.$showMessage({
title: "Name missing",
message: `Please enter a name.`,
title: this.$baseText('duplicateWorkflowDialog.showMessage.title'),
message: this.$baseText('duplicateWorkflowDialog.showMessage.message'),
type: "error",
});

24
packages/editor-ui/src/components/Error/NodeViewError.vue → packages/editor-ui/src/components/Error/NodeErrorView.vue
View file

@ -1,18 +1,18 @@
<template>
<div>
<div class="error-header">
<div class="error-message">ERROR: {{error.message}}</div>
<div class="error-message">{{ $baseText('nodeErrorView.error') + ':' + error.message }}</div>
<div class="error-description" v-if="error.description">{{error.description}}</div>
</div>
<details>
<summary class="error-details__summary">
<font-awesome-icon class="error-details__icon" icon="angle-right" /> Details
<font-awesome-icon class="error-details__icon" icon="angle-right" /> {{ $baseText('nodeErrorView.details') }}
</summary>
<div class="error-details__content">
<div v-if="error.timestamp">
<el-card class="box-card" shadow="never">
<div slot="header" class="clearfix box-card__title">
<span>Time</span>
<span>{{ $baseText('nodeErrorView.time') }}</span>
</div>
<div>
{{new Date(error.timestamp).toLocaleString()}}
@ -22,7 +22,7 @@
<div v-if="error.httpCode">
<el-card class="box-card" shadow="never">
<div slot="header" class="clearfix box-card__title">
<span>HTTP-Code</span>
<span>{{ $baseText('nodeErrorView.httpCode') }}</span>
</div>
<div>
{{error.httpCode}}
@ -32,13 +32,13 @@
<div v-if="error.cause">
<el-card class="box-card" shadow="never">
<div slot="header" class="clearfix box-card__title">
<span>Cause</span>
<span>{{ $baseText('nodeErrorView.cause') }}</span>
<br>
<span class="box-card__subtitle">Data below may contain sensitive information. Proceed with caution when sharing.</span>
<span class="box-card__subtitle">{{ $baseText('nodeErrorView.dataBelowMayContain') }}</span>
</div>
<div>
<div class="copy-button" v-if="displayCause">
<n8n-icon-button @click="copyCause" title="Copy to Clipboard" icon="copy" />
<n8n-icon-button @click="copyCause" :title="$baseText('nodeErrorView.copyToClipboard')" icon="copy" />
</div>
<vue-json-pretty
v-if="displayCause"
@ -50,7 +50,7 @@
class="json-data"
/>
<span v-else>
<font-awesome-icon icon="info-circle" /> The error cause is too large to be displayed.
<font-awesome-icon icon="info-circle" />{{ $baseText('nodeErrorView.theErrorCauseIsTooLargeToBeDisplayed') }}
</span>
</div>
</el-card>
@ -58,7 +58,7 @@
<div v-if="error.stack">
<el-card class="box-card" shadow="never">
<div slot="header" class="clearfix box-card__title">
<span>Stack</span>
<span>{{ $baseText('nodeErrorView.stack') }}</span>
</div>
<div>
<pre><code>{{error.stack}}</code></pre>
@ -79,10 +79,12 @@ import mixins from 'vue-typed-mixins';
import {
MAX_DISPLAY_DATA_SIZE,
} from '@/constants';
import { renderText } from '../mixins/renderText';
export default mixins(
copyPaste,
showMessage,
renderText,
).extend({
name: 'NodeErrorView',
props: [
@ -103,8 +105,8 @@ export default mixins(
},
copySuccess() {
this.$showMessage({
title: 'Copied to clipboard',
message: '',
title: this.$baseText('nodeErrorView.showMessage.title'),
message: this.$baseText('nodeErrorView.showMessage.message'),
type: 'info',
});
},

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

@ -1,13 +1,13 @@
<template>
<span>
<el-dialog :visible="dialogVisible" append-to-body width="80%" :title="`Workflow Executions ${combinedExecutions.length}/${finishedExecutionsCountEstimated === true ? '~' : ''}${combinedExecutionsCount}`" :before-close="closeDialog">
<el-dialog :visible="dialogVisible" append-to-body width="80%" :title="`${$baseText('executionsList.workflowExecutions')} ${combinedExecutions.length}/${finishedExecutionsCountEstimated === true ? '~' : ''}${combinedExecutionsCount}`" :before-close="closeDialog">
<div class="filters">
<el-row>
<el-col :span="2" class="filter-headline">
Filters:
{{ $baseText('executionsList.filters') }}:
</el-col>
<el-col :span="7">
<n8n-select v-model="filter.workflowId" placeholder="Select Workflow" size="medium" filterable @change="handleFilterChanged">
<n8n-select v-model="filter.workflowId" :placeholder="$baseText('executionsList.selectWorkflow')" size="medium" filterable @change="handleFilterChanged">
<n8n-option
v-for="item in workflows"
:key="item.id"
@ -17,7 +17,7 @@
</n8n-select>
</el-col>
<el-col :span="5" :offset="1">
<n8n-select v-model="filter.status" placeholder="Select Status" size="medium" filterable @change="handleFilterChanged">
<n8n-select v-model="filter.status" :placeholder="$baseText('executionsList.selectStatus')" size="medium" filterable @change="handleFilterChanged">
<n8n-option
v-for="item in statuses"
:key="item.id"
@ -27,15 +27,15 @@
</n8n-select>
</el-col>
<el-col :span="4" :offset="5" class="autorefresh">
<el-checkbox v-model="autoRefresh" @change="handleAutoRefreshToggle">Auto refresh</el-checkbox>
<el-checkbox v-model="autoRefresh" @change="handleAutoRefreshToggle">{{ $baseText('executionsList.autoRefresh') }}</el-checkbox>
</el-col>
</el-row>
</div>
<div class="selection-options">
<span v-if="checkAll === true || isIndeterminate === true">
Selected: {{numSelected}} / <span v-if="finishedExecutionsCountEstimated === true">~</span>{{finishedExecutionsCount}}
<n8n-icon-button title="Delete Selected" icon="trash" size="mini" @click="handleDeleteSelected" />
{{ $baseText('executionsList.selected') }}: {{numSelected}} / <span v-if="finishedExecutionsCountEstimated === true">~</span>{{finishedExecutionsCount}}
<n8n-icon-button :title="$baseText('executionsList.deleteSelected')" icon="trash" size="mini" @click="handleDeleteSelected" />
</span>
</div>
@ -49,49 +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>
</template>
</el-table-column>
<el-table-column property="startedAt" label="Started At / ID" width="205">
<el-table-column property="startedAt" :label="$baseText('executionsList.startedAtId')" width="205">
<template slot-scope="scope">
{{convertToDisplayDate(scope.row.startedAt)}}<br />
<small v-if="scope.row.id">ID: {{scope.row.id}}</small>
</template>
</el-table-column>
<el-table-column property="workflowName" label="Name">
<el-table-column property="workflowName" :label="$baseText('executionsList.name')">
<template slot-scope="scope">
<span class="workflow-name">
{{scope.row.workflowName || '[UNSAVED WORKFLOW]'}}
{{ scope.row.workflowName || $baseText('executionsList.unsavedWorkflow') }}
</span>
<span v-if="scope.row.stoppedAt === undefined">
(running)
({{ $baseText('executionsList.running') }})
</span>
<span v-if="scope.row.retryOf !== undefined">
<br /><small>Retry of "{{scope.row.retryOf}}"</small>
<br /><small>{{ $baseText('executionsList.retryOf') }} "{{scope.row.retryOf}}"</small>
</span>
<span v-else-if="scope.row.retrySuccessId !== undefined">
<br /><small>Success retry "{{scope.row.retrySuccessId}}"</small>
<br /><small>{{ $baseText('executionsList.successRetry') }} "{{scope.row.retrySuccessId}}"</small>
</span>
</template>
</el-table-column>
<el-table-column label="Status" width="122" align="center">
<el-table-column :label="$baseText('executionsList.status')" width="122" align="center">
<template slot-scope="scope" align="center">
<n8n-tooltip placement="top" >
<div slot="content" v-html="statusTooltipText(scope.row)"></div>
<span class="status-badge running" v-if="scope.row.waitTill">
Waiting
</span>
<span class="status-badge running" v-else-if="scope.row.stoppedAt === undefined">
Running
<span class="status-badge running" v-if="scope.row.stoppedAt === undefined">
{{ $baseText('executionsList.running') }}
</span>
<span class="status-badge success" v-else-if="scope.row.finished">
Success
{{ $baseText('executionsList.success') }}
</span>
<span class="status-badge error" v-else-if="scope.row.stoppedAt !== null">
Error
{{ $baseText('executionsList.error') }}
</span>
<span class="status-badge warning" v-else>
Unknown
{{ $baseText('executionsList.unknown') }}
</span>
</n8n-tooltip>
@ -102,20 +98,24 @@
type="light"
:theme="scope.row.stoppedAt === null ? 'warning': 'danger'"
size="mini"
title="Retry execution"
:title="$baseText('executionsList.retryExecution')"
icon="redo"
/>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="{command: 'currentlySaved', row: scope.row}">Retry with currently saved workflow</el-dropdown-item>
<el-dropdown-item :command="{command: 'original', row: scope.row}">Retry with original workflow</el-dropdown-item>
<el-dropdown-item :command="{command: 'currentlySaved', row: scope.row}">
{{ $baseText('executionsList.retryWithCurrentlySavedWorkflow') }}
</el-dropdown-item>
<el-dropdown-item :command="{command: 'original', row: scope.row}">
{{ $baseText('executionsList.retryWithOriginalworkflow') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
<el-table-column property="mode" label="Mode" width="100" align="center"></el-table-column>
<el-table-column label="Running Time" width="150" align="center">
<el-table-column property="mode" :label="$baseText('executionsList.mode')" width="100" align="center"></el-table-column>
<el-table-column :label="$baseText('executionsList.runningTime')" width="150" align="center">
<template slot-scope="scope">
<span v-if="scope.row.stoppedAt === undefined">
<font-awesome-icon icon="spinner" spin />
@ -134,10 +134,10 @@
<template slot-scope="scope">
<div class="actions-container">
<span v-if="scope.row.stoppedAt === undefined || scope.row.waitTill">
<n8n-icon-button icon="stop" size="small" title="Stop Execution" @click.stop="stopExecution(scope.row.id)" :loading="stoppingExecutions.includes(scope.row.id)" />
<n8n-icon-button icon="stop" size="small" :title="$baseText('executionsList.stopExecution')" @click.stop="stopExecution(scope.row.id)" :loading="stoppingExecutions.includes(scope.row.id)" />
</span>
<span v-if="scope.row.stoppedAt !== undefined && scope.row.id" >
<n8n-icon-button icon="folder-open" size="small" title="Open Past Execution" @click.stop="displayExecution(scope.row)" />
<n8n-icon-button icon="folder-open" size="small" :title="$baseText('executionsList.openPastExecution')" @click.stop="displayExecution(scope.row)" />
</span>
</div>
</template>
@ -145,7 +145,7 @@
</el-table>
<div class="load-more" v-if="finishedExecutionsCount > finishedExecutions.length || finishedExecutionsCountEstimated === true">
<n8n-button icon="sync" title="Load More" label="Load More" @click="loadMore()" :loading="isDataLoading" />
<n8n-button icon="sync" :title="$baseText('executionsList.loadMore')" :label="$baseText('executionsList.loadMore')" @click="loadMore()" :loading="isDataLoading" />
</div>
</el-dialog>
@ -224,32 +224,41 @@ export default mixins(
stoppingExecutions: [] as string[],
workflows: [] as IWorkflowShortResponse[],
statuses: [
{
id: 'ALL',
name: 'Any Status',
},
{
id: 'error',
name: 'Error',
},
{
id: 'running',
name: 'Running',
},
{
id: 'success',
name: 'Success',
},
{
id: 'waiting',
name: 'Waiting',
},
],
};
},
computed: {
statuses () {
return [
{
id: 'ALL',
name: this.$baseText('executionsList.anyStatus'),
},
{
id: 'error',
name: this.$baseText('executionsList.error'),
},
{
id: 'running',
name: this.$baseText('executionsList.running'),
},
{
id: 'success',
name: this.$baseText('executionsList.success'),
},
{
id: 'waiting',
name: this.$baseText('executionsList.waiting'),
},
];
},
modes () {
return {
error: this.$baseText('executionsList.modes.error'),
retry: this.$baseText('executionsList.modes.retry'),
manual: this.$baseText('executionsList.modes.manual'),
trigger: this.$baseText('executionsList.modes.trigger'),
};
},
activeExecutions (): IExecutionsCurrentSummaryExtended[] {
return this.$store.getters.getActiveExecutions;
},
@ -356,7 +365,16 @@ export default mixins(
}
},
async handleDeleteSelected () {
const deleteExecutions = await this.confirmMessage(`Are you sure that you want to delete the ${this.numSelected} selected executions?`, 'Delete Executions?', 'warning', 'Yes, delete!');
const deleteExecutions = await this.confirmMessage(
this.$baseText(
'executionsList.confirmMessage.message',
{ interpolate: { numSelected: this.numSelected.toString() }},
),
this.$baseText('executionsList.confirmMessage.headline'),
'warning',
this.$baseText('executionsList.confirmMessage.confirmButtonText'),
this.$baseText('executionsList.confirmMessage.cancelButtonText'),
);
if (deleteExecutions === false) {
return;
@ -377,15 +395,19 @@ export default mixins(
await this.restApi().deleteExecutions(sendData);
} catch (error) {
this.isDataLoading = false;
this.$showError(error, 'Problem deleting executions', 'There was a problem deleting the executions:');
this.$showError(
error,
this.$baseText('executionsList.showError.handleDeleteSelected.title'),
this.$baseText('executionsList.showError.handleDeleteSelected.message'),
);
return;
}
this.isDataLoading = false;
this.$showMessage({
title: 'Execution deleted',
message: 'The executions were deleted!',
title: this.$baseText('executionsList.showMessage.handleDeleteSelected.title'),
message: this.$baseText('executionsList.showMessage.handleDeleteSelected.message'),
type: 'success',
});
@ -512,7 +534,11 @@ export default mixins(
return;
}
const data = await this.restApi().getPastExecutions(this.workflowFilterPast, this.requestItemsPerRequest);
this.finishedExecutions = data.results;
this.finishedExecutions = data.results.map((execution) => {
// @ts-ignore
return { ...execution, mode: this.modes[execution.mode] };
});
this.finishedExecutionsCount = data.count;
this.finishedExecutionsCountEstimated = data.estimated;
},
@ -536,10 +562,19 @@ export default mixins(
data = await this.restApi().getPastExecutions(filter, this.requestItemsPerRequest, lastId);
} catch (error) {
this.isDataLoading = false;
this.$showError(error, 'Problem loading workflows', 'There was a problem loading the workflows:');
this.$showError(
error,
this.$baseText('executionsList.showError.loadMore.title'),
this.$baseText('executionsList.showError.loadMore.message') + ':',
);
return;
}
data.results = data.results.map((execution) => {
// @ts-ignore
return { ...execution, mode: this.modes[execution.mode] };
});
this.finishedExecutions.push.apply(this.finishedExecutions, data.results);
this.finishedExecutionsCount = data.count;
this.finishedExecutionsCountEstimated = data.estimated;
@ -562,12 +597,16 @@ export default mixins(
// @ts-ignore
workflows.unshift({
id: 'ALL',
name: 'All Workflows',
name: this.$baseText('executionsList.allWorkflows'),
});
Vue.set(this, 'workflows', workflows);
} catch (error) {
this.$showError(error, 'Problem loading workflows', 'There was a problem loading the workflows:');
this.$showError(
error,
this.$baseText('executionsList.showError.loadWorkflows.title'),
this.$baseText('executionsList.showError.loadWorkflows.message') + ':',
);
}
},
async openDialog () {
@ -590,21 +629,25 @@ export default mixins(
if (retrySuccessful === true) {
this.$showMessage({
title: 'Retry successful',
message: 'The retry was successful!',
title: this.$baseText('executionsList.showMessage.retrySuccessfulTrue.title'),
message: this.$baseText('executionsList.showMessage.retrySuccessfulTrue.message'),
type: 'success',
});
} else {
this.$showMessage({
title: 'Retry unsuccessful',
message: 'The retry was not successful!',
title: this.$baseText('executionsList.showMessage.retrySuccessfulFalse.title'),
message: this.$baseText('executionsList.showMessage.retrySuccessfulFalse.message'),
type: 'error',
});
}
this.isDataLoading = false;
} catch (error) {
this.$showError(error, 'Problem with retry', 'There was a problem with the retry:');
this.$showError(
error,
this.$baseText('executionsList.showError.retryExecution.title'),
this.$baseText('executionsList.showError.retryExecution.message') + ':',
);
this.isDataLoading = false;
}
@ -617,7 +660,11 @@ export default mixins(
const finishedExecutionsPromise = this.loadFinishedExecutions();
await Promise.all([activeExecutionsPromise, finishedExecutionsPromise]);
} catch (error) {
this.$showError(error, 'Problem loading', 'There was a problem loading the data:');
this.$showError(
error,
this.$baseText('executionsList.showError.refreshData.title'),
this.$baseText('executionsList.showError.refreshData.message') + ':',
);
}
this.isDataLoading = false;
@ -626,23 +673,41 @@ export default mixins(
if (entry.waitTill) {
const waitDate = new Date(entry.waitTill);
if (waitDate.toISOString() === WAIT_TIME_UNLIMITED) {
return 'The workflow is waiting indefinitely for an incoming webhook call.';
return this.$baseText('executionsList.statusTooltipText.theWorkflowIsWaitingIndefinitely');
}
return `The worklow is waiting till ${waitDate.toLocaleDateString()} ${waitDate.toLocaleTimeString()}.`;
return this.$baseText(
'executionsList.statusTooltipText.theWorkflowIsWaitingTill',
{
interpolate: {
waitDateDate: waitDate.toLocaleDateString(),
waitDateTime: waitDate.toLocaleTimeString(),
},
},
);
} else if (entry.stoppedAt === undefined) {
return 'The worklow is currently executing.';
return this.$baseText('executionsList.statusTooltipText.theWorkflowIsCurrentlyExecuting');
} else if (entry.finished === true && entry.retryOf !== undefined) {
return `The workflow execution was a retry of "${entry.retryOf}" and it was successful.`;
return this.$baseText(
'executionsList.statusTooltipText.theWorkflowExecutionWasARetryOfAndItWasSuccessful',
{ interpolate: { entryRetryOf: entry.retryOf }},
);
} else if (entry.finished === true) {
return 'The worklow execution was successful.';
return this.$baseText('executionsList.statusTooltipText.theWorkflowExecutionWasSuccessful');
} else if (entry.retryOf !== undefined) {
return `The workflow execution was a retry of "${entry.retryOf}" and failed.<br />New retries have to be started from the original execution.`;
return this.$baseText(
'executionsList.statusTooltipText.theWorkflowExecutionWasARetryOfAndFailed',
{ interpolate: { entryRetryOf: entry.retryOf }},
);
} else if (entry.retrySuccessId !== undefined) {
return `The workflow execution failed but the retry "${entry.retrySuccessId}" was successful.`;
return this.$baseText(
'executionsList.statusTooltipText.theWorkflowExecutionFailedButTheRetryWasSuccessful',
{ interpolate: { entryRetrySuccessId: entry.retrySuccessId }},
);
} else if (entry.stoppedAt === null) {
return 'The workflow execution is probably still running but it may have crashed and n8n cannot safely tell. ';
return this.$baseText('executionsList.statusTooltipText.theWorkflowExecutionIsProbablyStillRunning');
} else {
return 'The workflow execution failed.';
return this.$baseText('executionsList.statusTooltipText.theWorkflowExecutionFailed');
}
},
async stopExecution (activeExecutionId: string) {
@ -658,14 +723,21 @@ export default mixins(
this.stoppingExecutions.splice(index, 1);
this.$showMessage({
title: 'Execution stopped',
message: `The execution with the id "${activeExecutionId}" got stopped!`,
title: this.$baseText('executionsList.showMessage.stopExecution.title'),
message: this.$baseText(
'executionsList.showMessage.stopExecution.message',
{ interpolate: { activeExecutionId } },
),
type: 'success',
});
this.refreshData();
} catch (error) {
this.$showError(error, 'Problem stopping execution', 'There was a problem stopping the execuction:');
this.$showError(
error,
this.$baseText('executionsList.showError.stopExecution.title'),
this.$baseText('executionsList.showError.stopExecution.message'),
);
}
},
},

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

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

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

@ -1,7 +1,7 @@
<template>
<div @keydown.stop class="fixed-collection-parameter">
<div v-if="getProperties.length === 0" class="no-items-exist">
<n8n-text size="small">Currently no items exist</n8n-text>
<n8n-text size="small">{{ $baseText('fixedCollectionParameter.currentlyNoItemsExist') }}</n8n-text>
</div>
<div v-for="property in getProperties" :key="property.name" class="fixed-collection-parameter-property">
@ -85,7 +85,7 @@ export default mixins(genericHelpers)
},
computed: {
getPlaceholderText (): string {
return this.parameter.placeholder ? this.parameter.placeholder : 'Choose Option To Add';
return this.parameter.placeholder ? this.parameter.placeholder : this.$baseText('fixedCollectionParameter.choose');
},
getProperties (): INodePropertyCollection[] {
const returnProperties = [];

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

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

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

@ -1,13 +1,11 @@
<template>
<n8n-tooltip class="primary-color" placement="bottom-end" >
<div slot="content">
You're viewing the log of a previous execution. You cannot<br />
make changes since this execution already occured. Make changes<br />
to this workflow by clicking on its name on the left.
{{ $baseText('readOnly.youreViewingTheLogOf') }}
</div>
<span>
<font-awesome-icon icon="exclamation-triangle" />
Read only
{{ $baseText('readOnly.readOnly') }}
</span>
</n8n-tooltip>
</template>

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

@ -33,7 +33,7 @@
@blur="onTagsBlur"
@update="onTagsUpdate"
@esc="onTagsEditEsc"
placeholder="Choose or create a tag"
:placeholder="$baseText('workflowDetails.chooseOrCreateATag')"
ref="dropdown"
class="tags-edit"
/>
@ -46,7 +46,7 @@
class="add-tag clickable"
@click="onTagsEditEnable"
>
+ Add tag
+ {{ $baseText('workflowDetails.addTag') }}
</span>
</div>
<TagsContainer
@ -62,7 +62,7 @@
<PushConnectionTracker class="actions">
<template>
<span class="activator">
<span>Active:</span>
<span>{{ $baseText('workflowDetails.active') + ':' }}</span>
<WorkflowActivator :workflow-active="isWorkflowActive" :workflow-id="currentWorkflowId" :disabled="!currentWorkflowId"/>
</span>
<SaveButton
@ -90,6 +90,7 @@ import SaveButton from "@/components/SaveButton.vue";
import TagsDropdown from "@/components/TagsDropdown.vue";
import InlineTextEdit from "@/components/InlineTextEdit.vue";
import BreakpointsObserver from "@/components/BreakpointsObserver.vue";
import { renderText } from "@/components/mixins/renderText";
const hasChanged = (prev: string[], curr: string[]) => {
if (prev.length !== curr.length) {
@ -100,7 +101,7 @@ const hasChanged = (prev: string[], curr: string[]) => {
return curr.reduce((accu, val) => accu || !set.has(val), false);
};
export default mixins(workflowHelpers).extend({
export default mixins(renderText, workflowHelpers).extend({
name: "WorkflowDetails",
components: {
TagsContainer,
@ -172,7 +173,7 @@ export default mixins(workflowHelpers).extend({
const saved = await this.saveCurrentWorkflow({ tags });
this.$telemetry.track('User edited workflow tags', { workflow_id: this.currentWorkflowId as string, new_tag_count: tags.length });
this.$data.tagsSaving = false;
if (saved) {
this.$data.isTagsEditEnabled = false;
@ -196,8 +197,8 @@ export default mixins(workflowHelpers).extend({
const newName = name.trim();
if (!newName) {
this.$showMessage({
title: "Name missing",
message: `Please enter a name, or press 'esc' to go back to the old one.`,
title: this.$baseText('workflowDetails.showMessage.title'),
message: this.$baseText('workflowDetails.showMessage.message'),
type: "error",
});

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

@ -22,94 +22,94 @@
<el-submenu index="workflow" title="Workflow" popperClass="sidebar-popper">
<template slot="title">
<font-awesome-icon icon="network-wired"/>&nbsp;
<span slot="title" class="item-title-root">Workflows</span>
<span slot="title" class="item-title-root">{{ $baseText('mainSidebar.workflows') }}</span>
</template>
<n8n-menu-item index="workflow-new">
<template slot="title">
<font-awesome-icon icon="file"/>&nbsp;
<span slot="title" class="item-title">New</span>
<span slot="title" class="item-title">{{ $baseText('mainSidebar.new') }}</span>
</template>
</n8n-menu-item>
<n8n-menu-item index="workflow-open">
<template slot="title">
<font-awesome-icon icon="folder-open"/>&nbsp;
<span slot="title" class="item-title">Open</span>
<span slot="title" class="item-title">{{ $baseText('mainSidebar.open') }}</span>
</template>
</n8n-menu-item>
<n8n-menu-item index="workflow-save">
<template slot="title">
<font-awesome-icon icon="save"/>
<span slot="title" class="item-title">Save</span>
<span slot="title" class="item-title">{{ $baseText('mainSidebar.save') }}</span>
</template>
</n8n-menu-item>
<n8n-menu-item index="workflow-duplicate" :disabled="!currentWorkflow">
<template slot="title">
<font-awesome-icon icon="copy"/>
<span slot="title" class="item-title">Duplicate</span>
<span slot="title" class="item-title">{{ $baseText('mainSidebar.duplicate') }}</span>
</template>
</n8n-menu-item>
<n8n-menu-item index="workflow-delete" :disabled="!currentWorkflow">
<template slot="title">
<font-awesome-icon icon="trash"/>
<span slot="title" class="item-title">Delete</span>
<span slot="title" class="item-title">{{ $baseText('mainSidebar.delete') }}</span>
</template>
</n8n-menu-item>
<n8n-menu-item index="workflow-download">
<template slot="title">
<font-awesome-icon icon="file-download"/>
<span slot="title" class="item-title">Download</span>
<span slot="title" class="item-title">{{ $baseText('mainSidebar.download') }}</span>
</template>
</n8n-menu-item>
<n8n-menu-item index="workflow-import-url">
<template slot="title">
<font-awesome-icon icon="cloud"/>
<span slot="title" class="item-title">Import from URL</span>
<span slot="title" class="item-title">{{ $baseText('mainSidebar.importFromUrl') }}</span>
</template>
</n8n-menu-item>
<n8n-menu-item index="workflow-import-file">
<template slot="title">
<font-awesome-icon icon="hdd"/>
<span slot="title" class="item-title">Import from File</span>
<span slot="title" class="item-title">{{ $baseText('mainSidebar.importFromFile') }}</span>
</template>
</n8n-menu-item>
<n8n-menu-item index="workflow-settings" :disabled="!currentWorkflow">
<template slot="title">
<font-awesome-icon icon="cog"/>
<span slot="title" class="item-title">Settings</span>
<span slot="title" class="item-title">{{ $baseText('mainSidebar.settings') }}</span>
</template>
</n8n-menu-item>
</el-submenu>
<el-submenu index="credentials" title="Credentials" popperClass="sidebar-popper">
<el-submenu index="credentials" :title="$baseText('mainSidebar.credentials')" popperClass="sidebar-popper">
<template slot="title">
<font-awesome-icon icon="key"/>&nbsp;
<span slot="title" class="item-title-root">Credentials</span>
<span slot="title" class="item-title-root">{{ $baseText('mainSidebar.credentials') }}</span>
</template>
<n8n-menu-item index="credentials-new">
<template slot="title">
<font-awesome-icon icon="file"/>
<span slot="title" class="item-title">New</span>
<span slot="title" class="item-title">{{ $baseText('mainSidebar.new') }}</span>
</template>
</n8n-menu-item>
<n8n-menu-item index="credentials-open">
<template slot="title">
<font-awesome-icon icon="folder-open"/>
<span slot="title" class="item-title">Open</span>
<span slot="title" class="item-title">{{ $baseText('mainSidebar.open') }}</span>
</template>
</n8n-menu-item>
</el-submenu>
<n8n-menu-item index="executions">
<font-awesome-icon icon="tasks"/>&nbsp;
<span slot="title" class="item-title-root">Executions</span>
<span slot="title" class="item-title-root">{{ $baseText('mainSidebar.executions') }}</span>
</n8n-menu-item>
<el-submenu index="help" class="help-menu" title="Help" popperClass="sidebar-popper">
<template slot="title">
<font-awesome-icon icon="question"/>&nbsp;
<span slot="title" class="item-title-root">Help</span>
<span slot="title" class="item-title-root">{{ $baseText('mainSidebar.help') }}</span>
</template>
<MenuItemsIterator :items="helpMenuItems" :afterItemClick="trackHelpItemClick" />
@ -117,7 +117,7 @@
<n8n-menu-item index="help-about">
<template slot="title">
<font-awesome-icon class="about-icon" icon="info"/>
<span slot="title" class="item-title">About n8n</span>
<span slot="title" class="item-title">{{ $baseText('mainSidebar.aboutN8n') }}</span>
</template>
</n8n-menu-item>
</el-submenu>
@ -155,6 +155,7 @@ import GiftNotificationIcon from './GiftNotificationIcon.vue';
import WorkflowSettings from '@/components/WorkflowSettings.vue';
import { genericHelpers } from '@/components/mixins/genericHelpers';
import { renderText } from '@/components/mixins/renderText';
import { restApi } from '@/components/mixins/restApi';
import { showMessage } from '@/components/mixins/showMessage';
import { titleChange } from '@/components/mixins/titleChange';
@ -168,42 +169,10 @@ import { mapGetters } from 'vuex';
import MenuItemsIterator from './MainSidebarMenuItemsIterator.vue';
import { CREDENTIAL_LIST_MODAL_KEY, CREDENTIAL_SELECT_MODAL_KEY, DUPLICATE_MODAL_KEY, TAGS_MANAGER_MODAL_KEY, VERSIONS_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY, WORKFLOW_OPEN_MODAL_KEY } from '@/constants';
const helpMenuItems: IMenuItem[] = [
{
id: 'docs',
type: 'link',
properties: {
href: 'https://docs.n8n.io',
title: 'Documentation',
icon: 'book',
newWindow: true,
},
},
{
id: 'forum',
type: 'link',
properties: {
href: 'https://community.n8n.io',
title: 'Forum',
icon: 'users',
newWindow: true,
},
},
{
id: 'examples',
type: 'link',
properties: {
href: 'https://n8n.io/workflows',
title: 'Workflows',
icon: 'network-wired',
newWindow: true,
},
},
];
export default mixins(
genericHelpers,
restApi,
renderText,
showMessage,
titleChange,
workflowHelpers,
@ -225,7 +194,6 @@ export default mixins(
basePath: this.$store.getters.getBaseUrl,
executionsListDialogVisible: false,
stopExecutionInProgress: false,
helpMenuItems,
};
},
computed: {
@ -236,6 +204,40 @@ export default mixins(
'hasVersionUpdates',
'nextVersions',
]),
helpMenuItems (): object[] {
return [
{
id: 'docs',
type: 'link',
properties: {
href: 'https://docs.n8n.io',
title: this.$baseText('mainSidebar.helpMenuItems.documentation'),
icon: 'book',
newWindow: true,
},
},
{
id: 'forum',
type: 'link',
properties: {
href: 'https://community.n8n.io',
title: this.$baseText('mainSidebar.helpMenuItems.forum'),
icon: 'users',
newWindow: true,
},
},
{
id: 'examples',
type: 'link',
properties: {
href: 'https://n8n.io/workflows',
title: this.$baseText('mainSidebar.helpMenuItems.workflows'),
icon: 'network-wired',
newWindow: true,
},
},
];
},
exeuctionId (): string | undefined {
return this.$route.params.id;
},
@ -322,12 +324,19 @@ export default mixins(
this.stopExecutionInProgress = true;
await this.restApi().stopCurrentExecution(executionId);
this.$showMessage({
title: 'Execution stopped',
message: `The execution with the id "${executionId}" got stopped!`,
title: this.$baseText('mainSidebar.showMessage.stopExecution.title'),
message: this.$baseText(
'mainSidebar.showMessage.stopExecution.message',
{ interpolate: { executionId }},
),
type: 'success',
});
} catch (error) {
this.$showError(error, 'Problem stopping execution', 'There was a problem stopping the execuction:');
this.$showError(
error,
this.$baseText('mainSidebar.showError.stopExecution.title'),
this.$baseText('mainSidebar.showError.stopExecution.message') + ':',
);
}
this.stopExecutionInProgress = false;
},
@ -351,8 +360,8 @@ export default mixins(
worflowData = JSON.parse(data as string);
} catch (error) {
this.$showMessage({
title: 'Could not import file',
message: `The file does not contain valid JSON data.`,
title: this.$baseText('mainSidebar.showMessage.handleFileImport.title'),
message: this.$baseText('mainSidebar.showMessage.handleFileImport.message'),
type: 'error',
});
return;
@ -374,17 +383,30 @@ export default mixins(
(this.$refs.importFile as HTMLInputElement).click();
} else if (key === 'workflow-import-url') {
try {
const promptResponse = await this.$prompt(`Workflow URL:`, 'Import Workflow from URL:', {
confirmButtonText: 'Import',
cancelButtonText: 'Cancel',
inputErrorMessage: 'Invalid URL',
inputPattern: /^http[s]?:\/\/.*\.json$/i,
}) as MessageBoxInputData;
const promptResponse = await this.$prompt(
this.$baseText('mainSidebar.prompt.workflowUrl') + ':',
this.$baseText('mainSidebar.prompt.importWorkflowFromUrl') + ':',
{
confirmButtonText: this.$baseText('mainSidebar.prompt.import'),
cancelButtonText: this.$baseText('mainSidebar.prompt.cancel'),
inputErrorMessage: this.$baseText('mainSidebar.prompt.invalidUrl'),
inputPattern: /^http[s]?:\/\/.*\.json$/i,
},
) as MessageBoxInputData;
this.$root.$emit('importWorkflowUrl', { url: promptResponse.value });
} catch (e) {}
} else if (key === 'workflow-delete') {
const deleteConfirmed = await this.confirmMessage(`Are you sure that you want to delete the workflow "${this.workflowName}"?`, 'Delete Workflow?', 'warning', 'Yes, delete!');
const deleteConfirmed = await this.confirmMessage(
this.$baseText(
'mainSidebar.confirmMessage.workflowDelete.message',
{ interpolate: { workflowName: this.workflowName } },
),
this.$baseText('mainSidebar.confirmMessage.workflowDelete.headline'),
'warning',
this.$baseText('mainSidebar.confirmMessage.workflowDelete.confirmButtonText'),
this.$baseText('mainSidebar.confirmMessage.workflowDelete.cancelButtonText'),
);
if (deleteConfirmed === false) {
return;
@ -393,15 +415,22 @@ export default mixins(
try {
await this.restApi().deleteWorkflow(this.currentWorkflow);
} catch (error) {
this.$showError(error, 'Problem deleting the workflow', 'There was a problem deleting the workflow:');
this.$showError(
error,
this.$baseText('mainSidebar.showError.stopExecution.title'),
this.$baseText('mainSidebar.showError.stopExecution.message') + ':',
);
return;
}
this.$store.commit('setStateDirty', false);
// Reset tab title since workflow is deleted.
this.$titleReset();
this.$showMessage({
title: 'Workflow was deleted',
message: `The workflow "${this.workflowName}" was deleted!`,
title: this.$baseText('mainSidebar.showMessage.handleSelect1.title'),
message: this.$baseText(
'mainSidebar.showMessage.handleSelect1.message',
{ interpolate: { workflowName: this.workflowName }},
),
type: 'success',
});
@ -436,7 +465,13 @@ export default mixins(
} else if (key === 'workflow-new') {
const result = this.$store.getters.getStateIsDirty;
if(result) {
const importConfirm = await this.confirmMessage(`When you switch workflows your current workflow changes will be lost.`, 'Save your Changes?', 'warning', 'Yes, switch workflows and forget changes');
const importConfirm = await this.confirmMessage(
this.$baseText('mainSidebar.confirmMessage.workflowNew.message'),
this.$baseText('mainSidebar.confirmMessage.workflowNew.headline'),
'warning',
this.$baseText('mainSidebar.confirmMessage.workflowNew.confirmButton'),
this.$baseText('mainSidebar.confirmMessage.workflowNew.cancelButton'),
);
if (importConfirm === true) {
this.$store.commit('setStateDirty', false);
if (this.$router.currentRoute.name === 'NodeViewNew') {
@ -446,8 +481,8 @@ export default mixins(
}
this.$showMessage({
title: 'Workflow created',
message: 'A new workflow got created!',
title: this.$baseText('mainSidebar.showMessage.handleSelect2.title'),
message: this.$baseText('mainSidebar.showMessage.handleSelect2.message'),
type: 'success',
});
}
@ -457,8 +492,8 @@ export default mixins(
}
this.$showMessage({
title: 'Workflow created',
message: 'A new workflow got created!',
title: this.$baseText('mainSidebar.showMessage.handleSelect3.title'),
message: this.$baseText('mainSidebar.showMessage.handleSelect3.message'),
type: 'success',
});
}

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

@ -10,10 +10,10 @@
<div v-for="(value, index) in values" :key="index" class="duplicate-parameter-item" :class="parameter.type">
<div class="delete-item clickable" v-if="!isReadOnly">
<font-awesome-icon icon="trash" title="Delete Item" @click="deleteItem(index)" />
<font-awesome-icon icon="trash" :title="$baseText('multipleParameter.deleteItem')" @click="deleteItem(index)" />
<div v-if="sortable">
<font-awesome-icon v-if="index !== 0" icon="angle-up" class="clickable" title="Move up" @click="moveOptionUp(index)" />
<font-awesome-icon v-if="index !== (values.length -1)" icon="angle-down" class="clickable" title="Move down" @click="moveOptionDown(index)" />
<font-awesome-icon v-if="index !== 0" icon="angle-up" class="clickable" :title="$baseText('multipleParameter.moveUp')" @click="moveOptionUp(index)" />
<font-awesome-icon v-if="index !== (values.length -1)" icon="angle-down" class="clickable" :title="$baseText('multipleParameter.moveDown')" @click="moveOptionDown(index)" />
</div>
</div>
<div v-if="parameter.type === 'collection'">
@ -26,7 +26,7 @@
<div class="add-item-wrapper">
<div v-if="values && Object.keys(values).length === 0 || isReadOnly" class="no-items-exist">
<n8n-text size="small">Currently no items exist</n8n-text>
<n8n-text size="small">{{ $baseText('multipleParameter.currentlyNoItemsExist') }}</n8n-text>
</div>
<n8n-button v-if="!isReadOnly" fullWidth @click="addItem()" :label="addButtonText" />
</div>

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

@ -16,23 +16,23 @@
</n8n-tooltip>
</div>
<div class="node-executing-info" title="Node is executing">
<div class="node-executing-info" :title="$baseText('node.nodeIsExecuting')">
<font-awesome-icon icon="sync-alt" spin />
</div>
<div class="node-options no-select-on-click" v-if="!isReadOnly">
<div v-touch:tap="deleteNode" class="option" title="Delete Node" >
<div v-touch:tap="deleteNode" class="option" :title="$baseText('node.deleteNode')">
<font-awesome-icon icon="trash" />
</div>
<div v-touch:tap="disableNode" class="option" title="Activate/Deactivate Node" >
<div v-touch:tap="disableNode" class="option" :title="$baseText('node.activateDeactivateNode')">
<font-awesome-icon :icon="nodeDisabledIcon" />
</div>
<div v-touch:tap="duplicateNode" class="option" title="Duplicate Node" >
<div v-touch:tap="duplicateNode" class="option" :title="$baseText('node.duplicateNode')">
<font-awesome-icon icon="clone" />
</div>
<div v-touch:tap="setNodeActive" class="option touch" title="Edit Node" v-if="!isReadOnly">
<div v-touch:tap="setNodeActive" class="option touch" :title="$baseText('node.editNode')" v-if="!isReadOnly">
<font-awesome-icon class="execute-icon" icon="cog" />
</div>
<div v-touch:tap="executeNode" class="option" title="Execute Node" v-if="!isReadOnly && !workflowRunning">
<div v-touch:tap="executeNode" class="option" :title="$baseText('node.executeNode')" v-if="!isReadOnly && !workflowRunning">
<font-awesome-icon class="execute-icon" icon="play-circle" />
</div>
</div>
@ -57,6 +57,7 @@ import { WAIT_TIME_UNLIMITED } from '@/constants';
import { externalHooks } from '@/components/mixins/externalHooks';
import { nodeBase } from '@/components/mixins/nodeBase';
import { nodeHelpers } from '@/components/mixins/nodeHelpers';
import { renderText } from '@/components/mixins/renderText';
import { workflowHelpers } from '@/components/mixins/workflowHelpers';
import {
@ -70,7 +71,7 @@ import mixins from 'vue-typed-mixins';
import { get } from 'lodash';
export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).extend({
export default mixins(externalHooks, nodeBase, nodeHelpers, renderText, workflowHelpers).extend({
name: 'Node',
components: {
NodeIcon,

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

@ -2,7 +2,14 @@
<div v-if="credentialTypesNodeDescriptionDisplayed.length" :class="$style.container">
<div v-for="credentialTypeDescription in credentialTypesNodeDescriptionDisplayed" :key="credentialTypeDescription.name">
<n8n-input-label
:label="`Credential for ${credentialTypeNames[credentialTypeDescription.name]}`"
:label="$baseText(
'nodeCredentials.credentialFor',
{
interpolate: {
credentialType: credentialTypeNames[credentialTypeDescription.name]
}
}
)"
:bold="false"
size="small"
@ -13,7 +20,7 @@
</div>
<div :class="issues.length ? $style.hasIssues : $style.input" v-else >
<n8n-select :value="getSelectedId(credentialTypeDescription.name)" @change="(value) => onCredentialSelected(credentialTypeDescription.name, value)" placeholder="Select Credential" size="small">
<n8n-select :value="getSelectedId(credentialTypeDescription.name)" @change="(value) => onCredentialSelected(credentialTypeDescription.name, value)" :placeholder="$baseText('nodeCredentials.selectCredential')" size="small">
<n8n-option
v-for="(item) in credentialOptions[credentialTypeDescription.name]"
:key="item.id"
@ -30,13 +37,13 @@
<div :class="$style.warning" v-if="issues.length">
<n8n-tooltip placement="top" >
<div slot="content" v-html="'Issues:<br />&nbsp;&nbsp;- ' + issues.join('<br />&nbsp;&nbsp;- ')"></div>
<div slot="content" v-html="`${$baseText('nodeCredentials.issues')}:<br />&nbsp;&nbsp;- ` + issues.join('<br />&nbsp;&nbsp;- ')"></div>
<font-awesome-icon icon="exclamation-triangle" />
</n8n-tooltip>
</div>
<div :class="$style.edit" v-if="selected[credentialTypeDescription.name] && isCredentialExisting(credentialTypeDescription.name)">
<font-awesome-icon icon="pen" @click="editCredential(credentialTypeDescription.name)" class="clickable" title="Update Credentials" />
<font-awesome-icon icon="pen" @click="editCredential(credentialTypeDescription.name)" class="clickable" :title="$baseText('nodeCredentials.updateCredential')" />
</div>
</div>
</n8n-input-label>
@ -210,8 +217,16 @@ export default mixins(
});
this.updateNodesCredentialsIssues();
this.$showMessage({
title: 'Node credentials updated',
message: `Nodes that used credentials "${oldCredentials.name}" have been updated to use "${selected.name}"`,
title: this.$baseText('nodeCredentials.showMessage.title'),
message: this.$baseText(
'nodeCredentials.showMessage.message',
{
interpolate: {
oldCredentialName: oldCredentials.name,
newCredentialName: selected.name,
},
},
),
type: 'success',
});
}

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

@ -5,26 +5,35 @@
<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">
<n8n-tooltip class="clickable" placement="top" >
<div slot="content" v-html="'<strong>Node Description:</strong><br />' + nodeTypeDescription + '<br /><br /><strong>Click the \'?\' icon to open this node on n8n.io </strong>'"></div>
<div slot="content" v-html="`<strong>${$baseText('nodeSettings.nodeDescription')}:</strong><br />` + nodeTypeDescription + `<br /><br /><strong>${$baseText('nodeSettings.clickOnTheQuestionMarkIcon')}</strong>`"></div>
<font-awesome-icon icon="question-circle" />
</n8n-tooltip>
</a>
</span>
</div>
<div class="node-is-not-valid" v-if="node && !nodeValid">
<n8n-text>The node is not valid as its type "{{node.type}}" is unknown.</n8n-text>
<n8n-text>
{{
$baseText(
'nodeSettings.theNodeIsNotValidAsItsTypeIsUnknown',
{ interpolate: { nodeType: node.type } },
)
}}
</n8n-text>
</div>
<div class="node-parameters-wrapper" v-if="node && nodeValid">
<el-tabs stretch @tab-click="handleTabClick">
<el-tab-pane label="Parameters">
<el-tab-pane :label="$baseText('nodeSettings.parameters')">
<node-credentials :node="node" @credentialSelected="credentialSelected"></node-credentials>
<node-webhooks :node="node" :nodeType="nodeType" />
<parameter-input-list :parameters="parametersNoneSetting" :hideDelete="true" :nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged" />
<div v-if="parametersNoneSetting.length === 0" class="no-parameters">
<n8n-text>This node does not have any parameters.</n8n-text>
<n8n-text>
{{ $baseText('nodeSettings.thisNodeDoesNotHaveAnyParameters') }}
</n8n-text>
</div>
</el-tab-pane>
<el-tab-pane label="Settings">
<el-tab-pane :label="$baseText('nodeSettings.settings')">
<parameter-input-list :parameters="nodeSettings" :hideDelete="true" :nodeValues="nodeValues" path="" @valueChanged="valueChanged" />
<parameter-input-list :parameters="parametersSetting" :nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged" />
</el-tab-pane>
@ -90,7 +99,7 @@ export default mixins(
if (this.nodeType && this.nodeType.description) {
return this.nodeType.description;
} else {
return 'No description found';
return this.$baseText('nodeSettings.noDescriptionFound');
}
},
headerStyle (): object {
@ -152,7 +161,7 @@ export default mixins(
nodeSettings: [
{
displayName: 'Notes',
displayName: this.$baseText('nodeSettings.notes.displayName'),
name: 'notes',
type: 'string',
typeOptions: {
@ -160,50 +169,50 @@ export default mixins(
},
default: '',
noDataExpression: true,
description: 'Optional note to save with the node.',
description: this.$baseText('nodeSettings.notes.description'),
},
{
displayName: 'Display note in flow?',
displayName: this.$baseText('nodeSettings.notesInFlow.displayName'),
name: 'notesInFlow',
type: 'boolean',
default: false,
noDataExpression: true,
description: 'If active, the note above will display in the flow as a subtitle.',
description: this.$baseText('nodeSettings.notesInFlow.description'),
},
{
displayName: 'Node Color',
displayName: this.$baseText('nodeSettings.color.displayName'),
name: 'color',
type: 'color',
default: '#ff0000',
noDataExpression: true,
description: 'The color of the node in the flow.',
description: this.$baseText('nodeSettings.color.description'),
},
{
displayName: 'Always Output Data',
displayName: this.$baseText('nodeSettings.alwaysOutputData.displayName'),
name: 'alwaysOutputData',
type: 'boolean',
default: false,
noDataExpression: true,
description: 'If active, the node will return an empty item even if the <br />node returns no data during an initial execution. Be careful setting <br />this on IF-Nodes as it could cause an infinite loop.',
description: this.$baseText('nodeSettings.alwaysOutputData.description'),
},
{
displayName: 'Execute Once',
displayName: this.$baseText('nodeSettings.executeOnce.displayName'),
name: 'executeOnce',
type: 'boolean',
default: false,
noDataExpression: true,
description: 'If active, the node executes only once, with data<br /> from the first item it recieves. ',
description: this.$baseText('nodeSettings.executeOnce.description'),
},
{
displayName: 'Retry On Fail',
displayName: this.$baseText('nodeSettings.retryOnFail.displayName'),
name: 'retryOnFail',
type: 'boolean',
default: false,
noDataExpression: true,
description: 'If active, the node tries to execute a failed attempt <br /> multiple times until it succeeds.',
description: this.$baseText('nodeSettings.retryOnFail.description'),
},
{
displayName: 'Max. Tries',
displayName: this.$baseText('nodeSettings.maxTries.displayName'),
name: 'maxTries',
type: 'number',
typeOptions: {
@ -219,10 +228,10 @@ export default mixins(
},
},
noDataExpression: true,
description: 'Number of times Retry On Fail should attempt to execute the node <br />before stopping and returning the execution as failed.',
description: this.$baseText('nodeSettings.maxTries.description'),
},
{
displayName: 'Wait Between Tries',
displayName: this.$baseText('nodeSettings.waitBetweenTries.displayName'),
name: 'waitBetweenTries',
type: 'number',
typeOptions: {
@ -238,15 +247,15 @@ export default mixins(
},
},
noDataExpression: true,
description: 'How long to wait between each attempt. Value in ms.',
description: this.$baseText('nodeSettings.waitBetweenTries.description'),
},
{
displayName: 'Continue On Fail',
displayName: this.$baseText('nodeSettings.continueOnFail.displayName'),
name: 'continueOnFail',
type: 'boolean',
default: false,
noDataExpression: true,
description: 'If active, the workflow continues even if this node\'s <br />execution fails. When this occurs, the node passes along input data from<br />previous nodes - so your workflow should account for unexpected output data.',
description: this.$baseText('nodeSettings.continueOnFail.description'),
},
] as INodeProperties[],

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

@ -1,8 +1,8 @@
<template>
<div v-if="webhooksNode.length" class="webhoooks">
<div class="clickable headline" :class="{expanded: !isMinimized}" @click="isMinimized=!isMinimized" :title="isMinimized ? 'Click to display Webhook URLs' : 'Click to hide Webhook URLs'">
<div class="clickable headline" :class="{expanded: !isMinimized}" @click="isMinimized=!isMinimized" :title="isMinimized ? $baseText('nodeWebhooks.clickToDisplayWebhookUrls') : $baseText('nodeWebhooks.clickToHideWebhookUrls')">
<font-awesome-icon icon="angle-down" class="minimize-button minimize-icon" />
Webhook URLs
{{ $baseText('nodeWebhooks.webhookUrls') }}
</div>
<el-collapse-transition>
<div class="node-webhooks" v-if="!isMinimized">
@ -10,14 +10,14 @@
<el-row>
<el-col :span="24">
<el-radio-group v-model="showUrlFor" size="mini">
<el-radio-button label="test">Test URL</el-radio-button>
<el-radio-button label="production">Production URL</el-radio-button>
<el-radio-button label="test">{{ $baseText('nodeWebhooks.testUrl') }}</el-radio-button>
<el-radio-button label="production">{{ $baseText('nodeWebhooks.productionUrl') }}</el-radio-button>
</el-radio-group>
</el-col>
</el-row>
</div>
<n8n-tooltip v-for="(webhook, index) in webhooksNode" :key="index" class="item" content="Click to copy Webhook URL" placement="left">
<n8n-tooltip v-for="(webhook, index) in webhooksNode" :key="index" class="item" :content="$baseText('nodeWebhooks.clickToCopyWebhookUrls')" placement="left">
<div class="webhook-wrapper">
<div class="http-field">
<div class="http-method">
@ -50,9 +50,11 @@ import { showMessage } from '@/components/mixins/showMessage';
import { workflowHelpers } from '@/components/mixins/workflowHelpers';
import mixins from 'vue-typed-mixins';
import { renderText } from './mixins/renderText';
export default mixins(
copyPaste,
renderText,
showMessage,
workflowHelpers,
)
@ -83,8 +85,8 @@ export default mixins(
this.copyToClipboard(webhookUrl);
this.$showMessage({
title: 'Copied',
message: `The webhook URL was successfully copied!`,
title: this.$baseText('nodeWebhooks.showMessage.title'),
message: this.$baseText('nodeWebhooks.showMessage.message'),
type: 'success',
});
},
@ -95,7 +97,7 @@ export default mixins(
try {
return this.resolveExpression(webhookData[key] as string) as string;
} catch (e) {
return '[INVALID EXPRESSION]';
return this.$baseText('nodeWebhooks.invalidExpression');
}
},
getWebhookUrl (webhookData: IWebhookDescription): string {

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

@ -38,7 +38,7 @@
:placeholder="isValueExpression?'':parameter.placeholder"
>
<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="Open Edit Window" @click="displayEditDialog()" />
<font-awesome-icon v-if="!isValueExpression && !isReadOnly" icon="external-link-alt" class="edit-window-button clickable" :title="$baseText('parameterInput.openEditWindow')" @click="displayEditDialog()" />
</div>
</n8n-input>
</div>
@ -78,7 +78,7 @@
:value="displayValue"
:title="displayTitle"
:disabled="isReadOnly"
:placeholder="parameter.placeholder?parameter.placeholder:'Select date and time'"
:placeholder="parameter.placeholder?parameter.placeholder:$baseText('parameterInput.selectDateAndTime')"
:picker-options="dateTimePickerOptions"
@change="valueChanged"
@focus="setFocus"
@ -169,7 +169,7 @@
<div class="parameter-issues" v-if="getIssues.length">
<n8n-tooltip placement="top" >
<div slot="content" v-html="'Issues:<br />&nbsp;&nbsp;- ' + getIssues.join('<br />&nbsp;&nbsp;- ')"></div>
<div slot="content" v-html="`${$baseText('parameterInput.issues')}:<br />&nbsp;&nbsp;- ` + getIssues.join('<br />&nbsp;&nbsp;- ')"></div>
<font-awesome-icon icon="exclamation-triangle" />
</n8n-tooltip>
</div>
@ -177,13 +177,13 @@
<div class="parameter-options" v-if="displayOptionsComputed">
<el-dropdown trigger="click" @command="optionSelected" size="mini">
<span class="el-dropdown-link">
<font-awesome-icon icon="cogs" class="reset-icon clickable" title="Parameter Options"/>
<font-awesome-icon icon="cogs" class="reset-icon clickable" :title="$baseText('parameterInput.parameterOptions')"/>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="addExpression" v-if="parameter.noDataExpression !== true && !isValueExpression">Add Expression</el-dropdown-item>
<el-dropdown-item command="removeExpression" v-if="parameter.noDataExpression !== true && isValueExpression">Remove Expression</el-dropdown-item>
<el-dropdown-item command="refreshOptions" v-if="Boolean(remoteMethod)">Refresh List</el-dropdown-item>
<el-dropdown-item command="resetValue" :disabled="isDefault" divided>Reset Value</el-dropdown-item>
<el-dropdown-item command="addExpression" v-if="parameter.noDataExpression !== true && !isValueExpression">{{ $baseText('parameterInput.addExpression') }}</el-dropdown-item>
<el-dropdown-item command="removeExpression" v-if="parameter.noDataExpression !== true && isValueExpression">{{ $baseText('parameterInput.removeExpression') }}</el-dropdown-item>
<el-dropdown-item command="refreshOptions" v-if="Boolean(remoteMethod)">{{ $baseText('parameterInput.refreshList') }}</el-dropdown-item>
<el-dropdown-item command="resetValue" :disabled="isDefault" divided>{{ $baseText('parameterInput.resetValue') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>

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

@ -20,7 +20,7 @@
inputSize="large"
/>
<div class="errors" v-if="showRequiredErrors">
This field is required. <a v-if="documentationUrl" :href="documentationUrl" target="_blank" @click="onDocumentationUrlClick">Open docs</a>
{{ $baseText('parameterInputExpanded.thisFieldIsRequired') }} <a v-if="documentationUrl" :href="documentationUrl" target="_blank" @click="onDocumentationUrlClick">Open docs</a>
</div>
</n8n-input-label>
</template>

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

@ -24,11 +24,11 @@
v-else-if="['collection', 'fixedCollection'].includes(parameter.type)"
class="multi-parameter"
>
<div class="delete-option clickable" title="Delete" v-if="hideDelete !== true && !isReadOnly">
<div class="delete-option clickable" :title="$baseText('parameterInputList.delete')" v-if="hideDelete !== true && !isReadOnly">
<font-awesome-icon
icon="trash"
class="reset-icon clickable"
title="Parameter Options"
:title="$baseText('parameterInputList.parameterOptions')"
@click="deleteOption(parameter.name)"
/>
</div>
@ -59,11 +59,11 @@
</div>
<div v-else-if="displayNodeParameter(parameter)" class="parameter-item">
<div class="delete-option clickable" title="Delete" v-if="hideDelete !== true && !isReadOnly">
<div class="delete-option clickable" :title="$baseText('parameterInputList.delete')" v-if="hideDelete !== true && !isReadOnly">
<font-awesome-icon
icon="trash"
class="reset-icon clickable"
title="Delete Parameter"
:title="$baseText('parameterInputList.deleteParameter')"
@click="deleteOption(parameter.name)"
/>
</div>

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

@ -1,8 +1,8 @@
<template>
<Modal
:name="PERSONALIZATION_MODAL_KEY"
:title="!submitted? 'Get started' : 'Thanks!'"
:subtitle="!submitted? 'These questions help us tailor n8n to you' : ''"
:title="!submitted? $baseText('personalizationModal.getStarted') : $baseText('personalizationModal.thanks')"
:subtitle="!submitted? $baseText('personalizationModal.theseQuestionsHelpUs') : ''"
:centerTitle="true"
:showClose="false"
:eventBus="modalBus"
@ -15,37 +15,37 @@
<template v-slot:content>
<div v-if="submitted" :class="$style.submittedContainer">
<img :class="$style.demoImage" :src="baseUrl + 'suggestednodes.png'" />
<n8n-text>Look out for things marked with a ✨. They are personalized to make n8n more relevant to you.</n8n-text>
<n8n-text>{{ $baseText('personalizationModal.lookOutForThingsMarked') }}</n8n-text>
</div>
<div :class="$style.container" v-else>
<n8n-input-label label="Which of these areas do you mainly work in?">
<n8n-select :value="values[WORK_AREA_KEY]" placeholder="Select..." @change="(value) => onInput(WORK_AREA_KEY, value)">
<n8n-option :value="AUTOMATION_CONSULTING_WORK_AREA" label="Automation consulting" />
<n8n-option :value="FINANCE_WORK_AREA" label="Finance" />
<n8n-option :value="HR_WORK_AREA" label="HR" />
<n8n-option :value="IT_ENGINEERING_WORK_AREA" label="IT / Engineering" />
<n8n-option :value="LEGAL_WORK_AREA" label="Legal" />
<n8n-option :value="MARKETING_WORK_AREA" label="Marketing / Growth" />
<n8n-option :value="OPS_WORK_AREA" label="Operations" />
<n8n-option :value="PRODUCT_WORK_AREA" label="Product" />
<n8n-option :value="SALES_BUSINESSDEV_WORK_AREA" label="Sales / Business Development" />
<n8n-option :value="SECURITY_WORK_AREA" label="Security" />
<n8n-option :value="SUPPORT_WORK_AREA" label="Support" />
<n8n-option :value="OTHER_WORK_AREA_OPTION" label="Other (please specify)" />
<n8n-input-label :label="$baseText('personalizationModal.whichOfTheseAreasDoYouMainlyWorkIn')">
<n8n-select :value="values[WORK_AREA_KEY]" :placeholder="$baseText('personalizationModal.select')" @change="(value) => onInput(WORK_AREA_KEY, value)">
<n8n-option :value="AUTOMATION_CONSULTING_WORK_AREA" :label="$baseText('personalizationModal.automationConsulting')" />
<n8n-option :value="FINANCE_WORK_AREA" :label="$baseText('personalizationModal.finance')" />
<n8n-option :value="HR_WORK_AREA" :label="$baseText('personalizationModal.hr')" />
<n8n-option :value="IT_ENGINEERING_WORK_AREA" :label="$baseText('personalizationModal.itEngineering')" />
<n8n-option :value="LEGAL_WORK_AREA" :label="$baseText('personalizationModal.legal')" />
<n8n-option :value="MARKETING_WORK_AREA" :label="$baseText('personalizationModal.marketingGrowth')" />
<n8n-option :value="OPS_WORK_AREA" :label="$baseText('personalizationModal.operations')" />
<n8n-option :value="PRODUCT_WORK_AREA" :label="$baseText('personalizationModal.product')" />
<n8n-option :value="SALES_BUSINESSDEV_WORK_AREA" :label="$baseText('personalizationModal.salesBusinessDevelopment')" />
<n8n-option :value="SECURITY_WORK_AREA" :label="$baseText('personalizationModal.security')" />
<n8n-option :value="SUPPORT_WORK_AREA" :label="$baseText('personalizationModal.support')" />
<n8n-option :value="OTHER_WORK_AREA_OPTION" :label="$baseText('personalizationModal.otherPleaseSpecify')" />
</n8n-select>
</n8n-input-label>
<n8n-input
v-if="otherWorkAreaFieldVisible"
:value="values[OTHER_WORK_AREA_KEY]"
placeholder="Specify your work area"
:placeholder="$baseText('personalizationModal.specifyYourWorkArea')"
@input="(value) => onInput(OTHER_WORK_AREA_KEY, value)"
/>
<n8n-input-label label="How are your coding skills?">
<n8n-select :value="values[CODING_SKILL_KEY]" placeholder="Select..." @change="(value) => onInput(CODING_SKILL_KEY, value)">
<n8n-input-label :label="$baseText('personalizationModal.howAreYourCodingSkills')">
<n8n-select :value="values[CODING_SKILL_KEY]" :placeholder="$baseText('personalizationModal.select')" @change="(value) => onInput(CODING_SKILL_KEY, value)">
<n8n-option
label="0 (Never coded)"
:label="`0 (${baseText('personalizationModal.neverCoded')})`"
value="0"
/>
<n8n-option
@ -65,36 +65,36 @@
value="4"
/>
<n8n-option
label="5 (Pro coder)"
:label="`5 (${$baseText('personalizationModal.proCoder')})`"
value="5"
/>
</n8n-select>
</n8n-input-label>
<n8n-input-label label="How big is your company?">
<n8n-select :value="values[COMPANY_SIZE_KEY]" placeholder="Select..." @change="(value) => onInput(COMPANY_SIZE_KEY, value)">
<n8n-input-label :label="$baseText('personalizationModal.howBigIsYourCompany')">
<n8n-select :value="values[COMPANY_SIZE_KEY]" :placeholder="$baseText('personalizationModal.select')" @change="(value) => onInput(COMPANY_SIZE_KEY, value)">
<n8n-option
label="Less than 20 people"
:label="$baseText('personalizationModal.lessThan20People')"
:value="COMPANY_SIZE_20_OR_LESS"
/>
<n8n-option
label="20-99 people"
:label="`20-99 ${$baseText('personalizationModal.people')}`"
:value="COMPANY_SIZE_20_99"
/>
<n8n-option
label="100-499 people"
:label="`100-499 ${$baseText('personalizationModal.people')}`"
:value="COMPANY_SIZE_100_499"
/>
<n8n-option
label="500-999 people"
:label="`500-999 ${$baseText('personalizationModal.people')}`"
:value="COMPANY_SIZE_500_999"
/>
<n8n-option
label="1000+ people"
:label="`1000+ ${$baseText('personalizationModal.people')}`"
:value="COMPANY_SIZE_1000_OR_MORE"
/>
<n8n-option
label="I'm not using n8n for work"
:label="$baseText('personalizationModal.imNotUsingN8nForWork')"
:value="COMPANY_SIZE_PERSONAL_USE"
/>
</n8n-select>
@ -103,8 +103,8 @@
</template>
<template v-slot:footer>
<div>
<n8n-button v-if="submitted" @click="closeDialog" label="Get started" float="right" />
<n8n-button v-else @click="save" :loading="isSaving" label="Continue" float="right" />
<n8n-button v-if="submitted" @click="closeDialog" :label="$baseText('personalizationModal.getStarted')" float="right" />
<n8n-button v-else @click="save" :loading="isSaving" :label="$baseText('personalizationModal.continue')" float="right" />
</div>
</template>
</Modal>
@ -140,12 +140,13 @@ import {
} from "../constants";
import { workflowHelpers } from "@/components/mixins/workflowHelpers";
import { showMessage } from "@/components/mixins/showMessage";
import { renderText } from "@/components/mixins/renderText";
import Modal from "./Modal.vue";
import { IPersonalizationSurveyAnswers, IPersonalizationSurveyKeys } from "@/Interface";
import Vue from "vue";
import { mapGetters } from "vuex";
export default mixins(showMessage, workflowHelpers).extend({
export default mixins(showMessage, renderText, workflowHelpers).extend({
components: { Modal },
name: "PersonalizationModal",
data() {
@ -217,7 +218,7 @@ export default mixins(showMessage, workflowHelpers).extend({
this.submitted = true;
} catch (e) {
this.$showError(e, 'Error while submitting results');
this.$showError(e, this.$baseText('personalizationModal.errorWhileSubmittingResults'));
}
this.$data.isSaving = false;

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

@ -3,12 +3,10 @@
<div class="push-connection-lost primary-color" v-if="!pushConnectionActive">
<n8n-tooltip placement="bottom-end" >
<div slot="content">
Cannot connect to server.<br />
It is either down or you have a connection issue. <br />
It should reconnect automatically once the issue is resolved.
{{ $baseText('pushConnectionTracker.cannotConnectToServer') }}
</div>
<span>
<font-awesome-icon icon="exclamation-triangle" />&nbsp; Connection lost
<font-awesome-icon icon="exclamation-triangle" />&nbsp; {{ $baseText('pushConnectionTracker.connectionLost') }}
</span>
</n8n-tooltip>
</div>
@ -20,7 +18,10 @@
import Vue from "vue";
import { mapGetters } from "vuex";
export default Vue.extend({
import mixins from 'vue-typed-mixins';
import { renderText } from "./mixins/renderText";
export default mixins(renderText).extend({
name: "PushConnectionTracker",
computed: {
...mapGetters(["pushConnectionActive"]),

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

@ -7,10 +7,10 @@
class="execute-node-button"
>
<n8n-button
:title="`Executes this ${node.name} node after executing any previous nodes that have not yet returned data`"
:title="$baseText('runData.executesThisNodeAfterExecuting', { interpolate: { nodeName: node.name } })"
:loading="workflowRunning"
icon="play-circle"
label="Execute Node"
:label="$baseText('runData.executeNode')"
@click.stop="runWorkflow(node.name, 'RunData.ExecuteNodeButton')"
/>
</div>
@ -18,10 +18,10 @@
<div class="header">
<div class="title-text">
<n8n-text :bold="true" v-if="dataCount < maxDisplayItems">
Items: {{ dataCount }}
{{ $baseText('runData.items') }}: {{ dataCount }}
</n8n-text>
<div v-else class="title-text">
<n8n-text :bold="true">Items:</n8n-text>
<n8n-text :bold="true">{{ $baseText('runData.items') }}:</n8n-text>
<span class="opts">
<n8n-select size="mini" v-model="maxDisplayItems" @click.stop>
<n8n-option v-for="option in maxDisplayItemsOptions" :label="option" :value="option" :key="option" />
@ -34,13 +34,13 @@
placement="right"
>
<div slot="content">
<n8n-text :bold="true" size="small">Start Time:</n8n-text> {{runMetadata.startTime}}<br/>
<n8n-text :bold="true" size="small">Execution Time:</n8n-text> {{runMetadata.executionTime}} ms
<n8n-text :bold="true" size="small">{{ $baseText('runData.startTime') + ':' }}</n8n-text> {{runMetadata.startTime}}<br/>
<n8n-text :bold="true" size="small">{{ $baseText('runData.executionTime') + ':' }}</n8n-text> {{runMetadata.executionTime}} {{ $baseText('runData.ms') }}
</div>
<font-awesome-icon icon="info-circle" class="primary-color" />
</n8n-tooltip>
<n8n-text :bold="true" v-if="maxOutputIndex > 0">
| Output:
| {{ $baseText('runData.output') }}:
</n8n-text>
<span class="opts" v-if="maxOutputIndex > 0" >
<n8n-select size="mini" v-model="outputIndex" @click.stop>
@ -50,7 +50,7 @@
</span>
<n8n-text :bold="true" v-if="maxRunIndex > 0">
| Data of Execution:
| {{ $baseText('runData.dataOfExecution') }}:
</n8n-text>
<span class="opts">
<n8n-select v-if="maxRunIndex > 0" size="mini" v-model="runIndex" @click.stop>
@ -62,20 +62,26 @@
</div>
<div v-if="hasNodeRun && !hasRunError" class="title-data-display-selector" @click.stop>
<el-radio-group v-model="displayMode" size="mini">
<el-radio-button label="JSON" :disabled="showData === false"></el-radio-button>
<el-radio-button label="Table"></el-radio-button>
<el-radio-button label="Binary" v-if="binaryData.length !== 0"></el-radio-button>
<el-radio-button :label="$baseText('runData.json')" :disabled="showData === false"></el-radio-button>
<el-radio-button :label="$baseText('runData.table')"></el-radio-button>
<el-radio-button :label="$baseText('runData.binary')" v-if="binaryData.length !== 0"></el-radio-button>
</el-radio-group>
</div>
<div v-if="hasNodeRun && !hasRunError && displayMode === 'JSON' && state.path !== deselectedPlaceholder" class="select-button">
<el-dropdown trigger="click" @command="handleCopyClick">
<span class="el-dropdown-link">
<n8n-icon-button title="Copy to Clipboard" icon="copy" />
<n8n-icon-button :title="$baseText('runData.copyToClipboard')" icon="copy" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="{command: 'itemPath'}">Copy Item Path</el-dropdown-item>
<el-dropdown-item :command="{command: 'parameterPath'}">Copy Parameter Path</el-dropdown-item>
<el-dropdown-item :command="{command: 'value'}">Copy Value</el-dropdown-item>
<el-dropdown-item :command="{command: 'itemPath'}">
{{ $baseText('runData.copyItemPath') }}
</el-dropdown-item>
<el-dropdown-item :command="{command: 'parameterPath'}">
{{ $baseText('runData.copyParameterPath') }}
</el-dropdown-item>
<el-dropdown-item :command="{command: 'value'}">
{{ $baseText('runData.copyValue') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
@ -88,29 +94,33 @@
<span v-else>
<div v-if="showData === false" class="too-much-data">
<h3>
Node returned a large amount of data
{{ $baseText('runData.nodeReturnedALargeAmountOfData') }}
</h3>
<div class="text">
The node contains {{parseInt(dataSize/1024).toLocaleString()}} KB of data.<br />
Displaying it could cause problems!<br />
<br />
If you do decide to display it, avoid the JSON view!
{{ $baseTeext(
'runData.theNodeContains',
{
interpolate: {
numberOfKb: parseInt(dataSize/1024).toLocaleString()
}
}
)}}
</div>
<n8n-button
icon="eye"
label="Display Data Anyway"
:label="$baseText('runData.displayDataAnyway')"
@click="displayMode = 'Table';showData = true;"
/>
</div>
<div v-else-if="['JSON', 'Table'].includes(displayMode)">
<div v-if="jsonData.length === 0" class="no-data">
No text data found
{{ $baseText('runData.noTextDataFound') }}
</div>
<div v-else-if="displayMode === 'Table'">
<div v-if="tableData !== null && tableData.columns.length === 0" class="no-data">
Entries exist but they do not contain any JSON data.
{{ $baseText('runData.entriesExistButThey') }}
</div>
<table v-else-if="tableData !== null">
<tr>
@ -138,7 +148,7 @@
</div>
<div v-else-if="displayMode === 'Binary'">
<div v-if="binaryData.length === 0" class="no-data">
No binary data found
{{ $baseText('runData.noBinaryDataFound') }}
</div>
<div v-else>
@ -156,24 +166,24 @@
{{key}}
</div>
<div v-if="binaryData.fileName">
<div class="label">File Name: </div>
<div class="label">{{ $baseText('runData.fileName') }}: </div>
<div class="value">{{binaryData.fileName}}</div>
</div>
<div v-if="binaryData.directory">
<div class="label">Directory: </div>
<div class="label">{{ $baseText('runData.directory') }}: </div>
<div class="value">{{binaryData.directory}}</div>
</div>
<div v-if="binaryData.fileExtension">
<div class="label">File Extension:</div>
<div class="label">{{ $baseText('runData.fileExtension') }}:</div>
<div class="value">{{binaryData.fileExtension}}</div>
</div>
<div v-if="binaryData.mimeType">
<div class="label">Mime Type: </div>
<div class="label">{{ $baseText('runData.mimeType') }}: </div>
<div class="value">{{binaryData.mimeType}}</div>
</div>
<div class="binary-data-show-data-button-wrapper">
<n8n-button size="small" label="Show Binary Data" class="binary-data-show-data-button" @click="displayBinaryData(index, key)" />
<n8n-button size="small" :label="$baseText('runData.showBinaryData')" class="binary-data-show-data-button" @click="displayBinaryData(index, key)" />
</div>
</div>
@ -186,9 +196,9 @@
</span>
<div v-else class="message">
<div>
<n8n-text :bold="true">No data</n8n-text ><br />
<n8n-text :bold="true">{{ $baseText('runData.noData') }}</n8n-text ><br />
<br />
Data returned by this node will display here<br />
{{ $baseText('runData.dataReturnedByThisNodeWillDisplayHere') }}<br />
</div>
</div>
</div>
@ -221,7 +231,7 @@ import {
} from '@/constants';
import BinaryDataDisplay from '@/components/BinaryDataDisplay.vue';
import NodeErrorView from '@/components/Error/NodeViewError.vue';
import NodeErrorView from '@/components/Error/NodeErrorView.vue';
import { copyPaste } from '@/components/mixins/copyPaste';
import { externalHooks } from "@/components/mixins/externalHooks";

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

@ -1,9 +1,9 @@
<template>
<span :class="$style.container">
<span :class="$style.saved" v-if="saved">{{ savedLabel }}</span>
<span :class="$style.saved" v-if="saved">{{ $baseText('saveButton.saved') }}</span>
<n8n-button
v-else
:label="isSaving ? savingLabel : saveLabel"
:label="saveButtonLabel"
:loading="isSaving"
:disabled="disabled"
@click="$emit('click')"
@ -13,8 +13,10 @@
<script lang="ts">
import Vue from 'vue';
import mixins from 'vue-typed-mixins';
import { renderText } from './mixins/renderText';
export default Vue.extend({
export default mixins(renderText).extend({
name: "SaveButton",
props: {
saved: {
@ -28,15 +30,19 @@ export default Vue.extend({
},
saveLabel: {
type: String,
default: 'Save',
},
savingLabel: {
type: String,
default: 'Saving',
},
savedLabel: {
type: String,
default: 'Saved',
},
},
computed: {
saveButtonLabel() {
return this.isSaving
? this.$baseText('saveButton.saving')
: this.$baseText('saveButton.save');
},
},
});

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

@ -24,12 +24,14 @@
ref="create"
>
<font-awesome-icon icon="plus-circle" />
<span>Create tag "{{ filter }}"</span>
<span>
{{ $baseText('tagsDropdown.createTag', { interpolate: { filter } }) }}
</span>
</n8n-option>
<n8n-option v-else-if="options.length === 0" value="message" disabled>
<span v-if="createEnabled">Type to create a tag</span>
<span v-else-if="allTags.length > 0">No matching tags exist</span>
<span v-else>No tags exist</span>
<span v-if="createEnabled">{{ $baseText('tagsDropdown.typeToCreateATag') }}</span>
<span v-else-if="allTags.length > 0">{{ $baseText('tagsDropdown.noMatchingTagsExist') }}</span>
<span v-else>{{ $baseText('tagsDropdown.noTagsExist') }}</span>
</n8n-option>
<!-- key is id+index for keyboard navigation to work well with filter -->
@ -44,7 +46,7 @@
<n8n-option :key="MANAGE_KEY" :value="MANAGE_KEY" class="ops manage-tags">
<font-awesome-icon icon="cog" />
<span>Manage tags</span>
<span>{{ $baseText('tagsDropdown.manageTags') }}</span>
</n8n-option>
</n8n-select>
</div>
@ -58,11 +60,12 @@ import { ITag } from "@/Interface";
import { MAX_TAG_NAME_LENGTH, TAGS_MANAGER_MODAL_KEY } from "@/constants";
import { showMessage } from "@/components/mixins/showMessage";
import { renderText } from "@/components/mixins/renderText";
const MANAGE_KEY = "__manage";
const CREATE_KEY = "__create";
export default mixins(showMessage).extend({
export default mixins(showMessage, renderText).extend({
name: "TagsDropdown",
props: ["placeholder", "currentTagIds", "createEnabled", "eventBus"],
data() {
@ -139,8 +142,11 @@ export default mixins(showMessage).extend({
} catch (error) {
this.$showError(
error,
"New tag was not created",
`A problem occurred when trying to create the "${name}" tag`,
this.$baseText('tagsDropdown.showError.title'),
this.$baseText(
'tagsDropdown.showError.message',
{ interpolate: { name } },
),
);
}
},

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

@ -3,10 +3,9 @@
<el-col class="notags" :span="16">
<div class="icon">🗄️</div>
<div>
<div class="headline">Ready to organize your workflows?</div>
<div class="headline">{{ $baseText('noTagsView.readyToOrganizeYourWorkflows') }}</div>
<div class="description">
With workflow tags, you're free to create the perfect tagging system for
your flows
{{ $baseText('noTagsView.withWorkflowTagsYouReFree') }}
</div>
</div>
<n8n-button label="Create a tag" size="large" @click="$emit('enableCreate')" />

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

@ -1,6 +1,6 @@
<template>
<Modal
title="Manage tags"
:title="$baseText('tagsManager.manageTags')"
:name="TAGS_MANAGER_MODAL_KEY"
:eventBus="modalBus"
@enter="onEnter"
@ -25,7 +25,7 @@
</el-row>
</template>
<template v-slot:footer="{ close }">
<n8n-button label="Done" @click="close" float="right" />
<n8n-button :label="$baseText('tagsManager.done')" @click="close" float="right" />
</template>
</Modal>
</template>
@ -38,12 +38,13 @@ import { mapGetters } from "vuex";
import { ITag } from "@/Interface";
import { showMessage } from "@/components/mixins/showMessage";
import { renderText } from "@/components/mixins/renderText";
import TagsView from "@/components/TagsManager/TagsView/TagsView.vue";
import NoTagsView from "@/components/TagsManager/NoTagsView.vue";
import Modal from "@/components/Modal.vue";
import { TAGS_MANAGER_MODAL_KEY } from '../../constants';
export default mixins(showMessage).extend({
export default mixins(renderText, showMessage).extend({
name: "TagsManager",
created() {
this.$store.dispatch("tags/fetchAll", {force: true, withUsageCount: true});
@ -86,7 +87,9 @@ export default mixins(showMessage).extend({
async onCreate(name: string, cb: (tag: ITag | null, error?: Error) => void) {
try {
if (!name) {
throw new Error("Tag name cannot be empty");
throw new Error(
this.$baseText('tagsManager.tagNameCannotBeEmpty'),
);
}
const newTag = await this.$store.dispatch("tags/create", name);
@ -96,8 +99,11 @@ export default mixins(showMessage).extend({
const escapedName = escape(name);
this.$showError(
error,
"New tag was not created",
`A problem occurred when trying to create the "${escapedName}" tag`,
this.$baseText('tagsManager.showError.onCreate.title'),
this.$baseText(
'tagsManager.showError.onCreate.message',
{ interpolate: { escapedName } },
) + ':',
);
cb(null, error);
}
@ -109,7 +115,9 @@ export default mixins(showMessage).extend({
try {
if (!name) {
throw new Error("Tag name cannot be empty");
throw new Error(
this.$baseText('tagsManager.tagNameCannotBeEmpty'),
);
}
if (name === oldName) {
@ -124,16 +132,22 @@ export default mixins(showMessage).extend({
const escapedOldName = escape(oldName);
this.$showMessage({
title: "Tag was updated",
message: `The "${escapedOldName}" tag was successfully updated to "${escapedName}"`,
title: this.$baseText('tagsManager.showMessage.onUpdate.title'),
message: this.$baseText(
'tagsManager.showMessage.onUpdate.message',
{ interpolate: { escapedName, escapedOldName } },
),
type: "success",
});
} catch (error) {
const escapedName = escape(oldName);
this.$showError(
error,
"Tag was not updated",
`A problem occurred when trying to update the "${escapedName}" tag`,
this.$baseText('tagsManager.showError.onUpdate.title'),
this.$baseText(
'tagsManager.showError.onUpdate.message',
{ interpolate: { escapedName } },
) + ':',
);
cb(false, error);
}
@ -146,7 +160,9 @@ export default mixins(showMessage).extend({
try {
const deleted = await this.$store.dispatch("tags/delete", id);
if (!deleted) {
throw new Error('Could not delete tag');
throw new Error(
this.$baseText('tagsManager.couldNotDeleteTag'),
);
}
this.$data.tagIds = this.$data.tagIds.filter((tagId: string) => tagId !== id);
@ -155,16 +171,22 @@ export default mixins(showMessage).extend({
const escapedName = escape(name);
this.$showMessage({
title: "Tag was deleted",
message: `The "${escapedName}" tag was successfully deleted from your tag collection`,
title: this.$baseText('tagsManager.showMessage.onDelete.title'),
message: this.$baseText(
'tagsManager.showMessage.onDelete.message',
{ interpolate: { escapedName } },
),
type: "success",
});
} catch (error) {
const escapedName = escape(name);
this.$showError(
error,
"Tag was not deleted",
`A problem occurred when trying to delete the "${escapedName}" tag`,
this.$baseText('tagsManager.showError.onDelete.title'),
this.$baseText(
'tagsManager.showError.onDelete.message',
{ interpolate: { escapedName } },
) + ':',
);
cb(false, error);
}

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

@ -3,13 +3,13 @@
stripe
max-height="450"
ref="table"
empty-text="No matching tags exist"
:empty-text="$baseText('tagsTable.noMatchingTagsExist')"
:data="rows"
:span-method="getSpan"
:row-class-name="getRowClasses"
v-loading="isLoading"
>
<el-table-column label="Name">
<el-table-column :label="$baseText('tagsTable.name')">
<template slot-scope="scope">
<div class="name" :key="scope.row.id" @keydown.stop>
<transition name="fade" mode="out-in">
@ -21,7 +21,7 @@
ref="nameInput"
></n8n-input>
<span v-else-if="scope.row.delete">
<span>Are you sure you want to delete this tag?</span>
<span>{{ $baseText('tagsTable.areYouSureYouWantToDeleteThisTag') }}</span>
<input ref="deleteHiddenInput" class="hidden" />
</span>
<span v-else :class="{ disabled: scope.row.disable }">
@ -31,7 +31,7 @@
</div>
</template>
</el-table-column>
<el-table-column label="Usage" width="150">
<el-table-column :label="$baseText('tagsTable.usage')" width="150">
<template slot-scope="scope">
<transition name="fade" mode="out-in">
<div v-if="!scope.row.create && !scope.row.delete" :class="{ disabled: scope.row.disable }">
@ -44,20 +44,20 @@
<template slot-scope="scope">
<transition name="fade" mode="out-in">
<div class="ops" v-if="scope.row.create">
<n8n-button label="Cancel" @click.stop="cancel" type="outline" :disabled="isSaving" />
<n8n-button label="Create tag" @click.stop="apply" :loading="isSaving" />
<n8n-button :label="$baseText('tagsTable.cancel')" @click.stop="cancel" type="outline" :disabled="isSaving" />
<n8n-button :label="$baseText('tagsTable.createTag')" @click.stop="apply" :loading="isSaving" />
</div>
<div class="ops" v-else-if="scope.row.update">
<n8n-button label="Cancel" @click.stop="cancel" type="outline" :disabled="isSaving" />
<n8n-button label="Save changes" @click.stop="apply" :loading="isSaving" />
<n8n-button :label="$baseText('tagsTable.cancel')" @click.stop="cancel" type="outline" :disabled="isSaving" />
<n8n-button :label="$baseText('tagsTable.saveChanges')" @click.stop="apply" :loading="isSaving" />
</div>
<div class="ops" v-else-if="scope.row.delete">
<n8n-button label="Cancel" @click.stop="cancel" type="outline" :disabled="isSaving" />
<n8n-button label="Delete tag" @click.stop="apply" :loading="isSaving" />
<n8n-button :label="$baseText('tagsTable.cancel')" @click.stop="cancel" type="outline" :disabled="isSaving" />
<n8n-button :label="$baseText('tagsTable.deleteTag')" @click.stop="apply" :loading="isSaving" />
</div>
<div class="ops main" v-else-if="!scope.row.disable">
<n8n-icon-button title="Edit Tag" @click.stop="enableUpdate(scope.row)" icon="pen" />
<n8n-icon-button title="Delete Tag" @click.stop="enableDelete(scope.row)" icon="trash" />
<n8n-icon-button :title="$baseText('tagsTable.editTag')" @click.stop="enableUpdate(scope.row)" icon="pen" />
<n8n-icon-button :title="$baseText('tagsTable.deleteTag')" @click.stop="enableDelete(scope.row)" icon="trash" />
</div>
</transition>
</template>
@ -66,14 +66,16 @@
</template>
<script lang="ts">
import { renderText } from "@/components/mixins/renderText";
import { MAX_TAG_NAME_LENGTH } from "@/constants";
import { ITagRow } from "@/Interface";
import Vue from "vue";
import mixins from 'vue-typed-mixins';
const INPUT_TRANSITION_TIMEOUT = 350;
const DELETE_TRANSITION_TIMEOUT = 100;
export default Vue.extend({
export default mixins(renderText).extend({
name: "TagsTable",
props: ["rows", "isLoading", "newName", "isSaving"],
data() {

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

@ -2,7 +2,7 @@
<el-row class="tags-header">
<el-col :span="10">
<n8n-input
placeholder="Search tags"
:placeholder="$baseText('tagsTableHeader.searchTags')"
:value="search"
@input="onSearchChange"
:disabled="disabled"
@ -13,15 +13,18 @@
</n8n-input>
</el-col>
<el-col :span="14">
<n8n-button @click="onAddNew" :disabled="disabled" icon="plus" label="Add new" size="large" float="right" />
<n8n-button @click="onAddNew" :disabled="disabled" icon="plus" :label="$baseText('tagsTableHeader.addNew')" size="large" float="right" />
</el-col>
</el-row>
</template>
<script lang="ts">
import { renderText } from "@/components/mixins/renderText";
import { MAX_TAG_NAME_LENGTH } from "@/constants";
import Vue from "vue";
export default Vue.extend({
import mixins from 'vue-typed-mixins';
export default mixins(renderText).extend({
props: {
disabled: {
default: false,

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

@ -31,11 +31,12 @@ import Vue from "vue";
import { ITag, ITagRow } from "@/Interface";
import TagsTableHeader from "@/components/TagsManager/TagsView/TagsTableHeader.vue";
import TagsTable from "@/components/TagsManager/TagsView/TagsTable.vue";
import mixins from "vue-typed-mixins";
import { renderText } from "@/components/mixins/renderText";
const matches = (name: string, filter: string) => name.toLowerCase().trim().includes(filter.toLowerCase().trim());
const getUsage = (count: number | undefined) => count && count > 0 ? `${count} workflow${count > 1 ? "s" : ""}` : 'Not being used';
export default Vue.extend({
export default mixins(renderText).extend({
components: { TagsTableHeader, TagsTable },
name: "TagsView",
props: ["tags", "isLoading"],
@ -55,6 +56,18 @@ export default Vue.extend({
return (this.$props.tags || []).length === 0 || this.$data.createEnabled;
},
rows(): ITagRow[] {
const getUsage = (count: number | undefined) => count && count > 0
? this.$baseText(
count > 1 ?
'tagsView.inUse.plural' : 'tagsView.inUse.singular',
{
interpolate: {
count: count.toString(),
},
},
)
: this.$baseText('tagsView.notBeingUsed');
const disabled = this.isCreateEnabled || this.$data.updateId || this.$data.deleteId;
const tagRows = (this.$props.tags || [])
.filter((tag: ITag) => this.stickyIds.has(tag.id) || matches(tag.name, this.$data.search))
@ -102,7 +115,7 @@ export default Vue.extend({
this.stickyIds.add(this.updateId);
this.disableUpdate();
}
};
};
this.$emit("update", this.updateId, name, onUpdate);
},

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

@ -1,39 +1,19 @@
<template functional>
<span :title="$options.methods.convertToHumanReadableDate($props)">
{{$options.methods.format(props)}}
<template>
<span :title="convertDate">
{{ format }}
</span>
</template>
<script lang="ts">
import { format, LocaleFunc, register } from 'timeago.js';
import { convertToHumanReadableDate } from './helpers';
import Vue from 'vue';
import { mapGetters } from 'vuex';
import mixins from 'vue-typed-mixins';
import { renderText } from './mixins/renderText';
const localeFunc = (num: number, index: number, totalSec: number): [string, string] => {
// number: the timeago / timein number;
// index: the index of array below;
// totalSec: total seconds between date to be formatted and today's date;
return [
['Just now', 'Right now'],
['Just now', 'Right now'], // ['%s seconds ago', 'in %s seconds'],
['1 minute ago', 'in 1 minute'],
['%s minutes ago', 'in %s minutes'],
['1 hour ago', 'in 1 hour'],
['%s hours ago', 'in %s hours'],
['1 day ago', 'in 1 day'],
['%s days ago', 'in %s days'],
['1 week ago', 'in 1 week'],
['%s weeks ago', 'in %s weeks'],
['1 month ago', 'in 1 month'],
['%s months ago', 'in %s months'],
['1 year ago', 'in 1 year'],
['%s years ago', 'in %s years'],
][index] as [string, string];
};
register('main', localeFunc as LocaleFunc);
export default {
name: 'UpdatesPanel',
export default mixins(renderText).extend({
name: 'TimeAgo',
props: {
date: {
type: String,
@ -43,17 +23,48 @@ export default {
default: false,
},
},
beforeMount() {
register(this.defaultLocale, this.localeFunc as LocaleFunc);
},
methods: {
format(props: {date: string, capitalize: boolean}) {
const text = format(props.date, 'main');
localeFunc(num: number, index: number, totalSec: number): [string, string] {
// number: the timeago / timein number;
// index: the index of array below;
// totalSec: total seconds between date to be formatted and today's date;
return [
[this.$baseText('timeAgo.justNow'), this.$baseText('timeAgo.rightNow')],
[this.$baseText('timeAgo.justNow'), this.$baseText('timeAgo.rightNow')], // ['%s seconds ago', 'in %s seconds'],
[this.$baseText('timeAgo.oneMinuteAgo'), this.$baseText('timeAgo.inOneMinute')],
[this.$baseText('timeAgo.minutesAgo'), this.$baseText('timeAgo.inMinutes')],
[this.$baseText('timeAgo.oneHourAgo'), this.$baseText('timeAgo.inOneHour')],
[this.$baseText('timeAgo.hoursAgo'), this.$baseText('timeAgo.inHours')],
[this.$baseText('timeAgo.oneDayAgo'), this.$baseText('timeAgo.inOneDay')],
[this.$baseText('timeAgo.daysAgo'), this.$baseText('timeAgo.inDays')],
[this.$baseText('timeAgo.oneWeekAgo'), this.$baseText('timeAgo.inOneWeek')],
[this.$baseText('timeAgo.weeksAgo'), this.$baseText('timeAgo.inWeeks')],
[this.$baseText('timeAgo.oneMonthAgo'), this.$baseText('timeAgo.inOneMonth')],
[this.$baseText('timeAgo.monthsAgo'), this.$baseText('timeAgo.inMonths')],
[this.$baseText('timeAgo.oneYearAgo'), this.$baseText('timeAgo.inOneYear')],
[this.$baseText('timeAgo.yearsAgo'), this.$baseText('timeAgo.inYears')],
][index] as [string, string];
},
},
computed: {
...mapGetters(['defaultLocale']),
format(): string {
const text = format(this.date, this.defaultLocale);
if (!props.capitalize) {
if (!this.capitalize) {
return text.toLowerCase();
}
return text;
},
convertToHumanReadableDate,
convertDate(): string {
const date = new Date(this.date);
const epoch = date.getTime() / 1000;
return convertToHumanReadableDate(epoch);
},
},
};
});
</script>

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

@ -5,16 +5,26 @@
width="520px"
>
<template slot="header">
<span :class="$style.title">We’ve been busy ✨</span>
<span :class="$style.title">
{{ $baseText('updatesPanel.weVeBeenBusy') }}
</span>
</template>
<template slot="content">
<section :class="$style['description']">
<p v-if="currentVersion">
You’re on {{ currentVersion.name }}, which was released
<strong><TimeAgo :date="currentVersion.createdAt" /></strong> and is
<strong>{{ nextVersions.length }} version{{nextVersions.length > 1 ? "s" : ""}}</strong>
behind the latest and greatest n8n
{{ $baseText(
'updatesPanel.youReOnVersion',
{ interpolate: { currentVersionName: currentVersion.name } }
) }}
<strong><TimeAgo :date="currentVersion.createdAt" /></strong>{{ $baseText('updatesPanel.andIs') }} <strong>{{ $baseText(
'updatesPanel.version',
{
interpolate: {
numberOfVersions: nextVersions.length,
howManySuffix: nextVersions.length > 1 ? "s" : "",
}
}
)}}</strong> {{ $baseText('updatesPanel.behindTheLatest') }}
</p>
<a
@ -24,7 +34,9 @@
target="_blank"
>
<font-awesome-icon icon="info-circle"></font-awesome-icon>
<span>How to update your n8n version</span>
<span>
{{ $baseText('updatesPanel.howToUpdateYourN8nVersion') }}
</span>
</a>
</section>
@ -49,8 +61,10 @@ import ModalDrawer from './ModalDrawer.vue';
import TimeAgo from './TimeAgo.vue';
import VersionCard from './VersionCard.vue';
import { VERSIONS_MODAL_KEY } from '../constants';
import { renderText } from './mixins/renderText';
import mixins from 'vue-typed-mixins';
export default Vue.extend({
export default mixins(renderText).extend({
name: 'UpdatesPanel',
components: {
ModalDrawer,

8
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">
<span class="el-dropdown-link clickable" @click.stop>
<font-awesome-icon icon="dot-circle" title="Select Item" />
<font-awesome-icon icon="dot-circle" :title="$baseText('variableSelectorItem.selectItem')" />
</span>
<el-dropdown-menu slot="dropdown">
<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}}:
<font-awesome-icon icon="dot-circle" title="Select Item" />
</div>
<div class="item-value">{{ item.value !== undefined?item.value:'--- EMPTY ---' }}</div>
<div class="item-value">{{ item.value !== undefined?item.value: $baseText('variableSelectorItem.empty') }}</div>
</div>
</div>
</template>
@ -41,8 +41,10 @@ import {
IVariableSelectorOption,
IVariableItemSelected,
} from '@/Interface';
import { renderText } from './mixins/renderText';
import mixins from 'vue-typed-mixins';
export default Vue.extend({
export default mixins(renderText).extend({
name: 'VariableSelectorItem',
props: [
'allowParentSelect',

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

@ -1,29 +1,29 @@
<template functional>
<template>
<!-- eslint-disable-next-line vue/no-mutating-props -->
<a v-if="props.version" :set="version = props.version" :href="version.documentationUrl" target="_blank" :class="$style.card">
<a v-if="version" :set="version = version" :href="version.documentationUrl" target="_blank" :class="$style.card">
<div :class="$style.header">
<div>
<div :class="$style.name">
Version {{version.name}}
{{ `${$baseText('versionCard.version')} ${version.name}` }}
</div>
<WarningTooltip v-if="version.hasSecurityIssue">
<template>
This version has a security issue.<br/>It is listed here for completeness.
{{ $baseText('versionCard.thisVersionHasASecurityIssue') }}
</template>
</WarningTooltip>
<Badge
v-if="version.hasSecurityFix"
text="Security update"
:text="$baseText('versionCard.securityUpdate')"
type="danger"
/>
<Badge
v-if="version.hasBreakingChange"
text="Breaking changes"
:text="$baseText('versionCard.breakingChanges')"
type="warning"
/>
</div>
<div :class="$style['release-date']">
Released&nbsp;<TimeAgo :date="version.createdAt" />
{{ $baseText('versionCard.released') }}&nbsp;<TimeAgo :date="version.createdAt" />
</div>
</div>
<div :class="$style.divider" v-if="version.description || (version.nodes && version.nodes.length)"></div>
@ -48,19 +48,21 @@ import TimeAgo from './TimeAgo.vue';
import Badge from './Badge.vue';
import WarningTooltip from './WarningTooltip.vue';
import { IVersionNode } from '@/Interface';
import { renderText } from './mixins/renderText';
import mixins from 'vue-typed-mixins';
Vue.component('NodeIcon', NodeIcon);
Vue.component('TimeAgo', TimeAgo);
Vue.component('Badge', Badge);
Vue.component('WarningTooltip', WarningTooltip);
export default Vue.extend({
export default mixins(renderText).extend({
components: { NodeIcon, TimeAgo, Badge, WarningTooltip },
name: 'UpdatesPanel',
name: 'VersionCard',
props: ['version'],
// @ts-ignore
nodeName (node: IVersionNode): string {
return node !== null ? node.displayName : 'unknown';
return node !== null ? node.displayName : this.$baseText('versionCard.unknown');
},
});
</script>

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

@ -5,7 +5,7 @@
element-loading-spinner="el-icon-loading"
:value="workflowActive"
@change="activeChanged"
:title="workflowActive?'Deactivate Workflow':'Activate Workflow'"
:title="workflowActive ? $baseText('workflowActivator.deactivateWorkflow') : $baseText('workflowActivator.activateWorkflow')"
:disabled="disabled || loading"
:active-color="getActiveColor"
inactive-color="#8899AA">
@ -13,7 +13,7 @@
<div class="could-not-be-started" v-if="couldNotBeStarted">
<n8n-tooltip placement="top">
<div @click="displayActivationError" slot="content">The workflow is set to be active but could not be started.<br />Click to display error message.</div>
<div @click="displayActivationError" slot="content">{{ $baseText('workflowActivator.theWorkflowIsSetToBeActiveBut') }}</div>
<font-awesome-icon @click="displayActivationError" icon="exclamation-triangle" />
</n8n-tooltip>
</div>
@ -79,8 +79,8 @@ export default mixins(
async activeChanged (newActiveState: boolean) {
if (this.workflowId === undefined) {
this.$showMessage({
title: 'Problem activating workflow',
message: 'The workflow did not get saved yet so can not be set active!',
title: this.$baseText('workflowActivator.showMessage.activeChangedWorkflowIdUndefined.title'),
message: this.$baseText('workflowActivator.showMessage.activeChangedWorkflowIdUndefined.message'),
type: 'error',
});
return;
@ -88,8 +88,8 @@ export default mixins(
if (this.nodesIssuesExist === true) {
this.$showMessage({
title: 'Problem activating workflow',
message: 'It is only possible to activate a workflow when all issues on all nodes got resolved!',
title: this.$baseText('workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.title'),
message: this.$baseText('workflowActivator.showMessage.activeChangedNodesIssuesExistTrue.message'),
type: 'error',
});
return;
@ -105,7 +105,13 @@ export default mixins(
// for people because it would activate a different version of the workflow
// than the one they can currently see.
if (this.dirtyState) {
const importConfirm = await this.confirmMessage(`When you activate the workflow all currently unsaved changes of the workflow will be saved.`, 'Activate and save?', 'warning', 'Yes, activate and save!');
const importConfirm = await this.confirmMessage(
this.$baseText('workflowActivator.confirmMessage.message'),
this.$baseText('workflowActivator.confirmMessage.headline'),
'warning',
this.$baseText('workflowActivator.confirmMessage.confirmButtonText'),
this.$baseText('workflowActivator.confirmMessage.cancelButtonText'),
);
if (importConfirm === false) {
return;
}
@ -123,7 +129,14 @@ export default mixins(
await this.restApi().updateWorkflow(this.workflowId, data);
} catch (error) {
const newStateName = newActiveState === true ? 'activated' : 'deactivated';
this.$showError(error, 'Problem', `There was a problem and the workflow could not be ${newStateName}:`);
this.$showError(
error,
this.$baseText('workflowActivator.showError.title'),
this.$baseText(
'workflowActivator.showError.message',
{ interpolate: { newStateName } },
) + ':',
);
this.loading = false;
return;
}
@ -155,16 +168,19 @@ export default mixins(
const errorData = await this.restApi().getActivationError(this.workflowId);
if (errorData === undefined) {
errorMessage = 'Sorry there was a problem. No error got found to display.';
errorMessage = this.$baseText('workflowActivator.showMessage.displayActivationError.message.errorDataUndefined');
} else {
errorMessage = `The following error occurred on workflow activation:<br /><i>${errorData.error.message}</i>`;
errorMessage = this.$baseText(
'workflowActivator.showMessage.displayActivationError.message.errorDataNotUndefined',
{ interpolate: { message: errorData.error.message } },
);
}
} catch (error) {
errorMessage = 'Sorry there was a problem requesting the error';
errorMessage = this.$baseText('workflowActivator.showMessage.displayActivationError.message.catchBlock');
}
this.$showMessage({
title: 'Problem activating workflow',
title: this.$baseText('workflowActivator.showMessage.displayActivationError.title'),
message: errorMessage,
type: 'warning',
duration: 0,

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

@ -8,11 +8,11 @@
<template v-slot:header>
<div class="workflows-header">
<n8n-heading tag="h1" size="xlarge" class="title">
Open Workflow
{{ $baseText('workflowOpen.openWorkflow') }}
</n8n-heading>
<div class="tags-filter">
<TagsDropdown
placeholder="Filter by tags..."
:placeholder="$baseText('workflowOpen.openWorkflow')"
:currentTagIds="filterTagIds"
:createEnabled="false"
@update="updateTagsFilter"
@ -21,7 +21,7 @@
/>
</div>
<div class="search-filter">
<n8n-input placeholder="Search workflows..." ref="inputFieldFilter" v-model="filterText">
<n8n-input :placeholder="$baseText('workflowOpen.searchWorkflows')" ref="inputFieldFilter" v-model="filterText">
<font-awesome-icon slot="prefix" icon="search"></font-awesome-icon>
</n8n-input>
</div>
@ -30,7 +30,7 @@
<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-column property="name" label="Name" class-name="clickable" sortable>
<el-table-column property="name" :label="$baseText('workflowOpen.name')" class-name="clickable" sortable>
<template slot-scope="scope">
<div :key="scope.row.id">
<span class="name">{{scope.row.name}}</span>
@ -38,9 +38,9 @@
</div>
</template>
</el-table-column>
<el-table-column property="createdAt" label="Created" class-name="clickable" width="155" sortable></el-table-column>
<el-table-column property="updatedAt" label="Updated" class-name="clickable" width="155" sortable></el-table-column>
<el-table-column label="Active" width="75">
<el-table-column property="createdAt" :label="$baseText('workflowOpen.created')" class-name="clickable" width="155" sortable></el-table-column>
<el-table-column property="updatedAt" :label="$baseText('workflowOpen.updated')" class-name="clickable" width="155" sortable></el-table-column>
<el-table-column :label="$baseText('workflowOpen.active')" width="75">
<template slot-scope="scope">
<workflow-activator :workflow-active="scope.row.active" :workflow-id="scope.row.id" @workflowActiveChanged="workflowActiveChanged" />
</template>
@ -67,10 +67,12 @@ import TagsDropdown from '@/components/TagsDropdown.vue';
import WorkflowActivator from '@/components/WorkflowActivator.vue';
import { convertToDisplayDate } from './helpers';
import { WORKFLOW_OPEN_MODAL_KEY } from '../constants';
import { renderText } from '@/components/mixins/renderText';
export default mixins(
genericHelpers,
restApi,
renderText,
showMessage,
workflowHelpers,
).extend({
@ -141,8 +143,8 @@ export default mixins(
if (data.id === currentWorkflowId) {
this.$showMessage({
title: 'Already open',
message: 'This is the current workflow',
title: this.$baseText('workflowOpen.showMessage.title'),
message: this.$baseText('workflowOpen.showMessage.message'),
type: 'error',
duration: 1500,
});
@ -152,7 +154,13 @@ export default mixins(
const result = this.$store.getters.getStateIsDirty;
if(result) {
const importConfirm = await this.confirmMessage(`When you switch workflows your current workflow changes will be lost.`, 'Save your Changes?', 'warning', 'Yes, switch workflows and forget changes');
const importConfirm = await this.confirmMessage(
this.$baseText('workflowOpen.confirmMessage.message'),
this.$baseText('workflowOpen.confirmMessage.headline'),
'warning',
this.$baseText('workflowOpen.confirmMessage.confirmButtonText'),
this.$baseText('workflowOpen.confirmMessage.cancelButtonText'),
);
if (importConfirm === false) {
return;
} else {
@ -189,7 +197,11 @@ export default mixins(
)
.catch(
(error: Error) => {
this.$showError(error, 'Problem loading workflows', 'There was a problem loading the workflows:');
this.$showError(
error,
this.$baseText('workflowOpen.showError.title'),
this.$baseText('workflowOpen.showError.message') + ':',
);
this.isDataLoading = false;
},
);

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

@ -3,7 +3,7 @@
:name="WORKFLOW_SETTINGS_MODAL_KEY"
width="65%"
maxHeight="80%"
:title="`Settings for ${workflowName} (#${workflowId})`"
:title="$baseText('workflowSettings.settingsFor', { interpolate: { workflowName, workflowId } })"
:eventBus="modalBus"
:scrollable="true"
>
@ -11,7 +11,7 @@
<div v-loading="isLoading" class="workflow-settings">
<el-row>
<el-col :span="10" class="setting-name">
Error Workflow:
{{ $baseText('workflowSettings.errorWorkflow') + ":" }}
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.errorWorkflow"></div>
<font-awesome-icon icon="question-circle" />
@ -30,7 +30,7 @@
</el-row>
<el-row>
<el-col :span="10" class="setting-name">
Timezone:
{{ $baseText('workflowSettings.timezone') + ":" }}
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.timezone"></div>
<font-awesome-icon icon="question-circle" />
@ -49,14 +49,14 @@
</el-row>
<el-row>
<el-col :span="10" class="setting-name">
Save Data Error Execution:
{{ $baseText('workflowSettings.saveDataErrorExecution') + ":" }}
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.saveDataErrorExecution"></div>
<font-awesome-icon icon="question-circle" />
</n8n-tooltip>
</el-col>
<el-col :span="14" class="ignore-key-press">
<n8n-select v-model="workflowSettings.saveDataErrorExecution" placeholder="Select Option" size="medium" filterable :limit-popper-width="true">
<n8n-select v-model="workflowSettings.saveDataErrorExecution" :placeholder="$baseText('workflowSettings.selectOption')" size="medium" filterable :limit-popper-width="true">
<n8n-option
v-for="option of saveDataErrorExecutionOptions"
:key="option.key"
@ -68,14 +68,14 @@
</el-row>
<el-row>
<el-col :span="10" class="setting-name">
Save Data Success Execution:
{{ $baseText('workflowSettings.saveDataSuccessExecution') + ":" }}
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.saveDataSuccessExecution"></div>
<font-awesome-icon icon="question-circle" />
</n8n-tooltip>
</el-col>
<el-col :span="14" class="ignore-key-press">
<n8n-select v-model="workflowSettings.saveDataSuccessExecution" placeholder="Select Option" size="medium" filterable :limit-popper-width="true">
<n8n-select v-model="workflowSettings.saveDataSuccessExecution" :placeholder="$baseText('workflowSettings.selectOption')" size="medium" filterable :limit-popper-width="true">
<n8n-option
v-for="option of saveDataSuccessExecutionOptions"
:key="option.key"
@ -87,14 +87,14 @@
</el-row>
<el-row>
<el-col :span="10" class="setting-name">
Save Manual Executions:
{{ $baseText('workflowSettings.saveManualExecutions') + ":" }}
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.saveManualExecutions"></div>
<font-awesome-icon icon="question-circle" />
</n8n-tooltip>
</el-col>
<el-col :span="14" class="ignore-key-press">
<n8n-select v-model="workflowSettings.saveManualExecutions" placeholder="Select Option" size="medium" filterable :limit-popper-width="true">
<n8n-select v-model="workflowSettings.saveManualExecutions" :placeholder="$baseText('workflowSettings.selectOption')" size="medium" filterable :limit-popper-width="true">
<n8n-option
v-for="option of saveManualOptions"
:key="option.key"
@ -106,14 +106,14 @@
</el-row>
<el-row>
<el-col :span="10" class="setting-name">
Save Execution Progress:
{{ $baseText('workflowSettings.saveExecutionProgress') + ":" }}
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.saveExecutionProgress"></div>
<font-awesome-icon icon="question-circle" />
</n8n-tooltip>
</el-col>
<el-col :span="14" class="ignore-key-press">
<n8n-select v-model="workflowSettings.saveExecutionProgress" placeholder="Select Option" size="medium" filterable :limit-popper-width="true">
<n8n-select v-model="workflowSettings.saveExecutionProgress" :placeholder="$baseText('workflowSettings.selectOption')" size="medium" filterable :limit-popper-width="true">
<n8n-option
v-for="option of saveExecutionProgressOptions"
:key="option.key"
@ -125,7 +125,7 @@
</el-row>
<el-row>
<el-col :span="10" class="setting-name">
Timeout Workflow:
{{ $baseText('workflowSettings.timeoutWorkflow') + ":" }}
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.executionTimeoutToggle"></div>
<font-awesome-icon icon="question-circle" />
@ -140,7 +140,7 @@
<div v-if="workflowSettings.executionTimeout > -1">
<el-row>
<el-col :span="10" class="setting-name">
Timeout After:
{{ $baseText('workflowSettings.timeoutAfter') + ":" }}
<n8n-tooltip class="setting-info" placement="top" >
<div slot="content" v-html="helpTexts.executionTimeout"></div>
<font-awesome-icon icon="question-circle" />
@ -148,17 +148,17 @@
</el-col>
<el-col :span="4">
<n8n-input size="medium" :value="timeoutHMS.hours" @input="(value) => setTimeout('hours', value)" :min="0">
<template slot="append">hours</template>
<template slot="append">{{ $baseText('workflowSettings.hours') }}</template>
</n8n-input>
</el-col>
<el-col :span="4" class="timeout-input">
<n8n-input size="medium" :value="timeoutHMS.minutes" @input="(value) => setTimeout('minutes', value)" :min="0" :max="60">
<template slot="append">minutes</template>
<template slot="append">{{ $baseText('workflowSettings.minutes') }}</template>
</n8n-input>
</el-col>
<el-col :span="4" class="timeout-input">
<n8n-input size="medium" :value="timeoutHMS.seconds" @input="(value) => setTimeout('seconds', value)" :min="0" :max="60">
<template slot="append">seconds</template>
<template slot="append">{{ $baseText('workflowSettings.seconds') }}</template>
</n8n-input>
</el-col>
</el-row>
@ -207,14 +207,14 @@ export default mixins(
return {
isLoading: true,
helpTexts: {
errorWorkflow: 'The workflow to run in case the current one fails.<br />To function correctly that workflow has to contain an "Error Trigger" node!',
timezone: 'The timezone in which the workflow should run. Gets for example used by "Cron" node.',
saveDataErrorExecution: 'If data data of executions should be saved in case they failed.',
saveDataSuccessExecution: 'If data data of executions should be saved in case they succeed.',
saveExecutionProgress: 'If data should be saved after each node, allowing you to resume in case of errors from where it stopped. May increase latency.',
saveManualExecutions: 'If data data of executions should be saved when started manually from the editor.',
executionTimeoutToggle: 'Cancel workflow execution after defined time',
executionTimeout: 'After what time the workflow should timeout.',
errorWorkflow: this.$baseText('workflowSettings.helpTexts.errorWorkflow'),
timezone: this.$baseText('workflowSettings.helpTexts.timezone'),
saveDataErrorExecution: this.$baseText('workflowSettings.helpTexts.saveDataErrorExecution'),
saveDataSuccessExecution: this.$baseText('workflowSettings.helpTexts.saveDataSuccessExecution'),
saveExecutionProgress: this.$baseText('workflowSettings.helpTexts.saveExecutionProgress'),
saveManualExecutions: this.$baseText('workflowSettings.helpTexts.saveManualExecutions'),
executionTimeoutToggle: this.$baseText('workflowSettings.helpTexts.executionTimeoutToggle'),
executionTimeout: this.$baseText('workflowSettings.helpTexts.executionTimeout'),
},
defaultValues: {
timezone: 'America/New_York',
@ -324,15 +324,24 @@ export default mixins(
this.saveDataErrorExecutionOptions, [
{
key: 'DEFAULT',
value: 'Default - ' + (this.defaultValues.saveDataErrorExecution === 'all' ? 'Save' : 'Do not save'),
value: this.$baseText(
'workflowSettings.saveDataErrorExecutionOptions.defaultSave',
{
interpolate: {
defaultValue: this.defaultValues.saveDataErrorExecution === 'all'
? this.$baseText('workflowSettings.saveDataErrorExecutionOptions.save')
: this.$baseText('workflowSettings.saveDataErrorExecutionOptions.doNotsave'),
},
},
),
},
{
key: 'all',
value: 'Save',
value: this.$baseText('workflowSettings.saveDataErrorExecutionOptions.save'),
},
{
key: 'none',
value: 'Do not save',
value: this.$baseText('workflowSettings.saveDataErrorExecutionOptions.doNotSave'),
},
],
);
@ -343,15 +352,24 @@ export default mixins(
this.saveDataSuccessExecutionOptions, [
{
key: 'DEFAULT',
value: 'Default - ' + (this.defaultValues.saveDataSuccessExecution === 'all' ? 'Save' : 'Do not save'),
value: this.$baseText(
'workflowSettings.saveDataSuccessExecutionOptions.defaultSave',
{
interpolate: {
defaultValue: this.defaultValues.saveDataSuccessExecution === 'all'
? this.$baseText('workflowSettings.saveDataSuccessExecutionOptions.save')
: this.$baseText('workflowSettings.saveDataSuccessExecutionOptions.doNotSave'),
},
},
),
},
{
key: 'all',
value: 'Save',
value: this.$baseText('workflowSettings.saveDataSuccessExecutionOptions.save'),
},
{
key: 'none',
value: 'Do not save',
value: this.$baseText('workflowSettings.saveDataSuccessExecutionOptions.doNotSave'),
},
],
);
@ -362,15 +380,22 @@ export default mixins(
this.saveExecutionProgressOptions, [
{
key: 'DEFAULT',
value: 'Default - ' + (this.defaultValues.saveExecutionProgress === true ? 'Yes' : 'No'),
value: this.$baseText(
'workflowSettings.saveExecutionProgressOptions.defaultSave',
{
interpolate: {
defaultValue: this.defaultValues.saveExecutionProgress ? this.$baseText('workflowSettings.saveExecutionProgressOptions.yes') : this.$baseText('workflowSettings.saveExecutionProgressOptions.no'),
},
},
),
},
{
key: true,
value: 'Yes',
value: this.$baseText('workflowSettings.saveExecutionProgressOptions.yes'),
},
{
key: false,
value: 'No',
value: this.$baseText('workflowSettings.saveExecutionProgressOptions.no'),
},
],
);
@ -379,15 +404,22 @@ export default mixins(
this.saveManualOptions.length = 0;
this.saveManualOptions.push({
key: 'DEFAULT',
value: 'Default - ' + (this.defaultValues.saveManualExecutions === true ? 'Yes' : 'No'),
value: this.$baseText(
'workflowSettings.saveManualOptions.defaultSave',
{
interpolate: {
defaultValue: this.defaultValues.saveManualExecutions ? this.$baseText('workflowSettings.saveManualOptions.yes') : this.$baseText('workflowSettings.saveManualOptions.no'),
},
},
),
});
this.saveManualOptions.push({
key: true,
value: 'Yes',
value: this.$baseText('workflowSettings.saveManualOptions.yes'),
});
this.saveManualOptions.push({
key: false,
value: 'No',
value: this.$baseText('workflowSettings.saveManualOptions.no'),
});
},
@ -401,12 +433,15 @@ export default mixins(
let defaultTimezoneValue = timezones[this.defaultValues.timezone] as string | undefined;
if (defaultTimezoneValue === undefined) {
defaultTimezoneValue = 'Default Timezone not valid!';
defaultTimezoneValue = this.$baseText('workflowSettings.defaultTimezoneNotValid');
}
this.timezones.push({
key: 'DEFAULT',
value: `Default - ${defaultTimezoneValue}`,
value: this.$baseText(
'workflowSettings.defaultTimezone',
{ interpolate: { defaultTimezoneValue } },
),
});
for (const timezone of Object.keys(timezones)) {
this.timezones.push({
@ -430,7 +465,7 @@ export default mixins(
// @ts-ignore
workflows.unshift({
id: undefined as unknown as string,
name: '- No Workflow -',
name: this.$baseText('workflowSettings.noWorkflow'),
});
Vue.set(this, 'workflows', workflows);
@ -449,14 +484,33 @@ export default mixins(
: -1;
if (data.settings!.executionTimeout === 0) {
this.$showError(new Error('timeout is activated but set to 0'), 'Problem saving settings', 'There was a problem saving the settings:');
this.$showError(
new Error(this.$baseText('workflowSettings.showError.saveSettings1.errorMessage')),
this.$baseText('workflowSettings.showError.saveSettings1.title'),
this.$baseText('workflowSettings.showError.saveSettings1.message') + ':',
);
return;
}
// @ts-ignore
if (data.settings!.executionTimeout > this.workflowSettings.maxExecutionTimeout) {
const { hours, minutes, seconds } = this.convertToHMS(this.workflowSettings.maxExecutionTimeout as number);
this.$showError(new Error(`Maximum Timeout is: ${hours} hours, ${minutes} minutes, ${seconds} seconds`), 'Problem saving settings', 'Set timeout is exceeding the maximum timeout!');
this.$showError(
new Error(
this.$baseText(
'workflowSettings.showError.saveSettings2.errorMessage',
{
interpolate: {
hours: hours.toString(),
minutes: minutes.toString(),
seconds: seconds.toString(),
},
},
),
),
this.$baseText('workflowSettings.showError.saveSettings2.title'),
this.$baseText('workflowSettings.showError.saveSettings2.message') + ':',
);
return;
}
delete data.settings!.maxExecutionTimeout;
@ -466,7 +520,11 @@ export default mixins(
try {
await this.restApi().updateWorkflow(this.$route.params.name, data);
} catch (error) {
this.$showError(error, 'Problem saving settings', 'There was a problem saving the settings:');
this.$showError(
error,
this.$baseText('workflowSettings.showError.saveSettings3.title'),
this.$baseText('workflowSettings.showError.saveSettings3.message') + ':',
);
this.isLoading = false;
return;
}
@ -486,8 +544,8 @@ export default mixins(
this.isLoading = false;
this.$showMessage({
title: 'Settings saved',
message: 'The workflow settings got saved!',
title: this.$baseText('workflowSettings.showMessage.saveSettings.title'),
message: this.$baseText('workflowSettings.showMessage.saveSettings.message'),
type: 'success',
});

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

@ -1,10 +1,10 @@
import { showMessage } from '@/components/mixins/showMessage';
import { translate } from '@/components/mixins/translate';
import { renderText } from '@/components/mixins/renderText';
import { debounce } from 'lodash';
import mixins from 'vue-typed-mixins';
export const genericHelpers = mixins(showMessage, translate).extend({
export const genericHelpers = mixins(showMessage, renderText).extend({
data () {
return {
loadingService: null as any | null, // tslint:disable-line:no-any
@ -23,10 +23,10 @@ export const genericHelpers = mixins(showMessage, translate).extend({
displayTimer (msPassed: number, showMs = false): string {
if (msPassed < 60000) {
if (showMs === false) {
return `${Math.floor(msPassed / 1000)} sec.`;
return `${Math.floor(msPassed / 1000)} ${this.$baseText('genericHelpers.sec')}`;
}
return `${msPassed / 1000} sec.`;
return `${msPassed / 1000} ${this.$baseText('genericHelpers.sec')}`;
}
const secondsPassed = Math.floor(msPassed / 1000);
@ -38,8 +38,9 @@ export const genericHelpers = mixins(showMessage, translate).extend({
editAllowedCheck (): boolean {
if (this.isReadOnly) {
this.$showMessage({
title: 'Workflow can not be changed!',
message: `The workflow can not be edited as a past execution gets displayed. To make changed either open the original workflow of which the execution gets displayed or save it under a new name first.`,
// title: 'Workflow can not be changed!',
title: this.$baseText('genericHelpers.showMessage.title'),
message: this.$baseText('genericHelpers.showMessage.message'),
type: 'error',
duration: 0,
});
@ -58,7 +59,7 @@ export const genericHelpers = mixins(showMessage, translate).extend({
this.loadingService = this.$loading(
{
lock: true,
text: text || 'Loading',
text: text || this.$baseText('genericHelpers.loading'),
spinner: 'el-icon-loading',
background: 'rgba(255, 255, 255, 0.8)',
},

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
this.$titleSet(workflow.name as string, 'IDLE');
this.$showMessage({
title: 'Workflow was executed',
message: 'Workflow was executed successfully!',
title: this.$baseText('pushConnection.showMessage.title'),
message: this.$baseText('pushConnection.showMessage.message'),
type: 'success',
});
}

28
packages/editor-ui/src/components/mixins/translate.ts → packages/editor-ui/src/components/mixins/renderText.ts
View file

@ -1,14 +1,7 @@
// import { TranslationPath } from '@/Interface';
import Vue from 'vue';
/**
* Mixin to translate:
* - base strings, i.e. any string that is not node- or credentials-specific,
* - specific strings,
* - node-specific strings, i.e. those in `NodeView.vue`,
* - credentials-specific strings, i.e. those in `EditCredentials.vue`.
*/
export const translate = Vue.extend({
export const renderText = Vue.extend({
computed: {
/**
* Node type for the active node in `NodeView.vue`.
@ -19,23 +12,18 @@ export const translate = Vue.extend({
},
methods: {
// -----------------------------------------
// main methods
// -----------------------------------------
/**
* Translate a base string. Called directly in Vue templates.
* Optionally, [interpolate a variable](https://kazupon.github.io/vue-i18n/guide/formatting.html#named-formatting).
* Render a string of base text, i.e. a string with a **fixed path** to the value in the locale object. Allows for [interpolation](https://kazupon.github.io/vue-i18n/guide/formatting.html#named-formatting) when the localized value contains a string between curly braces.
* ```js
* $baseText('fixed.path.to.localized.value');
* $baseText('fixed.path.to.localized.value', { interpolate: { var: arg } });
* ```
*/
$baseText(
key: string,
options?: { interpolate?: { [key: string]: string } },
options?: { interpolate: { [key: string]: string } },
): string {
const translatedBaseString = options && options.interpolate
? this.$t(key, options.interpolate)
: this.$t(key);
return translatedBaseString.toString();
return this.$t(key, options && options.interpolate).toString();
},
/**

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

@ -7,10 +7,11 @@ import { ExecutionError } from 'n8n-workflow';
import { ElMessageBoxOptions } from 'element-ui/types/message-box';
import { MessageType } from 'element-ui/types/message';
import { isChildOf } from './helpers';
import { renderText } from '@/components/mixins/renderText';
let stickyNotificationQueue: ElNotificationComponent[] = [];
export const showMessage = mixins(externalHooks).extend({
export const showMessage = mixins(externalHooks, renderText).extend({
methods: {
$showMessage(messageData: ElNotificationOptions, track = true) {
messageData.dangerouslyUseHTMLString = true;
@ -130,11 +131,11 @@ export const showMessage = mixins(externalHooks).extend({
this.$telemetry.track('Instance FE emitted error', { error_title: title, error_description: message, error_message: error.message, workflow_id: this.$store.getters.workflowId });
},
async confirmMessage (message: string, headline: string, type: MessageType | null = 'warning', confirmButtonText = 'OK', cancelButtonText = 'Cancel'): Promise<boolean> {
async confirmMessage (message: string, headline: string, type: MessageType | null = 'warning', confirmButtonText?: string, cancelButtonText?: string): Promise<boolean> {
try {
const options: ElMessageBoxOptions = {
confirmButtonText,
cancelButtonText,
confirmButtonText: confirmButtonText || this.$baseText('showMessage.ok'),
cancelButtonText: cancelButtonText || this.$baseText('showMessage.cancel'),
dangerouslyUseHTMLString: true,
...(type && { type }),
};
@ -172,7 +173,7 @@ export const showMessage = mixins(externalHooks).extend({
<summary
style="color: #ff6d5a; font-weight: bold; cursor: pointer;"
>
Show Details
${this.$baseText('showMessage.showDetails')}
</summary>
<p>${node.name}: ${errorDescription}</p>
</details>

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

@ -45,6 +45,7 @@ import { externalHooks } from '@/components/mixins/externalHooks';
import { restApi } from '@/components/mixins/restApi';
import { nodeHelpers } from '@/components/mixins/nodeHelpers';
import { showMessage } from '@/components/mixins/showMessage';
import { renderText } from '@/components/mixins/renderText';
import { isEqual } from 'lodash';
@ -54,6 +55,7 @@ import { v4 as uuidv4} from 'uuid';
export const workflowHelpers = mixins(
externalHooks,
nodeHelpers,
renderText,
restApi,
showMessage,
)
@ -483,8 +485,8 @@ export const workflowHelpers = mixins(
this.$store.commit('removeActiveAction', 'workflowSaving');
this.$showMessage({
title: 'Problem saving workflow',
message: `There was a problem saving the workflow: "${e.message}"`,
title: this.$baseText('workflowHelpers.showMessage.title'),
message: this.$baseText('workflowHelpers.showMessage.message') + `: "${e.message}"`,
type: 'error',
});
@ -557,8 +559,8 @@ export const workflowHelpers = mixins(
this.$store.commit('removeActiveAction', 'workflowSaving');
this.$showMessage({
title: 'Problem saving workflow',
message: `There was a problem saving the workflow: "${e.message}"`,
title: this.$baseText('workflowHelpers.showMessage.title'),
message: this.$baseText('workflowHelpers.showMessage.message') + `: "${e.message}"`,
type: 'error',
});

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

@ -14,6 +14,7 @@ import { externalHooks } from '@/components/mixins/externalHooks';
import { restApi } from '@/components/mixins/restApi';
import { workflowHelpers } from '@/components/mixins/workflowHelpers';
import { showMessage } from '@/components/mixins/showMessage';
import { renderText } from '@/components/mixins/renderText';
import mixins from 'vue-typed-mixins';
import { titleChange } from './titleChange';
@ -21,6 +22,7 @@ import { titleChange } from './titleChange';
export const workflowRun = mixins(
externalHooks,
restApi,
renderText,
workflowHelpers,
showMessage,
titleChange,
@ -31,7 +33,9 @@ export const workflowRun = mixins(
if (this.$store.getters.pushConnectionActive === false) {
// Do not start if the connection to server is not active
// because then it can not receive the data as it executes.
throw new Error('No active connection to server. It is maybe down.');
throw new Error(
this.$baseText('workflowRun.noActiveConnectionToTheServer'),
);
}
this.$store.commit('addActiveAction', 'workflowRunning');
@ -89,8 +93,8 @@ export const workflowRun = mixins(
}
this.$showMessage({
title: 'Workflow can not be executed',
message: 'The workflow has issues. Please fix them first:<br />&nbsp;&nbsp;- ' + errorMessages.join('<br />&nbsp;&nbsp;- '),
title: this.$baseText('workflowRun.showMessage.title'),
message: this.$baseText('workflowRun.showMessage.message') + ':<br />&nbsp;&nbsp;- ' + errorMessages.join('<br />&nbsp;&nbsp;- '),
type: 'error',
duration: 0,
});
@ -199,7 +203,11 @@ export const workflowRun = mixins(
return runWorkflowApiResponse;
} catch (error) {
this.$titleSet(workflow.name as string, 'ERROR');
this.$showError(error, 'Problem running workflow', 'There was a problem running the workflow:');
this.$showError(
error,
this.$baseText('workflowRun.showError.title'),
this.$baseText('workflowRun.showError.message') + ':',
);
return undefined;
}
},

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

@ -5,7 +5,7 @@ import axios from 'axios';
Vue.use(VueI18n);
console.log('About to initialize i18n');
console.log('About to initialize i18n'); // eslint-disable-line no-console
export const i18n = new VueI18n({
locale: 'en',
@ -24,7 +24,7 @@ function setLanguage(language: string): string {
}
export async function loadLanguage(language?: string) {
console.log(`loadLanguage called with ${language}`);
console.log(`loadLanguage called with ${language}`); // eslint-disable-line no-console
if (!language) return Promise.resolve();

1222
packages/editor-ui/src/i18n/locales/de.ts
View file

File diff suppressed because it is too large Load diff

613
packages/editor-ui/src/i18n/locales/en.ts
View file

@ -1,5 +1,49 @@
export default {
en: {
versionCard: {
thisVersionHasASecurityIssue: 'This version has a security issue.<br/>It is listed here for completeness.',
released: 'Released',
securityUpdate: 'Security update',
breakingChanges: 'Breaking changes',
version: 'Version',
unknown: 'unknown',
},
updatesPanel: {
weVeBeenBusy: 'We’ve been busy ✨',
youReOnVersion: 'You’re on {currentVersionName}, which was released',
andIs: 'and is',
version: '{numberOfVersions} version{howManySuffix}',
behindTheLatest: 'behind the latest and greatest n8n',
howToUpdateYourN8nVersion: 'How to update your n8n version',
},
timeAgo: {
justNow: 'Just now',
rightNow: 'Right now',
oneMinuteAgo: '1 minute ago',
oneHourAgo: '1 hour ago',
oneDayAgo: '1 day ago',
oneWeekAgo: '1 week ago',
oneMonthAgo: '1 month ago',
oneYearAgo: '1 year ago',
minutesAgo: '%s minutes ago',
hoursAgo: '%s hours ago',
daysAgo: '%s days ago',
weeksAgo: '%s weeks ago',
monthsAgo: '%s months ago',
yearsAgo: '%s years ago',
inOneMinute: 'in 1 minute',
inOneHour: 'in 1 hour',
inOneDay: 'in 1 day',
inOneWeek: 'in 1 week',
inOneMonth: 'in 1 month',
inOneYear: 'in 1 year',
inMinutes: 'in %s minutes',
inHours: 'in %s hours',
inDays: 'in %s days',
inWeeks: 'in %s weeks',
inMonths: 'in %s months',
inYears: 'in %s years',
},
about: {
aboutN8n: 'About n8n',
apacheWithCommons20Clause: 'Apache 2.0 with Commons Clause',
@ -10,133 +54,59 @@ export default {
},
binaryDataDisplay: {
backToList: 'Back to list',
dataToDisplayDidNotGetFound: 'Data to display did not get found',
backToOverviewPage: 'Back to overview page',
noDataFoundToDisplay: 'No data found to display',
yourBrowserDoesNotSupport: 'Your browser does not support the video element. Kindly update it to latest version.',
},
collectionParameter: {
chooseOptionToAdd: 'Choose Option To Add',
currentlyNoPropertiesExist: 'Currently no properties exist',
},
credentialsEdit: {
createNewCredentials: 'Create New Credentials',
credentialType: 'Credential type',
needHelp: 'Need help?',
nodeDocumentation: 'Node Documentation',
openCredentialDocs: 'Open credential docs',
showError: {
message: 'There was a problem loading the credentials',
title: 'Problem loading credentials',
},
showMessage: {
credentialsCreated: {
message: 'credentials were successfully created!',
title: 'Credentials created',
},
credentialsUpdated: {
message: 'credentials were successfully updated!',
title: 'Credentials updated',
},
credentialTypeNull1: {
message: 'Credentials of type {credentialsType} are not known.',
title: 'Credential type not known',
},
credentialTypeNull2: {
message: 'Credentials of type {credentialsType} are not known.',
title: 'Credential type not known',
},
currentCredentialsUndefined1: {
message: 'Could not find the credentials with the id',
title: 'Credentials not found',
},
currentCredentialsUndefined2: {
message: 'No credentials could be loaded!',
title: 'Problem loading credentials',
},
editCredentialsIdUndefined: {
message: 'The ID of the credentials which should be edited is missing!',
title: 'Credential ID missing',
},
},
title: 'Edit Credentials',
},
credentialsInput: {
access: 'Access',
addAtLeastOneNodeWhichHasAccessToTheCredentials: 'Add at least one node which has access to the credentials!',
connected: 'Connected',
create: 'Create',
credentialData: 'Credential Data',
credentialsName: 'Credentials Name',
enterAllRequiredProperties: 'Enter all required properties',
important: 'Important',
noAccess: 'No Access',
nodesWithAccess: 'Nodes with access',
notConnected: 'Not connected',
oAuth2CallbackUrl: 'OAuth Callback URL',
save: 'Save',
showError: {
createCredentials: {
message: 'There was a problem creating the credentials',
title: 'Problem Creating Credentials',
},
oAuthCredentialAuthorize: {
message: 'Error generating authorization URL',
title: 'OAuth Authorization Error',
},
updateCredentials: {
message: 'There was a problem updating the credentials',
title: 'Problem Updating Credentials',
},
},
showMessage: {
copyCallbackUrl: {
message: 'Callback URL was successfully copied!',
title: 'Copied',
},
receiveMessage: {
message: 'Connected successfully!',
title: 'Connected',
},
},
choose: 'Choose...',
noProperties: 'No properties',
},
credentialsList: {
name: 'Name',
type: 'Type',
credentials: 'Credentials',
addNew: 'Add New',
confirmMessage: {
cancelButtonText: '',
confirmButtonText: 'Yes, delete!',
headline: 'Delete Credentials?',
message: 'Are you sure you want to delete {credentialName} credentials?',
headline: 'Delete Credential?',
message: 'Are you sure you want to delete {credentialName} credential?',
},
createNewCredentials: 'Create New Credentials',
credentials: 'Credentials',
editCredentials: 'Edit Credentials',
deleteCredentials: 'Delete Credentials',
createNewCredential: 'Create New Credential',
editCredential: 'Edit Credential',
deleteCredential: 'Delete Credential',
showError: {
deleteCredential: {
message: 'There was a problem deleting the credentials',
title: 'Problem deleting credentials',
},
loadCredentials: {
message: 'There was a problem loading the credentials',
title: 'Problem loading credentials',
message: '',
title: 'Problem deleting credential',
},
},
showMessage: {
message: 'The credential {credentialsName} got deleted!',
title: 'Credentials deleted',
},
tableLabels: {
name: 'Name',
type: 'Type',
created: 'Created',
updated: 'Updated',
operations: 'Operations',
message: 'The credential {credentialName} got deleted!',
title: 'Credential deleted',
},
yourSavedCredentials: 'Your saved credentials',
created: 'Created',
updated: 'Updated',
operations: 'Operations',
},
credentialSelectModal: {
searchForApp: 'Search for app...',
addNewCredential: 'Add new credential',
selectAnAppOrServiceToConnectTo: 'Select an app or service to connect to',
continue: 'Continue',
},
dataDisplay: {
needHelp: 'Need help?',
nodeDocumentation: 'Node Documentation',
openDocumentationFor: 'Open {nodeTypeDisplayName} documentation',
},
displayWithChange: {
clickToChange: 'Click to Change',
cancelEdit: 'Cancel Edit',
setValue: 'Set Value',
},
duplicateWorkflowDialog: {
cancel: 'Cancel',
chooseOrCreateATag: 'Choose or create a tag',
@ -148,11 +118,112 @@ export default {
title: 'Name missing',
},
},
executionDetails: {
executionId: 'Execution ID',
executionWasSuccessful: 'Execution was successful',
executionWaiting: 'Execution waiting',
executionFailed: 'Execution failed',
openWorkflow: 'Open Workflow',
},
credentialEdit: {
credentialInfo: {
allowUseBy: 'Allow use by',
created: 'Created',
lastModified: 'Last modified',
id: 'ID',
},
credentialConfig: {
needHelpFillingOutTheseFields: 'Need help filling out these fields?',
openDocs: 'Open docs',
pleaseCheckTheErrorsBelow: 'Please check the errors below',
couldntConnectWithTheseSettings: "Couldn’t connect with these settings",
retry: 'Retry',
retrying: 'Retrying',
retryCredentialTest: 'Retry credential test',
accountConnected: 'Account connected',
reconnect: 'reconnect',
reconnectOAuth2Credential: 'Reconnect OAuth2 Credential',
connectionTestedSuccessfully: 'Connection tested successfully',
oAuthRedirectUrl: 'OAuth Redirect URL',
clickToCopy: 'ClickToCopy',
subtitle: 'In {appName}, use the URL above when prompted to enter an OAuth callback or redirect URL',
redirectUrlCopiedToClipboard: 'Redirect URL copied to clipboard',
},
oAuthButton: {
signInWithGoogle: 'Sign in with Google',
connectMyAccount: 'Connect my account',
},
credentialEdit: {
connection: 'Connection',
details: 'Details',
confirmMessage: {
beforeClose1: {
cancelButtonText: 'Keep Editing',
confirmButtonText: 'Close',
headline: 'Close without saving?',
message: 'Are you sure you want to throw away the changes you made to the {credentialDisplayName} credential?',
},
beforeClose2: {
cancelButtonText: 'Keep Editing',
confirmButtonText: 'Close',
headline: 'Close without connecting?',
message: 'You need to connect your credential for it to work',
},
deleteCredential: {
cancelButtonText: '',
confirmButtonText: 'Yes, delete!',
headline: 'Delete Credential?',
message: 'Are you sure you want to delete "{savedCredentialName}" credential?',
},
},
couldNotFindCredentialOfType: 'Could not find credential of type',
couldNotFindCredentialWithId: 'Could not find credential with ID',
showMessage: {
title: 'Credential deleted',
message: 'The credential {savedCredentialName} was deleted!',
},
showError: {
loadCredential: {
message: '',
title: 'Problem loading credential',
},
createCredential: {
message: '',
title: 'Problem creating credential',
},
updateCredential: {
message: '',
title: 'Problem updating credential',
},
deleteCredential: {
message: '',
title: 'Problem deleting credential',
},
generateAuthorizationUrl: {
message: 'There was a problem generating the authorization URL',
title: 'OAuth Authorization Error',
},
},
},
},
readOnly: {
youreViewingTheLogOf: `You're viewing the log of a previous execution. You cannot<br />
make changes since this execution already occured. Make changes<br />
to this workflow by clicking on its name on the left.`,
readOnly: 'Read only',
},
executionsList: {
modes: {
error: 'error',
retry: 'retry',
manual: 'manual',
trigger: 'trigger',
},
stopExecution: 'Stop Execution',
unsavedWorkflow: '[UNSAVED WORKFLOW]',
allWorkflows: 'All Workflows',
anyStatus: 'Any Status',
autoRefresh: 'Auto refresh',
checkAll: 'Check all',
confirmMessage: {
cancelButtonText: '',
confirmButtonText: 'Yes, delete!',
@ -170,32 +241,35 @@ export default {
retryWithCurrentlySavedWorkflow: 'Retry with currently saved workflow',
retryWithOriginalworkflow: 'Retry with original workflow',
running: 'Running',
runningParens: 'running',
runningTime: 'Running Time',
waiting: 'Waiting',
selected: 'Selected',
deleteSelected: 'Delete Selected',
selectStatus: 'Select Status',
selectWorkflow: 'Select Workflow',
showError: {
handleDeleteSelected: {
message: 'There was a problem deleting the executions',
message: '',
title: 'Problem deleting executions',
},
loadMore: {
message: 'There was a problem loading the workflows',
message: '',
title: 'Problem loading workflows',
},
loadWorkflows: {
message: 'There was a problem loading the workflows',
message: '',
title: 'Problem loading workflows',
},
refreshData: {
message: 'There was a problem loading the data',
title: 'Problem loading',
message: '',
title: 'Problem loading data',
},
retryExecution: {
message: 'There was a problem with the retry',
message: '',
title: 'Problem with retry',
},
stopExecution: {
message: 'There was a problem stopping the execuction',
message: '',
title: 'Problem stopping execution',
},
},
@ -209,17 +283,19 @@ export default {
title: 'Retry unsuccessful',
},
retrySuccessfulTrue: {
message: 'The retry was successful!',
message: '',
title: 'Retry successful',
},
stopExecution: {
message: 'The execution with the id {activeExecutionId} got stopped!',
message: 'The execution with the ID {activeExecutionId} got stopped!',
title: 'Execution stopped',
},
},
startedAtId: 'Started At / ID',
status: 'Status',
statusTooltipText: {
theWorkflowIsWaitingIndefinitely: 'The workflow is waiting indefinitely for an incoming webhook call.',
theWorkflowIsWaitingTill: `The worklow is waiting till {waitDateDate} {waitDateTime}.`,
theWorkflowExecutionFailed: 'The workflow execution failed.',
theWorkflowExecutionFailedButTheRetryWasSuccessful: 'The workflow execution failed but the retry {entryRetrySuccessId} was successful.',
theWorkflowExecutionIsProbablyStillRunning: 'The workflow execution is probably still running but it may have crashed and n8n cannot safely tell. ',
@ -240,22 +316,32 @@ export default {
variableSelector: 'Variable Selector',
},
fixedCollectionParameter: {
chooseOptionToAdd: 'Choose Option To Add',
choose: 'Choose...',
currentlyNoItemsExist: 'Currently no items exist',
},
genericHelpers: {
showMessage: {
message: 'The workflow can not be edited as a past execution gets displayed. To make changed either open the original workflow of which the execution gets displayed or save it under a new name first.',
title: 'Workflow can not be changed!',
message: 'The workflow cannot be edited as a past execution gets displayed. To make changed either open the original workflow of which the execution gets displayed or save it under a new name first.',
title: 'Workflow cannot be changed!',
},
loading: 'Loading',
sec: 'sec.',
},
mainSideBar: {
mainSidebar: {
aboutN8n: 'About n8n',
confirmMessage: {
cancelButtonText: '',
confirmButtonText: 'Yes, delete!',
headline: 'Delete Workflow?',
message: 'Are you sure that you want to delete the workflow {workflowName}?',
workflowDelete: {
cancelButtonText: '',
confirmButtonText: 'Yes, delete!',
headline: 'Delete Workflow?',
message: 'Are you sure that you want to delete the workflow {workflowName}?',
},
workflowNew: {
cancelButtonText: '',
confirmButtonText: 'Yes, switch workflows and forget changes',
headline: 'Save your Changes?',
message: 'When you switch workflows your current workflow changes will be lost.',
},
},
credentials: 'Credentials',
delete: 'Delete',
@ -266,7 +352,7 @@ export default {
helpMenuItems: {
documentation: 'Documentation',
forum: 'Forum',
workflows: 'workflows',
workflows: 'Workflows',
},
importFromFile: 'Import from File',
importFromUrl: 'Import from URL',
@ -282,12 +368,8 @@ export default {
save: 'Save',
settings: 'Settings',
showError: {
handleSelect: {
message: 'There was a problem deleting the workflow',
title: 'Problem deleting the workflow',
},
stopExecution: {
message: 'There was a problem stopping the execuction',
message: '',
title: 'Problem stopping execution',
},
},
@ -301,37 +383,52 @@ export default {
title: 'Workflow got deleted',
},
handleSelect2: {
message: 'A new workflow got created',
message: '',
title: 'Workflow created',
},
handleSelect3: {
message: 'A new workflow got created',
message: '',
title: 'Workflow created',
},
stopExecution: {
message: 'The execution with the id {executionId} got stopped!',
message: 'Execution with ID {executionId} got stopped!',
title: 'Execution stopped',
},
},
workflow: 'Workflow',
workflows: 'Workflows',
},
multipleParameter: {
currentlyNoItemsExist: 'Currently no items exist',
moveUp: 'Move up',
moveDown: 'Move down',
deleteItem: 'Delete item',
},
node: {
nodeIsExecuting: 'Node is executing',
deleteNode: 'Delete Node',
activateDeactivateNode: 'Activate/Deactivate Node',
duplicateNode: 'Duplicate Node',
editNode: 'Edit Node',
executeNode: 'Execute Node',
},
nodeCredentials: {
credentials: 'Credentials',
credentialFor: 'Credential for {credentialType}',
selectCredential: 'Select Credential',
issues: 'Issues',
updateCredential: 'Update Credential',
showMessage: {
message: 'The credentials named {name} of type {credentialType} could not be found!',
title: 'Credentials not found',
message: 'Nodes that used credential "{oldCredentialName}" have been updated to use "{newCredentialName}"',
title: 'Node credential updated',
},
},
nodeErrorView: {
copyToClipboard: 'Copy to Clipboard',
cause: 'Cause',
dataBelowMayContain: 'Data below may contain sensitive information. Proceed with caution when sharing.',
theErrorCauseIsTooLargeToBeDisplayed: 'The error cause is too large to be displayed.',
details: 'Details',
error: 'ERROR',
httpCode: 'HTTP-Code',
httpCode: 'HTTP Code',
showMessage: {
message: '',
title: 'Copied to clipboard',
@ -340,48 +437,58 @@ export default {
time: 'Time',
},
nodeSettings: {
settings: {
alwaysOutputData: {
description: 'If active, the node will return an empty item even if the <br />node returns no data during an initial execution. Be careful setting <br />this on IF-Nodes as it could cause an infinite loop.',
displayName: 'Always Output Data',
},
color: {
description: 'The color of the node in the flow.',
displayName: 'Node Color',
},
continueOnFail: {
description: 'If active, the workflow continues even if this node\'s <br />execution fails. When this occurs, the node passes along input data from<br />previous nodes - so your workflow should account for unexpected output data.',
displayName: 'Continue On Fail',
},
executeOnce: {
description: 'If active, the node executes only once, with data<br /> from the first item it recieves.',
displayName: 'Execute Once',
},
maxTries: {
description: 'Number of times Retry On Fail should attempt to execute the node <br />before stopping and returning the execution as failed.',
displayName: 'Max. Tries',
},
notes: {
description: 'Optional note to save with the node.',
displayName: 'Notes',
},
notesInFlow: {
description: 'If active, the note above will display in the flow as a subtitle.',
displayName: 'Display note in flow?',
},
retryOnFail: {
description: 'If active, the node tries to execute a failed attempt <br /> multiple times until it succeeds.',
displayName: 'Retry On Fail',
},
waitBetweenTries: {
description: 'How long to wait between each attempt. Value in ms.',
displayName: 'Wait Between Tries',
},
parameters: 'Parameters',
settings: 'Settings',
nodeDescription: 'Node Description',
clickOnTheQuestionMarkIcon: 'Click the \'?\' icon to open this node on n8n.io',
alwaysOutputData: {
description: 'If active, the node will return an empty item even if the <br />node returns no data during an initial execution. Be careful setting <br />this on IF-Nodes as it could cause an infinite loop.',
displayName: 'Always Output Data',
},
color: {
description: 'The color of the node in the flow.',
displayName: 'Node Color',
},
continueOnFail: {
description: 'If active, the workflow continues even if this node\'s <br />execution fails. When this occurs, the node passes along input data from<br />previous nodes - so your workflow should account for unexpected output data.',
displayName: 'Continue On Fail',
},
executeOnce: {
description: 'If active, the node executes only once, with data<br /> from the first item it recieves.',
displayName: 'Execute Once',
},
maxTries: {
description: 'Number of times Retry On Fail should attempt to execute the node <br />before stopping and returning the execution as failed.',
displayName: 'Max. Tries',
},
notes: {
description: 'Optional note to save with the node.',
displayName: 'Notes',
},
notesInFlow: {
description: 'If active, the note above will display in the flow as a subtitle.',
displayName: 'Display note in flow?',
},
retryOnFail: {
description: 'If active, the node tries to execute a failed attempt <br /> multiple times until it succeeds.',
displayName: 'Retry On Fail',
},
waitBetweenTries: {
description: 'How long to wait between each attempt. Value in ms.',
displayName: 'Wait Between Tries',
},
noDescriptionFound: 'No description found',
theNodeIsNotValidAsItsTypeIsUnknown: 'The node is not valid as its type {nodeType} is unknown.',
thisNodeDoesNotHaveAnyParameters: 'This node does not have any parameters.',
},
nodeView: {
addNode: 'Add node',
stopWaitingForWebhookCall: 'Stop waiting for Webhook call',
deletesTheCurrentExecutionData: 'Deletes the current Execution Data.',
resetZoom: 'Reset Zoom',
zoomToFit: 'Zoom to Fit',
zoomIn: 'Zoom In',
zoomOut: 'Zoom Out',
confirmMessage: {
beforeRouteLeave: {
cancelButtonText: '',
@ -402,6 +509,14 @@ export default {
message: 'Import workflow from this URL:<br /><i>{plainTextData}<i>',
},
},
thisExecutionHasntFinishedYet: "This execution hasn't finished yet",
refresh: 'Refresh',
toSeeTheLatestStatus: 'to see the latest status',
moreInfo: 'More info',
loadingTemplate: 'Loading template',
couldntImportWorkflow: "Couldn't import workflow",
workflowTemplateWithIdCouldNotBeFound: 'Workflow template with id "{templateId}" could not be found!',
workflowWithIdCouldNotBeFound: 'Workflow with id "{workflowId}" could not be found!',
executesTheWorkflowFromTheStartOrWebhookNode: 'Executes the Workflow from the Start or Webhook Node.',
prompt: {
cancel: 'Cancel',
@ -415,6 +530,11 @@ export default {
executingWorkflow: 'Executing Workflow',
waitingForWebhookCall: 'Waiting for Webhook-Call',
},
dropConnectionToCreateNode: 'Drop connection<br />to create node',
deleteConnection: 'Delete Connection',
itLooksLikeYouHaveBeenEditingSomething: 'It looks like you have been editing something. If you leave before saving, your changes will be lost.',
thereWasAProblemLoadingTheNodeParametersOfNode: 'There was a problem loading the node-parameters of node',
noNodesGivenToAdd: 'No nodes given to add!',
showError: {
getWorkflowDataFromUrl: {
message: 'There was a problem loading the workflow data from URL',
@ -433,19 +553,19 @@ export default {
title: 'Init Problem',
},
openExecution: {
message: 'There was a problem opening the execution',
message: '',
title: 'Problem loading execution',
},
openWorkflow: {
message: 'There was a problem opening the workflow',
message: '',
title: 'Problem opening workflow',
},
stopExecution: {
message: 'There was a problem stopping the execuction',
message: '',
title: 'Problem stopping execution',
},
stopWaitingForWebhook: {
message: 'There was a problem deleting webhook',
message: '',
title: 'Problem deleting the test-webhook',
},
},
@ -455,13 +575,13 @@ export default {
title: 'Could not create node!',
},
keyDown: {
message: 'A new workflow got created!',
title: 'Created',
message: '',
title: 'Workflow created',
},
showMaxNodeTypeError: {
message: {
singular: 'Node can not be created because in a workflow max. {maxNodes} node of type {nodeTypeDataDisplayName} is allowed!',
plural: 'Node can not be created because in a workflow max. {maxNodes} nodes of type {nodeTypeDataDisplayName} are allowed!',
singular: 'Node cannot be created because in a workflow max. {maxNodes} node of type {nodeTypeDataDisplayName} is allowed!',
plural: 'Node cannot be created because in a workflow max. {maxNodes} nodes of type {nodeTypeDataDisplayName} are allowed!',
},
title: 'Could not create node!',
},
@ -474,7 +594,7 @@ export default {
title: 'Execution stopped',
},
stopWaitingForWebhook: {
message: 'The webhook got deleted!',
message: '',
title: 'Webhook got deleted',
},
},
@ -482,7 +602,12 @@ export default {
stoppingCurrentExecution: 'Stopping current execution',
},
nodeWebhooks: {
displayUrlFor: 'Display URL for',
testUrl: 'Test URL',
productionUrl: 'Production URL',
clickToDisplayWebhookUrls: 'Click to display Webhook URLs',
clickToHideWebhookUrls: 'Click to hide Webhook URLs',
clickToCopyWebhookUrls: 'Click to copy Webhook URLs',
invalidExpression: '[INVALID EXPRESSION]',
showMessage: {
message: 'The webhook URL was successfully copied!',
title: 'Copied',
@ -490,33 +615,66 @@ export default {
webhookUrls: 'Webhook URLs',
},
noTagsView: {
createATag: 'Create a tag',
readyToOrganizeYourWorkflows: 'Ready to organize your workflows?',
withWorkflowTagsYouReFree: 'With workflow tags, you\'re free to create the perfect tagging system for your flows',
},
oauth2: {
clientId: 'Client ID',
clientSecret: 'Client Secret',
},
parameterInput: {
addExpression: 'Add Expression',
removeExpression: 'Remove Expression',
refreshList: 'Refresh List',
resetValue: 'Reset Value',
selectDateAndTime: 'Select date and time',
openEditWindow: 'Open Edit Window',
issues: 'Issues',
parameterOptions: 'Parameter Options',
},
parameterInputExpanded: {
thisFieldIsRequired: 'This field is required.',
},
parameterInputList: {
delete: 'Delete',
parameterOptions: 'Parameter Options',
deleteParameter: 'Delete Parameter',
},
personalizationModal: {
lookOutForThingsMarked: 'Look out for things marked with a ✨. They are personalized to make n8n more relevant to you.',
getStarted: 'Get started',
thanks: 'Thanks!',
theseQuestionsHelpUs: 'These questions help us tailor n8n to you',
whichOfTheseAreasDoYouMainlyWorkIn: 'Which of these areas do you mainly work in?',
select: 'Select...',
automationConsulting: 'Automation consulting',
finance: 'finance',
legal: 'legal',
operations: 'operations',
hr: 'HR',
itEngineering: 'IT / Engineering',
marketingGrowth: 'Marketing / Growth',
product: 'Product',
salesBusinessDevelopment: 'Sales / Business Development',
security: 'Security',
support: 'Support',
otherPleaseSpecify: 'Other (please specify)',
specifyYourWorkArea: 'Specify your work area',
howAreYourCodingSkills: 'How are your coding skills',
neverCoded: 'Never coded',
proCoder: 'Pro coder',
howBigIsYourCompany: 'How big is your company',
lessThan20people: 'Less than 20 people',
people: 'people',
imNotUsingN8nForWork: "I'm not using n8n for work",
continue: 'Continue',
errorWhileSubmittingResults: 'Error while submitting results',
},
showMessage: {
showDetails: 'Show Details',
ok: 'OK',
cancel: 'Cancel',
},
pushConnection: {
showMessage: {
runDataExecutedFinishedFalse: {
message: {
errorMessage1: 'There was a problem executing the workflow!',
errorMessage2: 'There was a problem executing the workflow:<br /><strong>{receivedError}</strong>',
},
title: 'Problem executing workflow',
},
runDataExecutedFinishedTrue: {
message: 'Workflow did get executed successfully!',
title: 'Workflow got executed',
},
message: '',
title: 'Workflow executed successfully',
},
},
pushConnectionTracker: {
@ -524,13 +682,18 @@ export default {
connectionLost: 'Connection lost',
},
runData: {
executesThisNodeAfterExecuting: 'Executes this {nodeName} node after executing any previous nodes that have not yet returned data',
copyItemPath: 'Copy Item Path',
copyParameterPath: 'Copy Parameter Path',
copyToClipboard: 'Copy to Clipboard',
copyValue: 'Copy Value',
dataOfExecution: 'Data of Execution',
dataReturnedByTheNodeWillDisplayHere: 'Data returned by this node will display here.',
dataReturnedByThisNodeWillDisplayHere: 'Data returned by this node will display here.',
displayDataAnyway: 'Display Data Anyway',
entriesExistButThey: 'Entries exist but they do not contain any JSON data.',
json: 'JSON',
table: 'Table',
binary: 'Binary',
executeNode: 'Execute Node',
executionTime: 'Execution Time',
fileExtension: 'File Extension',
@ -547,11 +710,13 @@ export default {
startTime: 'Start Time',
theNodeContains: 'The node contains {numberOfKb} KB of data.<br />Displaying it could cause problems!<br /><br />If you do decide to display it, avoid the JSON view!',
},
saveWorkflowButton: {
saveButton: {
save: 'Save',
saving: 'Saving',
saved: 'Saved',
},
tagsDropdown: {
createTag: 'Create tag "{filter}"',
manageTags: 'Manage tags',
noMatchingTagsExist: 'No matching tags exist',
noTagsExist: 'No tags exist',
@ -565,6 +730,7 @@ export default {
couldNotDeleteTag: 'Could not delete tag',
done: 'Done',
manageTags: 'Manage tags',
tagNameCannotBeEmpty: 'Tag name cannot be empty',
showError: {
onCreate: {
message: 'A problem occurred when trying to create the {escapedName} tag',
@ -591,13 +757,14 @@ export default {
},
},
tagsTable: {
noMatchingTagsExist: 'No matching tags exist',
saveChanges: 'Save changes?',
areYouSureYouWantToDeleteThisTag: 'Are you sure you want to delete this tag?',
cancel: 'Cancel',
createTag: 'Create tag',
deleteTag: 'Delete tag',
editTag: 'Edit Tag',
name: 'Name',
saveChanges: 'Save changes',
usage: 'Usage',
},
tagsTableHeader: {
@ -634,7 +801,7 @@ export default {
title: 'Problem activating workflow',
},
activeChangedWorkflowIdUndefined: {
message: 'The workflow did not get saved yet so can not be set active!',
message: 'The workflow did not get saved yet so cannot be set active!',
title: 'Problem activating workflow',
},
displayActivationError: {
@ -658,14 +825,8 @@ export default {
},
workflowHelpers: {
showMessage: {
saveAsNewWorkflow: {
message: 'There was a problem saving the workflow',
title: 'Problem saving workflow',
},
saveCurrentWorkflow: {
message: 'There was a problem saving the workflow',
title: 'Problem saving workflow',
},
message: '',
title: 'Problem saving workflow',
},
},
workflowOpen: {
@ -677,10 +838,9 @@ export default {
message: 'When you switch workflows your current workflow changes will be lost.',
},
created: 'Created',
filterByTags: 'Filter by tags...',
name: 'Name',
openWorkflow: 'Open Workflow',
searchWorkflows: 'Deutsch',
searchWorkflows: 'Search workflows...',
showError: {
message: 'There was a problem loading the workflows',
title: 'Problem loading workflows',
@ -692,17 +852,18 @@ export default {
updated: 'Updated',
},
workflowRun: {
noActiveConnectionToTheServer: 'No active connection to server. It is maybe down.',
showError: {
message: 'There was a problem running the workflow',
message: '',
title: 'Problem running workflow',
},
showMessage: {
message: 'The workflow has issues. Please fix them first',
title: 'Workflow can not be executed',
title: 'Workflow cannot be executed',
},
},
workflowSettings: {
editExpression: 'Edit Expression',
settingsFor: 'Settings for {workflowName} (#{workflowId})',
errorWorkflow: 'Error Workflow',
helpTexts: {
errorWorkflow: 'The workflow to run in case the current one fails.<br />To function correctly that workflow has to contain an \'Error Trigger\' node!',
@ -714,6 +875,8 @@ export default {
saveManualExecutions: 'If data data of executions should be saved when started manually from the editor.',
timezone: 'The timezone in which the workflow should run. Gets for example used by \'Cron\' node.',
},
defaultTimezoneNotValid: 'Default Timezone not valid',
defaultTimezone: 'Default - {defaultTimezoneValue}',
hours: 'hours',
minutes: 'minutes',
noWorkflow: '- No Workflow -',
@ -743,13 +906,10 @@ export default {
yes: 'Yes',
},
seconds: 'seconds',
selectOption: 'selectOption',
showError: {
openDialog: {
message: 'The following error occurred loading the data',
title: 'Problem loading settings',
},
saveSettings1: {
errorMessage: 'timeout is activated but set to 0',
errorMessage: 'Timeout is activated but set to 0',
message: 'There was a problem saving the settings',
title: 'Problem saving settings',
},
@ -764,10 +924,6 @@ export default {
},
},
showMessage: {
openDialog: {
message: 'No workflow active to display settings of.',
title: 'No workflow active',
},
saveSettings: {
message: 'The workflow settings got saved!',
title: 'Settings saved',
@ -776,9 +932,8 @@ export default {
timeoutAfter: 'Timeout After',
timeoutWorkflow: 'Timeout Workflow',
timezone: 'Timezone',
workflowSettings: 'Workflow Settings',
},
'n8n-nodes-base': {}, // required for node translation
},
};
};

2
packages/editor-ui/src/n8n-theme.scss
View file

@ -179,7 +179,7 @@ body {
// Notification
.el-notification {
border-radius: 0;
border-radius: 4px;
border: none;
}

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

@ -31,7 +31,7 @@
</div>
</div>
<DataDisplay @valueChanged="valueChanged"/>
<div v-if="!createNodeActive && !isReadOnly" class="node-creator-button" title="Add Node" @click="openNodeCreator">
<div v-if="!createNodeActive && !isReadOnly" class="node-creator-button" :title="$baseText('nodeView.addNode')" @click="openNodeCreator">
<n8n-icon-button size="xlarge" icon="plus" />
</div>
<node-creator
@ -40,22 +40,22 @@
@closeNodeCreator="closeNodeCreator"
></node-creator>
<div :class="{ 'zoom-menu': true, expanded: !sidebarMenuCollapsed }">
<button @click="zoomToFit" class="button-white" title="Zoom to Fit">
<button @click="zoomToFit" class="button-white" :title="$baseText('nodeView.zoomToFit')">
<font-awesome-icon icon="expand"/>
</button>
<button @click="zoomIn()" class="button-white" title="Zoom In">
<button @click="zoomIn()" class="button-white" :title="$baseText('nodeView.zoomIn')">
<font-awesome-icon icon="search-plus"/>
</button>
<button @click="zoomOut()" class="button-white" title="Zoom Out">
<button @click="zoomOut()" class="button-white" :title="$baseText('nodeView.zoomOut')">
<font-awesome-icon icon="search-minus"/>
</button>
<button
v-if="nodeViewScale !== 1"
@click="resetZoom()"
class="button-white"
title="Reset Zoom"
:title="$baseText('nodeView.resetZoom')"
>
<font-awesome-icon icon="undo" title="Reset Zoom"/>
<font-awesome-icon icon="undo" :title="$baseText('nodeView.resetZoom')"/>
</button>
</div>
<div class="workflow-execute-wrapper" v-if="!isReadOnly">
@ -65,7 +65,7 @@
:label="runButtonText"
size="large"
icon="play-circle"
title="Executes the Workflow from the Start or Webhook Node."
:title="$baseText('nodeView.executesTheWorkflowFromTheStartOrWebhookNode')"
:type="workflowRunning ? 'light' : 'primary'"
/>
@ -75,7 +75,10 @@
size="large"
class="stop-execution"
type="light"
:title="stopExecutionInProgress ? 'Stopping current execution':'Stop current execution'"
:title="stopExecutionInProgress
? $baseText('nodeView.stoppingCurrentExecution')
: $baseText('nodeView.stopCurrentExecution')
"
:loading="stopExecutionInProgress"
@click.stop="stopExecution()"
/>
@ -85,14 +88,14 @@
class="stop-execution"
icon="stop"
size="large"
title="Stop waiting for Webhook call"
:title="$baseText('nodeView.stopWaitingForWebhookCall')"
type="light"
@click.stop="stopWaitingForWebhook()"
/>
<n8n-icon-button
v-if="!isReadOnly && workflowExecution && !workflowRunning"
title="Deletes the current Execution Data."
:title="$baseText('nodeView.deletesTheCurrentExecutionData')"
icon="trash"
size="large"
@click.stop="clearExecutionData()"
@ -122,6 +125,7 @@ import { newVersions } from '@/components/mixins/newVersions';
import { workflowHelpers } from '@/components/mixins/workflowHelpers';
import { workflowRun } from '@/components/mixins/workflowRun';
import { renderText } from '@/components/mixins/renderText';
import DataDisplay from '@/components/DataDisplay.vue';
import Modals from '@/components/Modals.vue';
@ -192,6 +196,7 @@ export default mixins(
mouseSelect,
moveNodeWorkflow,
restApi,
renderText,
showMessage,
titleChange,
workflowHelpers,
@ -241,14 +246,20 @@ export default mixins(
},
defaultLocale (newLocale, oldLocale) {
console.log(`Switching locale from ${oldLocale} to ${newLocale}`);
console.log(`Switching locale from ${oldLocale} to ${newLocale}`); // eslint-disable-line no-console
loadLanguage(newLocale);
},
},
async beforeRouteLeave(to, from, next) {
const result = this.$store.getters.getStateIsDirty;
if(result) {
const importConfirm = await this.confirmMessage(`When you switch workflows your current workflow changes will be lost.`, 'Save your Changes?', 'warning', 'Yes, switch workflows and forget changes');
const importConfirm = await this.confirmMessage(
this.$baseText('nodeView.confirmMessage.beforeRouteLeave.message'),
this.$baseText('nodeView.confirmMessage.beforeRouteLeave.headline'),
'warning',
this.$baseText('nodeView.confirmMessage.beforeRouteLeave.confirmButtonText'),
this.$baseText('nodeView.confirmMessage.beforeRouteLeave.cancelButtonText'),
);
if (importConfirm === false) {
next(false);
} else {
@ -284,14 +295,14 @@ export default mixins(
},
runButtonText (): string {
if (this.workflowRunning === false) {
return 'Execute Workflow';
return this.$baseText('nodeView.runButtonText.executeWorkflow');
}
if (this.executionWaitingForWebhook === true) {
return 'Waiting for Webhook-Call';
return this.$baseText('nodeView.runButtonText.waitingForWebhookCall');
}
return 'Executing Workflow';
return this.$baseText('nodeView.runButtonText.executingWorkflow');
},
workflowStyle (): object {
const offsetPosition = this.$store.getters.getNodeViewOffsetPosition;
@ -364,7 +375,11 @@ export default mixins(
try {
data = await this.restApi().getExecution(executionId);
} catch (error) {
this.$showError(error, 'Problem loading execution', 'There was a problem opening the execution:');
this.$showError(
error,
this.$baseText('nodeView.showError.openExecution.title'),
this.$baseText('nodeView.showError.openExecution.message') + ':',
);
return;
}
@ -423,15 +438,15 @@ export default mixins(
if ((data as IExecutionsSummary).waitTill) {
this.$showMessage({
title: `This execution hasn't finished yet`,
message: `<a onclick="window.location.reload(false);">Refresh</a> to see the latest status.<br/> <a href="https://docs.n8n.io/nodes/n8n-nodes-base.wait/" target="_blank">More info</a>`,
title: this.$baseText('nodeView.thisExecutionHasntFinishedYet'),
message: `<a onclick="window.location.reload(false);">${this.$baseText('nodeView.refresh')}</a> ${this.$baseText('nodeView.toSeeTheLatestStatus')}.<br/> <a href="https://docs.n8n.io/nodes/n8n-nodes-base.wait/" target="_blank">${this.$baseText('nodeView.moreInfo')}</a>`,
type: 'warning',
duration: 0,
});
}
},
async openWorkflowTemplate (templateId: string) {
this.setLoadingText('Loading template');
this.setLoadingText(this.$baseText('nodeView.loadingTemplate'));
this.resetWorkspace();
let data: IWorkflowTemplate | undefined;
@ -440,7 +455,12 @@ export default mixins(
data = await this.$store.dispatch('workflows/getWorkflowTemplate', templateId);
if (!data) {
throw new Error(`Workflow template with id "${templateId}" could not be found!`);
throw new Error(
this.$baseText(
'nodeView.workflowTemplateWithIdCouldNotBeFound',
{ interpolate: { templateId } },
),
);
}
data.workflow.nodes.forEach((node) => {
@ -450,7 +470,7 @@ export default mixins(
}
});
} catch (error) {
this.$showError(error, `Couldn't import workflow`);
this.$showError(error, this.$baseText('nodeView.couldntImportWorkflow'));
this.$router.push({ name: 'NodeViewNew' });
return;
}
@ -491,12 +511,21 @@ export default mixins(
try {
data = await this.restApi().getWorkflow(workflowId);
} catch (error) {
this.$showError(error, 'Problem opening workflow', 'There was a problem opening the workflow:');
this.$showError(
error,
this.$baseText('nodeView.showError.openWorkflow.title'),
this.$baseText('nodeView.showError.openWorkflow.message') + ':',
);
return;
}
if (data === undefined) {
throw new Error(`Workflow with id "${workflowId}" could not be found!`);
throw new Error(
this.$baseText(
'nodeView.workflowWithIdCouldNotBeFound',
{ interpolate: { workflowId } },
),
);
}
this.$store.commit('setActive', data.active || false);
@ -656,8 +685,8 @@ export default mixins(
}
this.$showMessage({
title: 'Workflow created',
message: 'A new workflow was successfully created!',
title: this.$baseText('nodeView.showMessage.keyDown.title'),
message: this.$baseText('nodeView.showMessage.keyDown.message'),
type: 'success',
});
} else if ((e.key === 's') && (this.isCtrlKeyPressed(e) === true)) {
@ -942,8 +971,11 @@ export default mixins(
this.stopExecutionInProgress = true;
await this.restApi().stopCurrentExecution(executionId);
this.$showMessage({
title: 'Execution stopped',
message: `The execution with the id "${executionId}" was stopped!`,
title: this.$baseText('nodeView.showMessage.stopExecutionTry.title'),
message: this.$baseText(
'nodeView.showMessage.stopExecutionTry.message',
{ interpolate: { executionId } },
),
type: 'success',
});
} catch (error) {
@ -968,12 +1000,16 @@ export default mixins(
this.$store.commit('setWorkflowExecutionData', executedData);
this.$store.commit('removeActiveAction', 'workflowRunning');
this.$showMessage({
title: 'Workflow finished executing',
message: 'Unable to stop operation in time. Workflow finished executing already.',
title: this.$baseText('nodeView.showMessage.stopExecutionCatch.title'),
message: this.$baseText('nodeView.showMessage.stopExecutionCatch.message'),
type: 'success',
});
} else {
this.$showError(error, 'Problem stopping execution', 'There was a problem stopping the execuction:');
this.$showError(
error,
this.$baseText('nodeView.showError.stopExecution.title'),
this.$baseText('nodeView.showError.stopExecution.message') + ':',
);
}
}
this.stopExecutionInProgress = false;
@ -983,13 +1019,17 @@ export default mixins(
try {
await this.restApi().removeTestWebhook(this.$store.getters.workflowId);
} catch (error) {
this.$showError(error, 'Problem deleting the test-webhook', 'There was a problem deleting webhook:');
this.$showError(
error,
this.$baseText('nodeView.showError.stopWaitingForWebhook.title'),
this.$baseText('nodeView.showError.stopWaitingForWebhook.message') + ':',
);
return;
}
this.$showMessage({
title: 'Webhook deleted',
message: `The webhook was deleted successfully`,
title: this.$baseText('nodeView.showMessage.stopWaitingForWebhook.title'),
message: this.$baseText('nodeView.showMessage.stopWaitingForWebhook.message'),
type: 'success',
});
},
@ -1008,7 +1048,16 @@ export default mixins(
return;
}
const importConfirm = await this.confirmMessage(`Import workflow from this URL:<br /><i>${plainTextData}<i>`, 'Import Workflow from URL?', 'warning', 'Yes, import!');
const importConfirm = await this.confirmMessage(
this.$baseText(
'nodeView.confirmMessage.receivedCopyPasteData.message',
{ interpolate: { plainTextData } },
),
this.$baseText('nodeView.confirmMessage.receivedCopyPasteData.headline'),
'warning',
this.$baseText('nodeView.confirmMessage.receivedCopyPasteData.confirmButtonText'),
this.$baseText('nodeView.confirmMessage.receivedCopyPasteData.cancelButtonText'),
);
if (importConfirm === false) {
return;
@ -1050,7 +1099,11 @@ export default mixins(
workflowData = await this.restApi().getWorkflowFromUrl(url);
} catch (error) {
this.stopLoading();
this.$showError(error, 'Problem loading workflow', 'There was a problem loading the workflow data from URL:');
this.$showError(
error,
this.$baseText('nodeView.showError.getWorkflowDataFromUrl.title'),
this.$baseText('nodeView.showError.getWorkflowDataFromUrl.message') + ':',
);
return;
}
this.stopLoading();
@ -1088,7 +1141,11 @@ export default mixins(
});
});
} catch (error) {
this.$showError(error, 'Problem importing workflow', 'There was a problem importing workflow data:');
this.$showError(
error,
this.$baseText('nodeView.showError.importWorkflowData.title'),
this.$baseText('nodeView.showError.importWorkflowData.message') + ':',
);
}
},
@ -1213,8 +1270,18 @@ export default mixins(
showMaxNodeTypeError (nodeTypeData: INodeTypeDescription) {
const maxNodes = nodeTypeData.maxNodes;
this.$showMessage({
title: 'Could not create node!',
message: `Node can not be created because in a workflow max. ${maxNodes} ${maxNodes === 1 ? 'node' : 'nodes'} of type "${nodeTypeData.displayName}" ${maxNodes === 1 ? 'is' : 'are'} allowed!`,
title: this.$baseText('nodeView.showMessage.showMaxNodeTypeError.title'),
message: this.$baseText(
maxNodes === 1
? 'nodeView.showMessage.showMaxNodeTypeError.message.singular'
: 'nodeView.showMessage.showMaxNodeTypeError.message.plural',
{
interpolate: {
maxNodes: maxNodes!.toString(),
nodeTypeDataDisplayName: nodeTypeData.displayName,
},
},
),
type: 'error',
duration: 0,
});
@ -1228,8 +1295,11 @@ export default mixins(
if (nodeTypeData === null) {
this.$showMessage({
title: 'Could not create node!',
message: `Node of type "${nodeTypeName}" could not be created as it is not known.`,
title: this.$baseText('nodeView.showMessage.addNodeButton.title'),
message: this.$baseText(
'nodeView.showMessage.addNodeButton.message',
{ interpolate: { nodeTypeName } },
),
type: 'error',
});
return;
@ -1361,7 +1431,7 @@ export default mixins(
'Label',
{
id: 'drop-add-node',
label: 'Drop connection<br />to create node',
label: this.$baseText('nodeView.dropConnectionToCreateNode'),
cssClass: 'drop-add-node-label',
location: 0.5,
},
@ -1466,7 +1536,7 @@ export default mixins(
'Label',
{
id: 'remove-connection',
label: '<span class="delete-connection clickable" title="Delete Connection">x</span>',
label: `<span class="delete-connection clickable" title="${this.$baseText('nodeView.deleteConnection')}">x</span>`,
cssClass: 'remove-connection-label',
visible: false,
events: {
@ -1644,7 +1714,13 @@ export default mixins(
const result = this.$store.getters.getStateIsDirty;
if(result) {
const importConfirm = await this.confirmMessage(`When you switch workflows your current workflow changes will be lost.`, 'Save your Changes?', 'warning', 'Yes, switch workflows and forget changes');
const importConfirm = await this.confirmMessage(
this.$baseText('nodeView.confirmMessage.initView.message'),
this.$baseText('nodeView.confirmMessage.initView.headline'),
'warning',
this.$baseText('nodeView.confirmMessage.initView.confirmButtonText'),
this.$baseText('nodeView.confirmMessage.initView.cancelButtonText'),
);
if (importConfirm === false) {
return Promise.resolve();
}
@ -1674,8 +1750,7 @@ export default mixins(
window.addEventListener("beforeunload", (e) => {
if(this.$store.getters.getStateIsDirty === true) {
const confirmationMessage = 'It looks like you have been editing something. '
+ 'If you leave before saving, your changes will be lost.';
const confirmationMessage = this.$baseText('nodeView.itLooksLikeYouHaveBeenEditingSomething');
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
} else {
@ -1853,13 +1928,17 @@ export default mixins(
},
async renameNodePrompt (currentName: string) {
try {
const promptResponsePromise = this.$prompt('New Name:', `Rename Node: "${currentName}"`, {
customClass: 'rename-prompt',
confirmButtonText: 'Rename',
cancelButtonText: 'Cancel',
inputErrorMessage: 'Invalid Name',
inputValue: currentName,
});
const promptResponsePromise = this.$prompt(
this.$baseText('nodeView.prompt.newName') + ':',
this.$baseText('nodeView.prompt.renameNode') + `: ${currentName}`,
{
customClass: 'rename-prompt',
confirmButtonText: this.$baseText('nodeView.prompt.rename'),
cancelButtonText: this.$baseText('nodeView.prompt.cancel'),
inputErrorMessage: this.$baseText('nodeView.prompt.invalidName'),
inputValue: currentName,
},
);
// Wait till it had time to display
await Vue.nextTick();
@ -1990,7 +2069,7 @@ export default mixins(
try {
nodeParameters = NodeHelpers.getNodeParameters(nodeType.properties, node.parameters, true, false);
} catch (e) {
console.error(`There was a problem loading the node-parameters of node: "${node.name}"`); // eslint-disable-line no-console
console.error(this.$baseText('nodeView.thereWasAProblemLoadingTheNodeParametersOfNode') + `: "${node.name}"`); // eslint-disable-line no-console
console.error(e); // eslint-disable-line no-console
}
node.parameters = nodeParameters !== null ? nodeParameters : {};
@ -2065,7 +2144,9 @@ export default mixins(
if (!data.nodes) {
// No nodes to add
throw new Error('No nodes given to add!');
throw new Error(
this.$baseText('nodeView.noNodesGivenToAdd'),
);
}
// Get how many of the nodes of the types which have
@ -2338,7 +2419,11 @@ export default mixins(
try {
await Promise.all(loadPromises);
} catch (error) {
this.$showError(error, 'Init Problem', 'There was a problem loading init data:');
this.$showError(
error,
this.$baseText('nodeView.showError.mounted1.title'),
this.$baseText('nodeView.showError.mounted1.message') + ':',
);
return;
}
@ -2347,7 +2432,11 @@ export default mixins(
this.initNodeView();
await this.initView();
} catch (error) {
this.$showError(error, 'Init Problem', 'There was a problem initializing the workflow:');
this.$showError(
error,
this.$baseText('nodeView.showError.mounted2.title'),
this.$baseText('nodeView.showError.mounted2.message') + ':',
);
}
this.stopLoading();