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/design-system/src/components/N8nNodeIcon/NodeIcon.vue

@@ -24,6 +24,9 @@
 				<div v-if="type !== 'unknown'" :class="$style.icon">
 					<img v-if="type === 'file'" :src="src" :class="$style.nodeIconImage" />
 					<font-awesome-icon v-else :icon="name" :style="fontStyleData" />
+					<div v-if="badge" :class="$style.badge" :style="badgeStyleData">
+						<n8n-node-icon :type="badge.type" :src="badge.src" :size="badgeSize"></n8n-node-icon>
+					</div>
 				</div>
 				<div v-else :class="$style.nodeIconPlaceholder">
 					{{ nodeTypeName ? nodeTypeName.charAt(0) : '?' }}
@@ -35,9 +38,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import N8nTooltip from '../N8nTooltip';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { defineComponent, type PropType } from 'vue';
+import N8nTooltip from '../N8nTooltip';
 
 export default defineComponent({
 	name: 'n8n-node-icon',
@@ -75,6 +78,7 @@ export default defineComponent({
 		showTooltip: {
 			type: Boolean,
 		},
+		badge: { type: Object as PropType<{ src: string; type: string }> },
 	},
 	computed: {
 		iconStyleData(): Record<string, string> {
@@ -92,6 +96,25 @@ export default defineComponent({
 				'line-height': `${this.size}px`,
 			};
 		},
+		badgeSize(): number {
+			switch (this.size) {
+				case 40:
+					return 18;
+				case 24:
+					return 10;
+				case 18:
+				default:
+					return 8;
+			}
+		},
+		badgeStyleData(): Record<string, string> {
+			const size = this.badgeSize;
+			return {
+				padding: `${Math.floor(size / 4)}px`,
+				right: `-${Math.floor(size / 2)}px`,
+				bottom: `-${Math.floor(size / 2)}px`,
+			};
+		},
 		fontStyleData(): Record<string, string> {
 			if (!this.size) {
 				return {};
@@ -113,7 +136,6 @@ export default defineComponent({
 	color: var(--node-icon-color, #444);
 	line-height: var(--node-icon-size, 26px);
 	font-size: 1.1em;
-	overflow: hidden;
 	text-align: center;
 	font-weight: bold;
 	font-size: 20px;
@@ -125,6 +147,7 @@ export default defineComponent({
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	position: relative;
 
 	svg {
 		max-width: 100%;
@@ -145,6 +168,12 @@ export default defineComponent({
 	max-height: 100%;
 }
 
+.badge {
+	position: absolute;
+	background: var(--color-background-node-icon-badge, var(--color-background-base));
+	border-radius: 50%;
+}
+
 .circle {
 	border-radius: 50%;
 }