Polish timeline (#6814)

alexr00 · web-flow · commit 1d5ce989e132 · 2025-04-24T11:43:26.000+02:00
- Show assign event in timeline when assignment is made
- Consolidate multiple nearby assignments
- Timestamp color
diff --git a/src/common/timelineEvent.ts b/src/common/timelineEvent.ts
@@ -95,7 +95,7 @@ export interface MergedEvent {
 export interface AssignEvent {
 	id: number;
 	event: EventType.Assigned;
-	assignee: IAccount;
+	assignees: IAccount[];
 	actor: IActor;
 	createdAt: string;
 }
diff --git a/src/github/issueOverview.ts b/src/github/issueOverview.ts
@@ -17,7 +17,7 @@ import { IAccount, ILabel, IMilestone, IProject, IProjectItem, RepoAccessAndMerg
 import { IssueModel } from './issueModel';
 import { getAssigneesQuickPickItems, getLabelOptions, getMilestoneFromQuickPick, getProjectFromQuickPick } from './quickPicks';
 import { isInCodespaces, vscodeDevPrLink } from './utils';
-import { Issue, ProjectItemsReply } from './views';
+import { ChangeAssigneesReply, Issue, ProjectItemsReply } from './views';
 
 export class IssueOverviewPanel<TItem extends IssueModel = IssueModel> extends WebviewBase {
 	public static ID: string = 'IssueOverviewPanel';
@@ -387,9 +387,12 @@ export class IssueOverviewPanel<TItem extends IssueModel = IssueModel> extends W
 			if (allAssignees) {
 				const newAssignees: IAccount[] = allAssignees.map(item => item.user);
 				await this._item.replaceAssignees(newAssignees);
-				await this._replyMessage(message, {
+				const events = await this._item.getIssueTimelineEvents();
+				const reply: ChangeAssigneesReply = {
 					assignees: newAssignees,
-				});
+					events
+				};
+				await this._replyMessage(message, reply);
 			}
 		} catch (e) {
 			vscode.window.showErrorMessage(formatError(e));
@@ -448,12 +451,15 @@ export class IssueOverviewPanel<TItem extends IssueModel = IssueModel> extends W
 			const currentUser = await this._folderRepositoryManager.getCurrentUser();
 			const alreadyAssigned = this._item.assignees?.find(user => user.login === currentUser.login);
 			if (!alreadyAssigned) {
-				const newAssigness = (this._item.assignees ?? []).concat(currentUser);
-				await this._item.replaceAssignees(newAssigness);
+				const newAssignees = (this._item.assignees ?? []).concat(currentUser);
+				await this._item.replaceAssignees(newAssignees);
 			}
-			this._replyMessage(message, {
-				assignees: this._item.assignees,
-			});
+			const events = await this._item.getIssueTimelineEvents();
+			const reply: ChangeAssigneesReply = {
+				assignees: this._item.assignees ?? [],
+				events
+			};
+			this._replyMessage(message, reply);
 		} catch (e) {
 			vscode.window.showErrorMessage(formatError(e));
 		}
diff --git a/src/github/utils.ts b/src/github/utils.ts
@@ -1039,7 +1039,7 @@ export function parseGraphQLTimelineEvents(
 				normalizedEvents.push({
 					id: assignEv.id,
 					event: type,
-					assignee: parseAccount(assignEv.user, githubRepository),
+					assignees: [parseAccount(assignEv.user, githubRepository)],
 					actor: parseAccount(assignEv.actor),
 					createdAt: assignEv.createdAt,
 				});
diff --git a/src/github/views.ts b/src/github/views.ts
@@ -101,6 +101,11 @@ export interface ProjectItemsReply {
 	projectItems: IProjectItem[] | undefined;
 }
 
+export interface ChangeAssigneesReply {
+	assignees: IAccount[];
+	events: TimelineEvent[];
+}
+
 export interface MergeArguments {
 	title: string | undefined;
 	description: string | undefined;
diff --git a/webviews/common/context.tsx b/webviews/common/context.tsx
@@ -7,7 +7,7 @@ import { createContext } from 'react';
 import { IComment } from '../../src/common/comment';
 import { EventType, ReviewEvent, TimelineEvent } from '../../src/common/timelineEvent';
 import { IProjectItem, MergeMethod, ReadyForReview, ReviewState } from '../../src/github/interface';
-import { MergeArguments, MergeResult, ProjectItemsReply, PullRequest } from '../../src/github/views';
+import { ChangeAssigneesReply, MergeArguments, MergeResult, ProjectItemsReply, PullRequest } from '../../src/github/views';
 import { getState, setState, updateState } from './cache';
 import { getMessageHandler, MessageHandler } from './message';
 
@@ -79,8 +79,8 @@ export class PRContext {
 	public removeProject = (project: IProjectItem) => this.postMessage({ command: 'pr.remove-project', args: project });
 	public addMilestone = () => this.postMessage({ command: 'pr.add-milestone' });
 	public removeMilestone = () => this.postMessage({ command: 'pr.remove-milestone' });
-	public addAssignees = () => this.postMessage({ command: 'pr.change-assignees' });
-	public addAssigneeYourself = () => this.postMessage({ command: 'pr.add-assignee-yourself' });
+	public addAssignees = (): Promise<ChangeAssigneesReply> => this.postMessage({ command: 'pr.change-assignees' });
+	public addAssigneeYourself = (): Promise<ChangeAssigneesReply> => this.postMessage({ command: 'pr.add-assignee-yourself' });
 	public addLabels = () => this.postMessage({ command: 'pr.add-labels' });
 	public create = () => this.postMessage({ command: 'pr.open-create' });
 
diff --git a/webviews/components/sidebar.tsx b/webviews/components/sidebar.tsx
@@ -62,7 +62,7 @@ export default function Sidebar({ reviewers, labels, hasWritePermission, isIssue
 			<div id="assignees" className="section">
 				<div className="section-header" onClick={async () => {
 					const newAssignees = await addAssignees();
-					updatePR({ assignees: newAssignees.assignees });
+					updatePR({ assignees: newAssignees.assignees, events: newAssignees.events });
 				}}>
 					<div className="section-title">Assignees</div>
 					{hasWritePermission ? (
@@ -94,7 +94,7 @@ export default function Sidebar({ reviewers, labels, hasWritePermission, isIssue
 									className="assign-yourself"
 									onClick={async () => {
 										const newAssignees = await addAssigneeYourself();
-										updatePR({ assignees: newAssignees.assignees });
+										updatePR({ assignees: newAssignees.assignees, events: newAssignees.events });
 									}}
 								>
 									assign yourself
diff --git a/webviews/components/timeline.tsx b/webviews/components/timeline.tsx
@@ -21,37 +21,53 @@ import { ReviewType } from '../../src/github/views';
 import PullRequestContext from '../common/context';
 import { CommentView } from './comment';
 import Diff from './diff';
-import { assigneeIcon, commitIcon, linkIcon, mergeIcon, plusIcon } from './icon';
+import { commitIcon, mergeIcon, plusIcon } from './icon';
 import { nbsp } from './space';
 import { Timestamp } from './timestamp';
 import { AuthorLink, Avatar } from './user';
 
-export const Timeline = ({ events }: { events: TimelineEvent[] }) => (
-	<>
-		{events.map(event => {
-			switch (event.event) {
-				case EventType.Committed:
-					return <CommitEventView key={`commit${event.id}`} {...event} />;
-				case EventType.Reviewed:
-					return <ReviewEventView key={`review${event.id}`} {...event} />;
-				case EventType.Commented:
-					return <CommentEventView key={`comment${event.id}`} {...event} />;
-				case EventType.Merged:
-					return <MergedEventView key={`merged${event.id}`} {...event} />;
-				case EventType.Assigned:
-					return <AssignEventView key={`assign${event.id}`} {...event} />;
-				case EventType.HeadRefDeleted:
-					return <HeadDeleteEventView key={`head${event.id}`} {...event} />;
-				case EventType.CrossReferenced:
-					return <CrossReferencedEventView key={`cross${event.id}`} {...event} />;
-				case EventType.NewCommitsSinceReview:
-					return <NewCommitsSinceReviewEventView key={`newCommits${event.id}`} />;
-				default:
-					throw new UnreachableCaseError(event);
+export const Timeline = ({ events }: { events: TimelineEvent[] }) => {
+	const consolidatedEvents: TimelineEvent[] = [];
+	for (let i = 0; i < events.length; i++) {
+		if ((i > 0) && (events[i].event === EventType.Assigned) && (consolidatedEvents[consolidatedEvents.length - 1].event === EventType.Assigned)) {
+			const lastEvent = consolidatedEvents[consolidatedEvents.length - 1] as AssignEvent;
+			const newEvent = events[i] as AssignEvent;
+			if (new Date(lastEvent.createdAt).getTime() + (1000 * 60 * 10) > new Date(newEvent.createdAt).getTime()) { // within 10 minutes
+				if (lastEvent.assignees.every(a => a.id !== newEvent.assignees[0].id)) {
+					lastEvent.assignees = [...lastEvent.assignees, ...newEvent.assignees];
+				}
+				lastEvent.createdAt = newEvent.createdAt;
+			} else {
+				consolidatedEvents.push(newEvent);
 			}
-		})}
-	</>
-);
+		} else {
+			consolidatedEvents.push(events[i]);
+		}
+	}
+
+	return <>{consolidatedEvents.map(event => {
+		switch (event.event) {
+			case EventType.Committed:
+				return <CommitEventView key={`commit${event.id}`} {...event} />;
+			case EventType.Reviewed:
+				return <ReviewEventView key={`review${event.id}`} {...event} />;
+			case EventType.Commented:
+				return <CommentEventView key={`comment${event.id}`} {...event} />;
+			case EventType.Merged:
+				return <MergedEventView key={`merged${event.id}`} {...event} />;
+			case EventType.Assigned:
+				return <AssignEventView key={`assign${event.id}`} {...event} />;
+			case EventType.HeadRefDeleted:
+				return <HeadDeleteEventView key={`head${event.id}`} {...event} />;
+			case EventType.CrossReferenced:
+				return <CrossReferencedEventView key={`cross${event.id}`} {...event} />;
+			case EventType.NewCommitsSinceReview:
+				return <NewCommitsSinceReviewEventView key={`newCommits${event.id}`} />;
+			default:
+				throw new UnreachableCaseError(event);
+		}
+	})}</>;
+};
 
 export default Timeline;
 
@@ -63,7 +79,6 @@ const CommitEventView = (event: CommitEvent) => (
 			<div className="avatar-container">
 				<Avatar for={event.author} />
 			</div>
-			<AuthorLink for={event.author} />
 			<div className="message-container">
 				<a className="message" href={event.htmlUrl} title={event.htmlUrl}>
 					{event.message.substr(0, event.message.indexOf('\n') > -1 ? event.message.indexOf('\n') : event.message.length)}
@@ -290,8 +305,6 @@ const CrossReferencedEventView = (event: CrossReferencedEvent) => {
 	return (
 		<div className="comment-container commit">
 			<div className="commit-message">
-				{linkIcon}
-				{nbsp}
 				<div className="avatar-container">
 					<Avatar for={event.actor} />
 				</div>
@@ -307,19 +320,24 @@ const CrossReferencedEventView = (event: CrossReferencedEvent) => {
 	);
 };
 
+function joinWithAnd(arr: JSX.Element[]): JSX.Element {
+	if (arr.length === 0) return <></>;
+	if (arr.length === 1) return arr[0];
+	if (arr.length === 2) return <>{arr[0]} and {arr[1]}</>;
+	return <>{arr.slice(0, -1).map(item => <>{item}, </>)} and {arr[arr.length - 1]}</>;
+}
+
 const AssignEventView = (event: AssignEvent) => {
-	const { actor, assignee } = event;
+	const { actor, assignees } = event;
 	return (
 		<div className="comment-container commit">
 			<div className="commit-message">
-				{assigneeIcon}
-				{nbsp}
 				<div className="avatar-container">
 					<Avatar for={actor} />
 				</div>
 				<AuthorLink for={actor} />
 				<div className="message">
-					assigned <AuthorLink for={assignee} /> to this pull request
+					assigned {joinWithAnd(assignees.map(a => <AuthorLink key={a.id} for={a} />))} to this pull request
 				</div>
 			</div>
 			<Timestamp date={event.createdAt} />
diff --git a/webviews/editorWebview/index.css b/webviews/editorWebview/index.css
@@ -951,7 +951,7 @@ code {
 
 .timestamp,
 .timestamp:hover {
-	color: inherit;
+	color: var(--vscode-descriptionForeground);;
 	white-space: nowrap;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -95,7 +95,7 @@ export interface MergedEvent {`
`95`	`95`	`export interface AssignEvent {`
`96`	`96`	`id: number;`
`97`	`97`	`event: EventType.Assigned;`
`98`		`- assignee: IAccount;`
	`98`	`+ assignees: IAccount[];`
`99`	`99`	`actor: IActor;`
`100`	`100`	`createdAt: string;`
`101`	`101`	`}`
Original file line number	Diff line number	Diff line change
`@@ -951,7 +951,7 @@ code {`
`951`	`951`
`952`	`952`	`.timestamp,`
`953`	`953`	`.timestamp:hover {`
`954`		`- color: inherit;`
	`954`	`+ color: var(--vscode-descriptionForeground);;`
`955`	`955`	`white-space: nowrap;`
`956`	`956`	`}`
`957`	`957`