feat(core): Add special @tool displayOption (#14318)

Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>

packages/frontend/editor-ui/src/components/CredentialEdit/CredentialEdit.vue

@@ -663,6 +663,7 @@ async function saveCredential(): Promise<ICredentialsResponse | null> {
 		false,
 		false,
 		null,
+		null,
 	);
 
 	assert(credentialTypeName.value);

packages/frontend/editor-ui/src/components/NodeSettings.vue

@@ -337,7 +337,7 @@ const removeMismatchedOptionValues = (
 			);
 		}
 
-		if (!hasValidOptions && displayParameter(nodeParameterValues, prop, node.value)) {
+		if (!hasValidOptions && displayParameter(nodeParameterValues, prop, node.value, nodeType)) {
 			unset(nodeParameterValues as object, prop.name);
 		}
 	});
@@ -395,6 +395,7 @@ const valueChanged = (parameterData: IUpdateInformation) => {
 			false,
 			false,
 			_node,
+			nodeType,
 		);
 
 		const oldNodeParameters = Object.assign({}, nodeParameters);
@@ -453,6 +454,7 @@ const valueChanged = (parameterData: IUpdateInformation) => {
 			true,
 			false,
 			_node,
+			nodeType,
 		);
 
 		for (const key of Object.keys(nodeParameters as object)) {
@@ -487,6 +489,7 @@ const valueChanged = (parameterData: IUpdateInformation) => {
 			false,
 			false,
 			_node,
+			nodeType,
 		);
 		const oldNodeParameters = Object.assign({}, nodeParameters);
 
@@ -535,6 +538,7 @@ const valueChanged = (parameterData: IUpdateInformation) => {
 			true,
 			false,
 			_node,
+			nodeType,
 		);
 
 		for (const key of Object.keys(nodeParameters as object)) {

packages/frontend/editor-ui/src/components/ParameterInput.test.ts

@@ -81,6 +81,7 @@ describe('ParameterInput.vue', () => {
 		};
 		mockNodeTypesState = {
 			allNodeTypes: [],
+			getNodeType: vi.fn().mockReturnValue(null),
 		};
 		createAppModals();
 	});

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

@@ -346,6 +346,7 @@ const getIssues = computed<string[]>(() => {
 		node.value.parameters,
 		newPath.join('.'),
 		node.value,
+		nodeTypesStore.getNodeType(node.value.type, node.value.typeVersion),
 	);
 
 	if (props.parameter.type === 'credentialsSelect' && displayValue.value === '') {

packages/frontend/editor-ui/src/components/ParameterInputList.vue

@@ -466,7 +466,13 @@ function getParameterIssues(parameter: INodeProperties): string[] {
 	if (!node.value || !showIssuesInLabelFor.includes(parameter.type)) {
 		return [];
 	}
-	const issues = NodeHelpers.getParameterIssues(parameter, node.value.parameters, '', node.value);
+	const issues = NodeHelpers.getParameterIssues(
+		parameter,
+		node.value.parameters,
+		'',
+		node.value,
+		nodeType.value,
+	);
 
 	return issues.parameters?.[parameter.name] ?? [];
 }

packages/frontend/editor-ui/src/components/ResourceMapper/ResourceMapper.vue

@@ -407,6 +407,7 @@ function updateNodeIssues(): void {
 		const parameterIssues = NodeHelpers.getNodeParametersIssues(
 			nodeType.value?.properties ?? [],
 			props.node,
+			nodeType.value,
 		);
 		if (parameterIssues) {
 			ndvStore.updateNodeParameterIssues(parameterIssues);

packages/frontend/editor-ui/src/composables/useCanvasOperations.ts

@@ -874,6 +874,7 @@ export function useCanvasOperations({ router }: { router: ReturnType<typeof useR
 			true,
 			false,
 			node,
+			nodeTypeDescription,
 		);
 
 		node.parameters = nodeParameters ?? {};

packages/frontend/editor-ui/src/composables/useNodeHelpers.ts

@@ -106,7 +106,17 @@ export function useNodeHelpers() {
 		node: INodeUi | null,
 		displayKey: 'displayOptions' | 'disabledOptions' = 'displayOptions',
 	) {
-		return NodeHelpers.displayParameterPath(nodeValues, parameter, path, node, displayKey);
+		const nodeTypeDescription = node?.type
+			? nodeTypesStore.getNodeType(node.type, node.typeVersion)
+			: null;
+		return NodeHelpers.displayParameterPath(
+			nodeValues,
+			parameter,
+			path,
+			node,
+			nodeTypeDescription,
+			displayKey,
+		);
 	}
 
 	function getNodeIssues(
@@ -137,7 +147,7 @@ export function useNodeHelpers() {
 
 			// Add potential parameter issues
 			if (!ignoreIssues.includes('parameters')) {
-				nodeIssues = NodeHelpers.getNodeParametersIssues(nodeType.properties, node);
+				nodeIssues = NodeHelpers.getNodeParametersIssues(nodeType.properties, node, nodeType);
 			}
 
 			if (!ignoreIssues.includes('credentials')) {
@@ -287,6 +297,7 @@ export function useNodeHelpers() {
 		const fullNodeIssues: INodeIssues | null = NodeHelpers.getNodeParametersIssues(
 			localNodeType.properties,
 			node,
+			nodeType ?? null,
 		);
 
 		let newIssues: INodeIssueObjectProperty | null = null;

packages/frontend/editor-ui/src/composables/useWorkflowHelpers.ts

@@ -589,6 +589,7 @@ export function useWorkflowHelpers(options: { router: ReturnType<typeof useRoute
 				isCredentialOnly,
 				false,
 				node,
+				nodeType,
 			);
 			nodeData.parameters = nodeParameters !== null ? nodeParameters : {};
 

packages/frontend/editor-ui/src/stores/workflows.store.ts

@@ -1331,6 +1331,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 			true,
 			false,
 			latestNode,
+			nodeType,
 		);
 
 		if (latestNode) {

packages/frontend/editor-ui/src/utils/nodeViewUtils.ts

@@ -338,8 +338,7 @@ export function getGenericHints({
 			true,
 			false,
 			node,
-			undefined,
-			false,
+			nodeType,
 		);
 
 		const assignments =

packages/frontend/editor-ui/src/utils/nodes/nodeTransforms.ts

@@ -22,11 +22,17 @@ export function getNodeTypeDisplayableCredentials(
 	// credentials can have conditional requirements that depend on
 	// node parameters.
 	const nodeParameters =
-		NodeHelpers.getNodeParameters(nodeType.properties, node.parameters, true, false, node) ??
-		node.parameters;
+		NodeHelpers.getNodeParameters(
+			nodeType.properties,
+			node.parameters,
+			true,
+			false,
+			node,
+			nodeType,
+		) ?? node.parameters;
 
 	const displayableCredentials = nodeTypeCreds.filter((credentialTypeDescription) => {
-		return NodeHelpers.displayParameter(nodeParameters, credentialTypeDescription, node);
+		return NodeHelpers.displayParameter(nodeParameters, credentialTypeDescription, node, nodeType);
 	});
 
 	return displayableCredentials;