diff --git a/extensions/agent/src/dialogs/alertDialog.ts b/extensions/agent/src/dialogs/alertDialog.ts index 1f70f2f1b5..1c870fd93b 100644 --- a/extensions/agent/src/dialogs/alertDialog.ts +++ b/extensions/agent/src/dialogs/alertDialog.ts @@ -200,28 +200,28 @@ export class AlertDialog extends AgentDialog { } }); this.enabledCheckBox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: AlertDialog.EnabledCheckboxLabel }).component(); this.enabledCheckBox.checked = true; this.databaseDropDown = view.modelBuilder.dropDown() - .withProperties({ + .withProps({ value: databases[0], values: databases, width: '100%' }).component(); this.typeDropDown = view.modelBuilder.dropDown() - .withProperties({ + .withProps({ value: '', values: AlertDialog.AlertTypes, width: '100%' }).component(); this.severityRadioButton = view.modelBuilder.radioButton() - .withProperties({ + .withProps({ value: 'serverity', name: 'alertTypeOptions', label: AlertDialog.SeverityLabel, @@ -230,21 +230,21 @@ export class AlertDialog extends AgentDialog { this.severityRadioButton.checked = true; this.severityDropDown = view.modelBuilder.dropDown() - .withProperties({ + .withProps({ value: AlertDialog.AlertSeverities[0], values: AlertDialog.AlertSeverities, width: '100%' }).component(); this.errorNumberRadioButton = view.modelBuilder.radioButton() - .withProperties({ + .withProps({ value: 'errorNumber', name: 'alertTypeOptions', label: AlertDialog.ErrorNumberLabel }).component(); this.errorNumberTextBox = view.modelBuilder.inputBox() - .withProperties({ + .withProps({ width: '100%' }) .component(); @@ -261,7 +261,7 @@ export class AlertDialog extends AgentDialog { }); this.raiseAlertMessageCheckBox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: AlertDialog.RaiseIfMessageContainsLabel }).component(); @@ -344,12 +344,12 @@ export class AlertDialog extends AgentDialog { private initializeResponseTab() { this.responseTab.registerContent(async view => { this.executeJobCheckBox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: AlertDialog.ExecuteJobCheckBoxLabel }).component(); this.executeJobTextBox = view.modelBuilder.inputBox() - .withProperties({ width: 375 }) + .withProps({ width: 375 }) .component(); this.executeJobTextBox.enabled = false; this.newJobButton = view.modelBuilder.button().withProps({ @@ -383,19 +383,19 @@ export class AlertDialog extends AgentDialog { }], { componentWidth: '100%' }).component(); let previewTag = view.modelBuilder.text() - .withProperties({ + .withProps({ value: 'Feature Preview' }).component(); this.notifyOperatorsCheckBox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: AlertDialog.NotifyOperatorsTextBoxLabel }).component(); this.notifyOperatorsCheckBox.enabled = false; this.operatorsTable = view.modelBuilder.table() - .withProperties({ + .withProps({ columns: [ AlertDialog.OperatorNameColumnLabel, AlertDialog.OperatorEmailColumnLabel, @@ -466,28 +466,28 @@ export class AlertDialog extends AgentDialog { this.optionsTab.registerContent(async view => { this.includeErrorInEmailTextBox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: AlertDialog.IncludeErrorInEmailCheckBoxLabel }).component(); this.includeErrorInPagerTextBox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: AlertDialog.IncludeErrorInPagerCheckBoxLabel }).component(); this.additionalMessageTextBox = view.modelBuilder.inputBox().component(); this.delayMinutesTextBox = view.modelBuilder.inputBox() - .withProperties({ + .withProps({ inputType: 'number', - placeHolder: 0 + placeHolder: '0' }) .component(); this.delaySecondsTextBox = view.modelBuilder.inputBox() - .withProperties({ + .withProps({ inputType: 'number', - placeHolder: 0 + placeHolder: '0' }) .component(); diff --git a/extensions/agent/src/dialogs/jobDialog.ts b/extensions/agent/src/dialogs/jobDialog.ts index 43d58f14ae..d083e32751 100644 --- a/extensions/agent/src/dialogs/jobDialog.ts +++ b/extensions/agent/src/dialogs/jobDialog.ts @@ -175,12 +175,12 @@ export class JobDialog extends AgentDialog { }); this.ownerTextBox = view.modelBuilder.inputBox().component(); this.categoryDropdown = view.modelBuilder.dropDown().component(); - this.descriptionTextBox = view.modelBuilder.inputBox().withProperties({ + this.descriptionTextBox = view.modelBuilder.inputBox().withProps({ multiline: true, height: 200 }).component(); this.enabledCheckBox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: this.EnabledCheckboxLabel }).component(); let formModel = view.modelBuilder.formContainer() @@ -222,7 +222,7 @@ export class JobDialog extends AgentDialog { this.stepsTab.registerContent(async view => { let data = this.steps ? this.convertStepsToData(this.steps) : []; this.stepsTable = view.modelBuilder.table() - .withProperties({ + .withProps({ columns: [ this.StepsTable_StepColumnString, this.StepsTable_NameColumnString, @@ -234,7 +234,7 @@ export class JobDialog extends AgentDialog { height: 500 }).component(); - this.startStepDropdown = view.modelBuilder.dropDown().withProperties({ width: 180 }).component(); + this.startStepDropdown = view.modelBuilder.dropDown().withProps({ width: 180 }).component(); this.startStepDropdown.enabled = this.steps.length >= 1; this.steps.forEach((step) => { this.startStepDropdownValues.push({ displayName: step.id + ': ' + step.stepName, name: step.id.toString() }); @@ -438,7 +438,7 @@ export class JobDialog extends AgentDialog { let alerts = this.model.alerts ? this.model.alerts : []; let data = this.convertAlertsToData(alerts); this.alertsTable = view.modelBuilder.table() - .withProperties({ + .withProps({ columns: [ this.AlertNameLabelString, this.AlertEnabledLabelString, @@ -485,7 +485,7 @@ export class JobDialog extends AgentDialog { private initializeSchedulesTab() { this.schedulesTab.registerContent(async view => { this.schedulesTable = view.modelBuilder.table() - .withProperties({ + .withProps({ columns: [ PickScheduleDialog.SchedulesIDText, PickScheduleDialog.ScheduleNameLabelText, @@ -554,20 +554,20 @@ export class JobDialog extends AgentDialog { private initializeNotificationsTab() { this.notificationsTab.registerContent(async view => { - this.emailCheckBox = view.modelBuilder.checkBox().withProperties({ + this.emailCheckBox = view.modelBuilder.checkBox().withProps({ label: this.EmailCheckBoxString, width: '20%' }).component(); - this.pagerCheckBox = view.modelBuilder.checkBox().withProperties({ + this.pagerCheckBox = view.modelBuilder.checkBox().withProps({ label: this.PagerCheckBoxString, width: '20%' }).component(); - this.eventLogCheckBox = view.modelBuilder.checkBox().withProperties({ + this.eventLogCheckBox = view.modelBuilder.checkBox().withProps({ label: this.EventLogCheckBoxString, width: '5%' }).component(); - this.deleteJobCheckBox = view.modelBuilder.checkBox().withProperties({ + this.deleteJobCheckBox = view.modelBuilder.checkBox().withProps({ label: this.DeleteJobCheckBoxString, width: '7%' }).component(); @@ -589,12 +589,12 @@ export class JobDialog extends AgentDialog { this.deleteJobConditionDropdown.enabled = this.deleteJobCheckBox.checked; }); - this.emailOperatorDropdown = view.modelBuilder.dropDown().withProperties({ width: '90%' }).component(); - this.pagerOperatorDropdown = view.modelBuilder.dropDown().withProperties({ width: '90%' }).component(); - this.emailConditionDropdown = view.modelBuilder.dropDown().withProperties({ width: '80%' }).component(); - this.pagerConditionDropdown = view.modelBuilder.dropDown().withProperties({ width: '80%' }).component(); - this.eventLogConditionDropdown = view.modelBuilder.dropDown().withProperties({ width: '80%' }).component(); - this.deleteJobConditionDropdown = view.modelBuilder.dropDown().withProperties({ width: '85%' }).component(); + this.emailOperatorDropdown = view.modelBuilder.dropDown().withProps({ width: '90%' }).component(); + this.pagerOperatorDropdown = view.modelBuilder.dropDown().withProps({ width: '90%' }).component(); + this.emailConditionDropdown = view.modelBuilder.dropDown().withProps({ width: '80%' }).component(); + this.pagerConditionDropdown = view.modelBuilder.dropDown().withProps({ width: '80%' }).component(); + this.eventLogConditionDropdown = view.modelBuilder.dropDown().withProps({ width: '80%' }).component(); + this.deleteJobConditionDropdown = view.modelBuilder.dropDown().withProps({ width: '85%' }).component(); let emailContainer = this.createRowContainer(view).withItems([this.emailCheckBox, this.emailOperatorDropdown, this.emailConditionDropdown]).component(); diff --git a/extensions/agent/src/dialogs/jobStepDialog.ts b/extensions/agent/src/dialogs/jobStepDialog.ts index 08146cf8d2..949fc6d085 100644 --- a/extensions/agent/src/dialogs/jobStepDialog.ts +++ b/extensions/agent/src/dialogs/jobStepDialog.ts @@ -185,7 +185,7 @@ export class JobStepDialog extends AgentDialog { } }); this.commandTextBox = view.modelBuilder.inputBox() - .withProperties({ + .withProps({ height: 300, width: 400, multiline: true, @@ -199,7 +199,7 @@ export class JobStepDialog extends AgentDialog { private createGeneralTab(databases: string[], queryProvider: azdata.QueryProvider) { this.generalTab.registerContent(async (view) => { this.nameTextBox = view.modelBuilder.inputBox() - .withProperties({ + .withProps({ ariaLabel: this.StepNameLabelString, placeHolder: this.StepNameLabelString }).component(); @@ -211,26 +211,26 @@ export class JobStepDialog extends AgentDialog { }); this.typeDropdown = view.modelBuilder.dropDown() - .withProperties({ + .withProps({ value: JobStepDialog.TSQLScript, values: [JobStepDialog.TSQLScript, JobStepDialog.CmdExec, JobStepDialog.Powershell] }) .component(); this.runAsDropdown = view.modelBuilder.dropDown() - .withProperties({ + .withProps({ value: '', values: [''] }) .component(); this.runAsDropdown.enabled = false; this.databaseDropdown = view.modelBuilder.dropDown() - .withProperties({ + .withProps({ value: databases[0], values: databases }).component(); this.processExitCodeBox = view.modelBuilder.inputBox() - .withProperties({ + .withProps({ ariaLabel: this.ProcessExitCodeText, placeHolder: this.ProcessExitCodeText }).component(); @@ -315,7 +315,7 @@ export class JobStepDialog extends AgentDialog { private createAdvancedTab() { this.advancedTab.registerContent(async (view) => { this.successActionDropdown = view.modelBuilder.dropDown() - .withProperties({ + .withProps({ width: '100%', value: JobStepDialog.NextStep, values: [JobStepDialog.NextStep, JobStepDialog.QuitJobReportingSuccess, JobStepDialog.QuitJobReportingFailure] @@ -324,18 +324,18 @@ export class JobStepDialog extends AgentDialog { let retryFlexContainer = this.createRetryCounters(view); this.failureActionDropdown = view.modelBuilder.dropDown() - .withProperties({ + .withProps({ value: JobStepDialog.QuitJobReportingFailure, values: [JobStepDialog.QuitJobReportingFailure, JobStepDialog.NextStep, JobStepDialog.QuitJobReportingSuccess] }) .component(); let optionsGroup = this.createTSQLOptions(view); this.logToTableCheckbox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: this.LogToTableLabel }).component(); let appendToExistingEntryInTableCheckbox = view.modelBuilder.checkBox() - .withProperties({ label: this.AppendExistingTableEntryLabel }).component(); + .withProps({ label: this.AppendExistingTableEntryLabel }).component(); appendToExistingEntryInTableCheckbox.enabled = false; this.logToTableCheckbox.onChanged(e => { appendToExistingEntryInTableCheckbox.enabled = e; @@ -346,9 +346,9 @@ export class JobStepDialog extends AgentDialog { .withLayout({ flexFlow: 'row', justifyContent: 'space-between', width: 300 }) .withItems([this.logToTableCheckbox]).component(); this.logStepOutputHistoryCheckbox = view.modelBuilder.checkBox() - .withProperties({ label: this.IncludeStepOutputHistoryLabel }).component(); + .withProps({ label: this.IncludeStepOutputHistoryLabel }).component(); this.userInputBox = view.modelBuilder.inputBox() - .withProperties({ inputType: 'text', width: '100%' }).component(); + .withProps({ inputType: 'text', width: '100%' }).component(); let formModel = view.modelBuilder.formContainer() .withFormItems( [{ @@ -400,7 +400,7 @@ export class JobStepDialog extends AgentDialog { private createRetryCounters(view: azdata.ModelView) { this.retryAttemptsBox = view.modelBuilder.inputBox() .withValidation(component => Number(component.value) >= 0) - .withProperties({ + .withProps({ inputType: 'number', width: '100%', placeHolder: '0' @@ -408,7 +408,7 @@ export class JobStepDialog extends AgentDialog { .component(); this.retryIntervalBox = view.modelBuilder.inputBox() .withValidation(component => Number(component.value) >= 0) - .withProperties({ + .withProps({ inputType: 'number', width: '100%', placeHolder: '0' @@ -449,23 +449,23 @@ export class JobStepDialog extends AgentDialog { this.fileBrowserDialog.content = [fileBrowserTab]; fileBrowserTab.registerContent(async (view) => { this.fileBrowserTree = view.modelBuilder.fileBrowserTree() - .withProperties({ ownerUri: this.ownerUri, width: 420, height: 700 }) + .withProps({ ownerUri: this.ownerUri, width: 420, height: 700 }) .component(); this.selectedPathTextBox = view.modelBuilder.inputBox() - .withProperties({ inputType: 'text' }) + .withProps({ inputType: 'text' }) .component(); this.fileBrowserTree.onDidChange((args) => { this.selectedPathTextBox.value = args.fullPath; this.fileBrowserNameBox.value = args.isFile ? path.win32.basename(args.fullPath) : ''; }); this.fileTypeDropdown = view.modelBuilder.dropDown() - .withProperties({ + .withProps({ value: this.AllFilesLabelString, values: [this.AllFilesLabelString] }) .component(); this.fileBrowserNameBox = view.modelBuilder.inputBox() - .withProperties({}) + .withProps({}) .component(); let fileBrowserContainer = view.modelBuilder.formContainer() .withFormItems([{ @@ -501,7 +501,7 @@ export class JobStepDialog extends AgentDialog { }).component(); this.outputFileBrowserButton.onDidClick(() => this.openFileBrowserDialog()); this.outputFileNameBox = view.modelBuilder.inputBox() - .withProperties({ + .withProps({ width: 250, inputType: 'text' }).component(); @@ -519,7 +519,7 @@ export class JobStepDialog extends AgentDialog { flex: '1 1 50%' }).component(); this.appendToExistingFileCheckbox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: this.AppendOutputToFileLabel }).component(); this.appendToExistingFileCheckbox.enabled = false; diff --git a/extensions/agent/src/dialogs/notebookDialog.ts b/extensions/agent/src/dialogs/notebookDialog.ts index 12ec04009d..b8c7cbcdfa 100644 --- a/extensions/agent/src/dialogs/notebookDialog.ts +++ b/extensions/agent/src/dialogs/notebookDialog.ts @@ -99,12 +99,12 @@ export class NotebookDialog extends AgentDialog { private initializeGeneralTab() { this.generalTab.registerContent(async view => { this.templateFilePathBox = view.modelBuilder.inputBox() - .withProperties({ + .withProps({ width: 400, inputType: 'text' }).component(); this.openTemplateFileButton = view.modelBuilder.button() - .withProperties({ + .withProps({ label: '...', title: '...', width: '20px', @@ -139,22 +139,22 @@ export class NotebookDialog extends AgentDialog { let databases = await AgentUtils.getDatabases(this.ownerUri); databases.unshift(DefaultDropdownString); this.targetDatabaseDropDown = view.modelBuilder.dropDown() - .withProperties({ + .withProps({ value: databases[0], values: databases }).component(); - this.descriptionTextBox = view.modelBuilder.inputBox().withProperties({ + this.descriptionTextBox = view.modelBuilder.inputBox().withProps({ multiline: true, height: 50 }).component(); this.executeDatabaseDropDown = view.modelBuilder.dropDown() - .withProperties({ + .withProps({ value: databases[0], values: databases }).component(); this.targetDatabaseDropDown.required = true; this.executeDatabaseDropDown.required = true; - this.descriptionTextBox = view.modelBuilder.inputBox().withProperties({ + this.descriptionTextBox = view.modelBuilder.inputBox().withProps({ multiline: true, height: 50 }).component(); @@ -171,7 +171,7 @@ export class NotebookDialog extends AgentDialog { this.ownerTextBox = view.modelBuilder.inputBox().component(); this.schedulesTable = view.modelBuilder.table() - .withProperties({ + .withProps({ columns: [ PickScheduleDialog.SchedulesIDText, PickScheduleDialog.ScheduleNameLabelText, diff --git a/extensions/agent/src/dialogs/operatorDialog.ts b/extensions/agent/src/dialogs/operatorDialog.ts index b51e847c31..caccc4989a 100644 --- a/extensions/agent/src/dialogs/operatorDialog.ts +++ b/extensions/agent/src/dialogs/operatorDialog.ts @@ -93,31 +93,31 @@ export class OperatorDialog extends AgentDialog { private initializeGeneralTab() { this.generalTab.registerContent(async view => { - this.nameTextBox = view.modelBuilder.inputBox().withProperties({ + this.nameTextBox = view.modelBuilder.inputBox().withProps({ ariaLabel: OperatorDialog.NameLabel, placeHolder: OperatorDialog.NameLabel }).component(); this.nameTextBox.value = this.model.name; - this.emailNameTextBox = view.modelBuilder.inputBox().withProperties({ + this.emailNameTextBox = view.modelBuilder.inputBox().withProps({ ariaLabel: OperatorDialog.EmailNameTextLabel, placeHolder: OperatorDialog.EmailNameTextLabel }).component(); this.emailNameTextBox.value = this.model.emailAddress; - this.pagerEmailNameTextBox = view.modelBuilder.inputBox().withProperties({ + this.pagerEmailNameTextBox = view.modelBuilder.inputBox().withProps({ ariaLabel: OperatorDialog.PagerEmailNameTextLabel, placeHolder: OperatorDialog.PagerEmailNameTextLabel }).component(); this.pagerEmailNameTextBox.value = this.model.pagerAddress; this.enabledCheckBox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: OperatorDialog.EnabledCheckboxLabel }).component(); this.enabledCheckBox.checked = this.model.enabled; this.pagerMondayCheckBox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: OperatorDialog.PagerMondayCheckBoxLabel }).component(); @@ -135,7 +135,7 @@ export class OperatorDialog extends AgentDialog { }); this.pagerTuesdayCheckBox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: OperatorDialog.PagerTuesdayCheckBoxLabel }).component(); @@ -154,7 +154,7 @@ export class OperatorDialog extends AgentDialog { }); this.pagerWednesdayCheckBox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: OperatorDialog.PagerWednesdayCheckBoxLabel }).component(); @@ -172,7 +172,7 @@ export class OperatorDialog extends AgentDialog { }); this.pagerThursdayCheckBox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: OperatorDialog.PagerThursdayCheckBoxLabel }).component(); @@ -190,7 +190,7 @@ export class OperatorDialog extends AgentDialog { }); this.weekdayPagerStartTimeInput = view.modelBuilder.inputBox() - .withProperties({ + .withProps({ inputType: 'time', placeHolder: '08:00:00', }).component(); @@ -202,7 +202,7 @@ export class OperatorDialog extends AgentDialog { }]).component(); this.weekdayPagerEndTimeInput = view.modelBuilder.inputBox() - .withProperties({ + .withProps({ inputType: 'time', placeHolder: '06:00:00' }).component(); @@ -214,7 +214,7 @@ export class OperatorDialog extends AgentDialog { }]).component(); this.pagerFridayCheckBox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: OperatorDialog.PagerFridayCheckBoxLabel }).component(); this.pagerFridayCheckBox.onChanged(() => { @@ -239,7 +239,7 @@ export class OperatorDialog extends AgentDialog { .component(); this.pagerSaturdayCheckBox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: OperatorDialog.PagerSaturdayCheckBoxLabel }).component(); @@ -254,7 +254,7 @@ export class OperatorDialog extends AgentDialog { }); this.saturdayPagerStartTimeInput = view.modelBuilder.inputBox() - .withProperties({ + .withProps({ inputType: 'time', placeHolder: '08:00:00' }).component(); @@ -266,7 +266,7 @@ export class OperatorDialog extends AgentDialog { }]).component(); this.saturdayPagerEndTimeInput = view.modelBuilder.inputBox() - .withProperties({ + .withProps({ inputType: 'time', placeHolder: '06:00:00' }).component(); @@ -285,7 +285,7 @@ export class OperatorDialog extends AgentDialog { .component(); this.pagerSundayCheckBox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: OperatorDialog.PagerSundayCheckBoxLabel }).component(); @@ -300,7 +300,7 @@ export class OperatorDialog extends AgentDialog { }); this.sundayPagerStartTimeInput = view.modelBuilder.inputBox() - .withProperties({ + .withProps({ inputType: 'time', placeHolder: '08:00:00' }).component(); @@ -312,7 +312,7 @@ export class OperatorDialog extends AgentDialog { }]).component(); this.sundayPagerEndTimeInput = view.modelBuilder.inputBox() - .withProperties({ + .withProps({ inputType: 'time', placeHolder: '06:00:00' }).component(); @@ -383,11 +383,11 @@ export class OperatorDialog extends AgentDialog { this.notificationsTab.registerContent(async view => { let previewTag = view.modelBuilder.text() - .withProperties({ + .withProps({ value: 'Feature Preview' }).component(); this.alertsTable = view.modelBuilder.table() - .withProperties({ + .withProps({ columns: [ OperatorDialog.AlertNameColumnLabel, OperatorDialog.AlertEmailColumnLabel, diff --git a/extensions/agent/src/dialogs/pickScheduleDialog.ts b/extensions/agent/src/dialogs/pickScheduleDialog.ts index 9d7f6f37bb..6eadc798a3 100644 --- a/extensions/agent/src/dialogs/pickScheduleDialog.ts +++ b/extensions/agent/src/dialogs/pickScheduleDialog.ts @@ -63,7 +63,7 @@ export class PickScheduleDialog { private initializeContent() { this.dialog.registerContent(async view => { this.schedulesTable = view.modelBuilder.table() - .withProperties({ + .withProps({ columns: [ PickScheduleDialog.SchedulesIDText, PickScheduleDialog.ScheduleNameLabelText, diff --git a/extensions/agent/src/dialogs/proxyDialog.ts b/extensions/agent/src/dialogs/proxyDialog.ts index 90a658ee98..2e23e62eb0 100644 --- a/extensions/agent/src/dialogs/proxyDialog.ts +++ b/extensions/agent/src/dialogs/proxyDialog.ts @@ -81,14 +81,14 @@ export class ProxyDialog extends AgentDialog { this.generalTab.registerContent(async view => { this.proxyNameTextBox = view.modelBuilder.inputBox() - .withProperties({ + .withProps({ width: 420, ariaLabel: ProxyDialog.ProxyNameTextBoxLabel, placeHolder: ProxyDialog.ProxyNameTextBoxLabel }).component(); this.credentialNameDropDown = view.modelBuilder.dropDown() - .withProperties({ + .withProps({ width: 432, value: '', editable: true, @@ -97,7 +97,7 @@ export class ProxyDialog extends AgentDialog { .component(); this.descriptionTextBox = view.modelBuilder.inputBox() - .withProperties({ + .withProps({ width: 420, multiline: true, height: 300, @@ -106,7 +106,7 @@ export class ProxyDialog extends AgentDialog { }).component(); this.subsystemCheckBox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: ProxyDialog.SubsystemLabel }).component(); @@ -137,52 +137,52 @@ export class ProxyDialog extends AgentDialog { }); this.operatingSystemCheckBox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: ProxyDialog.OperatingSystemLabel }).component(); this.replicationSnapshotCheckBox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: ProxyDialog.ReplicationSnapshotLabel }).component(); this.replicationTransactionLogCheckBox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: ProxyDialog.ReplicationTransactionLogLabel }).component(); this.replicationDistributorCheckBox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: ProxyDialog.ReplicationDistributorLabel }).component(); this.replicationMergeCheckbox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: ProxyDialog.ReplicationMergeLabel }).component(); this.replicationQueueReaderCheckbox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: ProxyDialog.ReplicationQueueReaderLabel }).component(); this.sqlQueryCheckBox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: ProxyDialog.SSASQueryLabel }).component(); this.sqlCommandCheckBox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: ProxyDialog.SSASCommandLabel }).component(); this.sqlIntegrationServicesPackageCheckbox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: ProxyDialog.SSISPackageLabel }).component(); this.powershellCheckBox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: ProxyDialog.PowerShellLabel }).component(); diff --git a/extensions/arc/package.json b/extensions/arc/package.json index 1751abcc6b..8683c49a62 100644 --- a/extensions/arc/package.json +++ b/extensions/arc/package.json @@ -1113,7 +1113,7 @@ "@types/sinon": "^9.0.4", "@types/uuid": "^8.3.0", "@types/yamljs": "^0.2.31", - "@microsoft/azdata-test": "^1.5.0", + "@microsoft/azdata-test": "^1.5.1", "mocha": "^5.2.0", "mocha-junit-reporter": "^1.17.0", "mocha-multi-reporters": "^1.1.7", diff --git a/extensions/arc/src/ui/components/radioOptionsGroup.ts b/extensions/arc/src/ui/components/radioOptionsGroup.ts index a6b157415b..0d521db0bf 100644 --- a/extensions/arc/src/ui/components/radioOptionsGroup.ts +++ b/extensions/arc/src/ui/components/radioOptionsGroup.ts @@ -67,7 +67,7 @@ export class RadioOptionsGroup { this.component().loadingCompletedText = this._loadingCompleteMessage; } catch (e) { - const errorLabel = this._modelBuilder.text().withProperties({ value: loc.loadingClusterContextsError(e), CSSStyles: { 'color': 'Red' } }).component(); + const errorLabel = this._modelBuilder.text().withProps({ value: loc.loadingClusterContextsError(e), CSSStyles: { 'color': 'Red' } }).component(); this._divContainer.addItem(errorLabel); this.component().loadingCompletedText = this._loadingCompleteErrorMessage(e); } diff --git a/extensions/arc/src/ui/dashboards/miaa/miaaDashboardOverviewPage.ts b/extensions/arc/src/ui/dashboards/miaa/miaaDashboardOverviewPage.ts index 0e3b231f2c..292c06a5d0 100644 --- a/extensions/arc/src/ui/dashboards/miaa/miaaDashboardOverviewPage.ts +++ b/extensions/arc/src/ui/dashboards/miaa/miaaDashboardOverviewPage.ts @@ -154,7 +154,7 @@ export class MiaaDashboardOverviewPage extends DashboardPage { // Assemble the container const rootContainer = this.modelView.modelBuilder.flexContainer() .withLayout({ flexFlow: 'column' }) - .withProperties({ CSSStyles: { 'margin': '18px' } }) + .withProps({ CSSStyles: { 'margin': '18px' } }) .component(); // Properties diff --git a/extensions/arc/yarn.lock b/extensions/arc/yarn.lock index 3e2dd23fc0..b657eb2bec 100644 --- a/extensions/arc/yarn.lock +++ b/extensions/arc/yarn.lock @@ -182,10 +182,10 @@ resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.2.tgz#26520bf09abe4a5644cd5414e37125a8954241dd" integrity sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw== -"@microsoft/azdata-test@^1.5.0": - version "1.5.0" - resolved "https://registry.yarnpkg.com/@microsoft/azdata-test/-/azdata-test-1.5.0.tgz#5ffa9ec6b704fea439c63d7dfa46dcfcf3236747" - integrity sha512-kaDn5geXqrhcZgxCWXSrbXdUpJi5TFmi+sIPDfmhMYJa8uecn9C2rzxn5ZbxBN5cjjYOWF318dERfe+S0CWnlA== +"@microsoft/azdata-test@^1.5.1": + version "1.5.1" + resolved "https://registry.yarnpkg.com/@microsoft/azdata-test/-/azdata-test-1.5.1.tgz#e61aeb81f3291563f250e6b0c712a45aa335de94" + integrity sha512-3B5iz0WU5TCKOs420zRNk4LWi2n5W64ZLJMu81X/yFFmnCbjhWwKE4xgTBZTuzmzg372bNNrHm9zHZcr3lm1RA== dependencies: http-proxy-agent "^2.1.0" https-proxy-agent "^2.2.4" diff --git a/extensions/big-data-cluster/src/bigDataCluster/dialog/addControllerDialog.ts b/extensions/big-data-cluster/src/bigDataCluster/dialog/addControllerDialog.ts index 39d1359803..21bf34009c 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/dialog/addControllerDialog.ts +++ b/extensions/big-data-cluster/src/bigDataCluster/dialog/addControllerDialog.ts @@ -123,7 +123,7 @@ export class AddControllerDialog { placeHolder: loc.url.toLocaleLowerCase(), value: this.model.prefilledUrl }).component(); - this.authDropdown = this.uiModelBuilder.dropDown().withProperties({ + this.authDropdown = this.uiModelBuilder.dropDown().withProps({ values: this.model.authCategories, value: this.model.prefilledAuth, editable: false, diff --git a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts index ac56decd4e..863dce632f 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts +++ b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts @@ -85,7 +85,7 @@ export class BdcDashboardOverviewPage extends BdcDashboardPage { overviewHeaderContainer.addItem(overviewLabel, { CSSStyles: { ...cssStyles.title } }); this.lastUpdatedLabel = this.modelView.modelBuilder.text() - .withProperties({ + .withProps({ value: loc.lastUpdated(), CSSStyles: { ...cssStyles.lastUpdatedText } }).component(); @@ -192,7 +192,7 @@ export class BdcDashboardOverviewPage extends BdcDashboardPage { // messes up the layout for the table that we display after loading is finished. Instead we'll just remove the loading // component once it's finished loading the content this.serviceStatusLoadingComponent = this.modelView.modelBuilder.loadingComponent() - .withProperties({ CSSStyles: { 'padding-top': '0px', 'padding-bottom': '0px' } }) + .withProps({ CSSStyles: { 'padding-top': '0px', 'padding-bottom': '0px' } }) .component(); this.serviceStatusDisplayContainer.addItem(this.serviceStatusLoadingComponent, { flex: '0 0 auto', CSSStyles: { 'padding-left': '150px', width: '30px' } }); @@ -283,7 +283,7 @@ export class BdcDashboardOverviewPage extends BdcDashboardPage { // messes up the layout for the table that we display after loading is finished. Instead we'll just remove the loading // component once it's finished loading the content this.endpointsLoadingComponent = this.modelView.modelBuilder.loadingComponent() - .withProperties({ CSSStyles: { 'padding-top': '0px', 'padding-bottom': '0px' } }) + .withProps({ CSSStyles: { 'padding-top': '0px', 'padding-bottom': '0px' } }) .component(); this.endpointsDisplayContainer.addItem(this.endpointsLoadingComponent, { flex: '0 0 auto', CSSStyles: { 'padding-left': '150px', width: '30px' } }); diff --git a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts index 1edd813576..3694a933d3 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts +++ b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts @@ -64,7 +64,7 @@ export class BdcDashboardResourceStatusPage extends BdcDashboardPage { // Last updated label this.lastUpdatedLabel = this.modelView.modelBuilder.text() - .withProperties({ + .withProps({ value: loc.lastUpdated(this.model.bdcStatusLastUpdated), CSSStyles: { ...cssStyles.lastUpdatedText } }).component(); @@ -297,7 +297,7 @@ export class BdcDashboardResourceStatusPage extends BdcDashboardPage { // Not all instances have all logs available - in that case just display N/A instead of a link if (isNullOrUndefined(instanceStatus.dashboards) || isNullOrUndefined(instanceStatus.dashboards.nodeMetricsUrl)) { - row.push(this.modelView.modelBuilder.text().withProperties({ value: loc.notAvailable, CSSStyles: { ...cssStyles.text } }).component()); + row.push(this.modelView.modelBuilder.text().withProps({ value: loc.notAvailable, CSSStyles: { ...cssStyles.text } }).component()); } else { row.push(this.modelView.modelBuilder.hyperlink().withProperties({ label: loc.view, @@ -312,7 +312,7 @@ export class BdcDashboardResourceStatusPage extends BdcDashboardPage { if (this.serviceName === Service.sql) { // Not all instances have all logs available - in that case just display N/A instead of a link if (isNullOrUndefined(instanceStatus.dashboards) || isNullOrUndefined(instanceStatus.dashboards.sqlMetricsUrl)) { - row.push(this.modelView.modelBuilder.text().withProperties({ value: loc.notAvailable, CSSStyles: { ...cssStyles.text } }).component()); + row.push(this.modelView.modelBuilder.text().withProps({ value: loc.notAvailable, CSSStyles: { ...cssStyles.text } }).component()); } else { row.push(this.modelView.modelBuilder.hyperlink().withProperties({ label: loc.view, @@ -325,7 +325,7 @@ export class BdcDashboardResourceStatusPage extends BdcDashboardPage { } if (isNullOrUndefined(instanceStatus.dashboards) || isNullOrUndefined(instanceStatus.dashboards.logsUrl)) { - row.push(this.modelView.modelBuilder.text().withProperties({ value: loc.notAvailable, CSSStyles: { ...cssStyles.text } }).component()); + row.push(this.modelView.modelBuilder.text().withProps({ value: loc.notAvailable, CSSStyles: { ...cssStyles.text } }).component()); } else { row.push(this.modelView.modelBuilder.hyperlink().withProperties({ label: loc.view, diff --git a/extensions/big-data-cluster/src/bigDataCluster/dialog/hdfsDialogBase.ts b/extensions/big-data-cluster/src/bigDataCluster/dialog/hdfsDialogBase.ts index 4e4dbd3d20..bdde2d5b7c 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/dialog/hdfsDialogBase.ts +++ b/extensions/big-data-cluster/src/bigDataCluster/dialog/hdfsDialogBase.ts @@ -139,7 +139,7 @@ export abstract class HdfsDialogBase { enabled: false }).component(); - this.authDropdown = this.uiModelBuilder.dropDown().withProperties({ + this.authDropdown = this.uiModelBuilder.dropDown().withProps({ values: this.model.authCategories, value: this.model.authCategory, editable: false, diff --git a/extensions/dacpac/src/test/testContext.ts b/extensions/dacpac/src/test/testContext.ts index 1c5a5b0aee..0afc769599 100644 --- a/extensions/dacpac/src/test/testContext.ts +++ b/extensions/dacpac/src/test/testContext.ts @@ -138,8 +138,8 @@ export function createViewContext(): ViewTestContext { let button = radioButton(); let builder: azdata.ComponentBuilder = { component: () => button, - withProps: () => undefined, - withProperties: (properties) => { + withProperties: () => undefined, + withProps: (properties) => { switch ((properties as any).label) { case loc.newDatabase: button.label = loc.newDatabase; diff --git a/extensions/dacpac/src/wizard/api/dacFxConfigPage.ts b/extensions/dacpac/src/wizard/api/dacFxConfigPage.ts index cf05f04ab7..77045ff402 100644 --- a/extensions/dacpac/src/wizard/api/dacFxConfigPage.ts +++ b/extensions/dacpac/src/wizard/api/dacFxConfigPage.ts @@ -33,7 +33,7 @@ export abstract class DacFxConfigPage extends BasePage { protected async createServerDropdown(isTargetServer: boolean): Promise { const serverDropDownTitle = isTargetServer ? loc.targetServer : loc.sourceServer; - this.serverDropdown = this.view.modelBuilder.dropDown().withProperties({ + this.serverDropdown = this.view.modelBuilder.dropDown().withProps({ required: true, ariaLabel: serverDropDownTitle }).component(); @@ -79,7 +79,7 @@ export abstract class DacFxConfigPage extends BasePage { protected async createDatabaseTextBox(title: string): Promise { this.databaseTextBox = this.view.modelBuilder.inputBox() .withValidation(component => !this.databaseNameExists(component.value)) - .withProperties({ + .withProps({ required: true, validationErrorMessage: loc.databaseNameExistsErrorMessage }).component(); @@ -97,7 +97,7 @@ export abstract class DacFxConfigPage extends BasePage { protected async createDatabaseDropdown(): Promise { const databaseDropdownTitle = loc.sourceDatabase; - this.databaseDropdown = this.view.modelBuilder.dropDown().withProperties({ + this.databaseDropdown = this.view.modelBuilder.dropDown().withProps({ required: true, ariaLabel: databaseDropdownTitle }).component(); @@ -114,13 +114,12 @@ export abstract class DacFxConfigPage extends BasePage { this.model.filePath = this.fileTextBox.value; }); - this.databaseLoader = this.view.modelBuilder.loadingComponent().withItem(this.databaseDropdown).withProperties({ - required: true - }).component(); + this.databaseLoader = this.view.modelBuilder.loadingComponent().withItem(this.databaseDropdown).component(); return { component: this.databaseLoader, - title: databaseDropdownTitle + title: databaseDropdownTitle, + required: true }; } @@ -167,7 +166,7 @@ export abstract class DacFxConfigPage extends BasePage { this.fileTextBox = this.view.modelBuilder.inputBox().withValidation( component => isValidBasename(component.value) ) - .withProperties({ + .withProps({ required: true, ariaLive: 'polite' }).component(); diff --git a/extensions/dacpac/src/wizard/pages/dacFxSummaryPage.ts b/extensions/dacpac/src/wizard/pages/dacFxSummaryPage.ts index 28fc4b2041..d9e6704925 100644 --- a/extensions/dacpac/src/wizard/pages/dacFxSummaryPage.ts +++ b/extensions/dacpac/src/wizard/pages/dacFxSummaryPage.ts @@ -20,8 +20,10 @@ export class DacFxSummaryPage extends BasePage { } async start(): Promise { - this.table = this.view.modelBuilder.table().withProperties({ - title: loc.summaryTableTitle + this.table = this.view.modelBuilder.table().withProps({ + title: loc.summaryTableTitle, + data: [], + columns: [] }).component(); this.loader = this.view.modelBuilder.loadingComponent().withItem(this.table).component(); this.form = this.view.modelBuilder.formContainer().withFormItems( diff --git a/extensions/dacpac/src/wizard/pages/deployConfigPage.ts b/extensions/dacpac/src/wizard/pages/deployConfigPage.ts index d5ec531a92..fa0c1b0530 100644 --- a/extensions/dacpac/src/wizard/pages/deployConfigPage.ts +++ b/extensions/dacpac/src/wizard/pages/deployConfigPage.ts @@ -101,13 +101,13 @@ export class DeployConfigPage extends DacFxConfigPage { private createRadiobuttons(): azdata.FormComponent { let upgradeRadioButton = this.view.modelBuilder.radioButton() - .withProperties({ + .withProps({ name: 'updateExistingOrCreateNew', label: loc.upgradeExistingDatabase, }).component(); let newRadioButton = this.view.modelBuilder.radioButton() - .withProperties({ + .withProps({ name: 'updateExistingOrCreateNew', label: loc.newDatabase, }).component(); @@ -136,7 +136,7 @@ export class DeployConfigPage extends DacFxConfigPage { protected async createDeployDatabaseDropdown(): Promise { const targetDatabaseTitle = loc.databaseName; - this.databaseDropdown = this.view.modelBuilder.dropDown().withProperties({ + this.databaseDropdown = this.view.modelBuilder.dropDown().withProps({ ariaLabel: targetDatabaseTitle }).component(); @@ -150,13 +150,12 @@ export class DeployConfigPage extends DacFxConfigPage { this.model.database = databaseDropdownValue; }); - this.databaseLoader = this.view.modelBuilder.loadingComponent().withItem(this.databaseDropdown).withProperties({ - required: true - }).component(); + this.databaseLoader = this.view.modelBuilder.loadingComponent().withItem(this.databaseDropdown).component(); return { component: this.databaseLoader, - title: targetDatabaseTitle + title: targetDatabaseTitle, + required: true }; } diff --git a/extensions/dacpac/src/wizard/pages/deployPlanPage.ts b/extensions/dacpac/src/wizard/pages/deployPlanPage.ts index ab3883774a..f387fb7379 100644 --- a/extensions/dacpac/src/wizard/pages/deployPlanPage.ts +++ b/extensions/dacpac/src/wizard/pages/deployPlanPage.ts @@ -48,8 +48,10 @@ export class DeployPlanPage extends DacFxConfigPage { } async start(): Promise { - this.table = this.view.modelBuilder.table().withProperties({ - ariaLabel: loc.deployPlanTableTitle + this.table = this.view.modelBuilder.table().withProps({ + ariaLabel: loc.deployPlanTableTitle, + data: [], + columns: [] }).component(); this.loader = this.view.modelBuilder.loadingComponent().withItem(this.table).component(); this.dataLossComponentGroup = await this.createDataLossComponents(); @@ -117,7 +119,7 @@ export class DeployPlanPage extends DacFxConfigPage { private async createDataLossCheckbox(): Promise { this.dataLossCheckbox = this.view.modelBuilder.checkBox() .withValidation(component => component.checked === true) - .withProperties({ + .withProps({ label: loc.proceedDataLossMessage, }).component(); @@ -130,7 +132,7 @@ export class DeployPlanPage extends DacFxConfigPage { private async createNoDataLossText(): Promise { let noDataLossText = this.view.modelBuilder.text() - .withProperties({ + .withProps({ value: loc.noDataLossMessage }).component(); @@ -143,7 +145,7 @@ export class DeployPlanPage extends DacFxConfigPage { private async createDataLossComponents(): Promise { let dataLossComponent = await this.createDataLossCheckbox(); this.dataLossText = this.view.modelBuilder.text() - .withProperties({ + .withProps({ value: loc.dataLossMessage }).component(); diff --git a/extensions/dacpac/src/wizard/pages/extractConfigPage.ts b/extensions/dacpac/src/wizard/pages/extractConfigPage.ts index 9628a14dcb..c9e8ab8e2b 100644 --- a/extensions/dacpac/src/wizard/pages/extractConfigPage.ts +++ b/extensions/dacpac/src/wizard/pages/extractConfigPage.ts @@ -98,7 +98,7 @@ export class ExtractConfigPage extends DacFxConfigPage { } private async createVersionTextBox(): Promise { - this.versionTextBox = this.view.modelBuilder.inputBox().withProperties({ + this.versionTextBox = this.view.modelBuilder.inputBox().withProps({ required: true, ariaLabel: loc.version }).component(); diff --git a/extensions/dacpac/src/wizard/pages/selectOperationpage.ts b/extensions/dacpac/src/wizard/pages/selectOperationpage.ts index d4085ddc20..12ec1cbbea 100644 --- a/extensions/dacpac/src/wizard/pages/selectOperationpage.ts +++ b/extensions/dacpac/src/wizard/pages/selectOperationpage.ts @@ -49,7 +49,7 @@ export class SelectOperationPage extends BasePage { private async createDeployRadioButton(): Promise { this.deployRadioButton = this.view.modelBuilder.radioButton() - .withProperties({ + .withProps({ name: 'selectedOperation', label: loc.deployDescription, checked: true // Default to first radio button being selected @@ -77,7 +77,7 @@ export class SelectOperationPage extends BasePage { private async createExtractRadioButton(): Promise { this.extractRadioButton = this.view.modelBuilder.radioButton() - .withProperties({ + .withProps({ name: 'selectedOperation', label: loc.extractDescription, }).component(); @@ -102,7 +102,7 @@ export class SelectOperationPage extends BasePage { private async createImportRadioButton(): Promise { this.importRadioButton = this.view.modelBuilder.radioButton() - .withProperties({ + .withProps({ name: 'selectedOperation', label: loc.importDescription, }).component(); @@ -127,7 +127,7 @@ export class SelectOperationPage extends BasePage { private async createExportRadioButton(): Promise { this.exportRadioButton = this.view.modelBuilder.radioButton() - .withProperties({ + .withProps({ name: 'selectedOperation', label: loc.exportDescription, }).component(); diff --git a/extensions/data-workspace/src/dialogs/openExistingDialog.ts b/extensions/data-workspace/src/dialogs/openExistingDialog.ts index efcb51b991..badef16dcf 100644 --- a/extensions/data-workspace/src/dialogs/openExistingDialog.ts +++ b/extensions/data-workspace/src/dialogs/openExistingDialog.ts @@ -200,7 +200,7 @@ export class OpenExistingDialog extends DialogBase { required: true, component: view.modelBuilder.flexContainer() .withItems([this.localRadioButton, this.remoteGitRepoRadioButton], { flex: '0 0 auto', CSSStyles: { 'margin-right': '15px' } }) - .withProperties({ ariaRole: 'radiogroup' }) + .withProps({ ariaRole: 'radiogroup' }) .component() }; diff --git a/extensions/import/src/wizard/pages/fileConfigPage.ts b/extensions/import/src/wizard/pages/fileConfigPage.ts index 2704372072..f8b4d8060b 100644 --- a/extensions/import/src/wizard/pages/fileConfigPage.ts +++ b/extensions/import/src/wizard/pages/fileConfigPage.ts @@ -139,7 +139,7 @@ export class FileConfigPage extends ImportPage { } private async createServerDropdown(): Promise { - this.serverDropdown = this.view.modelBuilder.dropDown().withProperties({ + this.serverDropdown = this.view.modelBuilder.dropDown().withProps({ required: true }).component(); @@ -174,7 +174,7 @@ export class FileConfigPage extends ImportPage { } private async createDatabaseDropdown(): Promise { - this.databaseDropdown = this.view.modelBuilder.dropDown().withProperties({ + this.databaseDropdown = this.view.modelBuilder.dropDown().withProps({ required: true }).component(); @@ -243,7 +243,7 @@ export class FileConfigPage extends ImportPage { return fs.existsSync(component.value); }).component(); - this.fileButton = this.view.modelBuilder.button().withProperties({ + this.fileButton = this.view.modelBuilder.button().withProps({ label: constants.browseFilesText, secondary: true }).component(); @@ -326,7 +326,7 @@ export class FileConfigPage extends ImportPage { } return true; - }).withProperties({ + }).withProps({ required: true, }).component(); @@ -342,7 +342,7 @@ export class FileConfigPage extends ImportPage { private async createSchemaDropdown(): Promise { - this.schemaDropdown = this.view.modelBuilder.dropDown().withProperties({ + this.schemaDropdown = this.view.modelBuilder.dropDown().withProps({ required: true }).component(); this.schemaLoader = this.view.modelBuilder.loadingComponent().withItem(this.schemaDropdown).component(); diff --git a/extensions/import/src/wizard/pages/prosePreviewPage.ts b/extensions/import/src/wizard/pages/prosePreviewPage.ts index bd03795ef7..5139e1c5af 100644 --- a/extensions/import/src/wizard/pages/prosePreviewPage.ts +++ b/extensions/import/src/wizard/pages/prosePreviewPage.ts @@ -83,7 +83,7 @@ export class ProsePreviewPage extends ImportPage { this.loading = this.view.modelBuilder.loadingComponent().component(); this.resultTextComponent = this.view.modelBuilder.text() - .withProperties({ + .withProps({ value: this.isSuccess ? constants.successTitleText : constants.failureTitleText }).component(); diff --git a/extensions/machine-learning/src/views/dataInfoComponent.ts b/extensions/machine-learning/src/views/dataInfoComponent.ts index 34a49ef00a..d585da37da 100644 --- a/extensions/machine-learning/src/views/dataInfoComponent.ts +++ b/extensions/machine-learning/src/views/dataInfoComponent.ts @@ -39,10 +39,10 @@ export class DataInfoComponent extends ViewBase { } public registerComponent(modelBuilder: azdata.ModelBuilder): azdata.Component { - this._descriptionComponent = modelBuilder.text().withProperties({ + this._descriptionComponent = modelBuilder.text().withProps({ value: this._description, }).component(); - this._labelComponent = modelBuilder.text().withProperties({ + this._labelComponent = modelBuilder.text().withProps({ value: this._title, }).component(); this._labelContainer = modelBuilder.flexContainer().withLayout({ @@ -64,7 +64,7 @@ export class DataInfoComponent extends ViewBase { }; } - this._iconComponent = modelBuilder.image().withProperties({ + this._iconComponent = modelBuilder.image().withProps({ width: this._iconSettings?.containerWidth ?? this._defaultIconSize, height: this._iconSettings?.containerHeight ?? this._defaultIconSize, iconWidth: this._iconSettings?.width ?? this._defaultIconSize, @@ -97,7 +97,7 @@ export class DataInfoComponent extends ViewBase { this._loadingComponent = modelBuilder.loadingComponent().withItem( this._labelContainer - ).withProperties({ + ).withProps({ loading: false }).component(); diff --git a/extensions/machine-learning/src/views/externalLanguages/addEditLanguageTab.ts b/extensions/machine-learning/src/views/externalLanguages/addEditLanguageTab.ts index 844d46934f..dc5ee7ac32 100644 --- a/extensions/machine-learning/src/views/externalLanguages/addEditLanguageTab.ts +++ b/extensions/machine-learning/src/views/externalLanguages/addEditLanguageTab.ts @@ -26,7 +26,7 @@ export class AddEditLanguageTab extends LanguageViewBase { this._dialogTab.registerContent(async view => { let language = this._languageUpdateModel.language; let content = this._languageUpdateModel.content; - this.languageName = view.modelBuilder.inputBox().withProperties({ + this.languageName = view.modelBuilder.inputBox().withProps({ value: language.name, width: '150px', enabled: !this._editMode @@ -42,7 +42,7 @@ export class AddEditLanguageTab extends LanguageViewBase { this.languageView = new LanguageContentView(this._apiWrapper, this, view.modelBuilder, formBuilder, content); if (!this._editMode) { - this.saveButton = view.modelBuilder.button().withProperties({ + this.saveButton = view.modelBuilder.button().withProps({ label: constants.extLangInstallButtonText, width: '100px' }).component(); diff --git a/extensions/machine-learning/src/views/externalLanguages/currentLanguagesTab.ts b/extensions/machine-learning/src/views/externalLanguages/currentLanguagesTab.ts index 386ac052de..e8c5e00ed7 100644 --- a/extensions/machine-learning/src/views/externalLanguages/currentLanguagesTab.ts +++ b/extensions/machine-learning/src/views/externalLanguages/currentLanguagesTab.ts @@ -28,7 +28,7 @@ export class CurrentLanguagesTab extends LanguageViewBase { // TODO: only supporting single location for now. We should add a drop down for multi locations mode // let locationTitle = await this.getServerTitle(); - this._locationComponent = view.modelBuilder.text().withProperties({ + this._locationComponent = view.modelBuilder.text().withProps({ value: locationTitle }).component(); @@ -46,7 +46,7 @@ export class CurrentLanguagesTab extends LanguageViewBase { this._loader = view.modelBuilder.loadingComponent() .withItem(formModel) - .withProperties({ + .withProps({ loading: true }).component(); diff --git a/extensions/machine-learning/src/views/externalLanguages/fileBrowserDialog.ts b/extensions/machine-learning/src/views/externalLanguages/fileBrowserDialog.ts index 119270e24c..8596fbba57 100644 --- a/extensions/machine-learning/src/views/externalLanguages/fileBrowserDialog.ts +++ b/extensions/machine-learning/src/views/externalLanguages/fileBrowserDialog.ts @@ -30,10 +30,10 @@ export class FileBrowserDialog { this._fileBrowserDialog.content = [fileBrowserTab]; fileBrowserTab.registerContent(async (view) => { this._fileBrowserTree = view.modelBuilder.fileBrowserTree() - .withProperties({ ownerUri: this.ownerUri, width: 420, height: 700 }) + .withProps({ ownerUri: this.ownerUri, width: 420, height: 700 }) .component(); this._selectedPathTextBox = view.modelBuilder.inputBox() - .withProperties({ inputType: 'text' }) + .withProps({ inputType: 'text' }) .component(); this._fileBrowserTree.onDidChange((args) => { if (this._selectedPathTextBox) { diff --git a/extensions/machine-learning/src/views/externalLanguages/languageContentView.ts b/extensions/machine-learning/src/views/externalLanguages/languageContentView.ts index a6098fdf0e..2efcde0622 100644 --- a/extensions/machine-learning/src/views/externalLanguages/languageContentView.ts +++ b/extensions/machine-learning/src/views/externalLanguages/languageContentView.ts @@ -31,7 +31,7 @@ export class LanguageContentView extends LanguageViewBase { ) { super(apiWrapper, parent.root, parent); this._localPath = this._modelBuilder.radioButton() - .withProperties({ + .withProps({ value: 'local', name: 'extensionLocation', label: constants.extLangLocal, @@ -39,7 +39,7 @@ export class LanguageContentView extends LanguageViewBase { }).component(); this._serverPath = this._modelBuilder.radioButton() - .withProperties({ + .withProps({ value: 'server', name: 'extensionLocation', label: this.getServerTitle(), @@ -62,7 +62,7 @@ export class LanguageContentView extends LanguageViewBase { this._localPath, this._serverPath] ).component(); - this.extensionFile = this._modelBuilder.inputBox().withProperties({ + this.extensionFile = this._modelBuilder.inputBox().withProps({ value: '', width: parent.componentMaxLength - parent.browseButtonMaxLength - parent.spaceBetweenComponentsLength }).component(); @@ -89,16 +89,16 @@ export class LanguageContentView extends LanguageViewBase { this.onOpenFileBrowser({ filePath: '', target: this._isLocalPath ? constants.localhost : this.connectionUrl }); }); - this.extensionFileName = this._modelBuilder.inputBox().withProperties({ + this.extensionFileName = this._modelBuilder.inputBox().withProps({ value: '', width: parent.componentMaxLength }).component(); - this.envVariables = this._modelBuilder.inputBox().withProperties({ + this.envVariables = this._modelBuilder.inputBox().withProps({ value: '', width: parent.componentMaxLength }).component(); - this.parameters = this._modelBuilder.inputBox().withProperties({ + this.parameters = this._modelBuilder.inputBox().withProps({ value: '', width: parent.componentMaxLength }).component(); diff --git a/extensions/machine-learning/src/views/externalLanguages/languagesTable.ts b/extensions/machine-learning/src/views/externalLanguages/languagesTable.ts index 32c29278e5..c484e2f0f2 100644 --- a/extensions/machine-learning/src/views/externalLanguages/languagesTable.ts +++ b/extensions/machine-learning/src/views/externalLanguages/languagesTable.ts @@ -118,7 +118,7 @@ export class LanguagesTable extends LanguageViewBase { private createTableRow(language: mssql.ExternalLanguage, content: mssql.ExternalLanguageContent): azdata.DeclarativeTableCellValue[] { if (this._modelBuilder) { - let dropLanguageButton = this._modelBuilder.button().withProperties({ + let dropLanguageButton = this._modelBuilder.button().withProps({ label: '', title: constants.deleteTitle, iconPath: { @@ -136,7 +136,7 @@ export class LanguagesTable extends LanguageViewBase { }); }); - let editLanguageButton = this._modelBuilder.button().withProperties({ + let editLanguageButton = this._modelBuilder.button().withProps({ label: '', title: constants.editTitle, iconPath: { diff --git a/extensions/machine-learning/src/views/models/azureModelsComponent.ts b/extensions/machine-learning/src/views/models/azureModelsComponent.ts index d4afb0041e..3feb0e8e19 100644 --- a/extensions/machine-learning/src/views/models/azureModelsComponent.ts +++ b/extensions/machine-learning/src/views/models/azureModelsComponent.ts @@ -42,7 +42,7 @@ export class AzureModelsComponent extends ModelViewBase implements IDataComponen this.azureSignInComponent = new AzureSignInComponent(this._apiWrapper, modelBuilder, this); this._loader = modelBuilder.loadingComponent() .withItem(this.azureModelsTable.component) - .withProperties({ + .withProps({ loading: true }).component(); this.azureModelsTable.onModelSelectionChanged(async () => { diff --git a/extensions/machine-learning/src/views/models/azureModelsTable.ts b/extensions/machine-learning/src/views/models/azureModelsTable.ts index b9cb25d031..c5e211d14f 100644 --- a/extensions/machine-learning/src/views/models/azureModelsTable.ts +++ b/extensions/machine-learning/src/views/models/azureModelsTable.ts @@ -161,9 +161,7 @@ export class AzureModelsTable extends ModelViewBase implements IDataComponent{ + this._subheadingTextComponent = modelBuilder.text().withProps({ value: this.modelActionType === ModelActionType.Import ? constants.viewImportModelsDesc : constants.viewImportModeledForPredictDesc, CSSStyles: { 'font-size': '13px' } }).component(); - this._subheadingLinkComponent = modelBuilder.hyperlink().withProperties({ + this._subheadingLinkComponent = modelBuilder.hyperlink().withProps({ label: constants.learnMoreLink, url: constants.importModelsDoc, CSSStyles: { diff --git a/extensions/machine-learning/src/views/models/manageModels/currentModelsTable.ts b/extensions/machine-learning/src/views/models/manageModels/currentModelsTable.ts index 203ab6316c..3eca672c09 100644 --- a/extensions/machine-learning/src/views/models/manageModels/currentModelsTable.ts +++ b/extensions/machine-learning/src/views/models/manageModels/currentModelsTable.ts @@ -161,7 +161,7 @@ export class CurrentModelsTable extends ModelViewBase implements IDataComponent< .component(); this._loader = modelBuilder.loadingComponent() .withItem(this._table) - .withProperties({ + .withProps({ loading: true }).component(); return this._loader; @@ -265,24 +265,22 @@ export class CurrentModelsTable extends ModelViewBase implements IDataComponent< this.onModelSelected(); }; if (this._settings.multiSelect) { - const checkbox = this._modelBuilder.checkBox().withProperties({ - name: 'amlModel', - value: model.id, + const checkbox = this._modelBuilder.checkBox().withProps({ width: 15, height: 15, - checked: this._selectedModels && this._selectedModels.find(x => x.id === model.id) + checked: !!this._selectedModels.find(x => x.id === model.id) }).component(); checkbox.onChanged(() => { onSelectItem(checkbox.checked || false); }); selectModelButton = checkbox; } else { - const radioButton = this._modelBuilder.radioButton().withProperties({ + const radioButton = this._modelBuilder.radioButton().withProps({ name: 'amlModel', - value: model.id, + value: String(model.id), width: 15, height: 15, - checked: this._selectedModels && this._selectedModels.find(x => x.id === model.id) + checked: !!this._selectedModels.find(x => x.id === model.id) }).component(); radioButton.onDidClick(() => { onSelectItem(radioButton.checked || false); @@ -298,7 +296,7 @@ export class CurrentModelsTable extends ModelViewBase implements IDataComponent< let predictButton: azdata.ButtonComponent | undefined = undefined; let editButton: azdata.ButtonComponent | undefined = undefined; if (this._modelBuilder && this._settings.editable) { - dropButton = this._modelBuilder.button().withProperties({ + dropButton = this._modelBuilder.button().withProps({ label: '', title: constants.deleteTitle, iconPath: { @@ -321,7 +319,7 @@ export class CurrentModelsTable extends ModelViewBase implements IDataComponent< this.showErrorMessage(`${constants.updateModelFailedError} ${constants.getErrorMessage(error)}`); } }); - predictButton = this._modelBuilder.button().withProperties({ + predictButton = this._modelBuilder.button().withProps({ label: '', title: constants.predictModel, iconPath: { @@ -335,7 +333,7 @@ export class CurrentModelsTable extends ModelViewBase implements IDataComponent< await this.sendDataRequest(PredictWizardEventName, [model]); }); - editButton = this._modelBuilder.button().withProperties({ + editButton = this._modelBuilder.button().withProps({ label: '', title: constants.editTitle, iconPath: { diff --git a/extensions/machine-learning/src/views/models/manageModels/modelDetailsComponent.ts b/extensions/machine-learning/src/views/models/manageModels/modelDetailsComponent.ts index 4c132c78fa..ebba51cb10 100644 --- a/extensions/machine-learning/src/views/models/manageModels/modelDetailsComponent.ts +++ b/extensions/machine-learning/src/views/models/manageModels/modelDetailsComponent.ts @@ -34,23 +34,23 @@ export class ModelDetailsComponent extends ModelViewBase implements IDataCompone * @param modelBuilder model builder */ public registerComponent(modelBuilder: azdata.ModelBuilder): azdata.Component { - this._createdComponent = modelBuilder.text().withProperties({ + this._createdComponent = modelBuilder.text().withProps({ value: this._model.created }).component(); - this._deployedComponent = modelBuilder.text().withProperties({ + this._deployedComponent = modelBuilder.text().withProps({ value: this._model.deploymentTime }).component(); - this._frameworkComponent = modelBuilder.text().withProperties({ + this._frameworkComponent = modelBuilder.text().withProps({ value: this._model.framework }).component(); - this._frameworkVersionComponent = modelBuilder.text().withProperties({ + this._frameworkVersionComponent = modelBuilder.text().withProps({ value: this._model.frameworkVersion }).component(); - this._nameComponent = modelBuilder.inputBox().withProperties({ + this._nameComponent = modelBuilder.inputBox().withProps({ width: this.componentMaxLength, value: this._model.modelName }).component(); - this._descriptionComponent = modelBuilder.inputBox().withProperties({ + this._descriptionComponent = modelBuilder.inputBox().withProps({ width: this.componentMaxLength, value: this._model.description, multiline: true, diff --git a/extensions/machine-learning/src/views/models/modelSourcesComponent.ts b/extensions/machine-learning/src/views/models/modelSourcesComponent.ts index dc079641a5..43a5696c52 100644 --- a/extensions/machine-learning/src/views/models/modelSourcesComponent.ts +++ b/extensions/machine-learning/src/views/models/modelSourcesComponent.ts @@ -92,7 +92,7 @@ export class ModelSourcesComponent extends ModelViewBase implements IDataCompone } }); let radioCardGroup = modelBuilder.radioCardGroup() - .withProperties({ + .withProps({ cards: components, iconHeight: '100px', iconWidth: '100px', @@ -104,7 +104,7 @@ export class ModelSourcesComponent extends ModelViewBase implements IDataCompone this._flexContainer = modelBuilder.flexContainer().withLayout({ flexFlow: 'column' }).withItems([radioCardGroup]).component(); - this._selectedSourceLabel = modelBuilder.text().withProperties({ + this._selectedSourceLabel = modelBuilder.text().withProps({ value: this.getSourceTypeDescription(this._sourceType), CSSStyles: { 'font-size': '13px', diff --git a/extensions/machine-learning/src/views/models/modelsDetailsTableComponent.ts b/extensions/machine-learning/src/views/models/modelsDetailsTableComponent.ts index 0e785d8546..10ca1ab5ab 100644 --- a/extensions/machine-learning/src/views/models/modelsDetailsTableComponent.ts +++ b/extensions/machine-learning/src/views/models/modelsDetailsTableComponent.ts @@ -129,12 +129,12 @@ export class ModelsDetailsTableComponent extends ModelViewBase implements IDataC private createTableRow(model: ModelViewData | undefined): any[] { if (this._modelBuilder && model && model.modelDetails) { - const nameComponent = this._modelBuilder.inputBox().withProperties({ + const nameComponent = this._modelBuilder.inputBox().withProps({ value: model.modelDetails.modelName, width: this.componentMaxLength - 100, required: true }).component(); - const descriptionComponent = this._modelBuilder.inputBox().withProperties({ + const descriptionComponent = this._modelBuilder.inputBox().withProps({ value: model.modelDetails.description, width: this.componentMaxLength }).component(); @@ -148,7 +148,7 @@ export class ModelsDetailsTableComponent extends ModelViewBase implements IDataC model.modelDetails.modelName = nameComponent.value || ''; } }); - let deleteButton = this._modelBuilder.button().withProperties({ + let deleteButton = this._modelBuilder.button().withProps({ label: '', title: constants.deleteTitle, width: 15, diff --git a/extensions/machine-learning/src/views/models/prediction/columnsTable.ts b/extensions/machine-learning/src/views/models/prediction/columnsTable.ts index cc84cb4158..6b6c21f844 100644 --- a/extensions/machine-learning/src/views/models/prediction/columnsTable.ts +++ b/extensions/machine-learning/src/views/models/prediction/columnsTable.ts @@ -134,7 +134,7 @@ export class ColumnsTable extends ModelViewBase implements IDataComponent 0 ? values[0] : undefined; } const currentColumn = columns.find(x => x.columnName === column?.name); - let nameInput = this._modelBuilder.dropDown().withProperties({ + let nameInput = this._modelBuilder.dropDown().withProps({ values: values, value: column, width: this.componentMaxLength @@ -348,7 +348,7 @@ export class ColumnsTable extends ModelViewBase implements IDataComponent { - const warningContentContainer = view.modelBuilder.divContainer().withProperties({}).component(); - const messageTextComponent = view.modelBuilder.text().withProperties({ + const warningContentContainer = view.modelBuilder.divContainer().withProps({}).component(); + const messageTextComponent = view.modelBuilder.text().withProps({ value: calloutMessageText, CSSStyles: { 'font-size': '12px', @@ -419,7 +419,7 @@ export class ColumnsTable extends ModelViewBase implements IDataComponent({ @@ -566,7 +566,7 @@ export class ManageAccessDialog { // Only show default section for directories if (this.hdfsModel.fileStatus.type === HdfsFileType.Directory) { // Middle spacer - const middleSpacer = this.modelBuilder.text().withProperties({ CSSStyles: { 'width': `${middleSpacerWidth}px`, 'min-width': `${middleSpacerWidth}px` } }).component(); + const middleSpacer = this.modelBuilder.text().withProps({ CSSStyles: { 'width': `${middleSpacerWidth}px`, 'min-width': `${middleSpacerWidth}px` } }).component(); sectionHeaderContainer.addItem(middleSpacer, { flex: '0 0 auto' }); // Default @@ -586,7 +586,7 @@ export class ManageAccessDialog { } // Right spacer - const rightSpacer = this.modelBuilder.text().withProperties({ CSSStyles: { 'width': `${rightSpacerWidth}px`, 'min-width': `${rightSpacerWidth}px` } }).component(); + const rightSpacer = this.modelBuilder.text().withProps({ CSSStyles: { 'width': `${rightSpacerWidth}px`, 'min-width': `${rightSpacerWidth}px` } }).component(); sectionHeaderContainer.addItem(rightSpacer, { flex: '0 0 auto' }); return sectionHeaderContainer; diff --git a/extensions/mssql/src/sparkFeature/dialog/sparkJobSubmission/sparkConfigurationTab.ts b/extensions/mssql/src/sparkFeature/dialog/sparkJobSubmission/sparkConfigurationTab.ts index 5e743be5c7..aa70bdd7f1 100644 --- a/extensions/mssql/src/sparkFeature/dialog/sparkJobSubmission/sparkConfigurationTab.ts +++ b/extensions/mssql/src/sparkFeature/dialog/sparkJobSubmission/sparkConfigurationTab.ts @@ -56,7 +56,7 @@ export class SparkConfigurationTab { let formContainer = builder.formContainer(); - this._jobNameInputBox = builder.inputBox().withProperties({ + this._jobNameInputBox = builder.inputBox().withProps({ placeHolder: localize('sparkJobSubmission.JobNamePlaceHolder', "Enter a name ..."), value: (this._path) ? fspath.basename(this._path) : '' }).component(); @@ -67,7 +67,7 @@ export class SparkConfigurationTab { required: true }, baseFormItemLayout); - this._sparkContextLabel = builder.text().withProperties({ + this._sparkContextLabel = builder.text().withProps({ value: this._dataModel.getSparkClusterUrl() }).component(); formContainer.addFormItem({ @@ -104,7 +104,7 @@ export class SparkConfigurationTab { } }); - this._sparkSourceFileInputBox = builder.inputBox().withProperties({ + this._sparkSourceFileInputBox = builder.inputBox().withProps({ required: true, placeHolder: localize('sparkJobSubmission.FilePathPlaceHolder', "Path to a .jar or .py file"), value: (this._path) ? this._path : '' @@ -133,8 +133,7 @@ export class SparkConfigurationTab { } }); - this._filePickerButton = builder.button().withProperties({ - required: (this._path) ? false : true, + this._filePickerButton = builder.button().withProps({ enabled: (this._path) ? false : true, label: '•••', width: constants.mssqlClusterSparkJobFileSelectorButtonWidth, @@ -156,7 +155,7 @@ export class SparkConfigurationTab { alignContent: 'stretch' }); - this._localUploadDestinationLabel = builder.text().withProperties({ + this._localUploadDestinationLabel = builder.text().withProps({ value: (this._path) ? '' : LocalizedConstants.sparkLocalFileDestinationHint }).component(); this._sourceFlexContainerWithHint = builder.flexContainer().component(); diff --git a/extensions/notebook/src/dialog/addFileDialog.ts b/extensions/notebook/src/dialog/addFileDialog.ts index 68ad285014..14ee420f9e 100644 --- a/extensions/notebook/src/dialog/addFileDialog.ts +++ b/extensions/notebook/src/dialog/addFileDialog.ts @@ -46,19 +46,19 @@ export class AddFileDialog { this._dialog.registerContent(async view => { this.view = view; this._fileNameInputBox = this.view.modelBuilder.inputBox() - .withProperties({ + .withProps({ enabled: true, width: '400px' }).component(); this._titleInputBox = this.view.modelBuilder.inputBox() - .withProperties({ + .withProps({ enabled: true, width: '400px' }).component(); this._saveLocationInputBox = this.view.modelBuilder.inputBox() - .withProperties({ + .withProps({ value: this._bookItem.contextValue === BookTreeItemType.savedBook ? this._bookItem.rootContentPath : path.dirname(this._bookItem.resourceUri.fsPath), enabled: false, width: '400px' diff --git a/extensions/notebook/src/dialog/createBookDialog.ts b/extensions/notebook/src/dialog/createBookDialog.ts index c16793aa14..b80d003ae9 100644 --- a/extensions/notebook/src/dialog/createBookDialog.ts +++ b/extensions/notebook/src/dialog/createBookDialog.ts @@ -75,7 +75,7 @@ export class CreateBookDialog { }).component(); const bookLabel = this.view.modelBuilder.text() - .withProperties({ + .withProps({ value: loc.bookDescription, CSSStyles: { 'margin-bottom': '0px', 'margin-top': '0px', 'font-size': 'small' } }).component(); diff --git a/extensions/notebook/src/dialog/managePackages/addNewPackageTab.ts b/extensions/notebook/src/dialog/managePackages/addNewPackageTab.ts index ae13fbcfc0..9b92217785 100644 --- a/extensions/notebook/src/dialog/managePackages/addNewPackageTab.ts +++ b/extensions/notebook/src/dialog/managePackages/addNewPackageTab.ts @@ -32,7 +32,7 @@ export class AddNewPackageTab { this.addNewPkgTab = azdata.window.createTab(localize('managePackages.addNewTabTitle', "Add new")); this.addNewPkgTab.registerContent(async view => { - this.newPackagesSearchBar = view.modelBuilder.inputBox().withProperties({ width: '400px' }).component(); + this.newPackagesSearchBar = view.modelBuilder.inputBox().withProps({ width: '400px' }).component(); // Search package by name when pressing enter this.newPackagesSearchBar.onEnterKeyPressed(async () => { await this.loadNewPackageInfo(); @@ -48,22 +48,22 @@ export class AddNewPackageTab { await this.loadNewPackageInfo(); }); - this.newPackagesName = view.modelBuilder.text().withProperties({ width: '400px' }).component(); + this.newPackagesName = view.modelBuilder.text().withProps({ width: '400px' }).component(); this.newPackagesNameLoader = view.modelBuilder.loadingComponent() .withItem(this.newPackagesName) .component(); - this.newPackagesVersions = view.modelBuilder.dropDown().withProperties({ width: '400px' }).component(); + this.newPackagesVersions = view.modelBuilder.dropDown().withProps({ width: '400px' }).component(); this.newPackagesVersionsLoader = view.modelBuilder.loadingComponent() .withItem(this.newPackagesVersions) .component(); - this.newPackagesSummary = view.modelBuilder.text().withProperties({ width: '400px' }).component(); + this.newPackagesSummary = view.modelBuilder.text().withProps({ width: '400px' }).component(); this.newPackagesSummaryLoader = view.modelBuilder.loadingComponent() .withItem(this.newPackagesSummary) .component(); - this.packageInstallButton = view.modelBuilder.button().withProperties({ + this.packageInstallButton = view.modelBuilder.button().withProps({ label: localize('managePackages.installButtonText', "Install"), width: '200px', secondary: true diff --git a/extensions/notebook/src/dialog/managePackages/installedPackagesTab.ts b/extensions/notebook/src/dialog/managePackages/installedPackagesTab.ts index 4fde8723fe..5b7c9be770 100644 --- a/extensions/notebook/src/dialog/managePackages/installedPackagesTab.ts +++ b/extensions/notebook/src/dialog/managePackages/installedPackagesTab.ts @@ -52,9 +52,9 @@ export class InstalledPackagesTab { }; }); let defaultPackageType = this.dialog.model.getDefaultPackageType(); - this.packageTypeDropdown = view.modelBuilder.dropDown().withProperties({ + this.packageTypeDropdown = view.modelBuilder.dropDown().withProps({ values: dropdownValues, - value: defaultPackageType + value: defaultPackageType.providerId }).component(); this.dialog.changeProvider(defaultPackageType.providerId); this.packageTypeDropdown.onValueChanged(async () => { @@ -69,12 +69,12 @@ export class InstalledPackagesTab { }); - this.installedPackageCount = view.modelBuilder.text().withProperties({ + this.installedPackageCount = view.modelBuilder.text().withProps({ value: '' }).component(); this.installedPackagesTable = view.modelBuilder.table() - .withProperties({ + .withProps({ columns: [ { value: localize('managePackages.pkgNameColumn', "Name"), @@ -128,7 +128,7 @@ export class InstalledPackagesTab { this.installedPackagesLoader = view.modelBuilder.loadingComponent() .withItem(this.formBuilder.component()) - .withProperties({ + .withProps({ loading: true }).component(); @@ -167,7 +167,7 @@ export class InstalledPackagesTab { let location: string; let component: azdata.Component; if (locations && locations.length === 1) { - component = view.modelBuilder.text().withProperties({ + component = view.modelBuilder.text().withProps({ value: locations[0].displayName }).component(); location = locations[0].name; @@ -181,7 +181,7 @@ export class InstalledPackagesTab { const currentLocation = await dialog.model.getCurrentLocation(); const selectedLocation = dropdownValues.find(x => x.name === currentLocation); location = currentLocation || locations[0].name; - let locationDropDown = view.modelBuilder.dropDown().withProperties({ + let locationDropDown = view.modelBuilder.dropDown().withProps({ values: dropdownValues, value: selectedLocation || dropdownValues[0] }).component(); @@ -197,7 +197,7 @@ export class InstalledPackagesTab { }); component = locationDropDown; } else { - component = view.modelBuilder.text().withProperties({ + component = view.modelBuilder.text().withProps({ }).component(); } if (location) { diff --git a/extensions/notebook/src/dialog/remoteBookDialog.ts b/extensions/notebook/src/dialog/remoteBookDialog.ts index 42603ce250..d91236face 100644 --- a/extensions/notebook/src/dialog/remoteBookDialog.ts +++ b/extensions/notebook/src/dialog/remoteBookDialog.ts @@ -45,7 +45,7 @@ export class RemoteBookDialog { this.dialog.registerContent(async view => { this.view = view; - this.remoteLocationDropdown = this.view.modelBuilder.dropDown().withProperties({ + this.remoteLocationDropdown = this.view.modelBuilder.dropDown().withProps({ values: this.remoteLocationCategories, value: '', editable: false, @@ -53,7 +53,7 @@ export class RemoteBookDialog { this.remoteLocationDropdown.onValueChanged(e => this.onRemoteLocationChanged()); - this.githubRepoDropdown = this.view.modelBuilder.dropDown().withProperties({ + this.githubRepoDropdown = this.view.modelBuilder.dropDown().withProps({ values: defaultRepos, value: '', editable: true, @@ -69,7 +69,7 @@ export class RemoteBookDialog { this.searchButton.onDidClick(async () => await this.validate()); this.releaseDropdown = this.view.modelBuilder.dropDown() - .withProperties({ + .withProps({ values: [], value: '', enabled: false @@ -77,7 +77,7 @@ export class RemoteBookDialog { this.releaseDropdown.onValueChanged(async () => await this.getAssets()); - this.bookDropdown = this.view.modelBuilder.dropDown().withProperties({ + this.bookDropdown = this.view.modelBuilder.dropDown().withProps({ values: [], value: '', editable: false, @@ -85,7 +85,7 @@ export class RemoteBookDialog { this.bookDropdown.onValueChanged(async () => await this.fillVersionDropdown()); - this.versionDropdown = this.view.modelBuilder.dropDown().withProperties({ + this.versionDropdown = this.view.modelBuilder.dropDown().withProps({ values: [], value: '', editable: false, @@ -93,7 +93,7 @@ export class RemoteBookDialog { this.versionDropdown.onValueChanged(async () => await this.fillLanguageDropdown()); - this.languageDropdown = this.view.modelBuilder.dropDown().withProperties({ + this.languageDropdown = this.view.modelBuilder.dropDown().withProps({ values: [], value: '', editable: false, diff --git a/extensions/profiler/src/dialogs/profilerCreateSessionDialog.ts b/extensions/profiler/src/dialogs/profilerCreateSessionDialog.ts index 1695405395..474338cfe6 100644 --- a/extensions/profiler/src/dialogs/profilerCreateSessionDialog.ts +++ b/extensions/profiler/src/dialogs/profilerCreateSessionDialog.ts @@ -56,12 +56,12 @@ export class CreateSessionDialog { private initializeContent(): void { this.dialog.registerContent(async view => { this.templatesBox = view.modelBuilder.dropDown() - .withProperties({ + .withProps({ values: [] }).component(); this.sessionNameBox = view.modelBuilder.inputBox() - .withProperties({ + .withProps({ required: true, multiline: false, value: '' diff --git a/extensions/resource-deployment/package.json b/extensions/resource-deployment/package.json index 13edd892c0..17517120ac 100644 --- a/extensions/resource-deployment/package.json +++ b/extensions/resource-deployment/package.json @@ -466,7 +466,7 @@ "@types/semver": "^7.3.1", "@types/sinon": "^9.0.8", "@types/yamljs": "0.2.30", - "@microsoft/azdata-test": "^1.4.0", + "@microsoft/azdata-test": "^1.5.1", "mocha": "^5.2.0", "mocha-junit-reporter": "^1.17.0", "mocha-multi-reporters": "^1.1.7", diff --git a/extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/azureSettingsPage.ts b/extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/azureSettingsPage.ts index 6d1827ce59..90b1b58e32 100644 --- a/extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/azureSettingsPage.ts +++ b/extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/azureSettingsPage.ts @@ -159,7 +159,7 @@ export class AzureSettingsPage extends BasePage { private async createAzureAccountsDropdown(view: azdata.ModelView) { - this._azureAccountsDropdown = view.modelBuilder.dropDown().withProperties({}).component(); + this._azureAccountsDropdown = view.modelBuilder.dropDown().withProps({}).component(); this._azureAccountsDropdown.onValueChanged(async (value) => { this._model.azureAccount = this._accountsMap.get(value.selected)!; @@ -296,7 +296,7 @@ export class AzureSettingsPage extends BasePage { } private async createServerDropdown(view: azdata.ModelView) { - this._serverGroupDropdown = view.modelBuilder.dropDown().withProperties({ + this._serverGroupDropdown = view.modelBuilder.dropDown().withProps({ required: true, }).component(); this._serverGroupDropdown.onValueChanged(async (value) => { @@ -360,7 +360,7 @@ export class AzureSettingsPage extends BasePage { //@todo alma1 9/8/2020 functions below are used for upcoming server creation feature. // private async createResourceDropdown(view: azdata.ModelView) { - // this._resourceGroupDropdown = view.modelBuilder.dropDown().withProperties({ + // this._resourceGroupDropdown = view.modelBuilder.dropDown().withProps({ // required: true // }).component(); // this._resourceGroupDropdown.onValueChanged(async (value) => { @@ -408,7 +408,7 @@ export class AzureSettingsPage extends BasePage { // } // private async createAzureRegionsDropdown(view: azdata.ModelView) { - // this._azureRegionsDropdown = view.modelBuilder.dropDown().withProperties({ + // this._azureRegionsDropdown = view.modelBuilder.dropDown().withProps({ // required: true // }).component(); @@ -446,13 +446,13 @@ export class AzureSettingsPage extends BasePage { // private createDatabaseHardwareSettingsText(view: azdata.ModelView) { // this._dbHardwareInfoText = view.modelBuilder.text() - // .withProperties({ + // .withProps({ // value: constants.DatabaseHardwareInfoLabel // }).component(); // } // private async createManagedInstanceDropdown(view: azdata.ModelView) { - // this._dbManagedInstanceDropdown = view.modelBuilder.dropDown().withProperties({ + // this._dbManagedInstanceDropdown = view.modelBuilder.dropDown().withProps({ // required: true, // }).component(); // this._dbManagedInstanceDropdown.onValueChanged(async (value) => { @@ -528,7 +528,7 @@ export class AzureSettingsPage extends BasePage { // } // private async createSupportedEditionsDropdown(view: azdata.ModelView) { - // this._dbSupportedEditionsDropdown = view.modelBuilder.dropDown().withProperties({ + // this._dbSupportedEditionsDropdown = view.modelBuilder.dropDown().withProps({ // required: true, // }).component(); // this._dbSupportedEditionsDropdown.onValueChanged(async (value) => { @@ -595,7 +595,7 @@ export class AzureSettingsPage extends BasePage { // } // private async createSupportedFamilyDropdown(view: azdata.ModelView) { - // this._dbSupportedFamilyDropdown = view.modelBuilder.dropDown().withProperties({ + // this._dbSupportedFamilyDropdown = view.modelBuilder.dropDown().withProps({ // required: true, // }).component(); // this._dbSupportedFamilyDropdown.onValueChanged(async (value) => { @@ -662,7 +662,7 @@ export class AzureSettingsPage extends BasePage { // } // private async createVCoreDropdown(view: azdata.ModelView) { - // this._dbVCoreDropdown = view.modelBuilder.dropDown().withProperties({ + // this._dbVCoreDropdown = view.modelBuilder.dropDown().withProps({ // required: true, // }).component(); // this._dbVCoreDropdown.onValueChanged(async (value) => { @@ -733,7 +733,7 @@ export class AzureSettingsPage extends BasePage { // } // private createMaxMemoryText(view: azdata.ModelView) { - // this._dbMemoryTextBox = view.modelBuilder.inputBox().withProperties({ + // this._dbMemoryTextBox = view.modelBuilder.inputBox().withProps({ // inputType: 'number', // max: 1024, // min: 1, diff --git a/extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/databaseSettingsPage.ts b/extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/databaseSettingsPage.ts index f79dd75134..17c687160f 100644 --- a/extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/databaseSettingsPage.ts +++ b/extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/databaseSettingsPage.ts @@ -108,13 +108,13 @@ export class DatabaseSettingsPage extends BasePage { private createIpAddressText(view: azdata.ModelView) { this._IpInfoText = view.modelBuilder.text() - .withProperties({ + .withProps({ value: constants.IpAddressInfoLabel }).component(); //Start IP Address Section: - this._startIpAddressTextbox = view.modelBuilder.inputBox().withProperties({ + this._startIpAddressTextbox = view.modelBuilder.inputBox().withProps({ inputType: 'text' }).component(); @@ -126,7 +126,7 @@ export class DatabaseSettingsPage extends BasePage { //End IP Address Section: - this._endIpAddressTextbox = view.modelBuilder.inputBox().withProperties({ + this._endIpAddressTextbox = view.modelBuilder.inputBox().withProps({ inputType: 'text' }).component(); @@ -191,7 +191,7 @@ export class DatabaseSettingsPage extends BasePage { } private createCollationText(view: azdata.ModelView) { - this._collationTextbox = view.modelBuilder.inputBox().withProperties({ + this._collationTextbox = view.modelBuilder.inputBox().withProps({ inputType: 'text', value: 'SQL_Latin1_General_CP1_CI_AS' }).component(); diff --git a/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/azureSettingsPage.ts b/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/azureSettingsPage.ts index d823eab13d..b1e8cbbae1 100644 --- a/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/azureSettingsPage.ts +++ b/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/azureSettingsPage.ts @@ -100,7 +100,7 @@ export class AzureSettingsPage extends BasePage { private async createAzureAccountsDropdown(view: azdata.ModelView) { - this._azureAccountsDropdown = view.modelBuilder.dropDown().withProperties({}).component(); + this._azureAccountsDropdown = view.modelBuilder.dropDown().withProps({}).component(); this._azureAccountsDropdown.onValueChanged(async (value) => { if (!this._azureAccountsDropdown.value) { @@ -164,7 +164,7 @@ export class AzureSettingsPage extends BasePage { } private async createAzureSubscriptionsDropdown(view: azdata.ModelView) { - this._azureSubscriptionsDropdown = view.modelBuilder.dropDown().withProperties({}).component(); + this._azureSubscriptionsDropdown = view.modelBuilder.dropDown().withProps({}).component(); this._azureSubscriptionsDropdown.onValueChanged(async value => { if (!this._azureSubscriptionsDropdown.value) { @@ -234,7 +234,7 @@ export class AzureSettingsPage extends BasePage { } private async createResourceDropdown(view: azdata.ModelView) { - this._resourceGroupDropdown = view.modelBuilder.dropDown().withProperties({ + this._resourceGroupDropdown = view.modelBuilder.dropDown().withProps({ required: true }).component(); this._resourceGroupDropdown.onValueChanged(async (value) => { @@ -278,7 +278,7 @@ export class AzureSettingsPage extends BasePage { } private async createAzureRegionsDropdown(view: azdata.ModelView) { - this._azureRegionsDropdown = view.modelBuilder.dropDown().withProperties({ + this._azureRegionsDropdown = view.modelBuilder.dropDown().withProps({ required: true }).component(); diff --git a/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/networkSettingsPage.ts b/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/networkSettingsPage.ts index b7234d96fe..95ad5456ab 100644 --- a/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/networkSettingsPage.ts +++ b/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/networkSettingsPage.ts @@ -110,7 +110,7 @@ export class NetworkSettingsPage extends BasePage { private async createVirtualNetworkDropdown(view: azdata.ModelView) { - this._newVirtualNetworkCheckbox = view.modelBuilder.checkBox().withProperties({ + this._newVirtualNetworkCheckbox = view.modelBuilder.checkBox().withProps({ label: constants.NetworkSettingsNewVirtualNetwork, checked: false }).component(); @@ -119,7 +119,7 @@ export class NetworkSettingsPage extends BasePage { this.toggleNewVirtualNetwork(); }); - this._virtualNetworkDropdown = view.modelBuilder.dropDown().withProperties({ + this._virtualNetworkDropdown = view.modelBuilder.dropDown().withProps({ width: constants.standardWidth, required: true }).component(); @@ -132,7 +132,7 @@ export class NetworkSettingsPage extends BasePage { this.populateSubnetDropdown(); }); - this._newVirtualNetworkText = view.modelBuilder.inputBox().withProperties({ + this._newVirtualNetworkText = view.modelBuilder.inputBox().withProps({ width: constants.standardWidth, required: true, placeHolder: localize('deployAzureSQLVM.NewVnetPlaceholder', "Enter name for new virtual network") @@ -222,7 +222,7 @@ export class NetworkSettingsPage extends BasePage { }); - this._subnetDropdown = view.modelBuilder.dropDown().withProperties({ + this._subnetDropdown = view.modelBuilder.dropDown().withProps({ width: constants.standardWidth, required: true }).component(); @@ -234,7 +234,7 @@ export class NetworkSettingsPage extends BasePage { this._model.subnetName = (this._subnetDropdown.value as azdata.CategoryValue).name; }); - this._newsubnetText = view.modelBuilder.inputBox().withProperties({ + this._newsubnetText = view.modelBuilder.inputBox().withProps({ width: constants.standardWidth, required: true, placeHolder: localize('deployAzureSQLVM.NewSubnetPlaceholder', "Enter name for new subnet") @@ -299,7 +299,7 @@ export class NetworkSettingsPage extends BasePage { private async createPublicIPDropdown(view: azdata.ModelView) { - this._newPublicIpCheckbox = view.modelBuilder.checkBox().withProperties({ + this._newPublicIpCheckbox = view.modelBuilder.checkBox().withProps({ label: constants.NetworkSettingsNewPublicIp, checked: false }).component(); @@ -308,7 +308,7 @@ export class NetworkSettingsPage extends BasePage { this.toggleNewPublicIp(); }); - this._publicIpDropdown = view.modelBuilder.dropDown().withProperties({ + this._publicIpDropdown = view.modelBuilder.dropDown().withProps({ required: true, width: constants.standardWidth, }).component(); @@ -320,7 +320,7 @@ export class NetworkSettingsPage extends BasePage { this._model.publicIpName = (this._publicIpDropdown.value as azdata.CategoryValue).name; }); - this._publicIpNetworkText = view.modelBuilder.inputBox().withProperties({ + this._publicIpNetworkText = view.modelBuilder.inputBox().withProps({ placeHolder: localize('deployAzureSQLVM.NewPipPlaceholder', "Enter name for new public IP"), width: constants.standardWidth }).component(); @@ -385,7 +385,7 @@ export class NetworkSettingsPage extends BasePage { } private async createVmRDPAllowCheckbox(view: azdata.ModelView) { - this._vmRDPAllowCheckbox = view.modelBuilder.checkBox().withProperties({ + this._vmRDPAllowCheckbox = view.modelBuilder.checkBox().withProps({ label: constants.RDPAllowCheckboxLabel, }).component(); this._vmRDPAllowCheckbox.onChanged((value) => { diff --git a/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/sqlServerSettingsPage.ts b/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/sqlServerSettingsPage.ts index b9b7d2f43f..8ae1b18a84 100644 --- a/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/sqlServerSettingsPage.ts +++ b/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/sqlServerSettingsPage.ts @@ -109,7 +109,7 @@ export class SqlServerSettingsPage extends BasePage { private createSqlConnectivityDropdown(view: azdata.ModelView) { const privateOptionDisplayName = localize('deployAzureSQLVM.PrivateConnectivityDropdownOptionDefault', "Private (within Virtual Network)"); - this._sqlConnectivityDropdown = view.modelBuilder.dropDown().withProperties( + this._sqlConnectivityDropdown = view.modelBuilder.dropDown().withProps( { values: [ { @@ -148,7 +148,7 @@ export class SqlServerSettingsPage extends BasePage { } private createPortText(view: azdata.ModelView) { - this._portTextBox = view.modelBuilder.inputBox().withProperties({ + this._portTextBox = view.modelBuilder.inputBox().withProps({ inputType: 'number', max: 65535, min: 1024, @@ -165,7 +165,7 @@ export class SqlServerSettingsPage extends BasePage { private createSqlAuthentication(view: azdata.ModelView) { - this._sqlAuthenticationDropdown = view.modelBuilder.dropDown().withProperties({ + this._sqlAuthenticationDropdown = view.modelBuilder.dropDown().withProps({ values: [ { displayName: localizedConstants.yes, @@ -194,13 +194,13 @@ export class SqlServerSettingsPage extends BasePage { this._sqlAuthenticationTextRow = this._model.createFormRowComponent(view, constants.SqlAuthenticationUsernameLabel, '', this._sqlAuthenticationTextbox, true); - this._sqlAuthenticationPasswordTextbox = view.modelBuilder.inputBox().withProperties({ + this._sqlAuthenticationPasswordTextbox = view.modelBuilder.inputBox().withProps({ inputType: 'password' }).component(); this._sqlAuthenticationPasswordTextRow = this._model.createFormRowComponent(view, constants.SqlAuthenticationPasswordLabel, '', this._sqlAuthenticationPasswordTextbox, true); - this._sqlAuthenticationPasswordConfirmationTextbox = view.modelBuilder.inputBox().withProperties({ + this._sqlAuthenticationPasswordConfirmationTextbox = view.modelBuilder.inputBox().withProps({ inputType: 'password' }).component(); diff --git a/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/vmSettingsPage.ts b/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/vmSettingsPage.ts index 5d0d16a29d..d9f8a5dcf0 100644 --- a/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/vmSettingsPage.ts +++ b/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/vmSettingsPage.ts @@ -140,7 +140,7 @@ export class VmSettingsPage extends BasePage { private async createVmNameTextBox(view: azdata.ModelView) { - this._vmNameTextBox = view.modelBuilder.inputBox().withProperties({ + this._vmNameTextBox = view.modelBuilder.inputBox().withProps({ }).component(); this._vmNameTextBox.onTextChanged((value) => { @@ -150,7 +150,7 @@ export class VmSettingsPage extends BasePage { } private async createAdminUsernameTextBox(view: azdata.ModelView) { - this._adminUsernameTextBox = view.modelBuilder.inputBox().withProperties({ + this._adminUsernameTextBox = view.modelBuilder.inputBox().withProps({ }).component(); this._adminUsernameTextBox.onTextChanged((value) => { @@ -160,7 +160,7 @@ export class VmSettingsPage extends BasePage { } private async createAdminPasswordTextBox(view: azdata.ModelView) { - this._adminPasswordTextBox = view.modelBuilder.inputBox().withProperties({ + this._adminPasswordTextBox = view.modelBuilder.inputBox().withProps({ inputType: 'password', }).component(); @@ -171,7 +171,7 @@ export class VmSettingsPage extends BasePage { } private async createAdminPasswordConfirmTextBox(view: azdata.ModelView) { - this._adminComfirmPasswordTextBox = view.modelBuilder.inputBox().withProperties({ + this._adminComfirmPasswordTextBox = view.modelBuilder.inputBox().withProps({ inputType: 'password', }).component(); @@ -181,7 +181,7 @@ export class VmSettingsPage extends BasePage { } private async createVmImageDropdown(view: azdata.ModelView) { - this._vmImageDropdown = view.modelBuilder.dropDown().withProperties({ + this._vmImageDropdown = view.modelBuilder.dropDown().withProps({ }).component(); this._vmImageDropdown.onValueChanged(value => { @@ -236,7 +236,7 @@ export class VmSettingsPage extends BasePage { } private async createVMImageSkuDropdown(view: azdata.ModelView) { - this._vmImageSkuDropdown = view.modelBuilder.dropDown().withProperties({ + this._vmImageSkuDropdown = view.modelBuilder.dropDown().withProps({ }).component(); this._vmImageSkuDropdown.onValueChanged(value => { @@ -277,7 +277,7 @@ export class VmSettingsPage extends BasePage { } private async createVMImageVersionDropdown(view: azdata.ModelView) { - this._vmImageVersionDropdown = view.modelBuilder.dropDown().withProperties({ + this._vmImageVersionDropdown = view.modelBuilder.dropDown().withProps({ }).component(); this._vmImageVersionDropdown.onValueChanged(value => { @@ -317,7 +317,7 @@ export class VmSettingsPage extends BasePage { private async createVmSizeDropdown(view: azdata.ModelView) { - this._vmSizeDropdown = view.modelBuilder.dropDown().withProperties({ + this._vmSizeDropdown = view.modelBuilder.dropDown().withProps({ editable: true }).component(); @@ -325,7 +325,7 @@ export class VmSettingsPage extends BasePage { this._model.vmSize = (this._vmSizeDropdown.value as azdata.CategoryValue).name; }); - this._vmSizeLearnMoreLink = view.modelBuilder.hyperlink().withProperties({ + this._vmSizeLearnMoreLink = view.modelBuilder.hyperlink().withProps({ label: constants.VmSizeLearnMoreLabel, url: 'https://go.microsoft.com/fwlink/?linkid=2143101' diff --git a/extensions/resource-deployment/src/ui/deployClusterWizard/pages/targetClusterPage.ts b/extensions/resource-deployment/src/ui/deployClusterWizard/pages/targetClusterPage.ts index 4cf98ba691..3bfbc244b6 100644 --- a/extensions/resource-deployment/src/ui/deployClusterWizard/pages/targetClusterPage.ts +++ b/extensions/resource-deployment/src/ui/deployClusterWizard/pages/targetClusterPage.ts @@ -83,17 +83,17 @@ export class TargetClusterContextPage extends ResourceTypePage { private initExistingClusterControl(): void { let self = this; const labelWidth = '150px'; - let configFileLabel = this.view!.modelBuilder.text().withProperties({ value: localize('deployCluster.kubeConfigFileLabelText', "Kube config file path") }).component(); + let configFileLabel = this.view!.modelBuilder.text().withProps({ value: localize('deployCluster.kubeConfigFileLabelText', "Kube config file path") }).component(); configFileLabel.width = labelWidth; - this.configFileInput = this.view!.modelBuilder.inputBox().withProperties({ width: '300px' }).component(); + this.configFileInput = this.view!.modelBuilder.inputBox().withProps({ width: '300px' }).component(); this.configFileInput.enabled = false; - this.browseFileButton = this.view!.modelBuilder.button().withProperties({ label: localize('deployCluster.browseText', "Browse"), width: '100px', secondary: true }).component(); + this.browseFileButton = this.view!.modelBuilder.button().withProps({ label: localize('deployCluster.browseText', "Browse"), width: '100px', secondary: true }).component(); let configFileContainer = this.view!.modelBuilder.flexContainer() .withLayout({ flexFlow: 'row', alignItems: 'baseline' }) .withItems([configFileLabel, this.configFileInput, this.browseFileButton], { CSSStyles: { 'margin-right': '10px' } }).component(); - this.clusterContextsLabel = this.view!.modelBuilder.text().withProperties({ value: localize('deployCluster.clusterContextsLabelText', "Cluster Contexts") }).component(); + this.clusterContextsLabel = this.view!.modelBuilder.text().withProps({ value: localize('deployCluster.clusterContextsLabelText', "Cluster Contexts") }).component(); this.clusterContextsLabel.width = labelWidth; - this.errorLoadingClustersLabel = this.view!.modelBuilder.text().withProperties({ value: localize('deployCluster.errorLoadingClustersText', "No cluster information is found in the config file or an error ocurred while loading the config file") }).component(); + this.errorLoadingClustersLabel = this.view!.modelBuilder.text().withProps({ value: localize('deployCluster.errorLoadingClustersText', "No cluster information is found in the config file or an error ocurred while loading the config file") }).component(); this.clusterContextList = this.view!.modelBuilder.divContainer().component(); this.clusterContextLoadingComponent = this.view!.modelBuilder.loadingComponent().withItem(this.clusterContextList).component(); this.existingClusterControl = this.view!.modelBuilder.divContainer().withProperties({ clickable: false }).component(); diff --git a/extensions/resource-deployment/src/ui/radioGroupLoadingComponentBuilder.ts b/extensions/resource-deployment/src/ui/radioGroupLoadingComponentBuilder.ts index 218c35a0f4..4b6660358f 100644 --- a/extensions/resource-deployment/src/ui/radioGroupLoadingComponentBuilder.ts +++ b/extensions/resource-deployment/src/ui/radioGroupLoadingComponentBuilder.ts @@ -22,11 +22,11 @@ export class RadioGroupLoadingComponentBuilder implements azdata.ComponentBuilde } withProperties(properties: U): azdata.ComponentBuilder { - return this._optionsLoadingBuilder.withProperties(properties); + return this._optionsLoadingBuilder.withProps(properties); } withProps(properties: azdata.LoadingComponentProperties): azdata.ComponentBuilder { - return this._optionsLoadingBuilder.withProperties(properties); + return this._optionsLoadingBuilder.withProps(properties); } withValidation(validation: (component: azdata.LoadingComponent) => boolean): azdata.ComponentBuilder { @@ -68,7 +68,7 @@ export class RadioGroupLoadingComponentBuilder implements azdata.ComponentBuilde }); } catch (e) { - const errorLoadingRadioOptionsLabel = this._view!.modelBuilder.text().withProperties({ value: getErrorMessage(e), CSSStyles: { 'color': 'Red' } }).component(); + const errorLoadingRadioOptionsLabel = this._view!.modelBuilder.text().withProps({ value: getErrorMessage(e), CSSStyles: { 'color': 'Red' } }).component(); this._optionsDivContainer.addItem(errorLoadingRadioOptionsLabel); } this.component().loading = false; diff --git a/extensions/resource-deployment/src/ui/resourceTypePickerDialog.ts b/extensions/resource-deployment/src/ui/resourceTypePickerDialog.ts index ce21b2c0f5..e449b67193 100644 --- a/extensions/resource-deployment/src/ui/resourceTypePickerDialog.ts +++ b/extensions/resource-deployment/src/ui/resourceTypePickerDialog.ts @@ -75,7 +75,7 @@ export class ResourceTypePickerDialog extends DialogBase { this._resourceTagsListView = this.createTagsListView(); resourceComponents.push(this._resourceTagsListView); } - this._resourceSearchBox = view.modelBuilder.inputBox().withProperties({ + this._resourceSearchBox = view.modelBuilder.inputBox().withProps({ placeHolder: loc.resourceTypeSearchBoxDescription, ariaLabel: loc.resourceTypeSearchBoxDescription }).component(); diff --git a/extensions/resource-deployment/yarn.lock b/extensions/resource-deployment/yarn.lock index 9cd0996696..76b7b3689e 100644 --- a/extensions/resource-deployment/yarn.lock +++ b/extensions/resource-deployment/yarn.lock @@ -196,10 +196,10 @@ dependencies: vscode-extension-telemetry "^0.1.6" -"@microsoft/azdata-test@^1.4.0": - version "1.4.0" - resolved "https://registry.yarnpkg.com/@microsoft/azdata-test/-/azdata-test-1.4.0.tgz#a809187ae8a065c518e3a3e2d350883e592853bc" - integrity sha512-iscDA13/XRknRCNauP9OPsSg/ulTrMJOPFA0XMyNG1it3zY8mEJxxFJcNkWTnnEWpOUFvyksvoouzYUNy1fvrQ== +"@microsoft/azdata-test@^1.5.1": + version "1.5.1" + resolved "https://registry.yarnpkg.com/@microsoft/azdata-test/-/azdata-test-1.5.1.tgz#e61aeb81f3291563f250e6b0c712a45aa335de94" + integrity sha512-3B5iz0WU5TCKOs420zRNk4LWi2n5W64ZLJMu81X/yFFmnCbjhWwKE4xgTBZTuzmzg372bNNrHm9zHZcr3lm1RA== dependencies: http-proxy-agent "^2.1.0" https-proxy-agent "^2.2.4" diff --git a/extensions/schema-compare/src/dialogs/schemaCompareDialog.ts b/extensions/schema-compare/src/dialogs/schemaCompareDialog.ts index 517252f0bf..f263898df4 100644 --- a/extensions/schema-compare/src/dialogs/schemaCompareDialog.ts +++ b/extensions/schema-compare/src/dialogs/schemaCompareDialog.ts @@ -190,7 +190,7 @@ export class SchemaCompareDialog { this.view = view; } - this.sourceTextBox = this.view.modelBuilder.inputBox().withProperties({ + this.sourceTextBox = this.view.modelBuilder.inputBox().withProps({ value: this.schemaCompareMainWindow.sourceEndpointInfo ? this.schemaCompareMainWindow.sourceEndpointInfo.packageFilePath : '', width: this.textBoxWidth, ariaLabel: loc.sourceFile @@ -200,7 +200,7 @@ export class SchemaCompareDialog { this.dialog.okButton.enabled = await this.shouldEnableOkayButton(); }); - this.targetTextBox = this.view.modelBuilder.inputBox().withProperties({ + this.targetTextBox = this.view.modelBuilder.inputBox().withProps({ value: this.schemaCompareMainWindow.targetEndpointInfo ? this.schemaCompareMainWindow.targetEndpointInfo.packageFilePath : '', width: this.textBoxWidth, ariaLabel: loc.targetFile @@ -286,14 +286,14 @@ export class SchemaCompareDialog { private createFileBrowser(isTarget: boolean, endpoint: mssql.SchemaCompareEndpointInfo): azdata.FormComponent { let currentTextbox = isTarget ? this.targetTextBox : this.sourceTextBox; if (isTarget) { - this.targetFileButton = this.view.modelBuilder.button().withProperties({ + this.targetFileButton = this.view.modelBuilder.button().withProps({ label: '•••', title: loc.selectTargetFile, ariaLabel: loc.selectTargetFile, secondary: true }).component(); } else { - this.sourceFileButton = this.view.modelBuilder.button().withProperties({ + this.sourceFileButton = this.view.modelBuilder.button().withProps({ label: '•••', title: loc.selectSourceFile, ariaLabel: loc.selectSourceFile, @@ -338,13 +338,13 @@ export class SchemaCompareDialog { private createSourceRadioButtons(): azdata.FormComponent { this.sourceDacpacRadioButton = this.view.modelBuilder.radioButton() - .withProperties({ + .withProps({ name: 'source', label: loc.DacpacRadioButtonLabel }).component(); this.sourceDatabaseRadioButton = this.view.modelBuilder.radioButton() - .withProperties({ + .withProps({ name: 'source', label: loc.DatabaseRadioButtonLabel }).component(); @@ -379,7 +379,7 @@ export class SchemaCompareDialog { let flexRadioButtonsModel = this.view.modelBuilder.flexContainer() .withLayout({ flexFlow: 'column' }) .withItems([this.sourceDacpacRadioButton, this.sourceDatabaseRadioButton]) - .withProperties({ ariaRole: 'radiogroup' }) + .withProps({ ariaRole: 'radiogroup' }) .component(); return { @@ -390,13 +390,13 @@ export class SchemaCompareDialog { private createTargetRadioButtons(): azdata.FormComponent { let dacpacRadioButton = this.view.modelBuilder.radioButton() - .withProperties({ + .withProps({ name: 'target', label: loc.DacpacRadioButtonLabel }).component(); let databaseRadioButton = this.view.modelBuilder.radioButton() - .withProperties({ + .withProps({ name: 'target', label: loc.DatabaseRadioButtonLabel }).component(); @@ -433,7 +433,7 @@ export class SchemaCompareDialog { .withLayout({ flexFlow: 'column' }) .withItems([dacpacRadioButton, databaseRadioButton] ) - .withProperties({ ariaRole: 'radiogroup' }) + .withProps({ ariaRole: 'radiogroup' }) .component(); return { @@ -456,7 +456,7 @@ export class SchemaCompareDialog { } protected createSourceServerDropdown(): azdata.FormComponent { - this.sourceServerDropdown = this.view.modelBuilder.dropDown().withProperties( + this.sourceServerDropdown = this.view.modelBuilder.dropDown().withProps( { editable: true, fireOnTextChange: true, @@ -491,7 +491,7 @@ export class SchemaCompareDialog { } private createConnectionButton(isTarget: boolean): azdata.ButtonComponent { - const selectConnectionButton = this.view.modelBuilder.button().withProperties({ + const selectConnectionButton = this.view.modelBuilder.button().withProps({ ariaLabel: loc.selectConnection, iconPath: path.join(this.extensionContext.extensionPath, 'media', 'selectConnection.svg'), height: '20px', @@ -516,7 +516,7 @@ export class SchemaCompareDialog { } protected createTargetServerDropdown(): azdata.FormComponent { - this.targetServerDropdown = this.view.modelBuilder.dropDown().withProperties( + this.targetServerDropdown = this.view.modelBuilder.dropDown().withProps( { editable: true, fireOnTextChange: true, @@ -651,7 +651,7 @@ export class SchemaCompareDialog { } protected createSourceDatabaseDropdown(): azdata.FormComponent { - this.sourceDatabaseDropdown = this.view.modelBuilder.dropDown().withProperties( + this.sourceDatabaseDropdown = this.view.modelBuilder.dropDown().withProps( { editable: true, fireOnTextChange: true, @@ -671,7 +671,7 @@ export class SchemaCompareDialog { } protected createTargetDatabaseDropdown(): azdata.FormComponent { - this.targetDatabaseDropdown = this.view.modelBuilder.dropDown().withProperties( + this.targetDatabaseDropdown = this.view.modelBuilder.dropDown().withProps( { editable: true, fireOnTextChange: true, diff --git a/extensions/schema-compare/src/dialogs/schemaCompareOptionsDialog.ts b/extensions/schema-compare/src/dialogs/schemaCompareOptionsDialog.ts index 916a86525f..6b1d3b2859 100644 --- a/extensions/schema-compare/src/dialogs/schemaCompareOptionsDialog.ts +++ b/extensions/schema-compare/src/dialogs/schemaCompareOptionsDialog.ts @@ -98,7 +98,8 @@ export class SchemaCompareOptionsDialog { private initializeSchemaCompareOptionsDialogTab(): void { this.generalOptionsTab.registerContent(async view => { - this.descriptionHeading = view.modelBuilder.table().withProperties({ + this.descriptionHeading = view.modelBuilder.table().withProps({ + data: [], columns: [ { value: 'Option Description', @@ -108,7 +109,7 @@ export class SchemaCompareOptionsDialog { ] }).component(); - this.descriptionText = view.modelBuilder.text().withProperties({ + this.descriptionText = view.modelBuilder.text().withProps({ value: ' ' }).component(); diff --git a/extensions/schema-compare/src/schemaCompareMainWindow.ts b/extensions/schema-compare/src/schemaCompareMainWindow.ts index da72cae68a..d3fe9e9beb 100644 --- a/extensions/schema-compare/src/schemaCompareMainWindow.ts +++ b/extensions/schema-compare/src/schemaCompareMainWindow.ts @@ -132,9 +132,10 @@ export class SchemaCompareMainWindow { this.view = view; } - this.differencesTable = this.view.modelBuilder.table().withProperties({ + this.differencesTable = this.view.modelBuilder.table().withProps({ data: [], - title: loc.differencesTableTitle + title: loc.differencesTableTitle, + columns: [] }).component(); this.diffEditor = this.view.modelBuilder.diffeditor().withProperties({ @@ -146,17 +147,9 @@ export class SchemaCompareMainWindow { this.splitView = this.view.modelBuilder.splitViewContainer().component(); - let sourceTargetLabels = this.view.modelBuilder.flexContainer() - .withProperties({ - alignItems: 'stretch', - horizontal: true - }).component(); + let sourceTargetLabels = this.view.modelBuilder.flexContainer().component(); - this.sourceTargetFlexLayout = this.view.modelBuilder.flexContainer() - .withProperties({ - alignItems: 'stretch', - horizontal: true - }).component(); + this.sourceTargetFlexLayout = this.view.modelBuilder.flexContainer().component(); this.createSwitchButton(); this.createCompareButton(); @@ -205,17 +198,17 @@ export class SchemaCompareMainWindow { component: this.saveScmpButton }]); - let sourceLabel = this.view.modelBuilder.text().withProperties({ + let sourceLabel = this.view.modelBuilder.text().withProps({ value: loc.sourceTitle, CSSStyles: { 'margin-bottom': '0px' } }).component(); - let targetLabel = this.view.modelBuilder.text().withProperties({ + let targetLabel = this.view.modelBuilder.text().withProps({ value: loc.targetTitle, CSSStyles: { 'margin-bottom': '0px' } }).component(); - let arrowLabel = this.view.modelBuilder.text().withProperties({ + let arrowLabel = this.view.modelBuilder.text().withProps({ value: '➔' }).component(); @@ -228,15 +221,15 @@ export class SchemaCompareMainWindow { this.sourceTargetFlexLayout.addItem(this.selectTargetButton, { CSSStyles: { 'margin-top': '10px' } }); this.loader = this.view.modelBuilder.loadingComponent().component(); - this.waitText = this.view.modelBuilder.text().withProperties({ + this.waitText = this.view.modelBuilder.text().withProps({ value: loc.waitText }).component(); - this.startText = this.view.modelBuilder.text().withProperties({ + this.startText = this.view.modelBuilder.text().withProps({ value: loc.startText }).component(); - this.noDifferencesLabel = this.view.modelBuilder.text().withProperties({ + this.noDifferencesLabel = this.view.modelBuilder.text().withProps({ value: loc.noDifferencesText }).component(); @@ -625,7 +618,7 @@ export class SchemaCompareMainWindow { } private createCompareButton(): void { - this.compareButton = this.view.modelBuilder.button().withProperties({ + this.compareButton = this.view.modelBuilder.button().withProps({ label: loc.compare, iconPath: { light: path.join(this.extensionContext.extensionPath, 'media', 'compare.svg'), @@ -640,7 +633,7 @@ export class SchemaCompareMainWindow { } private createCancelButton(): void { - this.cancelCompareButton = this.view.modelBuilder.button().withProperties({ + this.cancelCompareButton = this.view.modelBuilder.button().withProps({ label: loc.stop, iconPath: { light: path.join(this.extensionContext.extensionPath, 'media', 'stop.svg'), @@ -689,7 +682,7 @@ export class SchemaCompareMainWindow { } private createGenerateScriptButton(): void { - this.generateScriptButton = this.view.modelBuilder.button().withProperties({ + this.generateScriptButton = this.view.modelBuilder.button().withProps({ label: loc.generateScript, iconPath: { light: path.join(this.extensionContext.extensionPath, 'media', 'generate-script.svg'), @@ -725,7 +718,7 @@ export class SchemaCompareMainWindow { } private createOptionsButton() { - this.optionsButton = this.view.modelBuilder.button().withProperties({ + this.optionsButton = this.view.modelBuilder.button().withProps({ label: loc.options, iconPath: { light: path.join(this.extensionContext.extensionPath, 'media', 'options.svg'), @@ -744,7 +737,7 @@ export class SchemaCompareMainWindow { private createApplyButton() { - this.applyButton = this.view.modelBuilder.button().withProperties({ + this.applyButton = this.view.modelBuilder.button().withProps({ label: loc.apply, iconPath: { light: path.join(this.extensionContext.extensionPath, 'media', 'start.svg'), @@ -855,7 +848,7 @@ export class SchemaCompareMainWindow { } private createSwitchButton(): void { - this.switchButton = this.view.modelBuilder.button().withProperties({ + this.switchButton = this.view.modelBuilder.button().withProps({ label: loc.switchDirection, iconPath: { light: path.join(this.extensionContext.extensionPath, 'media', 'switch-directions.svg'), @@ -891,7 +884,7 @@ export class SchemaCompareMainWindow { } private createSourceAndTargetButtons(): void { - this.selectSourceButton = this.view.modelBuilder.button().withProperties({ + this.selectSourceButton = this.view.modelBuilder.button().withProps({ label: '•••', title: loc.selectSource, ariaLabel: loc.selectSource, @@ -905,7 +898,7 @@ export class SchemaCompareMainWindow { await this.promise; }); - this.selectTargetButton = this.view.modelBuilder.button().withProperties({ + this.selectTargetButton = this.view.modelBuilder.button().withProps({ label: '•••', title: loc.selectTarget, ariaLabel: loc.selectTarget, @@ -921,7 +914,7 @@ export class SchemaCompareMainWindow { } private createOpenScmpButton() { - this.openScmpButton = this.view.modelBuilder.button().withProperties({ + this.openScmpButton = this.view.modelBuilder.button().withProps({ label: loc.openScmp, iconPath: { light: path.join(this.extensionContext.extensionPath, 'media', 'open-scmp.svg'), @@ -1009,7 +1002,7 @@ export class SchemaCompareMainWindow { } private createSaveScmpButton(): void { - this.saveScmpButton = this.view.modelBuilder.button().withProperties({ + this.saveScmpButton = this.view.modelBuilder.button().withProps({ label: loc.saveScmp, iconPath: { light: path.join(this.extensionContext.extensionPath, 'media', 'save-scmp.svg'), diff --git a/extensions/sql-assessment/src/assessmentResultGrid.ts b/extensions/sql-assessment/src/assessmentResultGrid.ts index bade96cb29..1dd73c9819 100644 --- a/extensions/sql-assessment/src/assessmentResultGrid.ts +++ b/extensions/sql-assessment/src/assessmentResultGrid.ts @@ -204,7 +204,7 @@ export class AssessmentResultGrid implements vscode.Disposable { .withLayout({ flexFlow: 'column', height: '200px', - }).withProperties({ + }).withProps({ CSSStyles: { 'padding': '0px 10px' } diff --git a/extensions/sql-database-projects/src/dialogs/addDatabaseReferenceDialog.ts b/extensions/sql-database-projects/src/dialogs/addDatabaseReferenceDialog.ts index 9b75a0b305..8e4a8f0d66 100644 --- a/extensions/sql-database-projects/src/dialogs/addDatabaseReferenceDialog.ts +++ b/extensions/sql-database-projects/src/dialogs/addDatabaseReferenceDialog.ts @@ -107,7 +107,7 @@ export class AddDatabaseReferenceDialog { this.dacpacFormComponent = this.createDacpacTextbox(); const locationDropdown = this.createLocationDropdown(); const variableSection = this.createVariableSection(); - this.suppressMissingDependenciesErrorsCheckbox = view.modelBuilder.checkBox().withProperties({ + this.suppressMissingDependenciesErrorsCheckbox = view.modelBuilder.checkBox().withProps({ label: constants.suppressMissingDependenciesErrors }).component(); const exampleUsage = this.createExampleUsage(); @@ -190,7 +190,7 @@ export class AddDatabaseReferenceDialog { private createRadioButtons(): azdataType.FormComponent { this.projectRadioButton = this.view!.modelBuilder.radioButton() - .withProperties({ + .withProps({ name: 'referenceType', label: constants.projectRadioButtonTitle }).component(); @@ -200,7 +200,7 @@ export class AddDatabaseReferenceDialog { }); this.systemDatabaseRadioButton = this.view!.modelBuilder.radioButton() - .withProperties({ + .withProps({ name: 'referenceType', label: constants.systemDatabaseRadioButtonTitle }).component(); @@ -210,7 +210,7 @@ export class AddDatabaseReferenceDialog { }); const dacpacRadioButton = this.view!.modelBuilder.radioButton() - .withProperties({ + .withProps({ name: 'referenceType', label: constants.dacpacText }).component(); @@ -233,7 +233,7 @@ export class AddDatabaseReferenceDialog { let flexRadioButtonsModel: azdataType.FlexContainer = this.view!.modelBuilder.flexContainer() .withLayout({ flexFlow: 'column' }) .withItems([this.projectRadioButton, this.systemDatabaseRadioButton, dacpacRadioButton]) - .withProperties({ ariaRole: 'radiogroup' }) + .withProps({ ariaRole: 'radiogroup' }) .component(); return { @@ -284,7 +284,7 @@ export class AddDatabaseReferenceDialog { } private async createProjectDropdown(): Promise { - this.projectDropdown = this.view!.modelBuilder.dropDown().withProperties({ + this.projectDropdown = this.view!.modelBuilder.dropDown().withProps({ ariaLabel: constants.databaseProject }).component(); @@ -306,7 +306,7 @@ export class AddDatabaseReferenceDialog { } private createSystemDatabaseDropdown(): azdataType.FormComponent { - this.systemDatabaseDropdown = this.view!.modelBuilder.dropDown().withProperties({ + this.systemDatabaseDropdown = this.view!.modelBuilder.dropDown().withProps({ values: [constants.master, constants.msdb], ariaLabel: constants.databaseNameLabel }).component(); @@ -327,7 +327,7 @@ export class AddDatabaseReferenceDialog { } private createDacpacTextbox(): azdataType.FormComponent { - this.dacpacTextbox = this.view!.modelBuilder.inputBox().withProperties({ + this.dacpacTextbox = this.view!.modelBuilder.inputBox().withProps({ ariaLabel: constants.dacpacText, placeHolder: constants.dacpacPlaceholder, width: '400px' @@ -350,7 +350,7 @@ export class AddDatabaseReferenceDialog { } private createLoadDacpacButton(): azdataType.ButtonComponent { - const loadDacpacButton = this.view!.modelBuilder.button().withProperties({ + const loadDacpacButton = this.view!.modelBuilder.button().withProps({ ariaLabel: constants.loadDacpacButton, iconPath: IconPathHelper.folder_blue, height: '18px', @@ -382,7 +382,7 @@ export class AddDatabaseReferenceDialog { } private createLocationDropdown(): azdataType.FormComponent { - this.locationDropdown = this.view!.modelBuilder.dropDown().withProperties({ + this.locationDropdown = this.view!.modelBuilder.dropDown().withProps({ ariaLabel: constants.locationDropdown, values: this.currentReferenceType === ReferenceType.systemDb ? constants.systemDbLocationDropdownValues : constants.locationDropdownValues }).component(); @@ -486,7 +486,7 @@ export class AddDatabaseReferenceDialog { this.serverVariableTextbox = this.createInputBox(constants.serverVariable, false, true); const serverVariableRow = this.view!.modelBuilder.flexContainer().withItems([this.createLabel(constants.serverVariable, true), this.serverVariableTextbox], { flex: '0 0 auto' }).withLayout({ flexFlow: 'row', alignItems: 'center' }).component(); - const variableSection = this.view!.modelBuilder.flexContainer().withItems([databaseNameRow, databaseVariableRow, serverNameRow, serverVariableRow]).withLayout({ flexFlow: 'column' }).withProperties({ CSSStyles: { 'margin-bottom': '25px' } }).component(); + const variableSection = this.view!.modelBuilder.flexContainer().withItems([databaseNameRow, databaseVariableRow, serverNameRow, serverVariableRow]).withLayout({ flexFlow: 'column' }).withProps({ CSSStyles: { 'margin-bottom': '25px' } }).component(); this.setDefaultDatabaseValues(); return { @@ -506,7 +506,7 @@ export class AddDatabaseReferenceDialog { } private createInputBox(ariaLabel: string, enabled: boolean, required: boolean): azdataType.InputBoxComponent { - const inputBox = this.view!.modelBuilder.inputBox().withProperties({ + const inputBox = this.view!.modelBuilder.inputBox().withProps({ ariaLabel: ariaLabel, enabled: enabled, width: cssStyles.addDatabaseReferenceInputboxWidth, @@ -522,7 +522,7 @@ export class AddDatabaseReferenceDialog { } private createExampleUsage(): azdataType.FormComponent { - this.exampleUsage = this.view!.modelBuilder.text().withProperties({ + this.exampleUsage = this.view!.modelBuilder.text().withProps({ value: this.currentReferenceType === ReferenceType.project ? constants.databaseNameRequiredVariableOptional : constants.systemDatabaseReferenceRequired, CSSStyles: { 'user-select': 'text' } }).component(); diff --git a/extensions/sql-database-projects/src/dialogs/createProjectFromDatabaseDialog.ts b/extensions/sql-database-projects/src/dialogs/createProjectFromDatabaseDialog.ts index 48330fb753..1f8cfe8a41 100644 --- a/extensions/sql-database-projects/src/dialogs/createProjectFromDatabaseDialog.ts +++ b/extensions/sql-database-projects/src/dialogs/createProjectFromDatabaseDialog.ts @@ -158,7 +158,7 @@ export class CreateProjectFromDatabaseDialog { } private createDatabaseRow(view: azdataType.ModelView): azdataType.FlexContainer { - this.sourceDatabaseDropDown = view.modelBuilder.dropDown().withProperties({ + this.sourceDatabaseDropDown = view.modelBuilder.dropDown().withProps({ ariaLabel: constants.databaseNameLabel, required: true, width: cssStyles.createProjectFromDatabaseTextboxWidth @@ -186,7 +186,7 @@ export class CreateProjectFromDatabaseDialog { } private createSourceConnectionComponent(view: azdataType.ModelView): azdataType.InputBoxComponent { - this.sourceConnectionTextBox = view.modelBuilder.inputBox().withProperties({ + this.sourceConnectionTextBox = view.modelBuilder.inputBox().withProps({ value: '', placeHolder: constants.selectConnection, width: cssStyles.createProjectFromDatabaseTextboxWidth, @@ -201,7 +201,7 @@ export class CreateProjectFromDatabaseDialog { } private createSelectConnectionButton(view: azdataType.ModelView): azdataType.Component { - this.selectConnectionButton = view.modelBuilder.button().withProperties({ + this.selectConnectionButton = view.modelBuilder.button().withProps({ ariaLabel: constants.selectConnection, iconPath: IconPathHelper.selectConnection, height: '16px', @@ -282,7 +282,7 @@ export class CreateProjectFromDatabaseDialog { private createProjectLocationRow(view: azdataType.ModelView): azdataType.FlexContainer { const browseFolderButton: azdataType.Component = this.createBrowseFolderButton(view); - this.projectLocationTextBox = view.modelBuilder.inputBox().withProperties({ + this.projectLocationTextBox = view.modelBuilder.inputBox().withProps({ value: '', ariaLabel: constants.projectLocationLabel, placeHolder: constants.projectLocationPlaceholderText, @@ -336,7 +336,7 @@ export class CreateProjectFromDatabaseDialog { } private createFolderStructureRow(view: azdataType.ModelView): azdataType.FlexContainer { - this.folderStructureDropDown = view.modelBuilder.dropDown().withProperties({ + this.folderStructureDropDown = view.modelBuilder.dropDown().withProps({ values: [constants.file, constants.flat, constants.objectType, constants.schema, constants.schemaObjectType], value: constants.schemaObjectType, ariaLabel: constants.folderStructureLabel, @@ -367,7 +367,7 @@ export class CreateProjectFromDatabaseDialog { private createWorkspaceContainerRow(view: azdataType.ModelView): azdataType.FlexContainer { const initialWorkspaceInputBoxValue = !!vscode.workspace.workspaceFile && !isCurrentWorkspaceUntitled() ? vscode.workspace.workspaceFile.fsPath : ''; - this.workspaceInputBox = view.modelBuilder.inputBox().withProperties({ + this.workspaceInputBox = view.modelBuilder.inputBox().withProps({ ariaLabel: constants.workspaceLocationTitle, enabled: !vscode.workspace.workspaceFile || isCurrentWorkspaceUntitled(), // want it editable if no saved workspace is open value: initialWorkspaceInputBoxValue, diff --git a/extensions/sql-database-projects/src/dialogs/publishDatabaseDialog.ts b/extensions/sql-database-projects/src/dialogs/publishDatabaseDialog.ts index d41825ad50..f64c122be4 100644 --- a/extensions/sql-database-projects/src/dialogs/publishDatabaseDialog.ts +++ b/extensions/sql-database-projects/src/dialogs/publishDatabaseDialog.ts @@ -258,7 +258,7 @@ export class PublishDatabaseDialog { private createRadioButtons(view: azdataType.ModelView): azdataType.Component { this.connectionsRadioButton = view.modelBuilder.radioButton() - .withProperties({ + .withProps({ name: 'connection', label: constants.connectionRadioButtonLabel }).component(); @@ -273,7 +273,7 @@ export class PublishDatabaseDialog { }); this.dataSourcesRadioButton = view.modelBuilder.radioButton() - .withProperties({ + .withProps({ name: 'connection', label: constants.dataSourceRadioButtonLabel }).component(); @@ -290,14 +290,14 @@ export class PublishDatabaseDialog { let flexRadioButtonsModel: azdataType.FlexContainer = view.modelBuilder.flexContainer() .withLayout({ flexFlow: 'column' }) .withItems([this.connectionsRadioButton, this.dataSourcesRadioButton]) - .withProperties({ ariaRole: 'radiogroup' }) + .withProps({ ariaRole: 'radiogroup' }) .component(); return flexRadioButtonsModel; } private createTargetConnectionComponent(view: azdataType.ModelView): azdataType.InputBoxComponent { - this.targetConnectionTextBox = view.modelBuilder.inputBox().withProperties({ + this.targetConnectionTextBox = view.modelBuilder.inputBox().withProps({ value: '', ariaLabel: constants.targetConnectionLabel, placeHolder: constants.selectConnection, @@ -316,7 +316,7 @@ export class PublishDatabaseDialog { if (this.project.dataSources.length > 0) { return this.createDataSourcesDropdown(view); } else { - const noDataSourcesText = view.modelBuilder.text().withProperties({ value: constants.noDataSourcesText }).component(); + const noDataSourcesText = view.modelBuilder.text().withProps({ value: constants.noDataSourcesText }).component(); return { title: constants.dataSourceDropdownTitle, component: noDataSourcesText @@ -338,7 +338,7 @@ export class PublishDatabaseDialog { }); }); - this.dataSourcesDropDown = view.modelBuilder.dropDown().withProperties({ + this.dataSourcesDropDown = view.modelBuilder.dropDown().withProps({ values: dataSourcesValues, }).component(); @@ -362,7 +362,7 @@ export class PublishDatabaseDialog { private createProfileRow(view: azdataType.ModelView): azdataType.FlexContainer { const loadProfileButton = this.createLoadProfileButton(view); - this.loadProfileTextBox = view.modelBuilder.inputBox().withProperties({ + this.loadProfileTextBox = view.modelBuilder.inputBox().withProps({ placeHolder: constants.loadProfilePlaceholderText, ariaLabel: constants.profile, width: cssStyles.publishDialogTextboxWidth @@ -396,7 +396,7 @@ export class PublishDatabaseDialog { } private createDatabaseRow(view: azdataType.ModelView): azdataType.FlexContainer { - this.targetDatabaseDropDown = view.modelBuilder.dropDown().withProperties({ + this.targetDatabaseDropDown = view.modelBuilder.dropDown().withProps({ values: [this.getDefaultDatabaseName()], value: this.getDefaultDatabaseName(), ariaLabel: constants.databaseNameLabel, @@ -460,7 +460,7 @@ export class PublishDatabaseDialog { } private createLoadSqlCmdVarsButton(view: azdataType.ModelView): azdataType.ButtonComponent { - let loadSqlCmdVarsButton: azdataType.ButtonComponent = view.modelBuilder.button().withProperties({ + let loadSqlCmdVarsButton: azdataType.ButtonComponent = view.modelBuilder.button().withProps({ label: constants.loadSqlCmdVarsButtonTitle, title: constants.loadSqlCmdVarsButtonTitle, ariaLabel: constants.loadSqlCmdVarsButtonTitle, @@ -485,7 +485,7 @@ export class PublishDatabaseDialog { } private createSelectConnectionButton(view: azdataType.ModelView): azdataType.Component { - let selectConnectionButton: azdataType.ButtonComponent = view.modelBuilder.button().withProperties({ + let selectConnectionButton: azdataType.ButtonComponent = view.modelBuilder.button().withProps({ ariaLabel: constants.selectConnection, iconPath: IconPathHelper.selectConnection, height: '16px', @@ -528,7 +528,7 @@ export class PublishDatabaseDialog { } private createLoadProfileButton(view: azdataType.ModelView): azdataType.ButtonComponent { - let loadProfileButton: azdataType.ButtonComponent = view.modelBuilder.button().withProperties({ + let loadProfileButton: azdataType.ButtonComponent = view.modelBuilder.button().withProps({ ariaLabel: constants.loadProfilePlaceholderText, iconPath: IconPathHelper.folder_blue, height: '18px', diff --git a/samples/sqlservices/src/controllers/mainController.ts b/samples/sqlservices/src/controllers/mainController.ts index b52c517fc9..bed53b2337 100644 --- a/samples/sqlservices/src/controllers/mainController.ts +++ b/samples/sqlservices/src/controllers/mainController.ts @@ -123,7 +123,7 @@ export default class MainController implements vscode.Disposable { let treeDataProvider = new TreeDataProvider(root); - let tree: azdata.TreeComponent = view.modelBuilder.tree().withProperties({ + let tree: azdata.TreeComponent = view.modelBuilder.tree().withProps({ 'withCheckbox': true }).component(); let treeView = tree.registerDataProvider(treeDataProvider); @@ -156,7 +156,7 @@ export default class MainController implements vscode.Disposable { private async getTabContent(view: azdata.ModelView, customButton1: azdata.window.Button, customButton2: azdata.window.Button, componentWidth: number | string ): Promise { let inputBox = view.modelBuilder.inputBox() - .withProperties({ + .withProps({ multiline: true, height: 100 }).component(); @@ -170,7 +170,7 @@ export default class MainController implements vscode.Disposable { let backupFilesInputBox = view.modelBuilder.inputBox().component(); let checkbox = view.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: 'Copy-only backup' }) .component(); @@ -179,11 +179,11 @@ export default class MainController implements vscode.Disposable { inputBox.enabled = !inputBox.enabled; }); let button = view.modelBuilder.button() - .withProperties({ + .withProps({ label: '+' }).component(); let button3 = view.modelBuilder.button() - .withProperties({ + .withProps({ label: '-' }).component(); @@ -191,7 +191,7 @@ export default class MainController implements vscode.Disposable { backupFilesInputBox.value = 'Button clicked'; }); let dropdown = view.modelBuilder.dropDown() - .withProperties({ + .withProps({ value: 'Full', values: ['Full', 'Differential', 'Transaction Log'] }) @@ -208,7 +208,7 @@ export default class MainController implements vscode.Disposable { console.info('dropdown change ' + dropdown.value.toString()); }); let radioButton = view.modelBuilder.radioButton() - .withProperties({ + .withProps({ value: 'option1', name: 'radioButtonOptions', label: 'Option 1', @@ -216,7 +216,7 @@ export default class MainController implements vscode.Disposable { // width: 300 }).component(); let radioButton2 = view.modelBuilder.radioButton() - .withProperties({ + .withProps({ value: 'option2', name: 'radioButtonOptions', label: 'Option 2' @@ -315,13 +315,13 @@ export default class MainController implements vscode.Disposable { } }); - let listBox = view.modelBuilder.listBox().withProperties({ + let listBox = view.modelBuilder.listBox().withProps({ values: ['1', '2', '3'], selectedRow: 2 }).component(); let declarativeTable = view.modelBuilder.declarativeTable() - .withProperties({ + .withProps({ columns: [{ displayName: 'Column 1', valueType: azdata.DeclarativeDataType.string, @@ -570,12 +570,12 @@ export default class MainController implements vscode.Disposable { editor.registerContent(async view => { let count = 0; let webview1 = view.modelBuilder.webView() - .withProperties({ + .withProps({ html: html1 }) .component(); let webview2 = view.modelBuilder.webView() - .withProperties({ + .withProps({ html: html2 }) .component(); @@ -585,13 +585,13 @@ export default class MainController implements vscode.Disposable { }); let editor1 = view.modelBuilder.editor() - .withProperties({ + .withProps({ content: 'select * from sys.tables' }) .component(); let editor2 = view.modelBuilder.editor() - .withProperties({ + .withProps({ content: 'print("Hello World !")', languageMode: 'python' }) @@ -621,14 +621,14 @@ export default class MainController implements vscode.Disposable { let inputBox = view.modelBuilder.inputBox().component(); let dropdown = view.modelBuilder.dropDown() - .withProperties({ + .withProps({ value: 'aa', values: ['aa', 'bb', 'cc'] }) .component(); let runIcon = path.join(__dirname, '..', 'media', 'start.svg'); let runButton = view.modelBuilder.button() - .withProperties({ + .withProps({ label: 'Run', iconPath: runIcon, title: 'Run title' @@ -641,7 +641,7 @@ export default class MainController implements vscode.Disposable { }; let monitorButton = view.modelBuilder.button() - .withProperties({ + .withProps({ label: 'Monitor', iconPath: monitorIcon, title: 'Monitor title' diff --git a/src/sql/azdata.proposed.d.ts b/src/sql/azdata.proposed.d.ts index 7fd4c08748..8ae844720e 100644 --- a/src/sql/azdata.proposed.d.ts +++ b/src/sql/azdata.proposed.d.ts @@ -834,6 +834,11 @@ declare module 'azdata' { * Specifies whether this is a secondary button. Default value is false. */ secondary?: boolean; + + /** + * The file type filter used for the file input dialog box - only used when the button type is File + */ + fileType?: string } export enum ButtonType { diff --git a/src/sql/workbench/api/common/extHostModelView.ts b/src/sql/workbench/api/common/extHostModelView.ts index bf7b1ff5b9..957617174b 100644 --- a/src/sql/workbench/api/common/extHostModelView.ts +++ b/src/sql/workbench/api/common/extHostModelView.ts @@ -1717,6 +1717,13 @@ class ButtonWrapper extends ComponentWithIconWrapper implements azdata.ButtonCom this.setProperty('label', v); } + public get fileType(): string { + return this.properties['fileType']; + } + public set fileType(v: string) { + this.setProperty('fileType', v); + } + public get onDidClick(): vscode.Event { let emitter = this._emitterMap.get(ComponentEventType.onDidClick); return emitter && emitter.event; diff --git a/src/sql/workbench/test/electron-browser/api/extHostModelView.test.ts b/src/sql/workbench/test/electron-browser/api/extHostModelView.test.ts index dd08787fc7..8ee7576f7a 100644 --- a/src/sql/workbench/test/electron-browser/api/extHostModelView.test.ts +++ b/src/sql/workbench/test/electron-browser/api/extHostModelView.test.ts @@ -451,7 +451,7 @@ suite('ExtHostModelView Validation Tests', () => { */ function createDeclarativeTable(modelView: azdata.ModelView, dataType: DeclarativeDataType, data?: any[]): azdata.DeclarativeTableComponent { return modelView.modelBuilder.declarativeTable() - .withProperties( + .withProps( { columns: [ {