Sort status checks to group failures first (#8297)

* Initial plan

* Initial plan: Group failing checks together

Co-authored-by: alexr00 <[email protected]>

* Sort status checks by state: failures first, then pending, neutral, and success

Co-authored-by: alexr00 <[email protected]>

* Move CHECK_STATE_ORDER constant outside component to avoid recreating on every render

Co-authored-by: alexr00 <[email protected]>

* Fix code style: remove extra space in function parameter declaration

Co-authored-by: alexr00 <[email protected]>

* Fix sort order

* Don't do the unneeded spread

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: alexr00 <[email protected]>

Author: Copilot

webviews/components/merge.tsx

@@ -570,32 +570,49 @@ export const MergeSelect = React.forwardRef<HTMLSelectElement, MergeSelectProps>
 	},
 );
 
-const StatusCheckDetails = ( { statuses }: { statuses: PullRequestCheckStatus[] }) => (
-	<div className='status-scroll'>
-		{statuses.map(s => (
-			<div key={s.id} className="status-check">
-				<div className="status-check-details">
-					<StateIcon state={s.state} />
-					<Avatar for={{ avatarUrl: s.avatarUrl, url: s.url }} />
-					<span className="status-check-detail-text">
-						{/* allow-any-unicode-next-line */}
-						{s.workflowName ? `${s.workflowName} / ` : null}{s.context}{s.event ? ` (${s.event})` : null} {s.description ? `— ${s.description}` : null}
-					</span>
-				</div>
-				<div>
-				{s.isRequired ? (
-					<span className="label">Required</span>
-				) : null }
-				{!!s.targetUrl ? (
-					<a href={s.targetUrl} title={s.targetUrl}>
-						Details
-					</a>
-				) : null}
+// State order for sorting status checks: failure first, then pending, neutral, success, and unknown
+const CHECK_STATE_ORDER: Record<CheckState, number> = {
+	[CheckState.Failure]: 0,
+	[CheckState.Pending]: 1,
+	[CheckState.Unknown]: 2,
+	[CheckState.Neutral]: 3,
+	[CheckState.Success]: 4,
+
+};
+
+const StatusCheckDetails = ({ statuses }: { statuses: PullRequestCheckStatus[] }) => {
+	// Sort statuses to group by state: failure first, then pending, neutral, and success
+	const sortedStatuses = statuses.sort((a, b) => {
+		return CHECK_STATE_ORDER[a.state] - CHECK_STATE_ORDER[b.state];
+	});
+
+	return (
+		<div className='status-scroll'>
+			{sortedStatuses.map(s => (
+				<div key={s.id} className="status-check">
+					<div className="status-check-details">
+						<StateIcon state={s.state} />
+						<Avatar for={{ avatarUrl: s.avatarUrl, url: s.url }} />
+						<span className="status-check-detail-text">
+							{/* allow-any-unicode-next-line */}
+							{s.workflowName ? `${s.workflowName} / ` : null}{s.context}{s.event ? ` (${s.event})` : null} {s.description ? `— ${s.description}` : null}
+						</span>
+					</div>
+					<div>
+						{s.isRequired ? (
+							<span className="label">Required</span>
+						) : null}
+						{!!s.targetUrl ? (
+							<a href={s.targetUrl} title={s.targetUrl}>
+								Details
+							</a>
+						) : null}
+					</div>
 				</div>
-			</div>
-		))}
-	</div>
-);
+			))}
+		</div>
+	);
+};
 
 function getSummaryLabel(statuses: PullRequestCheckStatus[]) {
 	const statusTypes = groupBy(statuses, (status: PullRequestCheckStatus) => {