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();
 

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",

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);
 		}

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

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"

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,

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' } });
 

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<azdata.HyperlinkComponentProperties>({
 				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<azdata.HyperlinkComponentProperties>({
 					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<azdata.HyperlinkComponentProperties>({
 				label: loc.view,

extensions/big-data-cluster/src/bigDataCluster/dialog/hdfsDialogBase.ts

@@ -139,7 +139,7 @@ export abstract class HdfsDialogBase<T extends HdfsDialogProperties, R> {
 					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,

extensions/dacpac/src/test/testContext.ts

@@ -138,8 +138,8 @@ export function createViewContext(): ViewTestContext {
 		let button = radioButton();
 		let builder: azdata.ComponentBuilder<azdata.RadioButtonComponent, azdata.RadioButtonProperties> = {
 			component: () => button,
-			withProps: () => undefined,
-			withProperties: (properties) => {
+			withProperties: () => undefined,
+			withProps: (properties) => {
 				switch ((properties as any).label) {
 					case loc.newDatabase:
 						button.label = loc.newDatabase;

extensions/dacpac/src/wizard/api/dacFxConfigPage.ts

@@ -33,7 +33,7 @@ export abstract class DacFxConfigPage extends BasePage {
 
 	protected async createServerDropdown(isTargetServer: boolean): Promise<azdata.FormComponent> {
 		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<azdata.FormComponent> {
 		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<azdata.FormComponent> {
 		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();

extensions/dacpac/src/wizard/pages/dacFxSummaryPage.ts

@@ -20,8 +20,10 @@ export class DacFxSummaryPage extends BasePage {
 	}
 
 	async start(): Promise<boolean> {
-		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(

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<azdata.FormComponent> {
 		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
 		};
 	}
 

extensions/dacpac/src/wizard/pages/deployPlanPage.ts

@@ -48,8 +48,10 @@ export class DeployPlanPage extends DacFxConfigPage {
 	}
 
 	async start(): Promise<boolean> {
-		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<azdata.FormComponent> {
 		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<azdata.FormComponent> {
 		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<azdata.FormComponentGroup> {
 		let dataLossComponent = await this.createDataLossCheckbox();
 		this.dataLossText = this.view.modelBuilder.text()
-			.withProperties({
+			.withProps({
 				value: loc.dataLossMessage
 			}).component();
 

extensions/dacpac/src/wizard/pages/extractConfigPage.ts

@@ -98,7 +98,7 @@ export class ExtractConfigPage extends DacFxConfigPage {
 	}
 
 	private async createVersionTextBox(): Promise<azdata.FormComponent> {
-		this.versionTextBox = this.view.modelBuilder.inputBox().withProperties({
+		this.versionTextBox = this.view.modelBuilder.inputBox().withProps({
 			required: true,
 			ariaLabel: loc.version
 		}).component();

extensions/dacpac/src/wizard/pages/selectOperationpage.ts

@@ -49,7 +49,7 @@ export class SelectOperationPage extends BasePage {
 
 	private async createDeployRadioButton(): Promise<azdata.FormComponent> {
 		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<azdata.FormComponent> {
 		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<azdata.FormComponent> {
 		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<azdata.FormComponent> {
 		this.exportRadioButton = this.view.modelBuilder.radioButton()
-			.withProperties({
+			.withProps({
 				name: 'selectedOperation',
 				label: loc.exportDescription,
 			}).component();

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()
 		};
 

extensions/import/src/wizard/pages/fileConfigPage.ts

@@ -139,7 +139,7 @@ export class FileConfigPage extends ImportPage {
 	}
 
 	private async createServerDropdown(): Promise<azdata.FormComponent> {
-		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<azdata.FormComponent> {
-		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<azdata.FormComponent> {
-		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();

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();
 

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();
 

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();

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();
 

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) {

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();

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: {

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 () => {

extensions/machine-learning/src/views/models/azureModelsTable.ts

@@ -161,9 +161,7 @@ export class AzureModelsTable extends ModelViewBase implements IDataComponent<Wo
 				this._onModelSelectionChanged.fire();
 			};
 			if (this._multiSelect) {
-				const checkbox = this._modelBuilder.checkBox().withProperties({
-					name: 'amlModel',
-					value: model.id,
+				const checkbox = this._modelBuilder.checkBox().withProps({
 					width: 15,
 					height: 15,
 					checked: false
@@ -173,7 +171,7 @@ export class AzureModelsTable extends ModelViewBase implements IDataComponent<Wo
 				});
 				selectModelButton = checkbox;
 			} else {
-				const radioButton = this._modelBuilder.radioButton().withProperties({
+				const radioButton = this._modelBuilder.radioButton().withProps({
 					name: 'amlModel',
 					value: model.id,
 					width: 15,

extensions/machine-learning/src/views/models/azureResourceFilterComponent.ts

@@ -35,16 +35,16 @@ export class AzureResourceFilterComponent extends ModelViewBase implements IData
 	 */
 	constructor(apiWrapper: ApiWrapper, private _modelBuilder: azdata.ModelBuilder, parent: ModelViewBase) {
 		super(apiWrapper, parent.root, parent);
-		this._accounts = this._modelBuilder.dropDown().withProperties({
+		this._accounts = this._modelBuilder.dropDown().withProps({
 			width: componentWidth
 		}).component();
-		this._subscriptions = this._modelBuilder.dropDown().withProperties({
+		this._subscriptions = this._modelBuilder.dropDown().withProps({
 			width: componentWidth
 		}).component();
-		this._groups = this._modelBuilder.dropDown().withProperties({
+		this._groups = this._modelBuilder.dropDown().withProps({
 			width: componentWidth
 		}).component();
-		this._workspaces = this._modelBuilder.dropDown().withProperties({
+		this._workspaces = this._modelBuilder.dropDown().withProps({
 			width: componentWidth
 		}).component();
 

extensions/machine-learning/src/views/models/localModelsComponent.ts

@@ -33,11 +33,11 @@ export class LocalModelsComponent extends ModelViewBase implements IDataComponen
 	 * @param modelBuilder Register the components
 	 */
 	public registerComponent(modelBuilder: azdata.ModelBuilder): azdata.Component {
-		this._localPath = modelBuilder.inputBox().withProperties({
+		this._localPath = modelBuilder.inputBox().withProps({
 			value: '',
 			width: this.componentMaxLength - this.browseButtonMaxLength - this.spaceBetweenComponentsLength
 		}).component();
-		this._localBrowse = modelBuilder.button().withProperties({
+		this._localBrowse = modelBuilder.button().withProps({
 			iconPath: { light: this.asAbsolutePath('images/light/browseLocal.svg'), dark: this.asAbsolutePath('images/dark/browseLocal.svg') },
 			iconHeight: '24px',
 			iconWidth: '24px',

extensions/machine-learning/src/views/models/manageModels/currentModelsComponent.ts

@@ -66,9 +66,8 @@ export class CurrentModelsComponent extends ModelViewBase implements IPageView {
 		let dataCountString: string = constants.getDataCount(0);
 
 		this._tableDataCountContainer = modelBuilder.flexContainer().component();
-		this._tableDataCountComponent = modelBuilder.text().withProperties({
-			value: dataCountString,
-			margin: '0'
+		this._tableDataCountComponent = modelBuilder.text().withProps({
+			value: dataCountString
 		}).component();
 		this._tableDataCountContainer.addItem(this._tableDataCountComponent,
 			{
@@ -82,7 +81,7 @@ export class CurrentModelsComponent extends ModelViewBase implements IPageView {
 		let formModelBuilder = modelBuilder.formContainer();
 		this._loader = modelBuilder.loadingComponent()
 			.withItem(formModelBuilder.component())
-			.withProperties({
+			.withProps({
 				loading: true
 			}).component();
 		this._emptyModelsComponent = new DataInfoComponent(this._apiWrapper, this);
@@ -108,13 +107,13 @@ export class CurrentModelsComponent extends ModelViewBase implements IPageView {
 			flexFlow: 'column',
 			width: '452px'
 		}).component();
-		this._subheadingTextComponent = modelBuilder.text().withProperties(<azdata.CheckBoxProperties>{
+		this._subheadingTextComponent = modelBuilder.text().withProps(<azdata.CheckBoxProperties>{
 			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: {

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: {

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,

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',

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,

extensions/machine-learning/src/views/models/prediction/columnsTable.ts

@@ -134,7 +134,7 @@ export class ColumnsTable extends ModelViewBase implements IDataComponent<Predic
 			.component();
 		this._loader = modelBuilder.loadingComponent()
 			.withItem(this._table)
-			.withProperties({
+			.withProps({
 				loading: true
 			}).component();
 		return this._loader;
@@ -233,7 +233,7 @@ export class ColumnsTable extends ModelViewBase implements IDataComponent<Predic
 					CSSStyles: css
 				});
 			}
-			let nameInput = this._modelBuilder.dropDown().withProperties({
+			let nameInput = this._modelBuilder.dropDown().withProps({
 				values: dataTypes,
 				width: this.componentMaxLength,
 				value: dataType
@@ -264,7 +264,7 @@ export class ColumnsTable extends ModelViewBase implements IDataComponent<Predic
 				}
 			});
 
-			let displayNameInput = this._modelBuilder.inputBox().withProperties({
+			let displayNameInput = this._modelBuilder.inputBox().withProps({
 				value: name,
 				width: 200
 			}).component();
@@ -294,7 +294,7 @@ export class ColumnsTable extends ModelViewBase implements IDataComponent<Predic
 				column = values.length > 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<Predic
 				}
 			});
 
-			const label = this._modelBuilder.inputBox().withProperties({
+			const label = this._modelBuilder.inputBox().withProps({
 				value: `${name}(${modelParameter.originalType ? modelParameter.originalType : constants.unsupportedModelParameterType})`,
 				enabled: false,
 				width: this.componentMaxLength
@@ -367,7 +367,7 @@ export class ColumnsTable extends ModelViewBase implements IDataComponent<Predic
 					CSSStyles: css
 				});
 			}
-			const image = this._modelBuilder.image().withProperties({
+			const image = this._modelBuilder.image().withProps({
 				width: 50,
 				height: 50,
 				iconPath: {
@@ -385,7 +385,7 @@ export class ColumnsTable extends ModelViewBase implements IDataComponent<Predic
 	}
 
 	private createWarningButton(): azdata.ButtonComponent {
-		const warningButton = this._modelBuilder.button().withProperties({
+		const warningButton = this._modelBuilder.button().withProps({
 			width: `${WarningButtonDimensions.width}px`,
 			height: `${WarningButtonDimensions.height}px`,
 			title: constants.columnDataTypeMismatchWarningHelper,
@@ -407,8 +407,8 @@ export class ColumnsTable extends ModelViewBase implements IDataComponent<Predic
 		const dialog = azdata.window.createModelViewDialog(dialogHeading, dialogName, 288, 'callout', 'left', true, false, dialogProperties);
 		const warningTab: azdata.window.DialogTab = azdata.window.createTab('warning');
 		warningTab.registerContent(async view => {
-			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<Predic
 			warningContentContainer.addItem(messageTextComponent);
 
 			if (calloutMessageLinkText && calloutMessageLinkUrl) {
-				const messageLinkComponent = view.modelBuilder.hyperlink().withProperties({
+				const messageLinkComponent = view.modelBuilder.hyperlink().withProps({
 					label: calloutMessageLinkText,
 					url: calloutMessageLinkUrl,
 					CSSStyles: {

extensions/machine-learning/src/views/models/tableSelectionComponent.ts

@@ -56,10 +56,10 @@ export class TableSelectionComponent extends ModelViewBase implements IDataCompo
 	 * @param modelBuilder model builder
 	 */
 	public registerComponent(modelBuilder: azdata.ModelBuilder): azdata.Component {
-		this._databases = modelBuilder.dropDown().withProperties({
+		this._databases = modelBuilder.dropDown().withProps({
 			width: '275px'
 		}).component();
-		this._tables = modelBuilder.dropDown().withProperties({
+		this._tables = modelBuilder.dropDown().withProps({
 			width: '275px'
 		}).component();
 
@@ -70,19 +70,19 @@ export class TableSelectionComponent extends ModelViewBase implements IDataCompo
 			}
 		});
 
-		this._existingTableButton = modelBuilder.radioButton().withProperties({
+		this._existingTableButton = modelBuilder.radioButton().withProps({
 			name: 'tableName',
 			value: 'existing',
 			label: 'Existing table',
 			checked: true
 		}).component();
-		this._newTableButton = modelBuilder.radioButton().withProperties({
+		this._newTableButton = modelBuilder.radioButton().withProps({
 			name: 'tableName',
 			value: 'new',
 			label: 'New table',
 			checked: false
 		}).component();
-		this._newTableName = modelBuilder.inputBox().withProperties({
+		this._newTableName = modelBuilder.inputBox().withProps({
 			width: this.componentMaxLength - 10,
 			enabled: false
 		}).component();

extensions/machine-learning/src/views/widgets/dashboardWidget.ts

@@ -81,7 +81,7 @@ export class DashboardWidget {
 			width: maxWidth,
 			height: headerMaxHeight
 		}).component();
-		const titleComponent = view.modelBuilder.text().withProperties({
+		const titleComponent = view.modelBuilder.text().withProps({
 			value: constants.dashboardTitle,
 			CSSStyles: {
 				'font-size': '36px',
@@ -90,7 +90,7 @@ export class DashboardWidget {
 				'margin': '0px'
 			}
 		}).component();
-		const descComponent = view.modelBuilder.text().withProperties({
+		const descComponent = view.modelBuilder.text().withProps({
 			value: constants.dashboardDesc,
 			CSSStyles: {
 				'font-size': '14px',
@@ -159,7 +159,7 @@ export class DashboardWidget {
 			height: '500px',
 			justifyContent: 'flex-start'
 		}).component();
-		const titleComponent = view.modelBuilder.text().withProperties({
+		const titleComponent = view.modelBuilder.text().withProps({
 			value: constants.dashboardVideoLinksTitle,
 			CSSStyles: {
 				'font-size': '18px',
@@ -216,10 +216,11 @@ export class DashboardWidget {
 			width: 'auto',
 			justifyContent: 'flex-start'
 		}).component();
-		const showMoreComponent = view.modelBuilder.hyperlink().withProperties({
-			label: constants.showMoreTitle
+		const showMoreComponent = view.modelBuilder.hyperlink().withProps({
+			label: constants.showMoreTitle,
+			url: ''
 		}).component();
-		const image = view.modelBuilder.image().withProperties({
+		const image = view.modelBuilder.image().withProps({
 			width: '10px',
 			height: '10px',
 			iconPath: {
@@ -280,12 +281,12 @@ export class DashboardWidget {
 			width: maxWidth,
 			justifyContent: 'flex-start'
 		}).component();
-		const video1Container = view.modelBuilder.divContainer().withProperties({
+		const video1Container = view.modelBuilder.divContainer().withProps({
 			clickable: true,
 			width: maxWidth,
 			height: '100px'
 		}).component();
-		const descriptionComponent = view.modelBuilder.text().withProperties({
+		const descriptionComponent = view.modelBuilder.text().withProps({
 			value: linkMetaData.description,
 			width: maxWidth,
 			height: '50px',
@@ -325,7 +326,7 @@ export class DashboardWidget {
 			width: maxWidth,
 			height: '300px',
 		}).component();
-		const titleComponent = view.modelBuilder.text().withProperties({
+		const titleComponent = view.modelBuilder.text().withProps({
 			value: constants.dashboardLinksTitle,
 			CSSStyles: {
 				'font-size': '18px',
@@ -391,7 +392,7 @@ export class DashboardWidget {
 			width: maxWidth,
 			justifyContent: 'flex-start'
 		}).component();
-		const descriptionComponent = view.modelBuilder.text().withProperties({
+		const descriptionComponent = view.modelBuilder.text().withProps({
 			value: linkMetaData.description,
 			width: maxWidth,
 			CSSStyles: {

extensions/mssql/src/hdfs/ui/hdfsManageAccessDialog.ts

@@ -188,7 +188,7 @@ export class ManageAccessDialog {
 			.component();
 		contentContainer.addItem(addUserOrGroupTitle, { CSSStyles: { 'margin-top': '15px', ...cssStyles.titleCss } });
 
-		const typeContainer = this.modelBuilder.flexContainer().withProperties({ flexFlow: 'row' }).component();
+		const typeContainer = this.modelBuilder.flexContainer().component();
 		const aclEntryTypeGroup = 'aclEntryType';
 		const userTypeButton = this.createRadioButton(this.modelBuilder, loc.userLabel, aclEntryTypeGroup, AclType.user);
 		const groupTypeButton = this.createRadioButton(this.modelBuilder, loc.groupLabel, aclEntryTypeGroup, AclType.group);
@@ -197,7 +197,7 @@ export class ManageAccessDialog {
 
 		typeContainer.addItems([userTypeButton, groupTypeButton], { flex: '0 0 auto' });
 		contentContainer.addItem(typeContainer, { flex: '0 0 auto', CSSStyles: { 'margin-bottom': '5px' } });
-		const addUserOrGroupInputRow = this.modelBuilder.flexContainer().withLayout({ flexFlow: 'row' }).component();
+		const addUserOrGroupInputRow = this.modelBuilder.flexContainer().component();
 
 		this.addUserOrGroupInput = this.modelBuilder.inputBox()
 			.withProperties<azdata.InputBoxProperties>({
@@ -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;

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();

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'

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();

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

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) {

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,

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: ''

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",

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(<azdata.InputBoxProperties>{
+	// 	this._dbMemoryTextBox = view.modelBuilder.inputBox().withProps(<azdata.InputBoxProperties>{
 	// 		inputType: 'number',
 	// 		max: 1024,
 	// 		min: 1,

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(<azdata.InputBoxProperties>{
+		this._startIpAddressTextbox = view.modelBuilder.inputBox().withProps(<azdata.InputBoxProperties>{
 			inputType: 'text'
 		}).component();
 
@@ -126,7 +126,7 @@ export class DatabaseSettingsPage extends BasePage {
 
 		//End IP Address Section:
 
-		this._endIpAddressTextbox = view.modelBuilder.inputBox().withProperties(<azdata.InputBoxProperties>{
+		this._endIpAddressTextbox = view.modelBuilder.inputBox().withProps(<azdata.InputBoxProperties>{
 			inputType: 'text'
 		}).component();
 
@@ -191,7 +191,7 @@ export class DatabaseSettingsPage extends BasePage {
 	}
 
 	private createCollationText(view: azdata.ModelView) {
-		this._collationTextbox = view.modelBuilder.inputBox().withProperties(<azdata.InputBoxProperties>{
+		this._collationTextbox = view.modelBuilder.inputBox().withProps(<azdata.InputBoxProperties>{
 			inputType: 'text',
 			value: 'SQL_Latin1_General_CP1_CI_AS'
 		}).component();

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();
 

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(<azdata.CheckBoxProperties>{
+		this._newVirtualNetworkCheckbox = view.modelBuilder.checkBox().withProps(<azdata.CheckBoxProperties>{
 			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(<azdata.InputBoxProperties>{
+		this._newVirtualNetworkText = view.modelBuilder.inputBox().withProps(<azdata.InputBoxProperties>{
 			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(<azdata.DropDownProperties>{
+		this._subnetDropdown = view.modelBuilder.dropDown().withProps(<azdata.DropDownProperties>{
 			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(<azdata.InputBoxProperties>{
+		this._newsubnetText = view.modelBuilder.inputBox().withProps(<azdata.InputBoxProperties>{
 			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(<azdata.CheckBoxProperties>{
+		this._newPublicIpCheckbox = view.modelBuilder.checkBox().withProps(<azdata.CheckBoxProperties>{
 			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(<azdata.InputBoxProperties>{
+		this._publicIpNetworkText = view.modelBuilder.inputBox().withProps(<azdata.InputBoxProperties>{
 			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) => {

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(<azdata.DropDownProperties>
+		this._sqlConnectivityDropdown = view.modelBuilder.dropDown().withProps(<azdata.DropDownProperties>
 			{
 				values: [
 					{
@@ -148,7 +148,7 @@ export class SqlServerSettingsPage extends BasePage {
 	}
 
 	private createPortText(view: azdata.ModelView) {
-		this._portTextBox = view.modelBuilder.inputBox().withProperties(<azdata.InputBoxProperties>{
+		this._portTextBox = view.modelBuilder.inputBox().withProps(<azdata.InputBoxProperties>{
 			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(<azdata.DropDownComponent>{
+		this._sqlAuthenticationDropdown = view.modelBuilder.dropDown().withProps(<azdata.DropDownComponent>{
 			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(<azdata.InputBoxProperties>{
+		this._sqlAuthenticationPasswordTextbox = view.modelBuilder.inputBox().withProps(<azdata.InputBoxProperties>{
 			inputType: 'password'
 		}).component();
 
 		this._sqlAuthenticationPasswordTextRow = this._model.createFormRowComponent(view, constants.SqlAuthenticationPasswordLabel, '', this._sqlAuthenticationPasswordTextbox, true);
 
-		this._sqlAuthenticationPasswordConfirmationTextbox = view.modelBuilder.inputBox().withProperties(<azdata.InputBoxProperties>{
+		this._sqlAuthenticationPasswordConfirmationTextbox = view.modelBuilder.inputBox().withProps(<azdata.InputBoxProperties>{
 			inputType: 'password'
 		}).component();
 

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(<azdata.HyperlinkComponent>{
+		this._vmSizeLearnMoreLink = view.modelBuilder.hyperlink().withProps(<azdata.HyperlinkComponent>{
 			label: constants.VmSizeLearnMoreLabel,
 			url: 'https://go.microsoft.com/fwlink/?linkid=2143101'
 

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<azdata.DivContainerProperties>({ clickable: false }).component();

extensions/resource-deployment/src/ui/radioGroupLoadingComponentBuilder.ts

@@ -22,11 +22,11 @@ export class RadioGroupLoadingComponentBuilder implements azdata.ComponentBuilde
 	}
 
 	withProperties<U>(properties: U): azdata.ComponentBuilder<azdata.LoadingComponent, azdata.LoadingComponentProperties> {
-		return this._optionsLoadingBuilder.withProperties(properties);
+		return this._optionsLoadingBuilder.withProps(properties);
 	}
 
 	withProps(properties: azdata.LoadingComponentProperties): azdata.ComponentBuilder<azdata.LoadingComponent, azdata.LoadingComponentProperties> {
-		return this._optionsLoadingBuilder.withProperties(properties);
+		return this._optionsLoadingBuilder.withProps(properties);
 	}
 
 	withValidation(validation: (component: azdata.LoadingComponent) => boolean): azdata.ComponentBuilder<azdata.LoadingComponent, azdata.LoadingComponentProperties> {
@@ -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;

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();

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"

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,

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();
 

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'),

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'
 				}

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<azdataType.FormComponent> {
-		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();

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,

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',

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<TreeNode> = view.modelBuilder.tree<TreeNode>().withProperties({
+		let tree: azdata.TreeComponent<TreeNode> = view.modelBuilder.tree<TreeNode>().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<void> {
 		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'

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 {

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<any> {
 		let emitter = this._emitterMap.get(ComponentEventType.onDidClick);
 		return emitter && emitter.event;

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: [
 					{