From 9ce526e784a6e61ed0f5b0a9ddb9d4ea21584ab2 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Fri, 20 Jan 2023 17:07:28 +0100
Subject: [PATCH] fix(editor): Making parameter input components label
 configurable (#5195)

fix(editor): Making parameter input component label configurable
---
 .../components/CredentialEdit/CredentialInputs.vue  | 13 ++++++++++---
 .../src/components/ParameterInputExpanded.vue       |  9 ++++++++-
 .../editor-ui/src/components/ParameterInputFull.vue | 10 ++++++++--
 packages/workflow/src/Interfaces.ts                 |  4 ++++
 4 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue
index 61ded6a2e..7b5451f03 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue
@@ -15,6 +15,7 @@
 				:value="credentialData[parameter.name]"
 				:documentationUrl="documentationUrl"
 				:showValidationWarnings="showValidationWarnings"
+				:label="label"
 				eventSource="credentials"
 				@change="valueChanged"
 			/>
@@ -24,9 +25,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
-
-import { IUpdateInformation } from '../../Interface';
-
+import { IParameterLabel } from 'n8n-workflow';
+import { IUpdateInformation } from '@/Interface';
 import ParameterInputExpanded from '../ParameterInputExpanded.vue';
 
 export default Vue.extend({
@@ -40,6 +40,13 @@ export default Vue.extend({
 	components: {
 		ParameterInputExpanded,
 	},
+	data(): { label: IParameterLabel } {
+		return {
+			label: {
+				size: 'medium',
+			},
+		};
+	},
 	methods: {
 		valueChanged(parameterData: IUpdateInformation) {
 			const name = parameterData.name.split('.').pop();
diff --git a/packages/editor-ui/src/components/ParameterInputExpanded.vue b/packages/editor-ui/src/components/ParameterInputExpanded.vue
index 1a5ce9e1d..a1e45e79c 100644
--- a/packages/editor-ui/src/components/ParameterInputExpanded.vue
+++ b/packages/editor-ui/src/components/ParameterInputExpanded.vue
@@ -6,6 +6,7 @@
 		:showTooltip="focused"
 		:showOptions="menuExpanded"
 		:data-test-id="parameter.name"
+		:size="label.size"
 	>
 		<template #options>
 			<parameter-options
@@ -60,7 +61,7 @@ import ParameterOptions from './ParameterOptions.vue';
 import Vue, { PropType } from 'vue';
 import ParameterInputWrapper from './ParameterInputWrapper.vue';
 import { isValueExpression } from '@/utils';
-import { INodeParameterResourceLocator, INodeProperties } from 'n8n-workflow';
+import { INodeParameterResourceLocator, INodeProperties, IParameterLabel } from 'n8n-workflow';
 import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows';
 
@@ -84,6 +85,12 @@ export default Vue.extend({
 		eventSource: {
 			type: String,
 		},
+		label: {
+			type: Object as PropType<IParameterLabel>,
+			default: () => ({
+				size: 'small',
+			}),
+		},
 	},
 	data() {
 		return {
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 14024ef67..3c8e3821a 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -5,7 +5,7 @@
 		:showTooltip="focused"
 		:showOptions="menuExpanded || focused || forceShowExpression"
 		:bold="false"
-		size="small"
+		:size="label.size"
 		color="text-dark"
 	>
 		<template #options>
@@ -85,7 +85,7 @@ import {
 	isValueExpression,
 } from '@/utils';
 import ParameterInputWrapper from '@/components/ParameterInputWrapper.vue';
-import { INodeParameters, INodeProperties, INodePropertyMode } from 'n8n-workflow';
+import { INodeParameters, INodeProperties, INodePropertyMode, IParameterLabel } from 'n8n-workflow';
 import { BaseTextKey } from '@/plugins/i18n';
 import { mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv';
@@ -133,6 +133,12 @@ export default mixins(showMessage).extend({
 		value: {
 			type: [Number, String, Boolean, Array, Object] as PropType<INodeParameters>,
 		},
+		label: {
+			type: Object as PropType<IParameterLabel>,
+			default: () => ({
+				size: 'small',
+			}),
+		},
 	},
 	created() {
 		const mappingTooltipDismissHandler = this.onMappingTooltipDismissed.bind(this);
diff --git a/packages/workflow/src/Interfaces.ts b/packages/workflow/src/Interfaces.ts
index 94a1b6bad..5169359a6 100644
--- a/packages/workflow/src/Interfaces.ts
+++ b/packages/workflow/src/Interfaces.ts
@@ -1132,6 +1132,10 @@ export interface IParameterDependencies {
 	[key: string]: string[];
 }
 
+export type IParameterLabel = {
+	size?: 'small' | 'medium';
+};
+
 export interface IPollResponse {
 	closeFunction?: () => Promise<void>;
 }