🔀 Merge branch 'master' into arpadgabor-feat/monaco

packages/editor-ui/src/components/ParameterInput.vue

@@ -16,7 +16,7 @@
 			<code-edit v-if="codeEditDialogVisible" :value="value" :parameter="parameter" @closeDialog="closeCodeEditDialog" @valueChanged="expressionUpdated"></code-edit>
 			<text-edit :dialogVisible="textEditDialogVisible" :value="value" :parameter="parameter" @closeDialog="closeTextEditDialog" @valueChanged="expressionUpdated"></text-edit>
 
-			<div v-if="isEditor === true" class="clickable" @click="displayEditDialog()">
+			<div v-if="isEditor === true" class="code-edit clickable" @click="displayEditDialog()">
 				<prism-editor v-if="!codeEditDialogVisible" :lineNumbers="true" :readonly="true" :code="displayValue" language="js"></prism-editor>
 			</div>
 
@@ -35,10 +35,10 @@
 				@focus="setFocus"
 				@blur="onBlur"
 				:title="displayTitle"
-				:placeholder="isValueExpression?'':parameter.placeholder"
+				:placeholder="isValueExpression ? '' : getPlaceholder()"
 			>
 				<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="$locale.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 ? getPlaceholder() : $locale.baseText('parameterInput.selectDateAndTime')"
 			:picker-options="dateTimePickerOptions"
 			@change="valueChanged"
 			@focus="setFocus"
@@ -124,11 +124,13 @@
 				v-for="option in parameterOptions"
 				:value="option.value"
 				:key="option.value"
-				:label="option.name"
+				:label="getOptionsOptionDisplayName(option)"
 			>
 				<div class="list-option">
-					<div class="option-headline">{{ option.name }}</div>
-					<div v-if="option.description" class="option-description" v-html="option.description"></div>
+					<div class="option-headline">
+						{{ getOptionsOptionDisplayName(option) }}
+					</div>
+					<div v-if="option.description" class="option-description" v-html="getOptionsOptionDescription(option)"></div>
 				</div>
 			</n8n-option>
 		</n8n-select>
@@ -148,10 +150,10 @@
 			@blur="onBlur"
 			:title="displayTitle"
 		>
-			<n8n-option v-for="option in parameterOptions" :value="option.value" :key="option.value" :label="option.name" >
+			<n8n-option v-for="option in parameterOptions" :value="option.value" :key="option.value" :label="getOptionsOptionDisplayName(option)">
 				<div class="list-option">
-					<div class="option-headline">{{ option.name }}</div>
-					<div v-if="option.description" class="option-description" v-html="option.description"></div>
+					<div class="option-headline">{{ getOptionsOptionDisplayName(option) }}</div>
+					<div v-if="option.description" class="option-description" v-html="getOptionsOptionDescription(option)"></div>
 				</div>
 			</n8n-option>
 		</n8n-select>
@@ -169,7 +171,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="`${$locale.baseText('parameterInput.issues')}:<br />&nbsp;&nbsp;- ` + getIssues.join('<br />&nbsp;&nbsp;- ')"></div>
 			<font-awesome-icon icon="exclamation-triangle" />
 		</n8n-tooltip>
 	</div>
@@ -177,13 +179,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="$locale.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">{{ $locale.baseText('parameterInput.addExpression') }}</el-dropdown-item>
+					<el-dropdown-item command="removeExpression" v-if="parameter.noDataExpression !== true && isValueExpression">{{ $locale.baseText('parameterInput.removeExpression') }}</el-dropdown-item>
+					<el-dropdown-item command="refreshOptions" v-if="Boolean(remoteMethod)">{{ $locale.baseText('parameterInput.refreshList') }}</el-dropdown-item>
+					<el-dropdown-item command="resetValue" :disabled="isDefault" divided>{{ $locale.baseText('parameterInput.resetValue') }}</el-dropdown-item>
 				</el-dropdown-menu>
 			</el-dropdown>
 	</div>
