fix(editor): Fix credential icon for old node type version (#7843)

If a credential was for a node's older version, its icon was not shown.

packages/editor-ui/src/Interface.ts

@@ -1277,12 +1277,14 @@ export interface ISettingsState {
 	saveManualExecutions: boolean;
 }
 
-export interface INodeTypesState {
-	nodeTypes: {
-		[nodeType: string]: {
-			[version: number]: INodeTypeDescription;
-		};
+export type NodeTypesByTypeNameAndVersion = {
+	[nodeType: string]: {
+		[version: number]: INodeTypeDescription;
 	};
+};
+
+export interface INodeTypesState {
+	nodeTypes: NodeTypesByTypeNameAndVersion;
 }
 
 export interface ITemplateState {

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

@@ -44,8 +44,11 @@ export default defineComponent({
 				const nodeType = this.credentialWithIcon.icon.replace('node:', '');
 				return this.nodeTypesStore.getNodeType(nodeType);
 			}
-			const nodesWithAccess = this.credentialsStore.getNodesWithAccess(this.credentialTypeName);
+			if (!this.credentialTypeName) {
+				return null;
+			}
 
+			const nodesWithAccess = this.credentialsStore.getNodesWithAccess(this.credentialTypeName);
 			if (nodesWithAccess.length) {
 				return nodesWithAccess[0];
 			}

packages/editor-ui/src/components/__tests__/CredentialIcon.test.ts

@@ -0,0 +1,73 @@
+import { createComponentRenderer } from '@/__tests__/render';
+import CredentialIcon from '@/components/CredentialIcon.vue';
+import { STORES } from '@/constants';
+import { createTestingPinia } from '@pinia/testing';
+import * as testNodeTypes from './testData/nodeTypesTestData';
+import merge from 'lodash-es/merge';
+import { groupNodeTypesByNameAndType } from '@/utils/nodeTypes/nodeTypeTransforms';
+
+const defaultState = {
+	[STORES.CREDENTIALS]: {},
+	[STORES.NODE_TYPES]: {},
+};
+
+const renderComponent = createComponentRenderer(CredentialIcon, {
+	pinia: createTestingPinia({
+		initialState: defaultState,
+	}),
+	global: {
+		stubs: ['n8n-tooltip'],
+	},
+});
+
+describe('CredentialIcon', () => {
+	const findIcon = (baseElement: Element) => baseElement.querySelector('img');
+
+	it('shows correct icon for credential type that is for the latest node type version', () => {
+		const { baseElement } = renderComponent({
+			pinia: createTestingPinia({
+				initialState: merge(defaultState, {
+					[STORES.CREDENTIALS]: {},
+					[STORES.NODE_TYPES]: {
+						nodeTypes: groupNodeTypesByNameAndType([
+							testNodeTypes.twitterV1,
+							testNodeTypes.twitterV2,
+						]),
+					},
+				}),
+			}),
+			props: {
+				credentialTypeName: 'twitterOAuth2Api',
+			},
+		});
+
+		expect(findIcon(baseElement)).toHaveAttribute(
+			'src',
+			'/icons/n8n-nodes-base/dist/nodes/Twitter/x.svg',
+		);
+	});
+
+	it('shows correct icon for credential type that is for an older node type version', () => {
+		const { baseElement } = renderComponent({
+			pinia: createTestingPinia({
+				initialState: merge(defaultState, {
+					[STORES.CREDENTIALS]: {},
+					[STORES.NODE_TYPES]: {
+						nodeTypes: groupNodeTypesByNameAndType([
+							testNodeTypes.twitterV1,
+							testNodeTypes.twitterV2,
+						]),
+					},
+				}),
+			}),
+			props: {
+				credentialTypeName: 'twitterOAuth1Api',
+			},
+		});
+
+		expect(findIcon(baseElement)).toHaveAttribute(
+			'src',
+			'/icons/n8n-nodes-base/dist/nodes/Twitter/x.svg',
+		);
+	});
+});