feat: Display commit status icon for each commit (#8142)

* feat(timeline): Display commit status checks in PR timeline

* fix: CommitEvent status

* fix: CommitStateIcon status prop type

* Prefer undefined

---------

Co-authored-by: Alex Ross <38270282+alexr00@users.noreply.github.com>

Author: vicky1999

src/common/timelineEvent.ts

@@ -81,6 +81,7 @@ export interface CommitEvent {
 	message: string;
 	bodyHTML?: string;
 	committedDate: Date;
+	status?: 'EXPECTED' | 'ERROR' | 'FAILURE' | 'PENDING' | 'SUCCESS';
 }
 
 export interface NewCommitsSinceReviewEvent {

src/github/graphql.ts

@@ -188,6 +188,9 @@ export interface Commit {
 		oid: string;
 		message: string;
 		committedDate: Date;
+		statusCheckRollup?: {
+			state: 'EXPECTED' | 'ERROR' | 'FAILURE' | 'PENDING' | 'SUCCESS';
+		};
 	};
 
 	url: string;

src/github/queriesShared.gql

@@ -123,6 +123,9 @@ fragment Commit on PullRequestCommit {
 		oid
 		message
 		committedDate
+		statusCheckRollup {
+			state
+		}
 	}
 	url
 }

src/github/utils.ts

@@ -1200,6 +1200,7 @@ export async function parseCombinedTimelineEvents(
 					htmlUrl: commitEv.url,
 					message: commitEv.commit.message,
 					committedDate: new Date(commitEv.commit.committedDate),
+					status: commitEv.commit.statusCheckRollup?.state
 				} as Common.CommitEvent); // TODO remove cast
 				break;
 			case Common.EventType.Merged:

webviews/components/timeline.tsx

@@ -6,7 +6,7 @@
 import React, { useContext, useRef, useState } from 'react';
 import { CommentView } from './comment';
 import Diff from './diff';
-import { addIcon, errorIcon, gitCommitIcon, gitMergeIcon, loadingIcon, tasklistIcon, threeBars } from './icon';
+import { addIcon, checkIcon, circleFilledIcon, closeIcon, errorIcon, gitCommitIcon, gitMergeIcon, loadingIcon, tasklistIcon, threeBars } from './icon';
 import { nbsp } from './space';
 import { Timestamp } from './timestamp';
 import { AuthorLink, Avatar } from './user';
@@ -105,6 +105,20 @@ export const Timeline = ({ events, isIssue }: { events: TimelineEvent[], isIssue
 
 export default Timeline;
 
+
+function CommitStateIcon({ status }: { status: 'EXPECTED' | 'ERROR' | 'FAILURE' | 'PENDING' | 'SUCCESS' | undefined; }) {
+	switch (status) {
+		case 'PENDING':
+			return circleFilledIcon;
+		case 'SUCCESS':
+			return checkIcon;
+		case 'FAILURE':
+		case 'ERROR':
+			return closeIcon;
+	}
+	return null;
+}
+
 const CommitEventView = (event: CommitEvent) => {
 	const context = useContext(PullRequestContext);
 	const [clickedElement, setClickedElement] = useState<'title' | 'sha' | undefined>(undefined);
@@ -139,6 +153,9 @@ const CommitEventView = (event: CommitEvent) => {
 				</div>
 			</div>
 			<div className="timeline-detail">
+				<div className='status-section'>
+					<CommitStateIcon status={event.status} />
+				</div>
 				<a
 					className="sha"
 					onClick={(e) => handleCommitClick(e, 'sha')}