change publish options to use declarative table (#22398)

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

@@ -20,7 +20,7 @@ export class PublishOptionsDialog {
 	private disposableListeners: vscode.Disposable[] = [];
 	private descriptionHeading: azdataType.TableComponent | undefined;
 	private descriptionText: azdataType.TextComponent | undefined;
-	private optionsTable: azdataType.TableComponent | undefined;
+	private optionsTable: azdataType.DeclarativeTableComponent | undefined;
 	public optionsModel: DeployOptionsModel;
 	private optionsFlexBuilder: azdataType.FlexContainer | undefined;
 	private optionsChanged: boolean = false;
@@ -96,15 +96,33 @@ export class PublishOptionsDialog {
 				value: ' '
 			}).component();
 
-			this.optionsTable = view.modelBuilder.table().component();
+			this.optionsTable = view.modelBuilder.declarativeTable().withProps({
+				width: '480px',
+				enableRowSelection: true,
+				selectedRow: 0, // start with the first row selected so that the option description is populated
+				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.updateOptionsTable();
 
 			// Get the description of the selected option
-			this.disposableListeners.push(this.optionsTable.onRowSelected(async () => {
+			this.disposableListeners.push(this.optionsTable.onRowSelected(async (selectedRow) => {
-				// selectedRows[0] contains selected row number
-				const row = this.optionsTable?.selectedRows![0];
 				// data[row][1] contains the option display name
-				const displayName = this.optionsTable?.data[row!][1];
+				const displayName = <string>this.optionsTable!.dataValues![selectedRow.row!][1].value;
 				await this.descriptionText?.updateProperties({
 					value: this.optionsModel.getOptionDescription(displayName),
 					ariaLive: 'polite'
@@ -112,12 +130,11 @@ export class PublishOptionsDialog {
 			}));
 
 			// Update deploy options value on checkbox onchange
-			this.disposableListeners.push(this.optionsTable.onCellAction!((rowState) => {
+			this.disposableListeners.push(this.optionsTable.onDataChanged!((changedData) => {
-				const checkboxState = <azdataType.ICheckboxCellActionEventArgs>rowState;
+				if (changedData.row !== undefined) {
-				if (checkboxState && checkboxState.row !== undefined) {
+					// dataValues[row][1] contains the option display name
-					// data[row][1] contains the option display name
+					const displayName = <string>this.optionsTable?.dataValues![changedData.row][1].value;
-					const displayName = this.optionsTable?.data[checkboxState.row][1];
+					this.optionsModel.setOptionValue(displayName, changedData.value);
-					this.optionsModel.setOptionValue(displayName, checkboxState.checked);
 					this.optionsChanged = true;
 					// customButton[0] is the reset button, enabling it when option checkbox is changed
 					this.dialog.customButtons[0].enabled = true;
@@ -158,12 +175,10 @@ export class PublishOptionsDialog {
 			await this.updateExcludeObjectsTable();
 
 			// Update exclude type options value on checkbox onchange
-			this.disposableListeners.push(this.excludeObjectTypesOptionsTable.onDataChanged(() => {
+			this.disposableListeners.push(this.excludeObjectTypesOptionsTable.onDataChanged((changedData) => {
-				this.excludeObjectTypesOptionsTable!.dataValues?.forEach((row) => {
+				const displayName = <string>this.excludeObjectTypesOptionsTable?.dataValues![changedData.row][1].value;
-					const displayName = <string>row[1].value;
+				const checkboxValue = <boolean>changedData.value;
-					const checkboxValue = <boolean>row[0].value;
 				this.optionsModel.setExcludeObjectTypesOptionValue(displayName, checkboxValue);
-				});
 				this.optionsChanged = true;
 
 				// customButton[0] is the reset button, enabling it when option checkbox is changed
@@ -185,25 +200,8 @@ export class PublishOptionsDialog {
 	*/
 	private async updateOptionsTable(): Promise<void> {
 		const data = this.optionsModel.getOptionsData();
+		await this.optionsTable!.setDataValues(data);
 		await this.optionsTable?.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

@@ -39,10 +39,20 @@ export class DeployOptionsModel {
 		let data: any[][] = [];
 		Object.entries(this.deploymentOptions.booleanOptionsDictionary).forEach(option => {
 			// option[1] holds checkedbox value and displayName
-			data.push([option[1].value, option[1].displayName]);
+			data.push([
+				{
+					value: option[1].value,
+					style: cssStyles.optionsTableRowCheckbox,
+					ariaLabel: option[1].displayName
+				},
+				{
+					value: option[1].displayName,
+					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));
 	}
 
 	/*