declarative table layout and option (#2007)

* added scroll bar to table content

src/sql/base/browser/ui/editableDropdown/editableDropdown.component.ts

@@ -0,0 +1,75 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import {
+	Component, Inject, forwardRef, ElementRef, OnInit, Input,
+	Output, OnChanges, SimpleChanges, EventEmitter
+} from '@angular/core';
+
+import { Dropdown, IDropdownOptions } from 'sql/base/browser/ui/editableDropdown/dropdown';
+import { AngularDisposable } from 'sql/base/common/lifecycle';
+
+import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
+import { attachEditableDropdownStyler } from 'sql/common/theme/styler';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
+
+@Component({
+	selector: 'editable-select-box',
+	template: ''
+})
+export class EditableDropDown extends AngularDisposable implements OnInit, OnChanges {
+	private _selectbox: Dropdown;
+
+	@Input() options: string[];
+	@Input() selectedOption: string;
+	@Input() onlyEmitOnChange = false;
+
+	@Output() onDidSelect = new EventEmitter<string>();
+
+	private _previousVal: string;
+
+	constructor(
+		@Inject(forwardRef(() => ElementRef)) private _el: ElementRef,
+		@Inject(IThemeService) private themeService: IThemeService,
+		@Inject(IContextViewService) private contextViewService: IContextViewService
+	) {
+		super();
+	}
+
+	ngOnInit(): void {
+		let dropdownOptions: IDropdownOptions = {
+			values: [],
+			strictSelection: false,
+			placeholder: '',
+			maxHeight: 125,
+			ariaLabel: '',
+			actionLabel: ''
+		};
+		this._selectbox = new Dropdown(this._el.nativeElement, this.contextViewService, this.themeService, dropdownOptions);
+		this._selectbox.values = this.options;
+		this._selectbox.value = this.selectedOption;
+
+		this._selectbox.onValueChange(e => {
+			if (this.onlyEmitOnChange) {
+				if (this._previousVal !== e) {
+					this.onDidSelect.emit(e);
+					this._previousVal = e;
+				}
+			} else {
+				this.onDidSelect.emit(e);
+			}
+		});
+		this._register(attachEditableDropdownStyler(this._selectbox, this.themeService));
+	}
+
+	ngOnChanges(changes: SimpleChanges): void {
+	}
+
+	public get value(): string {
+		return this._selectbox.value;
+	}
+}

src/sql/parts/dashboard/dashboard.module.ts

@@ -57,13 +57,14 @@ import { OperatorsViewComponent } from 'sql/parts/jobManagement/views/operatorsV
 import { ProxiesViewComponent } from 'sql/parts/jobManagement/views/proxiesView.component';
 import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox.component';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox.component';
+import { EditableDropDown } from 'sql/base/browser/ui/editableDropdown/editabledropdown.component';
 import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox.component';
 
 let baseComponents = [DashboardHomeContainer, DashboardComponent, DashboardWidgetWrapper, DashboardWebviewContainer,
 	DashboardWidgetContainer, DashboardGridContainer, DashboardErrorContainer, DashboardNavSection, ModelViewContent, WebviewContent, WidgetContent,
 	ComponentHostDirective, BreadcrumbComponent, ControlHostContent, DashboardControlHostContainer,
 	JobsViewComponent, AgentViewComponent, JobHistoryComponent, JobStepsViewComponent, AlertsViewComponent, ProxiesViewComponent, OperatorsViewComponent,
-	DashboardModelViewContainer, ModelComponentWrapper, Checkbox, SelectBox, InputBox,];
+	DashboardModelViewContainer, ModelComponentWrapper, Checkbox, EditableDropDown, SelectBox, InputBox,];
 
 /* Panel */
 import { PanelModule } from 'sql/base/browser/ui/panel/panel.module';

src/sql/parts/modelComponents/declarativeTable.component.ts

@@ -17,6 +17,7 @@ import { IContextViewService } from 'vs/platform/contextview/browser/contextView
 import { Event, Emitter } from 'vs/base/common/event';
 import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox.component';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox.component';
+import { EditableDropDown } from 'sql/base/browser/ui/editableDropdown/editabledropdown.component';
 import { ISelectData } from 'vs/base/browser/ui/selectBox/selectBox';
 import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox.component';
 import * as nls from 'vs/nls';
