Adding keyboard shortcuts for column resizing in slickgrid (#21100)

* Adding column resize keyboard shortcuts in slickgrid

* Switching to standard keyboard evt

* Adding comment for the functionality

* Cleaning up code and adding more comments

* Using quick input to get column resize width

* Adding check for negative sizes

* Fixing some stuff

src/sql/workbench/services/insights/browser/insightsDialogView.ts

@@ -52,6 +52,7 @@ import { attachButtonStyler } from 'vs/platform/theme/common/styler';
 import { IDisposableDataProvider } from 'sql/base/common/dataProvider';
 import { ITextResourcePropertiesService } from 'vs/editor/common/services/textResourceConfiguration';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 const labelDisplay = nls.localize("insights.item", "Item");
 const valueDisplay = nls.localize("insights.value", "Value");
@@ -88,13 +89,14 @@ class InsightTableView extends ViewPane {
 		@IOpenerService openerService: IOpenerService,
 		@IThemeService themeService: IThemeService,
 		@ITelemetryService telemetryService: ITelemetryService,
-		@IAccessibilityService private _accessibilityService: IAccessibilityService
+		@IAccessibilityService private _accessibilityService: IAccessibilityService,
+		@IQuickInputService private _quickInputService: IQuickInputService
 	) {
 		super(options, keybindingService, contextMenuService, configurationService, contextKeyService, viewDescriptorService, instantiationService, openerService, themeService, telemetryService);
 	}
 
 	protected override renderBody(container: HTMLElement): void {
-		this._table = new Table(container, this._accessibilityService, {
+		this._table = new Table(container, this._accessibilityService, this._quickInputService, {
 			columns: this.columns,
 			dataProvider: this.data
 		}, this.tableOptions);

src/sql/workbench/services/notebook/browser/outputs/mimemodel.ts

@@ -6,6 +6,7 @@
 import { IRenderMime } from 'sql/workbench/services/notebook/browser/outputs/renderMimeInterfaces';
 import { ReadonlyJSONObject } from 'sql/workbench/services/notebook/common/jsonext';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 
 /**
@@ -22,6 +23,7 @@ export class MimeModel implements IRenderMime.IMimeModel {
 		this._callback = options.callback;
 		this._themeService = options.themeService;
 		this._accessibilityService = options.accessibilityService;
+		this._quickInputService = options.quickInputService;
 	}
 
 	/**
@@ -51,6 +53,10 @@ export class MimeModel implements IRenderMime.IMimeModel {
 		return this._accessibilityService;
 	}
 
+	get quickInputService(): IQuickInputService {
+		return this._quickInputService;
+	}
+
 	/**
 	 * Set the data associated with the model.
 	 *
@@ -69,6 +75,7 @@ export class MimeModel implements IRenderMime.IMimeModel {
 	private _metadata: ReadonlyJSONObject;
 	private _themeService: IThemeService;
 	private _accessibilityService: IAccessibilityService;
+	private _quickInputService: IQuickInputService;
 }
 
 /**
@@ -105,5 +112,7 @@ export namespace MimeModel {
 		themeService?: IThemeService;
 
 		accessibilityService?: IAccessibilityService;
+
+		quickInputService?: IQuickInputService;
 	}
 }

src/sql/workbench/services/notebook/browser/outputs/renderMimeInterfaces.ts

@@ -5,6 +5,7 @@
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { ReadonlyJSONObject } from 'sql/workbench/services/notebook/common/jsonext';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 /**
  * A namespace for rendermime associated interfaces.
@@ -45,6 +46,7 @@ export namespace IRenderMime {
 		readonly themeService: IThemeService;
 
 		readonly accessibilityService: IAccessibilityService;
+		readonly quickInputService: IQuickInputService;
 	}
 
 	/**

src/sql/workbench/services/notebook/browser/outputs/tableRenderers.ts

@@ -17,6 +17,7 @@ import { AdditionalKeyBindings } from 'sql/base/browser/ui/table/plugins/additio
 import { RESULTS_GRID_DEFAULTS } from 'sql/workbench/common/constants';
 import { values } from 'vs/base/common/collections';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 /**
  * Render DataResource as a grid into a host node.
@@ -56,7 +57,7 @@ export function renderDataResource(
 	let transformedData = transformData(sourceObject.data, columnsTransformed);
 	tableResultsData.push(transformedData);
 
-	let detailTable = new Table(tableContainer, options.accessibilityService, {
+	let detailTable = new Table(tableContainer, options.accessibilityService, options.quickInputService, {
 		dataProvider: tableResultsData, columns: columnsTransformed
 	}, {
 		rowHeight: RESULTS_GRID_DEFAULTS.rowHeight,
@@ -141,5 +142,10 @@ export namespace renderDataResource {
 		 * Accessibility service used to get screen reader optimization flag state
 		 */
 		accessibilityService: IAccessibilityService;
+
+		/**
+		 * quickInput service is used to get user's input in column resizing.
+		 */
+		quickInputService?: IQuickInputService;
 	}
 }

src/sql/workbench/services/notebook/browser/outputs/widgets.ts

@@ -402,7 +402,8 @@ export class RenderedDataResource extends RenderedCommon {
 			host: this.node,
 			source: JSON.stringify(model.data[this.mimeType]),
 			themeService: model.themeService,
-			accessibilityService: model.accessibilityService
+			accessibilityService: model.accessibilityService,
+			quickInputService: model.quickInputService
 		});
 	}
 }

