fix(editor): Making parameter input components label configurable (#5195)

fix(editor): Making parameter input component label configurable

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 { IParameterLabel } from 'n8n-workflow';
-import { IUpdateInformation } from '../../Interface';
+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();

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 {

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);

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>;
 }