@@ -24,29 +25,41 @@ import * as nls from 'vs/nls';
 export enum DeclarativeDataType {
 	string = 'string',
 	category = 'category',
-	boolean = 'boolean'
+	boolean = 'boolean',
+	editableCategory = 'editableCategory'
 }
 
 @Component({
 	selector: 'modelview-declarativeTable',
 	template: `
 	<table role=grid aria-labelledby="ID_REF" #container *ngIf="columns" class="declarative-table">
+	<thead>
+        <tr style="display:block;">
 		<ng-container *ngFor="let column of columns;let h = index">
-			<th class="declarative-table-header" tabindex="-1" role="button" aria-sort="none">{{column.displayName}}</th>
+
+            <td class="declarative-table-header" tabindex="-1" [style.width]="getColumnWidth(h)" role="button" aria-sort="none">{{column.displayName}}</td>
+
+
 		</ng-container>
+		</tr>
+    </thead>
 		<ng-container *ngIf="data">
+		<tbody style="display: block; width:100%; overflow-y: scroll" [style.height]="getHeight()">
 			<ng-container *ngFor="let row of data;let r = index">
 				<tr class="declarative-table-row">
 					<ng-container *ngFor="let cellData of row;let c = index">
 						<td class="declarative-table-cell" tabindex="-1" role="button" [style.width]="getColumnWidth(c)">
 							<checkbox *ngIf="isCheckBox(c)" label="" (onChange)="onCheckBoxChanged($event,r,c)" [enabled]="isControlEnabled(c)" [checked]="isChecked(r,c)"></checkbox>
 							<select-box *ngIf="isSelectBox(c)" [options]="GetOptions(c)" (onDidSelect)="onSelectBoxChanged($event,r,c)" [selectedOption]="GetSelectedOptionDisplayName(r,c)"></select-box>
+							<editable-select-box *ngIf="isEditableSelectBox(c)" [options]="GetOptions(c)" (onDidSelect)="onSelectBoxChanged($event,r,c)" [selectedOption]="GetSelectedOptionDisplayName(r,c)"></editable-select-box>
 							<input-box *ngIf="isInputBox(c)" [value]="cellData" (onDidChange)="onInputBoxChanged($event,r,c)"></input-box>
 							<ng-container *ngIf="isLabel(c)" >{{cellData}}</ng-container>
 						</td>
 					</ng-container>
 				</tr>
+
 			</ng-container>
+			</tbody>
 		</ng-container>
 	</table>
 	`
@@ -109,10 +122,20 @@ export default class DeclarativeTableComponent extends ComponentBase implements
 		this.onCellDataChanged(e, row, cell);
 	}
 
-	private onSelectBoxChanged(e: ISelectData, row: number, cell: number): void {
+	private onSelectBoxChanged(e: ISelectData | string, row: number, cell: number): void {
+
 		let column: sqlops.DeclarativeTableColumn = this.columns[cell];
 		if (column.categoryValues) {
-			this.onCellDataChanged(column.categoryValues[e.index].name, row, cell);
+			if (typeof e === 'string') {
+				let category = column.categoryValues.find(c => c.displayName === e);
+				if (category) {
+					this.onCellDataChanged(category.name, row, cell);
+				} else {
+					this.onCellDataChanged(e, row, cell);
+				}
+			} else {
+				this.onCellDataChanged(column.categoryValues[e.index].name, row, cell);
+			}
 		}
 	}
 
@@ -135,6 +158,11 @@ export default class DeclarativeTableComponent extends ComponentBase implements
 		return column.valueType === DeclarativeDataType.category;
 	}
 
+	private isEditableSelectBox(cell: number): boolean {
+		let column: sqlops.DeclarativeTableColumn = this.columns[cell];
+		return column.valueType === DeclarativeDataType.editableCategory;
+	}
+
 	private isInputBox(cell: number): boolean {
 		let column: sqlops.DeclarativeTableColumn = this.columns[cell];
 		return column.valueType === DeclarativeDataType.string && !column.isReadOnly;
@@ -142,7 +170,7 @@ export default class DeclarativeTableComponent extends ComponentBase implements
 
 	private getColumnWidth(cell: number): string {
 		let column: sqlops.DeclarativeTableColumn = this.columns[cell];
-		return this.convertSize(column.width);
+		return this.convertSize(column.width, '30px');
 	}
 
 	private GetOptions(cell: number): string[] {

src/sql/parts/modelComponents/declarativeTable.css

@@ -2,7 +2,7 @@
 .declarative-table {
 	padding: 5px 30px 0px 30px;
 	box-sizing: border-box;
-	width:100%;
+
 	border-collapse: collapse;
 }
 
@@ -13,6 +13,7 @@
 	padding: 5px;
 	border: 1px solid gray;
 	background-color: #F5F5F5;
+	vertical-align: top;
 }
 
 .vs-dark .declarative-table-header {

src/sql/platform/dialog/dialog.module.ts

@@ -22,6 +22,7 @@ import { IBootstrapParams, ISelector, providerIterator } from 'sql/services/boot
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
 import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox.component';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox.component';
+import { EditableDropDown } from 'sql/base/browser/ui/editableDropdown/editabledropdown.component';
 import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox.component';
 
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
@@ -36,6 +37,7 @@ export const DialogModule = (params, selector: string, instantiationService: IIn
 		declarations: [
 			Checkbox,
 			SelectBox,
+			EditableDropDown,
 			InputBox,
 			DialogContainer,
 			WizardNavigation,

src/sql/sqlops.proposed.d.ts

@@ -390,7 +390,8 @@ declare module 'sqlops' {
 	export enum DeclarativeDataType {
 		string = 'string',
 		category = 'category',
-		boolean = 'boolean'
+		boolean = 'boolean',
+		editableCategory = 'editableCategory'
 	}
 
 	export interface RadioButtonProperties {

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

@@ -272,7 +272,8 @@ export enum DataProviderType {
 export enum DeclarativeDataType {
 	string = 'string',
 	category = 'category',
-	boolean = 'boolean'
+	boolean = 'boolean',
+	editableCategory = 'editableCategory'
 }
 
 export enum CardType {