declarative table improvement (#15024)

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

@@ -799,11 +799,14 @@ export class SqlDatabaseTree {
 			this._model._assessmentResults.databaseAssessments.sort((db1, db2) => {
 				return db2.issues.length - db1.issues.length;
 			});
+			// Reset the dbName list so that it is in sync with the table
+			this._dbNames = this._model._assessmentResults.databaseAssessments.map(da => da.name);
 			this._model._assessmentResults.databaseAssessments.forEach((db) => {
 				this._databaseTableValues.push(
 					[
 						{
 							value: selectedDbs.includes(db.name),
+							enabled: db.issues.length === 0,
 							style: styleLeft
 						},
 						{

src/sql/azdata.proposed.d.ts

@@ -256,7 +256,6 @@ declare module 'azdata' {
 		rowCssStyles?: CssStyles;
 		ariaLabel?: string;
 		showCheckAll?: boolean;
-		isChecked?: boolean;
 	}
 
 
@@ -384,9 +383,23 @@ declare module 'azdata' {
 	}
 
 	export interface DeclarativeTableCellValue {
+		/**
+		 * The cell value
+		 */
 		value: string | number | boolean | Component;
+		/**
+		 * The aria-label of the cell
+		 */
 		ariaLabel?: string;
-		style?: CssStyles
+		/**
+		 * The CSS style of the cell
+		 */
+		style?: CssStyles;
+		/**
+		 * A boolean value indicates whether the cell is enabled. Default value is true.
+		 * Note: this is currently only implemented for boolean type (checkbox).
+		 */
+		enabled?: boolean;
 	}
 
 	/**

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

@@ -52,8 +52,8 @@ export class Checkbox extends Widget {
 		this._label.setAttribute('for', id);
 
 		this.label = opts.label;
-		this.enabled = opts.enabled || true;
+		this.enabled = opts.enabled ?? true;
-		this.checked = opts.checked || false;
+		this.checked = opts.checked ?? false;
 
 		if (opts.onChange) {
 			this.onChange(opts.onChange);

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

@@ -6,7 +6,7 @@
 					[ngStyle]="column.headerCssStyles"
 					[attr.aria-label]="getHeaderAriaLabel(c)">
 					{{column.displayName}}
-					<checkbox *ngIf="isCheckBox(c)" [checked]="isHeaderChecked(c)"
+					<checkbox *ngIf="headerCheckboxVisible(c)" [checked]="isHeaderChecked(c)"
 					[aria-label]="getCheckAllColumnAriaLabel(c)" (onChange)="onHeaderCheckBoxChanged($event,c)"
 						label=""></checkbox>
 				</th>
@@ -23,7 +23,7 @@
 							[ngStyle]="mergeCss(columns[c].rowCssStyles, cellData.style)"
 							role="gridcell">
 							<checkbox *ngIf="isCheckBox(c)" label="" (onChange)="onCheckBoxChanged($event,r,c)"
-								[enabled]="isControlEnabled(c)" [checked]="isChecked(r,c)"
+								[enabled]="isControlEnabled(r, c)" [checked]="isChecked(r,c)"
 								[ngStyle]="mergeCss(columns[c].rowCssStyles, cellData.style)">
 							</checkbox>
 							<select-box *ngIf="isSelectBox(c)" [options]="getOptions(c)"

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

@@ -70,9 +70,18 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
 		this.baseDestroy();
 	}
 
+	public headerCheckboxVisible(colIdx: number): boolean {
+		return this.columns[colIdx].showCheckAll && this.isCheckBox(colIdx);
+	}
+
 	public isHeaderChecked(colIdx: number): boolean {
-		let column: azdata.DeclarativeTableColumn = this.columns[colIdx];
+		for (const row of this.data) {
-		return column.isChecked;
+			const cellData = row[colIdx];
+			if (cellData.value === false && cellData.enabled !== false) {
+				return false;
+			}
+		}
+		return true;
 	}
 
 	public isCheckBox(colIdx: number): boolean {
@@ -80,9 +89,10 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
 		return column.valueType === DeclarativeDataType.boolean;
 	}
 
-	public isControlEnabled(colIdx: number): boolean {
+	public isControlEnabled(rowIdx: number, colIdx: number): boolean {
-		let column: azdata.DeclarativeTableColumn = this.columns[colIdx];
+		const cellData = this.data[rowIdx][colIdx];
-		return !column.isReadOnly;
+		const column: azdata.DeclarativeTableColumn = this.columns[colIdx];
+		return !column.isReadOnly && cellData.enabled !== false;
 	}
 
 	private isLabel(colIdx: number): boolean {
@@ -108,22 +118,14 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
 		this.onCellDataChanged(e, rowIdx, colIdx);
 		// If all of the rows in that column are now checked, let's update the header.
 		if (this.columns[colIdx].showCheckAll) {
-			if (e) {
-				for (let rowIdx = 0; rowIdx < this.data.length; rowIdx++) {
-					if (this.data[rowIdx][colIdx].value === false) {
-						return;
-					}
-				}
-			}
-			this.columns[colIdx].isChecked = e;
 			this._changeRef.detectChanges();
 		}
 	}
 
 	public onHeaderCheckBoxChanged(e: boolean, colIdx: number): void {
-		this.columns[colIdx].isChecked = e;
 		this.data.forEach((row, rowIdx) => {
-			if (row[colIdx].value !== e) {
+			const cellData = row[colIdx];
+			if (cellData.value !== e && cellData.enabled !== false) {
 				this.onCellDataChanged(e, rowIdx, colIdx);
 			}
 		});