From 2be49a9911e46fb7ef6651b5fb2da60f2ce6a6ce Mon Sep 17 00:00:00 2001 From: Kim Santiago <31145923+kisantia@users.noreply.github.com> Date: Tue, 21 Mar 2023 14:09:31 -0700 Subject: [PATCH] switch exclude object types table to use declarative table component (#22390) * switch exclude options to use declarative table component * add to disposableListeners --- .../src/common/uiConstants.ts | 4 ++ .../src/dialogs/publishOptionsDialog.ts | 63 ++++++++++--------- .../src/models/options/deployOptionsModel.ts | 14 ++++- 3 files changed, 49 insertions(+), 32 deletions(-) diff --git a/extensions/sql-database-projects/src/common/uiConstants.ts b/extensions/sql-database-projects/src/common/uiConstants.ts index aebf87f458..cca313b6e7 100644 --- a/extensions/sql-database-projects/src/common/uiConstants.ts +++ b/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'; diff --git a/extensions/sql-database-projects/src/dialogs/publishOptionsDialog.ts b/extensions/sql-database-projects/src/dialogs/publishOptionsDialog.ts index 19205ef27f..e1d215a801 100644 --- a/extensions/sql-database-projects/src/dialogs/publishOptionsDialog.ts +++ b/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) => { - const checkboxState = rowState; - if (checkboxState && checkboxState.row !== undefined) { - // data[row][1] contains the exclude type option display name - const displayName = this.excludeObjectTypesOptionsTable?.data[checkboxState.row][1]; - this.optionsModel.setExcludeObjectTypesOptionValue(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; - } + this.disposableListeners.push(this.excludeObjectTypesOptionsTable.onDataChanged(() => { + this.excludeObjectTypesOptionsTable!.dataValues?.forEach((row) => { + const displayName = row[1].value; + const checkboxValue = row[0].value; + this.optionsModel.setExcludeObjectTypesOptionValue(displayName, checkboxValue); + }); + this.optionsChanged = 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 { const data = this.optionsModel.getExcludeObjectTypesOptionsData(); + await this.excludeObjectTypesOptionsTable?.setDataValues(data); + await this.excludeObjectTypesOptionsTable?.updateProperties({ - data: data, - columns: [ - - { - 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 }); } diff --git a/extensions/sql-database-projects/src/models/options/deployOptionsModel.ts b/extensions/sql-database-projects/src/models/options/deployOptionsModel.ts index 5abbd8391c..137dccf17d 100644 --- a/extensions/sql-database-projects/src/models/options/deployOptionsModel.ts +++ b/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)); } /*