84 - Graph: Allow column re-ordering (Gitlens side) (#2330)

* 84 - Graph: Allow column re-ordering

* Fixed formatting issue

* Avoid "forEach" loops

* Simplified loop code

src/plus/webviews/graph/graphWebview.ts

@@ -87,6 +87,7 @@ import type {
 	GetMoreRowsParams,
 	GraphColumnConfig,
 	GraphColumnName,
+	GraphColumnsConfig,
 	GraphColumnsSettings,
 	GraphComponentConfig,
 	GraphHiddenRef,
@@ -101,7 +102,7 @@ import type {
 	SearchOpenInViewParams,
 	SearchParams,
 	State,
-	UpdateColumnParams,
+	UpdateColumnsParams,
 	UpdateRefsVisibilityParams,
 	UpdateSelectedRepositoryParams,
 	UpdateSelectionParams,
@@ -127,7 +128,7 @@ import {
 	GetMoreRowsCommandType,
 	SearchCommandType,
 	SearchOpenInViewCommandType,
-	UpdateColumnCommandType,
+	UpdateColumnsCommandType,
 	UpdateRefsVisibilityCommandType,
 	UpdateSelectedRepositoryCommandType,
 	UpdateSelectionCommandType,
@@ -414,8 +415,8 @@ export class GraphWebview extends WebviewBase {
 			case SearchOpenInViewCommandType.method:
 				onIpc(SearchOpenInViewCommandType, e, params => this.onSearchOpenInView(params));
 				break;
-			case UpdateColumnCommandType.method:
-				onIpc(UpdateColumnCommandType, e, params => this.onColumnChanged(params));
+			case UpdateColumnsCommandType.method:
+				onIpc(UpdateColumnsCommandType, e, params => this.onColumnsChanged(params));
 				break;
 			case UpdateRefsVisibilityCommandType.method:
 				onIpc(UpdateRefsVisibilityCommandType, e, params => this.onRefsVisibilityChanged(params));
@@ -587,8 +588,8 @@ export class GraphWebview extends WebviewBase {
 		void this.container.storage.storeWorkspace('graph:banners:dismissed', banners);
 	}
 
-	private onColumnChanged(e: UpdateColumnParams) {
-		this.updateColumn(e.name, e.config);
+	private onColumnsChanged(e: UpdateColumnsParams) {
+		this.updateColumns(e.config);
 	}
 
 	private onRefsVisibilityChanged(e: UpdateRefsVisibilityParams) {
@@ -1436,9 +1437,11 @@ export class GraphWebview extends WebviewBase {
 		};
 	}
 
-	private updateColumn(name: GraphColumnName, cfg: GraphColumnConfig) {
+	private updateColumns(columnsCfg: GraphColumnsConfig) {
 		let columns = this.container.storage.getWorkspace('graph:columns');
-		columns = updateRecordValue(columns, name, cfg);
+		for (const [key, value] of Object.entries(columnsCfg)) {
+			columns = updateRecordValue(columns, key, value);
+		}
 		void this.container.storage.storeWorkspace('graph:columns', columns);
 		void this.notifyDidChangeColumns();
 	}

src/plus/webviews/graph/protocol.ts

@@ -111,8 +111,11 @@ export interface GraphComponentConfig {
 export interface GraphColumnConfig {
 	isHidden?: boolean;
 	width?: number;
+	order?: number;
 }
 
+export type GraphColumnsConfig = {[name: string]: GraphColumnConfig};
+
 export type GraphHiddenRefs = HiddenRefsById;
 export type GraphHiddenRef = GraphRefOptData;
 
@@ -165,11 +168,10 @@ export interface SearchOpenInViewParams {
 }
 export const SearchOpenInViewCommandType = new IpcCommandType<SearchOpenInViewParams>('graph/search/openInView');
 
-export interface UpdateColumnParams {
-	name: GraphColumnName;
-	config: GraphColumnConfig;
+export interface UpdateColumnsParams {
+	config: GraphColumnsConfig;
 }
-export const UpdateColumnCommandType = new IpcCommandType<UpdateColumnParams>('graph/column/update');
+export const UpdateColumnsCommandType = new IpcCommandType<UpdateColumnsParams>('graph/columns/update');
 
 export interface UpdateRefsVisibilityParams {
 	refs: GraphHiddenRef[];

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

@@ -1,13 +1,14 @@
 import GraphContainer from '@gitkraken/gitkraken-components';
 import type {
 	GraphColumnSetting,
+	GraphColumnsSettings,
 	GraphContainerProps,
 	GraphPlatform,
 	GraphRef,
 	GraphRefGroup,
 	GraphRefOptData,
 	GraphRow,
-	OnFormatCommitDateTime,
+ 	OnFormatCommitDateTime
 } from '@gitkraken/gitkraken-components';
 import type { ReactElement } from 'react';
 import React, { createElement, useEffect, useMemo, useRef, useState } from 'react';
@@ -20,8 +21,8 @@ import type {
 	DidSearchParams,
 	DismissBannerParams,
 	GraphAvatars,
-	GraphColumnConfig,
 	GraphColumnName,
+	GraphColumnsConfig,
 	GraphComponentConfig,
 	GraphHiddenRef,
 	GraphMissingRefsMetadata,
@@ -59,7 +60,7 @@ export interface GraphWrapperProps {
 	state: State;
 	subscriber: (callback: UpdateStateCallback) => () => void;
 	onSelectRepository?: (repository: GraphRepository) => void;
-	onColumnChange?: (name: GraphColumnName, settings: GraphColumnConfig) => void;
+	onColumnsChange?: (colsSettings: GraphColumnsConfig) => void;
 	onDoubleClickRef?: (ref: GraphRef) => void;
 	onMissingAvatars?: (emails: { [email: string]: string }) => void;
 	onMissingRefsMetadata?: (metadata: GraphMissingRefsMetadata) => void;
@@ -131,7 +132,7 @@ export function GraphWrapper({
 	nonce,
 	state,
 	onSelectRepository,
-	onColumnChange,
+	onColumnsChange,
 	onDoubleClickRef,
 	onEnsureRowPromise,
 	onMissingAvatars,
@@ -473,13 +474,24 @@ export function GraphWrapper({
 
 	const handleOnColumnResized = (columnName: GraphColumnName, columnSettings: GraphColumnSetting) => {
 		if (columnSettings.width) {
-			onColumnChange?.(columnName, {
-				width: columnSettings.width,
-				isHidden: columnSettings.isHidden,
+			onColumnsChange?.({
+				[columnName]: {
+					width: columnSettings.width,
+					isHidden: columnSettings.isHidden,
+					order: columnSettings.order
+				}
 			});
 		}
 	};
 
+	const handleOnGraphColumnsReOrdered = (columnsSettings: GraphColumnsSettings) => {
+		const graphColumnsConfig: GraphColumnsConfig = {};
+		for (const [columnName, config] of Object.entries(columnsSettings as GraphColumnsConfig)) {
+			graphColumnsConfig[columnName] = { ...config };
+		}
+		onColumnsChange?.(graphColumnsConfig);
+	};
+
 	const handleOnToggleRefsVisibilityClick = (_event: any, refs: GraphRefOptData[], visible: boolean) => {
 		onRefsVisibilityChange?.(refs, visible);
 	};
@@ -736,6 +748,7 @@ export function GraphWrapper({
 							nonce={nonce}
 							onColumnResized={handleOnColumnResized}
 							onDoubleClickGraphRef={handleOnDoubleClickRef}
+							onGraphColumnsReOrdered={handleOnGraphColumnsReOrdered}
 							onSelectGraphRows={handleSelectGraphRows}
 							onToggleRefsVisibilityClick={handleOnToggleRefsVisibilityClick}
 							onEmailsMissingAvatarUrls={handleMissingAvatars}

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

@@ -7,8 +7,7 @@ import type { SearchQuery } from '../../../../git/search';
 import type {
 	DismissBannerParams,
 	GraphAvatars,
-	GraphColumnConfig,
-	GraphColumnName,
+	GraphColumnsConfig,
 	GraphHiddenRef,
 	GraphMissingRefsMetadata,
 	GraphRepository,
@@ -37,7 +36,7 @@ import {
 	GetMoreRowsCommandType,
 	SearchCommandType,
 	SearchOpenInViewCommandType,
-	UpdateColumnCommandType,
+	UpdateColumnsCommandType,
 	UpdateRefsVisibilityCommandType,
 	UpdateSelectedRepositoryCommandType as UpdateRepositorySelectionCommandType,
 	UpdateSelectionCommandType,
@@ -84,8 +83,8 @@ export class GraphApp extends App {
 					nonce={this.state.nonce}
 					state={this.state}
 					subscriber={(callback: UpdateStateCallback) => this.registerEvents(callback)}
-					onColumnChange={debounce<GraphApp['onColumnChanged']>(
-						(name, settings) => this.onColumnChanged(name, settings),
+					onColumnsChange={debounce<GraphApp['onColumnsChanged']>(
+						(settings) => this.onColumnsChanged(settings),
 						250,
 					)}
 					onRefsVisibilityChange={(refs: GraphHiddenRef[], visible: boolean) =>
@@ -378,9 +377,8 @@ export class GraphApp extends App {
 		this.sendCommand(DismissBannerCommandType, { key: key });
 	}
 
-	private onColumnChanged(name: GraphColumnName, settings: GraphColumnConfig) {
-		this.sendCommand(UpdateColumnCommandType, {
-			name: name,
+	private onColumnsChanged(settings: GraphColumnsConfig) {
+		this.sendCommand(UpdateColumnsCommandType, {
 			config: settings,
 		});
 	}