switch exclude object types table to use declarative table component (#22390)

* switch exclude options to use declarative table component

* add to disposableListeners

extensions/sql-database-projects/src/common/uiConstants.ts

@@ -11,6 +11,10 @@ export namespace cssStyles {
 	export const fontWeightBold = { 'font-weight': 'bold' };
 	export const titleFontSize = 13;
 
+	export const optionsTableHeader = { 'display': 'none', 'border': 'none !important' };
+	export const optionsTableRowLabel = { ...text, 'border-left': 'none', 'border-right': 'none', 'border-top': 'none', 'border-bottom': 'none' }
+	export const optionsTableRowCheckbox = { 'border-left': 'none', 'border-right': 'none', 'border-top': 'none', 'border-bottom': 'none' }
+
 	export const publishDialogLabelWidth = '205px';
 	export const publishDialogTextboxWidth = '190px';
 	export const publishDialogDropdownWidth = '192px';

extensions/sql-database-projects/src/dialogs/publishOptionsDialog.ts

@@ -11,6 +11,7 @@ import type * as azdataType from 'azdata';
 import { PublishDatabaseDialog } from './publishDatabaseDialog';
 import { DeployOptionsModel } from '../models/options/deployOptionsModel';
 import { TelemetryActions, TelemetryReporter, TelemetryViews } from '../common/telemetry';
+import { cssStyles } from '../common/uiConstants';
 
 export class PublishOptionsDialog {
 
@@ -25,7 +26,7 @@ export class PublishOptionsDialog {
 	private optionsChanged: boolean = false;
 	private isResetOptionsClicked: boolean = false;
 	private excludeObjectTypesOptionsTab: azdataType.window.DialogTab | undefined;
-	private excludeObjectTypesOptionsTable: azdataType.TableComponent | undefined;
+	private excludeObjectTypesOptionsTable: azdataType.DeclarativeTableComponent | undefined;
 	private excludeObjectTypesOptionsFlexBuilder: azdataType.FlexContainer | undefined;
 
 	constructor(defaultOptions: mssql.DeploymentOptions, private publish: PublishDatabaseDialog) {
@@ -135,20 +136,38 @@ export class PublishOptionsDialog {
 
 	private initializeExcludeObjectTypesOptionsDialogTab(): void {
 		this.excludeObjectTypesOptionsTab?.registerContent(async view => {
-			this.excludeObjectTypesOptionsTable = view.modelBuilder.table().component();
+			this.excludeObjectTypesOptionsTable = view.modelBuilder.declarativeTable().withProps({
+				width: '480px',
+				columns: [
+					{
+						valueType: utils.getAzdataApi()!.DeclarativeDataType.boolean,
+						width: '10%',
+						isReadOnly: false,
+						displayName: '',
+						headerCssStyles: cssStyles.optionsTableHeader,
+					},
+					{
+						valueType: utils.getAzdataApi()!.DeclarativeDataType.string,
+						width: '90%',
+						displayName: '',
+						isReadOnly: true,
+						headerCssStyles: cssStyles.optionsTableHeader,
+					}
+				],
+			}).component();
 			await this.updateExcludeObjectsTable();
 
 			// Update exclude type options value on checkbox onchange
-			this.disposableListeners.push(this.excludeObjectTypesOptionsTable!.onCellAction!((rowState) => {
+			this.disposableListeners.push(this.excludeObjectTypesOptionsTable.onDataChanged(() => {
-				const checkboxState = <azdataType.ICheckboxCellActionEventArgs>rowState;
+				this.excludeObjectTypesOptionsTable!.dataValues?.forEach((row) => {
-				if (checkboxState && checkboxState.row !== undefined) {
+					const displayName = <string>row[1].value;
-					// data[row][1] contains the exclude type option display name
+					const checkboxValue = <boolean>row[0].value;
-					const displayName = this.excludeObjectTypesOptionsTable?.data[checkboxState.row][1];
+					this.optionsModel.setExcludeObjectTypesOptionValue(displayName, checkboxValue);
-					this.optionsModel.setExcludeObjectTypesOptionValue(displayName, checkboxState.checked);
+				});
-					this.optionsChanged = true;
+				this.optionsChanged = true;
-					// customButton[0] is the reset button, enabling it when option checkbox is changed
+
-					this.dialog.customButtons[0].enabled = true;
+				// customButton[0] is the reset button, enabling it when option checkbox is changed
-				}
+				this.dialog.customButtons[0].enabled = true;
 			}));
 
 			this.excludeObjectTypesOptionsFlexBuilder = view.modelBuilder.flexContainer()
@@ -194,25 +213,9 @@ export class PublishOptionsDialog {
 	*/
 	private async updateExcludeObjectsTable(): Promise<void> {
 		const data = this.optionsModel.getExcludeObjectTypesOptionsData();
+		await this.excludeObjectTypesOptionsTable?.setDataValues(data);
+
 		await this.excludeObjectTypesOptionsTable?.updateProperties({
-			data: data,
-			columns: [
-				<azdataType.CheckboxColumn>
-				{
-					value: constants.OptionInclude,
-					type: utils.getAzdataApi()!.ColumnType.checkBox,
-					action: utils.getAzdataApi()!.ActionOnCellCheckboxCheck.customAction,
-					headerCssClass: 'display-none',
-					cssClass: 'no-borders align-with-header',
-					width: 50
-				},
-				{
-					value: constants.OptionName,
-					headerCssClass: 'display-none',
-					cssClass: 'no-borders align-with-header',
-					width: 50
-				}
-			],
 			ariaRowCount: data.length
 		});
 	}

extensions/sql-database-projects/src/models/options/deployOptionsModel.ts

@@ -6,6 +6,7 @@
 import * as mssql from 'mssql';
 import * as vscode from 'vscode';
 import * as constants from '../../common/constants';
+import { cssStyles } from '../../common/uiConstants';
 
 export class DeployOptionsModel {
 	// key is the option display name and values are checkboxValue and optionName
@@ -93,10 +94,19 @@ export class DeployOptionsModel {
 		let data: any[][] = [];
 		Object.entries(this.deploymentOptions.objectTypesDictionary).forEach(option => {
 			// option[1] is the display name and option[0] is the optionName
-			data.push([this.getExcludeObjectTypeOptionCheckStatus(option[0]), option[1]]);
+			data.push([
+				{
+					value: this.getExcludeObjectTypeOptionCheckStatus(option[0]),
+					style: cssStyles.optionsTableRowCheckbox,
+					ariaLabel: option[1]
+				},
+				{
+					value: option[1],
+					style: cssStyles.optionsTableRowLabel
+				}]);
 		});
 
-		return data.sort((a, b) => a[1].localeCompare(b[1]));
+		return data.sort((a, b) => a[1].value.localeCompare(b[1].value));
 	}
 
 	/*