From f9aa340015ae231220eb4bfc58bbd42be117ae80 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Tue, 11 Jun 2024 20:16:27 +0200
Subject: [PATCH] fix(editor): Add back credential type icon (no-changelog)
 (#9704)

---
 cypress/e2e/39-projects.cy.ts                 |   5 +
 .../src/components/CredentialCard.vue         |   2 +-
 .../src/components/CredentialIcon.vue         | 166 ++++++++----------
 .../layouts/ResourcesListLayout.vue           |   2 +
 .../src/views/CredentialsView.test.ts         |  80 +++++++++
 .../editor-ui/src/views/CredentialsView.vue   |   2 +
 6 files changed, 167 insertions(+), 90 deletions(-)
 create mode 100644 packages/editor-ui/src/views/CredentialsView.test.ts

diff --git a/cypress/e2e/39-projects.cy.ts b/cypress/e2e/39-projects.cy.ts
index 1cbdd5772e..2f83b1ece0 100644
--- a/cypress/e2e/39-projects.cy.ts
+++ b/cypress/e2e/39-projects.cy.ts
@@ -68,6 +68,11 @@ describe('Projects', { disableAutoLogin: true }, () => {
 
 		credentialsModal.actions.close();
 		credentialsPage.getters.credentialCards().should('have.length', 1);
+		credentialsPage.getters
+			.credentialCards()
+			.first()
+			.find('.n8n-node-icon img')
+			.should('be.visible');
 
 		projects.getProjectTabWorkflows().click();
 		workflowsPage.getters.workflowCards().should('have.length', 1);
diff --git a/packages/editor-ui/src/components/CredentialCard.vue b/packages/editor-ui/src/components/CredentialCard.vue
index bac96df489..82e74c2e0f 100644
--- a/packages/editor-ui/src/components/CredentialCard.vue
+++ b/packages/editor-ui/src/components/CredentialCard.vue
@@ -130,7 +130,7 @@ function moveResource() {
 <template>
 	<n8n-card :class="$style.cardLink" @click="onClick">
 		<template #prepend>
-			<CredentialIcon :credential-type-name="credentialType ? credentialType.name : ''" />
+			<CredentialIcon :credential-type-name="credentialType?.name ?? ''" />
 		</template>
 		<template #header>
 			<n8n-heading tag="h2" bold :class="$style.cardHeading">
diff --git a/packages/editor-ui/src/components/CredentialIcon.vue b/packages/editor-ui/src/components/CredentialIcon.vue
index 038c5c1f40..641c0531c5 100644
--- a/packages/editor-ui/src/components/CredentialIcon.vue
+++ b/packages/editor-ui/src/components/CredentialIcon.vue
@@ -1,3 +1,80 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useCredentialsStore } from '@/stores/credentials.store';
+import { useRootStore } from '@/stores/n8nRoot.store';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import type { ICredentialType } from 'n8n-workflow';
+import NodeIcon from '@/components/NodeIcon.vue';
+import { getThemedValue } from '@/utils/nodeTypesUtils';
+import { useUIStore } from '@/stores/ui.store';
+
+const props = defineProps<{
+	credentialTypeName: string | null;
+}>();
+
+const credentialsStore = useCredentialsStore();
+const nodeTypesStore = useNodeTypesStore();
+const rootStore = useRootStore();
+const uiStore = useUIStore();
+
+const credentialWithIcon = computed(() => getCredentialWithIcon(props.credentialTypeName));
+
+const filePath = computed(() => {
+	const themeIconUrl = getThemedValue(credentialWithIcon.value?.iconUrl, uiStore.appliedTheme);
+
+	if (!themeIconUrl) {
+		return null;
+	}
+
+	return rootStore.getBaseUrl + themeIconUrl;
+});
+
+const relevantNode = computed(() => {
+	const icon = credentialWithIcon.value?.icon;
+	if (typeof icon === 'string' && icon.startsWith('node:')) {
+		const nodeType = icon.replace('node:', '');
+		return nodeTypesStore.getNodeType(nodeType);
+	}
+	if (!props.credentialTypeName) {
+		return null;
+	}
+
+	const nodesWithAccess = credentialsStore.getNodesWithAccess(props.credentialTypeName);
+	if (nodesWithAccess.length) {
+		return nodesWithAccess[0];
+	}
+
+	return null;
+});
+
+function getCredentialWithIcon(name: string | null): ICredentialType | null {
+	if (!name) {
+		return null;
+	}
+
+	const type = credentialsStore.getCredentialTypeByName(name);
+
+	if (!type) {
+		return null;
+	}
+
+	if (type.icon ?? type.iconUrl) {
+		return type;
+	}
+
+	if (type.extends) {
+		let parentCred = null;
+		type.extends.forEach((iconName) => {
+			parentCred = getCredentialWithIcon(iconName);
+			if (parentCred !== null) return;
+		});
+		return parentCred;
+	}
+
+	return null;
+}
+</script>
+
 <template>
 	<div>
 		<img v-if="filePath" :class="$style.credIcon" :src="filePath" />
@@ -6,95 +83,6 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
-
-import { useCredentialsStore } from '@/stores/credentials.store';
-import { useRootStore } from '@/stores/n8nRoot.store';
-import { useNodeTypesStore } from '@/stores/nodeTypes.store';
-import type { ICredentialType, INodeTypeDescription } from 'n8n-workflow';
-import NodeIcon from '@/components/NodeIcon.vue';
-import { getThemedValue } from '@/utils/nodeTypesUtils';
-import { useUIStore } from '@/stores/ui.store';
-
-export default defineComponent({
-	components: {
-		NodeIcon,
-	},
-	props: {
-		credentialTypeName: {
-			type: String,
-		},
-	},
-	computed: {
-		...mapStores(useCredentialsStore, useNodeTypesStore, useRootStore, useUIStore),
-		credentialWithIcon(): ICredentialType | null {
-			return this.credentialTypeName ? this.getCredentialWithIcon(this.credentialTypeName) : null;
-		},
-
-		filePath(): string | null {
-			const themeIconUrl = getThemedValue(
-				this.credentialWithIcon?.iconUrl,
-				this.uiStore.appliedTheme,
-			);
-
-			if (!themeIconUrl) {
-				return null;
-			}
-
-			return this.rootStore.getBaseUrl + themeIconUrl;
-		},
-
-		relevantNode(): INodeTypeDescription | null {
-			const icon = this.credentialWithIcon?.icon;
-			if (typeof icon === 'string' && icon.startsWith('node:')) {
-				const nodeType = icon.replace('node:', '');
-				return this.nodeTypesStore.getNodeType(nodeType);
-			}
-			if (!this.credentialTypeName) {
-				return null;
-			}
-
-			const nodesWithAccess = this.credentialsStore.getNodesWithAccess(this.credentialTypeName);
-			if (nodesWithAccess.length) {
-				return nodesWithAccess[0];
-			}
-
-			return null;
-		},
-	},
-	methods: {
-		getCredentialWithIcon(name: string | null): ICredentialType | null {
-			if (!name) {
-				return null;
-			}
-
-			const type = this.credentialsStore.getCredentialTypeByName(name);
-
-			if (!type) {
-				return null;
-			}
-
-			if (type.icon || type.iconUrl) {
-				return type;
-			}
-
-			if (type.extends) {
-				let parentCred = null;
-				type.extends.forEach((name) => {
-					parentCred = this.getCredentialWithIcon(name);
-					if (parentCred !== null) return;
-				});
-				return parentCred;
-			}
-
-			return null;
-		},
-	},
-});
-</script>
-
 <style lang="scss" module>
 .credIcon {
 	height: 26px;
diff --git a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
index 249cf05709..493ec932db 100644
--- a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
+++ b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
@@ -169,6 +169,8 @@ export type IResource = {
 	createdAt?: string;
 	homeProject?: ProjectSharingData;
 	scopes?: Scope[];
+	type?: string;
+	sharedWithProjects?: ProjectSharingData[];
 };
 
 interface IFilters {
diff --git a/packages/editor-ui/src/views/CredentialsView.test.ts b/packages/editor-ui/src/views/CredentialsView.test.ts
new file mode 100644
index 0000000000..f2338f9d95
--- /dev/null
+++ b/packages/editor-ui/src/views/CredentialsView.test.ts
@@ -0,0 +1,80 @@
+import { createComponentRenderer } from '@/__tests__/render';
+import { createTestingPinia } from '@pinia/testing';
+import type { Scope } from '@n8n/permissions';
+import { useCredentialsStore } from '@/stores/credentials.store';
+import type { ProjectSharingData } from '@/types/projects.types';
+import CredentialsView from '@/views/CredentialsView.vue';
+import ResourcesListLayout from '@/components/layouts/ResourcesListLayout.vue';
+
+vi.mock('@/components/layouts/ResourcesListLayout.vue', async (importOriginal) => {
+	const original = await importOriginal<typeof ResourcesListLayout>();
+	return {
+		default: {
+			...original.default,
+			render: vi.fn(),
+			setup: vi.fn(),
+		},
+	};
+});
+
+const renderComponent = createComponentRenderer(CredentialsView);
+
+describe('CredentialsView', () => {
+	describe('with fake stores', () => {
+		let credentialsStore: ReturnType<typeof useCredentialsStore>;
+
+		beforeEach(() => {
+			createTestingPinia();
+			credentialsStore = useCredentialsStore();
+		});
+
+		afterAll(() => {
+			vi.resetAllMocks();
+		});
+		it('should have ResourcesListLayout render with necessary keys from credential object', () => {
+			const homeProject: ProjectSharingData = {
+				id: '1',
+				name: 'test',
+				type: 'personal',
+				createdAt: '2021-05-05T00:00:00Z',
+				updatedAt: '2021-05-05T00:00:00Z',
+			};
+			const scopes: Scope[] = ['credential:move', 'credential:delete'];
+			const sharedWithProjects: ProjectSharingData[] = [
+				{
+					id: '2',
+					name: 'test 2',
+					type: 'personal',
+					createdAt: '2021-05-05T00:00:00Z',
+					updatedAt: '2021-05-05T00:00:00Z',
+				},
+			];
+			vi.spyOn(credentialsStore, 'allCredentials', 'get').mockReturnValue([
+				{
+					id: '1',
+					name: 'test',
+					type: 'test',
+					createdAt: '2021-05-05T00:00:00Z',
+					updatedAt: '2021-05-05T00:00:00Z',
+					homeProject,
+					scopes,
+					sharedWithProjects,
+				},
+			]);
+			renderComponent();
+			expect(ResourcesListLayout.setup).toHaveBeenCalledWith(
+				expect.objectContaining({
+					resources: [
+						expect.objectContaining({
+							type: 'test',
+							homeProject,
+							scopes,
+							sharedWithProjects,
+						}),
+					],
+				}),
+				null,
+			);
+		});
+	});
+});
diff --git a/packages/editor-ui/src/views/CredentialsView.vue b/packages/editor-ui/src/views/CredentialsView.vue
index fb4c6cdb4d..b876858d7c 100644
--- a/packages/editor-ui/src/views/CredentialsView.vue
+++ b/packages/editor-ui/src/views/CredentialsView.vue
@@ -116,6 +116,8 @@ export default defineComponent({
 				createdAt: credential.createdAt,
 				homeProject: credential.homeProject,
 				scopes: credential.scopes,
+				type: credential.type,
+				sharedWithProjects: credential.sharedWithProjects,
 			}));
 		},
 		allCredentialTypes(): ICredentialType[] {