fix(editor): Add back credential type icon (no-changelog) (#9704)

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;