fix(editor): Render credential-only nodes when loading from the backend (#13689)

Co-authored-by: Michael Kret <michael.k@radency.com>

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

@@ -12,7 +12,13 @@ import type { IExecutionResponse, INodeUi, IWorkflowDb, IWorkflowSettings } from
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 
 import { SEND_AND_WAIT_OPERATION } from 'n8n-workflow';
-import type { IPinData, ExecutionSummary, IConnection, INodeExecutionData } from 'n8n-workflow';
+import type {
+	IPinData,
+	ExecutionSummary,
+	IConnection,
+	INodeExecutionData,
+	INode,
+} from 'n8n-workflow';
 import { stringSizeInBytes } from '@/utils/typesUtils';
 import { dataPinningEventBus } from '@/event-bus';
 import { useUIStore } from '@/stores/ui.store';
@@ -681,6 +687,34 @@ describe('useWorkflowsStore', () => {
 		});
 	});
 
+	describe('setNodes()', () => {
+		it('should transform credential-only nodes', () => {
+			const setNodeId = '1';
+			const credentialOnlyNodeId = '2';
+			workflowsStore.setNodes([
+				mock<INode>({
+					id: setNodeId,
+					name: 'Edit Fields',
+					type: 'n8n-nodes-base.set',
+				}),
+				mock<INode>({
+					id: credentialOnlyNodeId,
+					name: 'AlienVault Request',
+					type: 'n8n-nodes-base.httpRequest',
+					extendsCredential: 'alienVaultApi',
+				}),
+			]);
+
+			expect(workflowsStore.workflow.nodes[0].id).toEqual(setNodeId);
+			expect(workflowsStore.workflow.nodes[1].id).toEqual(credentialOnlyNodeId);
+			expect(workflowsStore.workflow.nodes[1].type).toEqual('n8n-creds-base.alienVaultApi');
+			expect(workflowsStore.nodeMetadata).toEqual({
+				'AlienVault Request': { pristine: true },
+				'Edit Fields': { pristine: true },
+			});
+		});
+	});
+
 	describe('updateNodeAtIndex', () => {
 		it.each([
 			{

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

@@ -1117,6 +1117,10 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 				nodeHelpers.assignNodeId(node);
 			}
 
+			if (node.extendsCredential) {
+				node.type = getCredentialOnlyNodeTypeName(node.extendsCredential);
+			}
+
 			if (!nodeMetadata.value[node.name]) {
 				nodeMetadata.value[node.name] = { pristine: true };
 			}
@@ -1190,10 +1194,6 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 			return;
 		}
 
-		if (nodeData.extendsCredential) {
-			nodeData.type = getCredentialOnlyNodeTypeName(nodeData.extendsCredential);
-		}
-
 		workflow.value.nodes.push(nodeData);
 		// Init node metadata
 		if (!nodeMetadata.value[nodeData.name]) {