Add setting to toggle PR icons in Graph (#2450)

* Combine metadata settings into one array and include PR metadata

* Rename setting

* Reword active --> enabled

* Fix prop ordering

* Use enum and values array

* Add hints for remote service connection

* Bump graph version

* Remove remote service hint from upstream setting

package.json

@@ -2250,6 +2250,13 @@
 						"scope": "window",
 						"order": 26
 					},
+					"gitlens.graph.pullRequests.enabled": {
+						"type": "boolean",
+						"default": false,
+						"markdownDescription": "Specifies whether to show associated pull requests on remote branches in the _Commit Graph_. Requires a connection to a supported remote service (e.g. GitHub)",
+						"scope": "window",
+						"order": 27
+					},
 					"gitlens.graph.commitOrdering": {
 						"type": "string",
 						"default": "date",
@@ -12724,7 +12731,7 @@
 		"vscode:prepublish": "yarn run bundle"
 	},
 	"dependencies": {
-		"@gitkraken/gitkraken-components": "1.1.0-rc.22",
+		"@gitkraken/gitkraken-components": "2.0.0",
 		"@microsoft/fast-element": "1.11.0",
 		"@microsoft/fast-react-wrapper": "0.3.16-0",
 		"@octokit/core": "4.1.0",

src/config.ts

@@ -392,6 +392,9 @@ export interface GraphConfig {
 	scrollRowPadding: number;
 	showDetailsView: 'open' | 'selection' | false;
 	showGhostRefsOnRowHover: boolean;
+	pullRequests: {
+		enabled: boolean;
+	};
 	showRemoteNames: boolean;
 	showUpstreamStatus: boolean;
 	pageItemLimit: number;

src/plus/webviews/graph/graphWebview.ts

@@ -96,6 +96,7 @@ import type {
 	GraphMissingRefsMetadataType,
 	GraphPullRequestMetadata,
 	GraphRefMetadata,
+	GraphRefMetadataType,
 	GraphRepository,
 	GraphSelectedRows,
 	GraphUpstreamMetadata,
@@ -131,8 +132,10 @@ import {
 	GetMissingAvatarsCommandType,
 	GetMissingRefsMetadataCommandType,
 	GetMoreRowsCommandType,
+	GraphRefMetadataTypes,
 	SearchCommandType,
 	SearchOpenInViewCommandType,
+	supportedRefMetadataTypes,
 	UpdateColumnsCommandType,
 	UpdateExcludeTypeCommandType,
 	UpdateIncludeOnlyRefsCommandType,
@@ -546,6 +549,7 @@ export class GraphWebview extends WebviewBase {
 			configuration.changed(e, 'graph.highlightRowsOnRefHover') ||
 			configuration.changed(e, 'graph.scrollRowPadding') ||
 			configuration.changed(e, 'graph.showGhostRefsOnRowHover') ||
+			configuration.changed(e, 'graph.pullRequests.enabled') ||
 			configuration.changed(e, 'graph.showRemoteNames') ||
 			configuration.changed(e, 'graph.showUpstreamStatus')
 		) {
@@ -739,14 +743,14 @@ export class GraphWebview extends WebviewBase {
 			}
 
 			for (const type of missingTypes) {
-				if (type !== 'pullRequests' && type !== 'upstream') {
+				if (!supportedRefMetadataTypes.includes(type)) {
 					(metadata as any)[type] = null;
 					this._refsMetadata.set(id, metadata);
 
 					continue;
 				}
 
-				if (type === 'pullRequests') {
+				if (type === GraphRefMetadataTypes.PullRequest) {
 					const pr = await branch?.getAssociatedPullRequest();
 
 					if (pr == null) {
@@ -783,7 +787,7 @@ export class GraphWebview extends WebviewBase {
 					continue;
 				}
 
-				if (type === 'upstream') {
+				if (type === GraphRefMetadataTypes.Upstream) {
 					const upstream = branch?.upstream;
 
 					if (upstream == null || upstream == undefined || upstream.missing) {
@@ -1555,18 +1559,31 @@ export class GraphWebview extends WebviewBase {
 			dateFormat:
 				configuration.get('graph.dateFormat') ?? configuration.get('defaultDateFormat') ?? 'short+short',
 			dateStyle: configuration.get('graph.dateStyle') ?? configuration.get('defaultDateStyle'),
+			enabledRefMetadataTypes: this.getEnabledRefMetadataTypes(),
 			dimMergeCommits: configuration.get('graph.dimMergeCommits'),
 			enableMultiSelection: false,
 			highlightRowsOnRefHover: configuration.get('graph.highlightRowsOnRefHover'),
 			scrollRowPadding: configuration.get('graph.scrollRowPadding'),
 			showGhostRefsOnRowHover: configuration.get('graph.showGhostRefsOnRowHover'),
 			showRemoteNamesOnRefs: configuration.get('graph.showRemoteNames'),
-			showUpstreamStatus: configuration.get('graph.showUpstreamStatus'),
 			idLength: configuration.get('advanced.abbreviatedShaLength'),
 		};
 		return config;
 	}
 
+	private getEnabledRefMetadataTypes(): GraphRefMetadataType[] {
+		const types: GraphRefMetadataType[] = [];
+		if (configuration.get('graph.pullRequests.enabled')) {
+			types.push(GraphRefMetadataTypes.PullRequest as GraphRefMetadataType);
+		}
+
+		if (configuration.get('graph.showUpstreamStatus')) {
+			types.push(GraphRefMetadataTypes.Upstream as GraphRefMetadataType);
+		}
+
+		return types;
+	}
+
 	private async getGraphAccess() {
 		let access = await this.container.git.access(PlusFeatures.Graph, this.repository?.path);
 		this._etagSubscription = this.container.subscription.etag;

src/plus/webviews/graph/protocol.ts

@@ -37,10 +37,18 @@ export type GraphRefMetadata = RefMetadata | null;
 export type GraphUpstreamMetadata = UpstreamMetadata | null;
 export type GraphRefsMetadata = Record</* id */ string, GraphRefMetadata>;
 export type GraphHostingServiceType = HostingServiceType;
+export type GraphRefMetadataType = RefMetadataType;
 export type GraphMissingRefsMetadataType = RefMetadataType;
 export type GraphMissingRefsMetadata = Record</*id*/ string, /*missingType*/ GraphMissingRefsMetadataType[]>;
 export type GraphPullRequestMetadata = PullRequestMetadata;
 
+export enum GraphRefMetadataTypes {
+	Upstream = 'upstream',
+	PullRequest = 'pullRequests',
+}
+
+export const supportedRefMetadataTypes: GraphRefMetadataType[] = Object.values(GraphRefMetadataTypes);
+
 export interface State {
 	windowFocused?: boolean;
 	repositories?: GraphRepository[];
@@ -112,12 +120,12 @@ export interface GraphComponentConfig {
 	dateFormat: DateTimeFormat | string;
 	dateStyle: DateStyle;
 	dimMergeCommits?: boolean;
+	enabledRefMetadataTypes?: GraphRefMetadataType[];
 	enableMultiSelection?: boolean;
 	highlightRowsOnRefHover?: boolean;
 	scrollRowPadding?: number;
 	showGhostRefsOnRowHover?: boolean;
 	showRemoteNamesOnRefs?: boolean;
-	showUpstreamStatus?: boolean;
 	idLength?: number;
 }
 

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

@@ -1011,6 +1011,7 @@ export function GraphWrapper({
 							contexts={context}
 							cssVariables={styleProps?.cssVariables}
 							dimMergeCommits={graphConfig?.dimMergeCommits}
+							enabledRefMetadataTypes={graphConfig?.enabledRefMetadataTypes}
 							enableMultiSelection={graphConfig?.enableMultiSelection}
 							excludeRefsById={excludeRefsById}
 							excludeByType={excludeTypes}
@@ -1041,7 +1042,6 @@ export function GraphWrapper({
 							platform={clientPlatform}
 							refMetadataById={refsMetadata}
 							shaLength={graphConfig?.idLength}
-							showUpstreamStatus={graphConfig?.showUpstreamStatus}
 							themeOpacityFactor={styleProps?.themeOpacityFactor}
 							useAuthorInitialsForAvatars={!graphConfig?.avatars}
 							workDirStats={workingTreeStats}

src/webviews/apps/settings/partials/commit-graph.html

@@ -172,6 +172,23 @@
 
 					<div class="setting">
 						<div class="setting__input">
+							<input
+								id="graph.pullRequests.enabled"
+								name="graph.pullRequests.enabled"
+								type="checkbox"
+								data-setting
+							/>
+							<label for="graph.pullRequests.enabled"
+								>Show associated pull requests on remote branches</label
+							>
+						</div>
+						<p class="setting__hint hidden" data-visibility="graph.pullRequests.enabled">
+							<i class="icon icon__info"></i>Requires a connection to a supported remote service (e.g. GitHub)
+						</p>
+					</div>
+
+					<div class="setting">
+						<div class="setting__input">
 							<input id="graph.avatars" name="graph.avatars" type="checkbox" data-setting />
 							<label for="graph.avatars">Use author and remote avatars</label>
 						</div>

yarn.lock

@@ -295,10 +295,10 @@
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
   integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
 
-"@gitkraken/gitkraken-components@1.1.0-rc.22":
-  version "1.1.0-rc.22"
-  resolved "https://registry.yarnpkg.com/@gitkraken/gitkraken-components/-/gitkraken-components-1.1.0-rc.22.tgz#6a5fa32dff603fe4561e092508678dc54f62a185"
-  integrity sha512-e7oqU9ibjC11aKs9Z6POjwq1+exk+lIj9nxUDBxGIwVMidfaowaMIH7j7x2tM3we1rdROqsg/sXMImrFbMm6fA==
+"@gitkraken/gitkraken-components@2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@gitkraken/gitkraken-components/-/gitkraken-components-2.0.0.tgz#1a1cbb2ef3873a412b693381ea56869a018e697c"
+  integrity sha512-3caeyF2imEIwZSCwDAf8f5bsxzVZ+0kmL1lZww3CANFlDnhgK8LRU3QkdnuW/PICwZYEpOJop3/0myVBwE3Ieg==
   dependencies:
     "@axosoft/react-virtualized" "9.22.3-gitkraken.3"
     classnames "^2.3.2"