src/sql/workbench/services/restore/browser/restoreDialog.ts

@@ -49,6 +49,7 @@ import { IBackupRestoreUrlBrowserDialogService } from 'sql/workbench/services/ba
 import { MediaDeviceType } from 'sql/workbench/contrib/backup/common/constants';
 import { ITextResourcePropertiesService } from 'vs/editor/common/services/textResourceConfiguration';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
+import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 
 interface FileListElement {
 	logicalFileName: string;
@@ -159,7 +160,8 @@ export class RestoreDialog extends Modal {
 		@IClipboardService clipboardService: IClipboardService,
 		@ILogService logService: ILogService,
 		@ITextResourcePropertiesService textResourcePropertiesService: ITextResourcePropertiesService,
-		@IAccessibilityService private _accessibilityService: IAccessibilityService
+		@IAccessibilityService private _accessibilityService: IAccessibilityService,
+		@IQuickInputService private _quickInputService: IQuickInputService
 	) {
 		super(localize('RestoreDialogTitle', "Restore database"), TelemetryKeys.ModalDialogName.Restore, telemetryService, layoutService, clipboardService, themeService, logService, textResourcePropertiesService, contextKeyService, { hasErrors: true, width: 'wide', hasSpinner: true });
 		// view model
@@ -310,7 +312,7 @@ export class RestoreDialog extends Modal {
 		this._restorePlanTableContainer = DOM.append(restorePlanElement, DOM.$('.dialog-input-section.restore-list'));
 		DOM.hide(this._restorePlanTableContainer);
 		this._restorePlanData = new TableDataView<Slick.SlickData>();
-		this._restorePlanTable = this._register(new Table<Slick.SlickData>(this._restorePlanTableContainer, this._accessibilityService,
+		this._restorePlanTable = this._register(new Table<Slick.SlickData>(this._restorePlanTableContainer, this._accessibilityService, this._quickInputService,
 			{ dataProvider: this._restorePlanData, columns: this._restorePlanColumn }, { enableColumnReorder: false }));
 		this._restorePlanTable.setTableTitle(localize('restorePlan', "Restore plan"));
 		this._restorePlanTable.setSelectionModel(new RowSelectionModel({ selectActiveRow: false }));
@@ -361,7 +363,7 @@ export class RestoreDialog extends Modal {
 			field: 'restoreAs'
 		}];
 		this._fileListData = new TableDataView<FileListElement>();
-		this._fileListTable = this._register(new Table<FileListElement>(this._fileListTableContainer, this._accessibilityService,
+		this._fileListTable = this._register(new Table<FileListElement>(this._fileListTableContainer, this._accessibilityService, this._quickInputService,
 			{ dataProvider: this._fileListData, columns }, { enableColumnReorder: false }));
 		this._fileListTable.setSelectionModel(new RowSelectionModel());