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

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);
+	}
 }