withProperties -> withProps (#15876)

* withProperties -> withProps

* Fix errors

* remove ,

* fixes

* Update azdata-test

* Fix dacpac tests

* Add required and remove added layout

extensions/agent/src/dialogs/alertDialog.ts

@@ -200,28 +200,28 @@ export class AlertDialog extends AgentDialog<AlertData> {
 				}
 			});
 			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<AlertData> {
 			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<AlertData> {
 			});
 
 			this.raiseAlertMessageCheckBox = view.modelBuilder.checkBox()
-				.withProperties({
+				.withProps({
 					label: AlertDialog.RaiseIfMessageContainsLabel
 				}).component();
 
@@ -344,12 +344,12 @@ export class AlertDialog extends AgentDialog<AlertData> {
 	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<AlertData> {
 				}], { 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<AlertData> {
 		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();
 

extensions/agent/src/dialogs/jobDialog.ts

@@ -175,12 +175,12 @@ export class JobDialog extends AgentDialog<JobData>  {
 			});
 			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<JobData>  {
 		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<JobData>  {
 					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<JobData>  {
 			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<JobData>  {
 	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<JobData>  {
 	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<JobData>  {
 				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();
 

extensions/agent/src/dialogs/jobStepDialog.ts

@@ -185,7 +185,7 @@ export class JobStepDialog extends AgentDialog<JobStepData> {
 			}
 		});
 		this.commandTextBox = view.modelBuilder.inputBox()
-			.withProperties({
+			.withProps({
 				height: 300,
 				width: 400,
 				multiline: true,
@@ -199,7 +199,7 @@ export class JobStepDialog extends AgentDialog<JobStepData> {
 	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<JobStepData> {
 			});
 
 			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<JobStepData> {
 	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<JobStepData> {
 			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<JobStepData> {
 				.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<JobStepData> {
 	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<JobStepData> {
 			.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<JobStepData> {
 		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<JobStepData> {
 			}).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<JobStepData> {
 				flex: '1 1 50%'
 			}).component();
 		this.appendToExistingFileCheckbox = view.modelBuilder.checkBox()
-			.withProperties({
+			.withProps({
 				label: this.AppendOutputToFileLabel
 			}).component();
 		this.appendToExistingFileCheckbox.enabled = false;

extensions/agent/src/dialogs/notebookDialog.ts

@@ -99,12 +99,12 @@ export class NotebookDialog extends AgentDialog<NotebookData>  {
 	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<NotebookData>  {
 			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<NotebookData>  {
 
 			this.ownerTextBox = view.modelBuilder.inputBox().component();
 			this.schedulesTable = view.modelBuilder.table()
-				.withProperties({
+				.withProps({
 					columns: [
 						PickScheduleDialog.SchedulesIDText,
 						PickScheduleDialog.ScheduleNameLabelText,

extensions/agent/src/dialogs/operatorDialog.ts

@@ -93,31 +93,31 @@ export class OperatorDialog extends AgentDialog<OperatorData> {
 	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<OperatorData> {
 			});
 
 			this.pagerTuesdayCheckBox = view.modelBuilder.checkBox()
-				.withProperties({
+				.withProps({
 					label: OperatorDialog.PagerTuesdayCheckBoxLabel
 				}).component();
 
@@ -154,7 +154,7 @@ export class OperatorDialog extends AgentDialog<OperatorData> {
 			});
 
 			this.pagerWednesdayCheckBox = view.modelBuilder.checkBox()
-				.withProperties({
+				.withProps({
 					label: OperatorDialog.PagerWednesdayCheckBoxLabel
 				}).component();
 
@@ -172,7 +172,7 @@ export class OperatorDialog extends AgentDialog<OperatorData> {
 			});
 
 			this.pagerThursdayCheckBox = view.modelBuilder.checkBox()
-				.withProperties({
+				.withProps({
 					label: OperatorDialog.PagerThursdayCheckBoxLabel
 				}).component();
 
@@ -190,7 +190,7 @@ export class OperatorDialog extends AgentDialog<OperatorData> {
 			});
 
 			this.weekdayPagerStartTimeInput = view.modelBuilder.inputBox()
-				.withProperties({
+				.withProps({
 					inputType: 'time',
 					placeHolder: '08:00:00',
 				}).component();
@@ -202,7 +202,7 @@ export class OperatorDialog extends AgentDialog<OperatorData> {
 				}]).component();
 
 			this.weekdayPagerEndTimeInput = view.modelBuilder.inputBox()
-				.withProperties({
+				.withProps({
 					inputType: 'time',
 					placeHolder: '06:00:00'
 				}).component();
@@ -214,7 +214,7 @@ export class OperatorDialog extends AgentDialog<OperatorData> {
 				}]).component();
 
 			this.pagerFridayCheckBox = view.modelBuilder.checkBox()
-				.withProperties({
+				.withProps({
 					label: OperatorDialog.PagerFridayCheckBoxLabel
 				}).component();
 			this.pagerFridayCheckBox.onChanged(() => {
@@ -239,7 +239,7 @@ export class OperatorDialog extends AgentDialog<OperatorData> {
 				.component();
 
 			this.pagerSaturdayCheckBox = view.modelBuilder.checkBox()
-				.withProperties({
+				.withProps({
 					label: OperatorDialog.PagerSaturdayCheckBoxLabel
 				}).component();
 
@@ -254,7 +254,7 @@ export class OperatorDialog extends AgentDialog<OperatorData> {
 			});
 
 			this.saturdayPagerStartTimeInput = view.modelBuilder.inputBox()
-				.withProperties({
+				.withProps({
 					inputType: 'time',
 					placeHolder: '08:00:00'
 				}).component();
@@ -266,7 +266,7 @@ export class OperatorDialog extends AgentDialog<OperatorData> {
 				}]).component();
 
 			this.saturdayPagerEndTimeInput = view.modelBuilder.inputBox()
-				.withProperties({
+				.withProps({
 					inputType: 'time',
 					placeHolder: '06:00:00'
 				}).component();
@@ -285,7 +285,7 @@ export class OperatorDialog extends AgentDialog<OperatorData> {
 				.component();
 
 			this.pagerSundayCheckBox = view.modelBuilder.checkBox()
-				.withProperties({
+				.withProps({
 					label: OperatorDialog.PagerSundayCheckBoxLabel
 				}).component();
 
@@ -300,7 +300,7 @@ export class OperatorDialog extends AgentDialog<OperatorData> {
 			});
 
 			this.sundayPagerStartTimeInput = view.modelBuilder.inputBox()
-				.withProperties({
+				.withProps({
 					inputType: 'time',
 					placeHolder: '08:00:00'
 				}).component();
@@ -312,7 +312,7 @@ export class OperatorDialog extends AgentDialog<OperatorData> {
 				}]).component();
 
 			this.sundayPagerEndTimeInput = view.modelBuilder.inputBox()
-				.withProperties({
+				.withProps({
 					inputType: 'time',
 					placeHolder: '06:00:00'
 				}).component();
@@ -383,11 +383,11 @@ export class OperatorDialog extends AgentDialog<OperatorData> {
 		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,

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,

extensions/agent/src/dialogs/proxyDialog.ts

@@ -81,14 +81,14 @@ export class ProxyDialog extends AgentDialog<ProxyData>  {
 		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<ProxyData>  {
 				.component();
 
 			this.descriptionTextBox = view.modelBuilder.inputBox()
-				.withProperties({
+				.withProps({
 					width: 420,
 					multiline: true,
 					height: 300,
@@ -106,7 +106,7 @@ export class ProxyDialog extends AgentDialog<ProxyData>  {
 				}).component();
 
 			this.subsystemCheckBox = view.modelBuilder.checkBox()
-				.withProperties({
+				.withProps({
 					label: ProxyDialog.SubsystemLabel
 				}).component();
 
@@ -137,52 +137,52 @@ export class ProxyDialog extends AgentDialog<ProxyData>  {
 			});
 
 			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();