@@ -240,6 +242,7 @@ export default mixins(
 			'value',
 			'hideIssues', // boolean
 			'errorHighlight',
+			'isForCredential', // boolean
 		],
 		data () {
 			return {
@@ -255,14 +258,14 @@ export default mixins(
 				dateTimePickerOptions: {
 					shortcuts: [
 						{
-							text: 'Today',
+							text: 'Today', // TODO
 							// tslint:disable-next-line:no-any
 							onClick (picker: any) {
 								picker.$emit('pick', new Date());
 							},
 						},
 						{
-							text: 'Yesterday',
+							text: 'Yesterday', // TODO
 							// tslint:disable-next-line:no-any
 							onClick (picker: any) {
 								const date = new Date();
@@ -271,7 +274,7 @@ export default mixins(
 							},
 						},
 						{
-							text: 'A week ago',
+							text: 'A week ago', // TODO
 							// tslint:disable-next-line:no-any
 							onClick (picker: any) {
 								const date = new Date();
@@ -325,20 +328,26 @@ export default mixins(
 				return this.$store.getters.activeNode;
 			},
 			displayTitle (): string {
-				let title = `Parameter: "${this.shortPath}"`;
-				if (this.getIssues.length) {
-					title += ` has issues`;
-					if (this.isValueExpression === true) {
-						title += ` and expression`;
-					}
-					title += `!`;
-				} else {
-					if (this.isValueExpression === true) {
-						title += ` has expression`;
-					}
+				const interpolation = { interpolate: { shortPath: this.shortPath } };
+
+				if (this.getIssues.length && this.isValueExpression) {
+					return this.$locale.baseText(
+						'parameterInput.parameterHasIssuesAndExpression',
+						interpolation,
+					);
+				} else if (this.getIssues.length && !this.isValueExpression) {
+					return this.$locale.baseText(
+						'parameterInput.parameterHasIssues',
+						interpolation,
+					);
+				} else if (!this.getIssues.length && this.isValueExpression) {
+					return this.$locale.baseText(
+						'parameterInput.parameterHasExpression',
+						interpolation,
+					);
 				}
 
-				return title;
+				return this.$locale.baseText('parameterInput.parameter', interpolation);
 			},
 			displayValue (): string | number | boolean | null {
 				if (this.remoteParameterOptionsLoading === true) {
@@ -346,7 +355,7 @@ export default mixins(
 					// to user that the data is loading. If not it would
 					// display the user the key instead of the value it
 					// represents
-					return 'Loading options...';
+					return this.$locale.baseText('parameterInput.loadingOptions');
 				}
 
 				let returnValue;
@@ -415,7 +424,7 @@ export default mixins(
 				try {
 					computedValue = this.resolveExpression(this.value) as NodeParameterValue;
 				} catch (error) {
-					computedValue = `[ERROR: ${error.message}]`;
+					computedValue = `[${this.$locale.baseText('parameterInput.error')}}: ${error.message}]`;
 				}
 
 				// Try to convert it into the corret type
@@ -515,8 +524,9 @@ export default mixins(
 				const classes = [];
 				const rows = this.getArgument('rows');
 				const isTextarea = this.parameter.type === 'string' && rows !== undefined;
+				const isSwitch = this.parameter.type === 'boolean' && !this.isValueExpression;
 
-				if (!isTextarea) {
+				if (!isTextarea && !isSwitch) {
 					classes.push('parameter-value-container');
 				}
 				if (this.isValueExpression) {
@@ -558,6 +568,22 @@ export default mixins(
 			},
 		},
 		methods: {
+			getPlaceholder(): string {
+				return this.isForCredential
+					? this.$locale.credText().placeholder(this.parameter)
+					: this.$locale.nodeText().placeholder(this.parameter);
+			},
+			getOptionsOptionDisplayName(option: { value: string; name: string }): string {
+				return this.isForCredential
+					? this.$locale.credText().optionsOptionDisplayName(this.parameter, option)
+					: this.$locale.nodeText().optionsOptionDisplayName(this.parameter, option);
+			},
+			getOptionsOptionDescription(option: { value: string; description: string }): string {
+				return this.isForCredential
+					? this.$locale.credText().optionsOptionDescription(this.parameter, option)
+					: this.$locale.nodeText().optionsOptionDescription(this.parameter, option);
+			},
+
 			async loadRemoteParameterOptions () {
 				if (this.node === null || this.remoteMethod === undefined || this.remoteParameterOptionsLoading) {
 					return;
@@ -664,6 +690,8 @@ export default mixins(
 						(this.$refs.inputField.$el.querySelector(this.getStringInputType === 'textarea' ? 'textarea' : 'input') as HTMLInputElement).focus();
 					}
 				});
+
+				this.$emit('focus');
 			},
 			rgbaToHex (value: string): string | null {
 				// Convert rgba to hex from: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
@@ -775,8 +803,12 @@ export default mixins(
 
 <style scoped lang="scss">
 
+.code-edit {
+	font-size: var(--font-size-xs);
+}
+
 .switch-input {
-	margin: 5px 0;
+	margin: 2px 0;
 }
 
 .parameter-value-container {
@@ -804,7 +836,7 @@ export default mixins(
 	text-align: right;
 	float: right;
 	color: #ff8080;
-	font-size: 1.2em;
+	font-size: var(--font-size-s);
 }
 
 ::v-deep .color-input {