feat(editor): Add HTTP request nodes for credentials without a node (#7157)

Github issue / Community forum post (link here to close automatically):

---------

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

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

@@ -9,6 +9,7 @@
 		:circle="circle"
 		:nodeTypeName="nodeType ? nodeType.displayName : ''"
 		:showTooltip="showTooltip"
+		:badge="badge"
 		@click="(e) => $emit('click')"
 	></n8n-node-icon>
 </template>
@@ -18,7 +19,7 @@ import type { IVersionNode } from '@/Interface';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import type { INodeTypeDescription } from 'n8n-workflow';
 import { mapStores } from 'pinia';
-import { defineComponent } from 'vue';
+import { defineComponent, type PropType } from 'vue';
 
 interface NodeIconSource {
 	path?: string;
@@ -29,7 +30,9 @@ interface NodeIconSource {
 export default defineComponent({
 	name: 'NodeIcon',
 	props: {
-		nodeType: {},
+		nodeType: {
+			type: Object as PropType<INodeTypeDescription | IVersionNode | null>,
+		},
 		size: {
 			type: Number,
 			required: false,
@@ -54,7 +57,7 @@ export default defineComponent({
 	computed: {
 		...mapStores(useRootStore),
 		type(): string {
-			const nodeType = this.nodeType as INodeTypeDescription | IVersionNode | null;
+			const nodeType = this.nodeType;
 			let iconType = 'unknown';
 			if (nodeType) {
 				if (nodeType.iconUrl) return 'file';
@@ -67,8 +70,8 @@ export default defineComponent({
 			return iconType;
 		},
 		color(): string {
-			const nodeType = this.nodeType as INodeTypeDescription | IVersionNode | null;
-			if (nodeType && nodeType.defaults && nodeType.defaults.color) {
+			const nodeType = this.nodeType;
+			if (nodeType?.defaults?.color) {
 				return nodeType.defaults.color.toString();
 			}
 			if (this.colorDefault) {
@@ -77,7 +80,7 @@ export default defineComponent({
 			return '';
 		},
 		iconSource(): NodeIconSource {
-			const nodeType = this.nodeType as INodeTypeDescription | IVersionNode | null;
+			const nodeType = this.nodeType;
 			const baseUrl = this.rootStore.getBaseUrl;
 			const iconSource = {} as NodeIconSource;
 
@@ -104,6 +107,14 @@ export default defineComponent({
 			}
 			return iconSource;
 		},
+		badge(): { src: string; type: string } | undefined {
+			const nodeType = this.nodeType as INodeTypeDescription;
+			if (nodeType && 'badgeIconUrl' in nodeType && nodeType.badgeIconUrl) {
+				return { type: 'file', src: this.rootStore.getBaseUrl + nodeType.badgeIconUrl };
+			}
+
+			return undefined;
+		},
 	},
 });
 </script>