Adds avatarUrl handling to the hidden refs popover

Author: nzaytsev

src/webviews/apps/plus/graph/GraphWrapper.tsx

@@ -99,19 +99,7 @@ import { GlGraphHover } from './hover/graphHover.react';
 import type { GraphMinimapDaySelectedEventDetail } from './minimap/minimap';
 import { GlGraphMinimapContainer } from './minimap/minimap-container.react';
 import { GlGraphSideBar } from './sidebar/sidebar.react';
-
-function getRemoteIcon(type: string | number) {
-	switch (type) {
-		case 'head':
-			return 'vm';
-		case 'remote':
-			return 'cloud';
-		case 'tag':
-			return 'tag';
-		default:
-			return '';
-	}
-}
+import { RemoteIcon } from './utils/RemoteIcon';
 
 export interface GraphWrapperProps {
 	nonce?: string;
@@ -1411,7 +1399,7 @@ export function GraphWrapper({
 														}}
 														className="flex-gap"
 													>
-														<CodeIcon icon={getRemoteIcon(ref.type)}></CodeIcon>
+														<RemoteIcon ref={ref} />
 														<span>{ref.name}</span>
 													</MenuItem>
 												) : (

src/webviews/apps/plus/graph/utils/RemoteIcon.tsx

@@ -0,0 +1,25 @@
+import type { GraphRefOptData } from '@gitkraken/gitkraken-components';
+import React from 'react';
+import { CodeIcon } from '../../../shared/components/code-icon.react';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function RemoteIcon({ ref }: Readonly<{ ref: GraphRefOptData }>) {
+	if (ref.avatarUrl) {
+		return <img alt={ref.name} style={{ width: 14, aspectRatio: 1 }} src={ref.avatarUrl} />;
+	}
+	let icon = '';
+	switch (ref.type) {
+		case 'head':
+			icon = 'vm';
+			break;
+		case 'remote':
+			icon = 'cloud';
+			break;
+		case 'tag':
+			icon = 'tag';
+			break;
+		default:
+			break;
+	}
+	return <CodeIcon size={14} icon={icon} />;
+}