declarative table fix (#14844)

* declarative table fixes

* reset selectedRow

* use eventHelper

extensions/sql-migration/src/dialog/assessmentResults/sqlDatabasesTree.ts

@@ -69,7 +69,7 @@ export class SqlDatabaseTree {
 	private createDatabaseComponent(view: azdata.ModelView, dbs: string[]): azdata.DivContainer {
 		this._databaseTable = view.modelBuilder.declarativeTable().withProps(
 			{
-				selectEffect: true,
+				enableRowSelection: true,
 				width: 200,
 				CSSStyles: {
 					'table-layout': 'fixed'
@@ -141,7 +141,7 @@ export class SqlDatabaseTree {
 	private createInstanceComponent(view: azdata.ModelView): azdata.DivContainer {
 		this._instanceTable = view.modelBuilder.declarativeTable().withProps(
 			{
-				selectEffect: true,
+				enableRowSelection: true,
 				width: 200,
 				columns: [
 					{
@@ -291,7 +291,7 @@ export class SqlDatabaseTree {
 
 		this._impactedObjectsTable = view.modelBuilder.declarativeTable().withProps(
 			{
-				selectEffect: true,
+				enableRowSelection: true,
 				width: '100%',
 				columns: [
 					{
@@ -516,7 +516,7 @@ export class SqlDatabaseTree {
 
 		this._assessmentResultsTable = view.modelBuilder.declarativeTable().withProps(
 			{
-				selectEffect: true,
+				enableRowSelection: true,
 				width: '200px',
 				CSSStyles: {
 					'table-layout': 'fixed'

src/sql/azdata.proposed.d.ts

@@ -368,9 +368,9 @@ declare module 'azdata' {
 		dataValues?: DeclarativeTableCellValue[][];
 
 		/**
-		 * Should the table react to user selections
+		 * Gets a boolean value determines whether the row selection is enabled. Default value is false.
 		 */
-		selectEffect?: boolean; // Defaults to false
+		enableRowSelection?: boolean;
 	}
 
 	export interface DeclarativeTableCellValue {

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

@@ -1563,12 +1563,12 @@ class DeclarativeTableWrapper extends ComponentWrapper implements azdata.Declara
 		return this._proxy.$setProperties(this._handle, this._id, this.getPropertiesForMainThread());
 	}
 
-	public get selectEffect(): boolean | undefined {
+	public get enableRowSelection(): boolean | undefined {
-		return this.properties['selectEffect'];
+		return this.properties['enableRowSelection'];
 	}
 
-	public set selectEffect(v: boolean | undefined) {
+	public set enableRowSelection(v: boolean | undefined) {
-		this.setProperty('selectEffect', v);
+		this.setProperty('enableRowSelection', v);
 	}
 
 	public setFilter(rowIndexes: number[]): void {

src/sql/workbench/browser/modelComponents/declarativeTable.component.html

@@ -1,4 +1,4 @@
-<table role="grid" #container *ngIf="columns" class="declarative-table" [attr.aria-label]="ariaLabel" [ngStyle]="CSSStyles">
+<table role="grid" #container *ngIf="columns" class="declarative-table" [attr.aria-label]="ariaLabel" [ngStyle]="CSSStyles" (focusin)="onFocusIn()" (focusout)="onFocusOut()">
 	<thead role="rowgroup">
 		<tr role="row">
 			<ng-container *ngFor="let column of columns; let c = index;">
@@ -16,7 +16,7 @@
 	<tbody role="rowgroup">
 		<ng-container *ngIf="data.length > 0">
 			<ng-container *ngFor="let row of data;let r = index;">
-				<tr [style.display]="isFiltered(r) ? 'none' : ''" class="declarative-table-row" [ngStyle]="getRowStyle(r)" role="row">
+				<tr [style.display]="isFiltered(r) ? 'none' : ''" class="declarative-table-row" [ngStyle]="getRowStyle(r)" role="row" [attr.tabindex]="enableRowSelection ? 0 : null" (click)="onRowSelected(r)" (keydown)="onKey($event,r)">
 					<ng-container *ngFor="let cellData of row;let c = index;trackBy:trackByFnCols">
 						<td class="declarative-table-cell" [style.width]="getColumnWidth(c)"
 							[attr.aria-label]="getAriaLabel(r, c)"
@@ -36,7 +36,7 @@
 							</editable-select-box>
 							<input-box *ngIf="isInputBox(c)" [value]="cellData.value"
 								(onDidChange)="onInputBoxChanged($event,r,c)"></input-box>
-							<span *ngIf="isLabel(c)" (click)="onCellClick(r)">
+							<span *ngIf="isLabel(c)">
 								{{cellData.value}}
 							</span>
 							<model-component-wrapper *ngIf="isComponent(c) && getItemDescriptor(cellData.value)"

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

@@ -9,8 +9,11 @@ import * as azdata from 'azdata';
 import { convertSize } from 'sql/base/browser/dom';
 import { ComponentEventType, IComponent, IComponentDescriptor, IModelStore, ModelViewAction } from 'sql/platform/dashboard/browser/interfaces';
 import { ContainerBase } from 'sql/workbench/browser/modelComponents/componentBase';
+import { EventHelper } from 'vs/base/browser/dom';
+import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { ISelectData } from 'vs/base/browser/ui/selectBox/selectBox';
 import { equals as arrayEquals } from 'vs/base/common/arrays';
+import { KeyCode } from 'vs/base/common/keyCodes';
 import { localize } from 'vs/nls';
 import { ILogService } from 'vs/platform/log/common/log';
 import * as colorRegistry from 'vs/platform/theme/common/colorRegistry';
@@ -37,6 +40,7 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
 	private columns: azdata.DeclarativeTableColumn[] = [];
 	private _selectedRow: number;
 	private _colorTheme: IColorTheme;
+	private _hasFocus: boolean;
 
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
@@ -281,26 +285,28 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
 		if (isDataPropertyChanged) {
 			this.clearContainer();
 			this._data = finalData;
-			this._selectedRow = -1;
 		}
 		super.setProperties(properties);
 	}
 
+	public clearContainer(): void {
+		super.clearContainer();
+		this._selectedRow = -1;
+	}
+
 	public get data(): azdata.DeclarativeTableCellValue[][] {
 		return this._data;
 	}
 
 	public isRowSelected(row: number): boolean {
-		// Only react when the user wants you to
+		if (!this.enableRowSelection) {
-		if (this.getProperties().selectEffect !== true) {
 			return false;
 		}
 		return this._selectedRow === row;
 	}
 
-	public onCellClick(row: number) {
+	public onRowSelected(row: number) {
-		// Only react when the user wants you to
+		if (!this.enableRowSelection) {
-		if (this.getProperties().selectEffect !== true) {
 			return;
 		}
 		if (!this.isRowSelected(row)) {
@@ -316,6 +322,14 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
 		}
 	}
 
+	public onKey(e: KeyboardEvent, row: number) {
+		const event = new StandardKeyboardEvent(e);
+		if (event.equals(KeyCode.Enter) || event.equals(KeyCode.Space)) {
+			this.onRowSelected(row);
+			EventHelper.stop(e, true);
+		}
+	}
+
 	public doAction(action: string, ...args: any[]): void {
 		if (action === ModelViewAction.Filter) {
 			this._filteredRowIndexes = args[0];
@@ -339,13 +353,32 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
 			'width': this.getWidth(),
 			'height': this.getHeight()
 		});
-
 	}
 
 	public getRowStyle(rowIndex: number): azdata.CssStyles {
-		return this.isRowSelected(rowIndex) ? {
+		if (this.isRowSelected(rowIndex)) {
-			'background-color': this._colorTheme.getColor(colorRegistry.listActiveSelectionBackground).toString(),
+			const bgColor = this._hasFocus ? colorRegistry.listActiveSelectionBackground : colorRegistry.listInactiveSelectionBackground;
-			'color': this._colorTheme.getColor(colorRegistry.listActiveSelectionForeground).toString()
+			const color = this._hasFocus ? colorRegistry.listActiveSelectionForeground : colorRegistry.listInactiveSelectionForeground;
-		} : {};
+			return {
+				'background-color': this._colorTheme.getColor(bgColor)?.toString(),
+				'color': this._colorTheme.getColor(color)?.toString()
+			};
+		} else {
+			return {};
+		}
+	}
+
+	onFocusIn() {
+		this._hasFocus = true;
+		this._changeRef.detectChanges();
+	}
+
+	onFocusOut() {
+		this._hasFocus = false;
+		this._changeRef.detectChanges();
+	}
+
+	public get enableRowSelection(): boolean {
+		return this.getPropertyOrDefault<boolean>((props) => props.enableRowSelection, false);
 	}
 }