Feat/importpreview2 (#6506)

* Allow column resizing in preview table

* added property to TableComponentProperties

* hooked up new prop into model view

* new setOptions

* adding enum to azdata interface

* bring in slickgrid 2.3.30

* PR feedback

extensions/import/src/wizard/pages/prosePreviewPage.ts

@@ -32,7 +32,11 @@ export class ProsePreviewPage extends ImportPage {
 	}
 
 	async start(): Promise<boolean> {
-		this.table = this.view.modelBuilder.table().component();
+		this.table = this.view.modelBuilder.table().withProperties<azdata.TableComponentProperties>({
+			data: undefined,
+			columns: undefined,
+			forceFitColumns: azdata.ColumnSizingMode.AutoFit
+		}).component();
 		this.refresh = this.view.modelBuilder.button().withProperties({
 			label: localize('flatFileImport.refresh', 'Refresh'),
 			isFile: false

package.json

@@ -67,7 +67,7 @@
     "rxjs": "5.4.0",
     "sanitize-html": "^1.19.1",
     "semver-umd": "^5.5.3",
-    "slickgrid": "github:anthonydresser/SlickGrid#2.3.29",
+    "slickgrid": "github:anthonydresser/SlickGrid#2.3.30",
     "spdlog": "^0.9.0",
     "sudo-prompt": "9.0.0",
     "v8-inspect-profiler": "^0.0.20",

src/sql/azdata.proposed.d.ts

@@ -3206,11 +3206,18 @@ declare module 'azdata' {
 		customAction = 1
 	}
 
+	export enum ColumnSizingMode {
+		ForceFit = 0,	// all columns will be sized to fit in viewable space, no horiz scroll bar
+		AutoFit = 1,	// columns will be ForceFit up to a certain number; currently 3.  At 4 or more the behavior will switch to NO force fit
+		DataFit = 2		// columns use sizing based on cell data, horiz scroll bar present if more cells than visible in view area
+	}
+
 	export interface TableComponentProperties extends ComponentProperties {
 		data: any[][];
 		columns: string[] | TableColumn[];
 		fontSize?: number | string;
 		selectedRows?: number[];
+		forceFitColumns?: ColumnSizingMode;
 	}
 
 	export interface FileBrowserTreeProperties extends ComponentProperties {

src/sql/base/browser/ui/table/table.ts

@@ -334,4 +334,9 @@ export class Table<T extends Slick.SlickData> extends Widget implements IDisposa
 
 		this.styleElement.innerHTML = content.join('\n');
 	}
+
+	public setOptions(newOptions: Slick.GridOptions<T>) {
+		this._grid.setOptions(newOptions);
+		this._grid.invalidate();
+	}
 }

src/sql/workbench/api/common/extHostModelView.ts

@@ -13,7 +13,7 @@ import * as vscode from 'vscode';
 import * as azdata from 'azdata';
 
 import { SqlMainContext, ExtHostModelViewShape, MainThreadModelViewShape, ExtHostModelViewTreeViewsShape } from 'sql/workbench/api/common/sqlExtHost.protocol';
-import { IItemConfig, ModelComponentTypes, IComponentShape, IComponentEventArgs, ComponentEventType } from 'sql/workbench/api/common/sqlExtHostTypes';
+import { IItemConfig, ModelComponentTypes, IComponentShape, IComponentEventArgs, ComponentEventType, ColumnSizingMode } from 'sql/workbench/api/common/sqlExtHostTypes';
 import { IExtensionDescription } from 'vs/platform/extensions/common/extensions';
 
 class ModelBuilderImpl implements azdata.ModelBuilder {
@@ -1126,6 +1126,13 @@ class TableComponentWrapper extends ComponentWrapper implements azdata.TableComp
 		this.setProperty('selectedRows', v);
 	}
 
+	public get forceFitColumns(): ColumnSizingMode {
+		return this.properties['forceFitColumns'];
+	}
+	public set forceFitColunms(v: ColumnSizingMode) {
+		this.setProperty('forceFitColumns', v);
+	}
+
 	public get onRowSelected(): vscode.Event<any> {
 		let emitter = this._emitterMap.get(ComponentEventType.onSelectedRowChanged);
 		return emitter && emitter.event;

src/sql/workbench/api/common/sqlExtHostTypes.ts

@@ -169,6 +169,12 @@ export enum ModelComponentTypes {
 	Hyperlink
 }
 
+export enum ColumnSizingMode {
+	ForceFit = 0,	// all columns will be sized to fit in viewable space, no horiz scroll bar
+	AutoFit = 1,	// columns will be ForceFit up to a certain number; currently 3.  At 4 or more the behavior will switch to NO force fit
+	DataFit = 2		// columns use sizing based on cell data, horiz scroll bar present if more cells than visible in view area
+}
+
 export enum AgentSubSystem {
 	TransactSql = 1,
 	ActiveScripting = 2,

src/sql/workbench/api/node/sqlExtHost.api.impl.ts

@@ -554,7 +554,8 @@ export function createApiFactory(
 				ActionOnCellCheckboxCheck: sqlExtHostTypes.ActionOnCellCheckboxCheck,
 				StepCompletionAction: sqlExtHostTypes.StepCompletionAction,
 				AgentSubSystem: sqlExtHostTypes.AgentSubSystem,
-				ExtensionNodeType: sqlExtHostTypes.ExtensionNodeType
+				ExtensionNodeType: sqlExtHostTypes.ExtensionNodeType,
+				ColumnSizingMode: sqlExtHostTypes.ColumnSizingMode
 			};
 		},
 

src/sql/workbench/browser/modelComponents/table.component.ts

@@ -10,6 +10,7 @@ import {
 } from '@angular/core';
 
 import * as azdata from 'azdata';
+import { ColumnSizingMode } from 'sql/workbench/api/common/sqlExtHostTypes';
 
 import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/workbench/browser/modelComponents/interfaces';
@@ -119,7 +120,7 @@ export default class TableComponent extends ComponentBase implements IComponent,
 				syncColumnCellResize: true,
 				enableColumnReorder: false,
 				enableCellNavigation: true,
-				forceFitColumns: true
+				forceFitColumns: true // default to true during init, actual value will be updated when setProperties() is called
 			};
 
 			this._table = new Table<Slick.SlickData>(this._inputContainer.nativeElement, { dataProvider: this._tableData, columns: this._tableColumns }, options);
@@ -159,9 +160,40 @@ export default class TableComponent extends ComponentBase implements IComponent,
 	private layoutTable(): void {
 		let width: number = this.convertSizeToNumber(this.width);
 		let height: number = this.convertSizeToNumber(this.height);
+		let forceFit: boolean = true;
+
+		// convert the tri-state viewmodel columnSizingMode to be either true or false for SlickGrid
+		switch (this.forceFitColumns) {
+			case ColumnSizingMode.DataFit: {
+				forceFit = false;
+				break;
+			}
+			case ColumnSizingMode.AutoFit: {
+				// determine if force fit should be on or off based on the number of columns
+				// this can be made more sophisticated if need be in the future.  a simple
+				// check for 3 or less force fits causes the small number of columns to fill the
+				// screen better.  4 or more, slickgrid seems to do a good job filling the view and having forceFit
+				// false enables the scroll bar and avoids the over-packing should there be a very large
+				// number of columns
+				forceFit = (this._table.columns.length <= 3);
+				break;
+			}
+			case ColumnSizingMode.ForceFit:
+			default: {
+				// default behavior for the table component (used primarily in wizards) is to forcefit the columns
+				forceFit = true;
+				break;
+			}
+		}
+		let updateOptions = <Slick.GridOptions<any>>{
+			forceFitColumns: forceFit
+		};
+		this._table.setOptions(updateOptions);
+
 		this._table.layout(new Dimension(
 			width && width > 0 ? width : getContentWidth(this._inputContainer.nativeElement),
 			height && height > 0 ? height : getContentHeight(this._inputContainer.nativeElement)));
+		this._table.resizeCanvas();
 	}
 
 	public setLayout(): void {
@@ -250,4 +282,8 @@ export default class TableComponent extends ComponentBase implements IComponent,
 	public set selectedRows(newValue: number[]) {
 		this.setPropertyFromUI<azdata.TableComponentProperties, number[]>((props, value) => props.selectedRows = value, newValue);
 	}
+
+	public get forceFitColumns() {
+		return this.getPropertyOrDefault<azdata.TableComponentProperties, ColumnSizingMode>((props) => props.forceFitColumns, ColumnSizingMode.ForceFit);
+	}
 }

yarn.lock

@@ -8447,9 +8447,9 @@ slice-ansi@^2.0.0:
     astral-regex "^1.0.0"
     is-fullwidth-code-point "^2.0.0"
 
-"slickgrid@github:anthonydresser/SlickGrid#2.3.29":
+"slickgrid@github:anthonydresser/SlickGrid#2.3.30":
-  version "2.3.29"
+  version "2.3.30"
-  resolved "https://codeload.github.com/anthonydresser/SlickGrid/tar.gz/40b88f10d36d35f350838d1a2142c4b790701709"
+  resolved "https://codeload.github.com/anthonydresser/SlickGrid/tar.gz/c941811d833504dfaf40b29b69044a42595bfafb"
   dependencies:
     jquery ">=1.8.0"
     jquery-ui ">=1.8.0"