Adds avatarUrl handling to the hidden refs popover

Author: nzaytsev

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

@@ -98,21 +98,10 @@ import { GitActionsButtons } from './actions/gitActionsButtons';
 import { GlGraphHover } from './hover/graphHover.react';
 import type { GraphMinimapDaySelectedEventDetail } from './minimap/minimap';
 import { GlGraphMinimapContainer } from './minimap/minimap-container.react';
+import { compareGraphRefOpts } from './refHelpers/compareGraphRefOpts';
+import { RemoteIcon } from './refHelpers/RemoteIcon';
 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 '';
-	}
-}
-
 export interface GraphWrapperProps {
 	nonce?: string;
 	state: State;
@@ -1406,33 +1395,39 @@ export function GraphWrapper({
 										<MenuLabel>Hidden Branches / Tags</MenuLabel>
 										{excludeRefsById &&
 											Object.keys(excludeRefsById).length &&
-											[...Object.values(excludeRefsById), null].map(ref =>
-												ref ? (
-													<MenuItem
-														// key prop is skipped intentionally. It allows me to not hide the dropdown after click (I don't know why)
-														onClick={event => {
-															handleOnToggleRefsVisibilityClick(event, [ref], true);
-														}}
-														className="flex-gap"
-													>
-														<CodeIcon icon={getRemoteIcon(ref.type)}></CodeIcon>
-														<span>{ref.name}</span>
-													</MenuItem>
-												) : (
-													// One more weird case. If I render it outside the listed items, the dropdown is hidden after click on the last item
-													<MenuItem
-														onClick={event => {
-															handleOnToggleRefsVisibilityClick(
-																event,
-																Object.values(excludeRefsById ?? {}),
-																true,
-															);
-														}}
-													>
-														Show All
-													</MenuItem>
-												),
-											)}
+											(
+												Object.values(excludeRefsById)
+													.slice()
+													.sort(compareGraphRefOpts) as Array<GraphRefOptData | null>
+											)
+												.concat(null)
+												.map(ref =>
+													ref ? (
+														<MenuItem
+															// key prop is skipped intentionally. It allows me to not hide the dropdown after click (I don't know why)
+															onClick={event => {
+																handleOnToggleRefsVisibilityClick(event, [ref], true);
+															}}
+															className="flex-gap"
+														>
+															<RemoteIcon refOptData={ref} />
+															<span>{ref.name}</span>
+														</MenuItem>
+													) : (
+														// One more weird case. If I render it outside the listed items, the dropdown is hidden after click on the last item
+														<MenuItem
+															onClick={event => {
+																handleOnToggleRefsVisibilityClick(
+																	event,
+																	Object.values(excludeRefsById ?? {}),
+																	true,
+																);
+															}}
+														>
+															Show All
+														</MenuItem>
+													),
+												)}
 									</div>
 								</GlPopover>
 							</div>

src/webviews/apps/plus/graph/refHelpers/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({ refOptData }: Readonly<{ refOptData: GraphRefOptData }>) {
+	if (refOptData.avatarUrl) {
+		return <img alt={refOptData.name} style={{ width: 14, aspectRatio: 1 }} src={refOptData.avatarUrl} />;
+	}
+	let icon = '';
+	switch (refOptData.type) {
+		case 'head':
+			icon = 'vm';
+			break;
+		case 'remote':
+			icon = 'cloud';
+			break;
+		case 'tag':
+			icon = 'tag';
+			break;
+		default:
+			break;
+	}
+	return <CodeIcon size={14} icon={icon} />;
+}

src/webviews/apps/plus/graph/refHelpers/compareGraphRefOpts.ts

@@ -0,0 +1,13 @@
+import type { GraphRefOptData } from '@gitkraken/gitkraken-components';
+
+// copied from GitkrakenComponents to keep refs order the same as in the graph
+export function compareGraphRefOpts(a: GraphRefOptData, b: GraphRefOptData): number {
+	const comparationResult = a.name.localeCompare(b.name);
+	if (comparationResult === 0) {
+		// If names are equals
+		if (a.type === 'remote') {
+			return -1;
+		}
+	}
+	return comparationResult;
+}