Fixes #1895 honors short date setting on VFH

Also defaults the short date format to the system short date format

Author: eamodio

CHANGELOG.md

@@ -18,6 +18,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Fixed
 
+- Fixes [#1895](https://github.com/gitkraken/vscode-gitlens/issues/1895) - Honor defaultDateShortFormat setting on Visual File History
 - Fixes [#1890](https://github.com/gitkraken/vscode-gitlens/issues/1890) - can no longer see untracked files in stashes
 
 ## [12.0.1] - 2022-03-03

src/git/models/repository.ts

@@ -148,7 +148,7 @@ export class Repository implements Disposable {
 		}
 
 		if (short) {
-			return formatDate(date, Container.instance.config.defaultDateShortFormat ?? 'MMM D, YYYY');
+			return formatDate(date, Container.instance.config.defaultDateShortFormat ?? 'short');
 		}
 
 		let format =

src/plus/webviews/timeline/protocol.ts

@@ -8,6 +8,7 @@ export interface State {
 	uri?: string;
 
 	dateFormat: string;
+	shortDateFormat: string;
 	access: FeatureAccess;
 }
 

src/plus/webviews/timeline/timelineWebview.ts

@@ -204,6 +204,7 @@ export class TimelineWebview extends WebviewBase<State> {
 	private async getState(current: Context): Promise<State> {
 		const access = await this.container.git.access(PlusFeatures.Timeline);
 		const dateFormat = this.container.config.defaultDateFormat ?? 'MMMM Do, YYYY h:mma';
+		const shortDateFormat = this.container.config.defaultDateShortFormat ?? 'short';
 		const period = current.period ?? defaultPeriod;
 
 		if (!access.allowed) {
@@ -214,6 +215,7 @@ export class TimelineWebview extends WebviewBase<State> {
 				title: 'src/app/index.ts',
 				uri: Uri.file('src/app/index.ts').toString(),
 				dateFormat: dateFormat,
+				shortDateFormat: shortDateFormat,
 				access: access,
 			};
 		}
@@ -223,6 +225,7 @@ export class TimelineWebview extends WebviewBase<State> {
 				period: period,
 				title: 'There are no editors open that can provide file history information',
 				dateFormat: dateFormat,
+				shortDateFormat: shortDateFormat,
 				access: access,
 			};
 		}
@@ -249,6 +252,7 @@ export class TimelineWebview extends WebviewBase<State> {
 				title: 'No commits found for the specified time period',
 				uri: current.uri.toString(),
 				dateFormat: dateFormat,
+				shortDateFormat: shortDateFormat,
 				access: access,
 			};
 		}
@@ -299,6 +303,7 @@ export class TimelineWebview extends WebviewBase<State> {
 			title: title,
 			uri: current.uri.toString(),
 			dateFormat: dateFormat,
+			shortDateFormat: shortDateFormat,
 			access: access,
 		};
 	}

src/plus/webviews/timeline/timelineWebviewView.ts

@@ -197,6 +197,7 @@ export class TimelineWebviewView extends WebviewViewBase<State> {
 	private async getState(current: Context): Promise<State> {
 		const access = await this.container.git.access(PlusFeatures.Timeline);
 		const dateFormat = this.container.config.defaultDateFormat ?? 'MMMM Do, YYYY h:mma';
+		const shortDateFormat = this.container.config.defaultDateShortFormat ?? 'short';
 		const period = current.period ?? defaultPeriod;
 
 		if (!access.allowed) {
@@ -207,6 +208,7 @@ export class TimelineWebviewView extends WebviewViewBase<State> {
 				title: 'src/app/index.ts',
 				uri: Uri.file('src/app/index.ts').toString(),
 				dateFormat: dateFormat,
+				shortDateFormat: shortDateFormat,
 				access: access,
 			};
 		}
@@ -216,6 +218,7 @@ export class TimelineWebviewView extends WebviewViewBase<State> {
 				period: period,
 				title: 'There are no editors open that can provide file history information',
 				dateFormat: dateFormat,
+				shortDateFormat: shortDateFormat,
 				access: access,
 			};
 		}
@@ -242,6 +245,7 @@ export class TimelineWebviewView extends WebviewViewBase<State> {
 				title: 'No commits found for the specified time period',
 				uri: current.uri.toString(),
 				dateFormat: dateFormat,
+				shortDateFormat: shortDateFormat,
 				access: access,
 			};
 		}
@@ -292,6 +296,7 @@ export class TimelineWebviewView extends WebviewViewBase<State> {
 			title: title,
 			uri: current.uri.toString(),
 			dateFormat: dateFormat,
+			shortDateFormat: shortDateFormat,
 			access: access,
 		};
 	}

src/webviews/apps/plus/timeline/chart.ts

@@ -32,6 +32,7 @@ export class TimelineChart {
 	private readonly _indexByAuthors = new Map<string, number>();
 
 	private _dateFormat: string = undefined!;
+	private _shortDateFormat: string = undefined!;
 
 	constructor(selector: string) {
 		this._selector = selector;
@@ -76,6 +77,7 @@ export class TimelineChart {
 
 	updateChart(state: State) {
 		this._dateFormat = state.dateFormat;
+		this._shortDateFormat = state.shortDateFormat;
 
 		this._commitsByTimestamp.clear();
 		this._authorsByIndex.clear();
@@ -269,7 +271,8 @@ export class TimelineChart {
 						centered: true,
 						culling: false,
 						fit: false,
-						format: '%-m/%-d/%Y',
+						format: (x: number | Date) =>
+							typeof x === 'number' ? x : formatDate(x, this._shortDateFormat ?? 'short'),
 						multiline: false,
 						// rotate: 15,
 						show: false,

src/webviews/apps/settings/partials/dates.html

@@ -105,7 +105,7 @@ <h2>Dates & Times</h2>
 								id="defaultDateShortFormat"
 								name="defaultDateShortFormat"
 								type="text"
-								placeholder="defaults to MMM D, YYYY"
+								placeholder="defaults to system short date format"
 								data-setting
 								data-setting-preview
 							/>
@@ -122,7 +122,7 @@ <h2>Dates & Times</h2>
 							<span
 								data-setting-preview="defaultDateShortFormat"
 								data-setting-preview-type="date"
-								data-setting-preview-default="MMM D, YYYY"
+								data-setting-preview-default="short"
 							></span>
 						</span>
 					</div>

src/webviews/apps/welcome/welcome.html

@@ -399,7 +399,7 @@ <h2>
 										id="defaultDateShortFormat"
 										name="defaultDateShortFormat"
 										type="text"
-										placeholder="defaults to MMM D, YYYY"
+										placeholder="defaults to system short date format"
 										data-setting
 										data-setting-preview
 									/>
@@ -416,7 +416,7 @@ <h2>
 									<span
 										data-setting-preview="defaultDateShortFormat"
 										data-setting-preview-type="date"
-										data-setting-preview-default="MMM D, YYYY"
+										data-setting-preview-default="short"
 									></span>
 								</span>
 							</div>