Switch withProperties to be withProps (#16380)

* Transition to withProps in arc

* Transition to withProps inputbox

* Transition to withProps in checkbox

* Transition to withProps text

* Transition to withProps in declarative table

* Transition to withProps hyperlink

* Transition to withProps in button

* Transition to withProps radiobutton

* Transition to withProps in input

* Transition to withProps button

* Transition to withProps in text

* Transition to withProps image

* Transition to withProps declare table

* Transition to withProps in table

* Transition to withProps radio button

* Transition to withProps in image

* Transition to withProps radio button

* Transition to withProps in commit

* Transition to withProps div cont

* Transition to withProps in comp

* Transition to withProps radio card

* Transition to withProps in comp icon

* Transition to withProps card

* Transition to withProps list

extensions/arc/src/ui/components/filePicker.ts

@@ -26,7 +26,7 @@ export class FilePicker {
 	) {
 		const buttonWidth = 80;
 		this.filePathInputBox = modelBuilder.inputBox()
-			.withProperties<azdata.InputBoxProperties>({
+			.withProps({
 				value: initialPath,
 				ariaLabel: ariaLabel,
 				validationErrorMessage: validationErrorMessage,
@@ -43,7 +43,7 @@ export class FilePicker {
 			}).component();
 
 		this.filePickerButton = modelBuilder.button()
-			.withProperties<azdata.ButtonProperties>({
+			.withProps({
 				label: loc.browse,
 				width: buttonWidth,
 				secondary: true
@@ -89,5 +89,5 @@ function createFlexContainer(modelBuilder: azdata.ModelBuilder, items: azdata.Co
 	alignItems = alignItems || (rowLayout ? 'center' : undefined);
 	const itemsStyle = rowLayout ? { CSSStyles: { 'margin-right': '5px', } } : {};
 	const flexLayout: azdata.FlexLayout = { flexFlow: flexFlow, height: height, width: width, alignItems: alignItems };
-	return modelBuilder.flexContainer().withItems(items, itemsStyle).withLayout(flexLayout).withProperties<azdata.ComponentProperties>({ CSSStyles: cssStyles || {} }).component();
+	return modelBuilder.flexContainer().withItems(items, itemsStyle).withLayout(flexLayout).withProps({ CSSStyles: cssStyles || {} }).component();
 }

extensions/arc/src/ui/components/keyValueContainer.ts

@@ -56,7 +56,7 @@ export abstract class KeyValue extends vscode.Disposable {
 			alignItems: 'center'
 		}).component();
 
-		const keyComponent = modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		const keyComponent = modelBuilder.text().withProps({
 			value: key,
 			CSSStyles: { ...cssStyles.text, 'font-weight': 'bold', 'margin-block-start': '0px', 'margin-block-end': '0px' }
 		}).component();
@@ -80,7 +80,7 @@ export class TextKeyValue extends KeyValue {
 	constructor(modelBuilder: azdata.ModelBuilder, key: string, value: string) {
 		super(modelBuilder, key, value);
 
-		this.text = modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		this.text = modelBuilder.text().withProps({
 			value: value,
 			CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' }
 		}).component();
@@ -101,7 +101,7 @@ export abstract class BaseInputKeyValue extends KeyValue {
 	constructor(modelBuilder: azdata.ModelBuilder, key: string, value: string, multiline: boolean) {
 		super(modelBuilder, key, value);
 
-		this.input = modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({
+		this.input = modelBuilder.inputBox().withProps({
 			value: value,
 			readOnly: true,
 			multiline: multiline
@@ -110,7 +110,7 @@ export abstract class BaseInputKeyValue extends KeyValue {
 		const inputContainer = modelBuilder.flexContainer().withLayout({ alignItems: 'center' }).component();
 		inputContainer.addItem(this.input);
 
-		const copy = modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		const copy = modelBuilder.button().withProps({
 			iconPath: IconPathHelper.copy,
 			width: '17px',
 			height: '17px',
@@ -153,7 +153,7 @@ export class LinkKeyValue extends KeyValue {
 	constructor(modelBuilder: azdata.ModelBuilder, key: string, value: string, onClick: (e: any) => any) {
 		super(modelBuilder, key, value);
 
-		this.link = modelBuilder.hyperlink().withProperties<azdata.HyperlinkComponentProperties>({
+		this.link = modelBuilder.hyperlink().withProps({
 			label: value,
 			url: ''
 		}).component();

extensions/arc/src/ui/components/radioOptionsGroup.ts

@@ -26,7 +26,7 @@ export class RadioOptionsGroup {
 		private _loadingCompleteMessage: string,
 		private _loadingCompleteErrorMessage: (error: any) => string
 	) {
-		this._divContainer = this._modelBuilder.divContainer().withProperties<azdata.DivContainerProperties>({ clickable: false }).component();
+		this._divContainer = this._modelBuilder.divContainer().withProps({ clickable: false }).component();
 		this._loadingBuilder = this._modelBuilder.loadingComponent().withItem(this._divContainer);
 	}
 
@@ -42,7 +42,7 @@ export class RadioOptionsGroup {
 			const options = optionsInfo.values!;
 			let defaultValue: string = optionsInfo.defaultValue!;
 			options.forEach((option: string) => {
-				const radioOption = this._modelBuilder.radioButton().withProperties<azdata.RadioButtonProperties>({
+				const radioOption = this._modelBuilder.radioButton().withProps({
 					label: option,
 					checked: option === defaultValue,
 					name: this._groupName,

extensions/arc/src/ui/dashboards/controller/controllerDashboardOverviewPage.ts

@@ -67,7 +67,7 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
 		this._propertiesLoadingComponent = this.modelView.modelBuilder.loadingComponent().component();
 
 		this._arcResourcesLoadingComponent = this.modelView.modelBuilder.loadingComponent().component();
-		this._arcResourcesTable = this.modelView.modelBuilder.declarativeTable().withProperties<azdata.DeclarativeTableProperties>({
+		this._arcResourcesTable = this.modelView.modelBuilder.declarativeTable().withProps({
 			dataValues: [],
 			columns: [
 				{
@@ -126,7 +126,7 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
 
 		// Resources
 		const arcResourcesTitle = this.modelView.modelBuilder.text()
-			.withProperties<azdata.TextComponentProperties>({ value: loc.arcResources })
+			.withProps({ value: loc.arcResources })
 			.component();
 
 		contentContainer.addItem(arcResourcesTitle, {
@@ -140,7 +140,7 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
 
 	public get toolbarContainer(): azdata.ToolbarContainer {
 
-		const newInstance = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		const newInstance = this.modelView.modelBuilder.button().withProps({
 			label: loc.newInstance,
 			iconPath: IconPathHelper.add
 		}).component();
@@ -156,7 +156,7 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
 			}));
 
 		// Refresh
-		const refreshButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		const refreshButton = this.modelView.modelBuilder.button().withProps({
 			label: loc.refresh,
 			iconPath: IconPathHelper.refresh
 		}).component();
@@ -173,7 +173,7 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
 				}
 			}));
 
-		this._openInAzurePortalButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		this._openInAzurePortalButton = this.modelView.modelBuilder.button().withProps({
 			label: loc.openInAzurePortal,
 			iconPath: IconPathHelper.openInTab,
 			enabled: !!this._controllerModel.controllerConfig
@@ -190,7 +190,7 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
 				}
 			}));
 
-		const troubleshootButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		const troubleshootButton = this.modelView.modelBuilder.button().withProps({
 			label: loc.troubleshoot,
 			iconPath: IconPathHelper.wrench
 		}).component();
@@ -229,7 +229,7 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
 			.map(r => {
 				const iconPath = getResourceTypeIcon(r.instanceType ?? '');
 				const imageComponent = this.modelView.modelBuilder.image()
-					.withProperties<azdata.ImageComponentProperties>({
+					.withProps({
 						width: iconSize,
 						height: iconSize,
 						iconPath: iconPath,
@@ -238,7 +238,7 @@ export class ControllerDashboardOverviewPage extends DashboardPage {
 					}).component();
 
 				const nameComponent = this.modelView.modelBuilder.hyperlink()
-					.withProperties<azdata.HyperlinkComponentProperties>({
+					.withProps({
 						label: r.instanceName || '',
 						url: ''
 					}).component();

extensions/arc/src/ui/dashboards/miaa/miaaComputeAndStoragePage.ts

@@ -59,33 +59,33 @@ export class MiaaComputeAndStoragePage extends DashboardPage {
 		const content = this.modelView.modelBuilder.divContainer().component();
 		root.addItem(content, { CSSStyles: { 'margin': '20px' } });
 
-		content.addItem(this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		content.addItem(this.modelView.modelBuilder.text().withProps({
 			value: loc.computeAndStorage,
 			CSSStyles: { ...cssStyles.title }
 		}).component());
 
-		const infoComputeStorage_p1 = this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		const infoComputeStorage_p1 = this.modelView.modelBuilder.text().withProps({
 			value: loc.miaaComputeAndStorageDescriptionPartOne,
 			CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px', 'max-width': 'auto' }
 		}).component();
 
-		const memoryVCoreslink = this.modelView.modelBuilder.hyperlink().withProperties<azdata.HyperlinkComponentProperties>({
+		const memoryVCoreslink = this.modelView.modelBuilder.hyperlink().withProps({
 			label: loc.scalingCompute,
 			url: 'https://docs.microsoft.com/azure/azure-arc/data/configure-managed-instance',
 			CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '0px' }
 		}).component();
 
-		const infoComputeStorage_p4 = this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		const infoComputeStorage_p4 = this.modelView.modelBuilder.text().withProps({
 			value: loc.computeAndStorageDescriptionPartFour,
 			CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' }
 		}).component();
 
-		const infoComputeStorage_p5 = this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		const infoComputeStorage_p5 = this.modelView.modelBuilder.text().withProps({
 			value: loc.computeAndStorageDescriptionPartFive,
 			CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' }
 		}).component();
 
-		const infoComputeStorage_p6 = this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		const infoComputeStorage_p6 = this.modelView.modelBuilder.text().withProps({
 			value: loc.computeAndStorageDescriptionPartSix,
 			CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' }
 		}).component();
@@ -112,7 +112,7 @@ export class MiaaComputeAndStoragePage extends DashboardPage {
 
 	protected get toolbarContainer(): azdata.ToolbarContainer {
 		// Save Edits
-		this.saveButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		this.saveButton = this.modelView.modelBuilder.button().withProps({
 			label: loc.saveText,
 			iconPath: IconPathHelper.save,
 			enabled: false
@@ -153,7 +153,7 @@ export class MiaaComputeAndStoragePage extends DashboardPage {
 			}));
 
 		// Discard
-		this.discardButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		this.discardButton = this.modelView.modelBuilder.button().withProps({
 			label: loc.discardText,
 			iconPath: IconPathHelper.discard,
 			enabled: false
@@ -179,7 +179,7 @@ export class MiaaComputeAndStoragePage extends DashboardPage {
 	}
 
 	private initializeConfigurationBoxes() {
-		this.coresLimitBox = this.modelView.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({
+		this.coresLimitBox = this.modelView.modelBuilder.inputBox().withProps({
 			readOnly: false,
 			min: 1,
 			inputType: 'number',
@@ -197,7 +197,7 @@ export class MiaaComputeAndStoragePage extends DashboardPage {
 			})
 		);
 
-		this.coresRequestBox = this.modelView.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({
+		this.coresRequestBox = this.modelView.modelBuilder.inputBox().withProps({
 			readOnly: false,
 			min: 1,
 			inputType: 'number',
@@ -215,7 +215,7 @@ export class MiaaComputeAndStoragePage extends DashboardPage {
 			})
 		);
 
-		this.memoryLimitBox = this.modelView.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({
+		this.memoryLimitBox = this.modelView.modelBuilder.inputBox().withProps({
 			readOnly: false,
 			min: 2,
 			inputType: 'number',
@@ -233,7 +233,7 @@ export class MiaaComputeAndStoragePage extends DashboardPage {
 			})
 		);
 
-		this.memoryRequestBox = this.modelView.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({
+		this.memoryRequestBox = this.modelView.modelBuilder.inputBox().withProps({
 			readOnly: false,
 			min: 2,
 			inputType: 'number',
@@ -277,7 +277,7 @@ export class MiaaComputeAndStoragePage extends DashboardPage {
 			alignItems: 'center'
 		}).component();
 
-		const keyComponent = this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		const keyComponent = this.modelView.modelBuilder.text().withProps({
 			value: `${key} :`,
 			CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' }
 		}).component();

extensions/arc/src/ui/dashboards/miaa/miaaConnectionStringsPage.ts

@@ -41,12 +41,12 @@ export class MiaaConnectionStringsPage extends DashboardPage {
 		const content = this.modelView.modelBuilder.divContainer().component();
 		root.addItem(content, { CSSStyles: { 'margin': '20px' } });
 
-		content.addItem(this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		content.addItem(this.modelView.modelBuilder.text().withProps({
 			value: loc.connectionStrings,
 			CSSStyles: { ...cssStyles.title }
 		}).component());
 
-		const info = this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		const info = this.modelView.modelBuilder.text().withProps({
 			value: `${loc.selectConnectionString}`,
 			CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' }
 		}).component();
@@ -60,7 +60,7 @@ export class MiaaConnectionStringsPage extends DashboardPage {
 		content.addItem(this._keyValueContainer.container);
 
 		this._connectionStringsMessage = this.modelView.modelBuilder.text()
-			.withProperties<azdata.TextComponentProperties>({ CSSStyles: { 'text-align': 'center' } })
+			.withProps({ CSSStyles: { 'text-align': 'center' } })
 			.component();
 		content.addItem(this._connectionStringsMessage);
 

extensions/arc/src/ui/dashboards/miaa/miaaDashboardOverviewPage.ts

@@ -112,7 +112,7 @@ export class MiaaDashboardOverviewPage extends DashboardPage {
 		this._databasesContainer.addItem(this._connectToServerLoading, { CSSStyles: { 'margin-top': '20px' } });
 
 		this._databasesTableLoading = this.modelView.modelBuilder.loadingComponent().component();
-		this._databasesTable = this.modelView.modelBuilder.declarativeTable().withProperties<azdata.DeclarativeTableProperties>({
+		this._databasesTable = this.modelView.modelBuilder.declarativeTable().withProps({
 			width: '100%',
 			columns: [
 				{
@@ -136,7 +136,7 @@ export class MiaaDashboardOverviewPage extends DashboardPage {
 		}).component();
 
 		this._databasesMessage = this.modelView.modelBuilder.text()
-			.withProperties<azdata.TextComponentProperties>({ CSSStyles: { 'text-align': 'center' } })
+			.withProps({ CSSStyles: { 'text-align': 'center' } })
 			.component();
 
 		// Update loaded components with data
@@ -162,9 +162,9 @@ export class MiaaDashboardOverviewPage extends DashboardPage {
 
 		// Service endpoints
 		const titleCSS = { ...cssStyles.title, 'margin-block-start': '2em', 'margin-block-end': '0' };
-		rootContainer.addItem(this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: loc.serviceEndpoints, CSSStyles: titleCSS }).component());
+		rootContainer.addItem(this.modelView.modelBuilder.text().withProps({ value: loc.serviceEndpoints, CSSStyles: titleCSS }).component());
 
-		const endpointsTable = this.modelView.modelBuilder.declarativeTable().withProperties<azdata.DeclarativeTableProperties>({
+		const endpointsTable = this.modelView.modelBuilder.declarativeTable().withProps({
 			width: '100%',
 			columns: [
 				{
@@ -206,7 +206,7 @@ export class MiaaDashboardOverviewPage extends DashboardPage {
 		rootContainer.addItem(endpointsTable);
 
 		// Databases
-		rootContainer.addItem(this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: loc.databases, CSSStyles: titleCSS }).component());
+		rootContainer.addItem(this.modelView.modelBuilder.text().withProps({ value: loc.databases, CSSStyles: titleCSS }).component());
 		this.disposables.push(
 			this._connectToServerButton!.onDidClick(async () => {
 				this._connectToServerButton!.enabled = false;
@@ -227,7 +227,7 @@ export class MiaaDashboardOverviewPage extends DashboardPage {
 
 	public get toolbarContainer(): azdata.ToolbarContainer {
 
-		const deleteButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		const deleteButton = this.modelView.modelBuilder.button().withProps({
 			label: loc.deleteText,
 			iconPath: IconPathHelper.delete
 		}).component();
@@ -265,7 +265,7 @@ export class MiaaDashboardOverviewPage extends DashboardPage {
 			}));
 
 		// Refresh
-		const refreshButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		const refreshButton = this.modelView.modelBuilder.button().withProps({
 			label: loc.refresh,
 			iconPath: IconPathHelper.refresh
 		}).component();
@@ -285,7 +285,7 @@ export class MiaaDashboardOverviewPage extends DashboardPage {
 				}
 			}));
 
-		this._openInAzurePortalButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		this._openInAzurePortalButton = this.modelView.modelBuilder.button().withProps({
 			label: loc.openInAzurePortal,
 			iconPath: IconPathHelper.openInTab,
 			enabled: !!this._controllerModel.controllerConfig
@@ -302,7 +302,7 @@ export class MiaaDashboardOverviewPage extends DashboardPage {
 				}
 			}));
 
-		const troubleshootButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		const troubleshootButton = this.modelView.modelBuilder.button().withProps({
 			label: loc.troubleshoot,
 			iconPath: IconPathHelper.wrench
 		}).component();

extensions/arc/src/ui/dashboards/postgres/postgresComputeAndStoragePage.ts

@@ -88,7 +88,7 @@ export class PostgresComputeAndStoragePage extends DashboardPage {
 			CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' }
 		}).component();
 
-		const workerNodeslink = this.modelView.modelBuilder.hyperlink().withProperties<azdata.HyperlinkComponentProperties>({
+		const workerNodeslink = this.modelView.modelBuilder.hyperlink().withProps({
 			label: loc.addingWorkerNodes,
 			url: 'https://docs.microsoft.com/azure/azure-arc/data/scale-up-down-postgresql-hyperscale-server-group-using-cli',
 			CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '0px' }
@@ -99,7 +99,7 @@ export class PostgresComputeAndStoragePage extends DashboardPage {
 			CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' }
 		}).component();
 
-		const memoryVCoreslink = this.modelView.modelBuilder.hyperlink().withProperties<azdata.HyperlinkComponentProperties>({
+		const memoryVCoreslink = this.modelView.modelBuilder.hyperlink().withProps({
 			label: loc.scalingCompute,
 			url: 'https://docs.microsoft.com/azure/azure-arc/data/scale-up-down-postgresql-hyperscale-server-group-using-cli',
 			CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '0px' }

extensions/arc/src/ui/dashboards/postgres/postgresConnectionStringsPage.ts

@@ -38,17 +38,17 @@ export class PostgresConnectionStringsPage extends DashboardPage {
 		const content = this.modelView.modelBuilder.divContainer().component();
 		root.addItem(content, { CSSStyles: { 'margin': '20px' } });
 
-		content.addItem(this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		content.addItem(this.modelView.modelBuilder.text().withProps({
 			value: loc.connectionStrings,
 			CSSStyles: { ...cssStyles.title }
 		}).component());
 
-		const info = this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		const info = this.modelView.modelBuilder.text().withProps({
 			value: loc.selectConnectionString,
 			CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' }
 		}).component();
 
-		const link = this.modelView.modelBuilder.hyperlink().withProperties<azdata.HyperlinkComponentProperties>({
+		const link = this.modelView.modelBuilder.hyperlink().withProps({
 			label: loc.learnAboutPostgresClients,
 			url: 'https://docs.microsoft.com/azure/azure-arc/data/get-connection-endpoints-and-connection-strings-postgres-hyperscale',
 		}).component();
@@ -63,7 +63,7 @@ export class PostgresConnectionStringsPage extends DashboardPage {
 
 		this.connectionStringsLoading = this.modelView.modelBuilder.loadingComponent()
 			.withItem(this.keyValueContainer.container)
-			.withProperties<azdata.LoadingComponentProperties>({
+			.withProps({
 				loading: !this._postgresModel.configLastUpdated
 			}).component();
 

extensions/arc/src/ui/dashboards/postgres/postgresDiagnoseAndSolveProblemsPage.ts

@@ -33,17 +33,17 @@ export class PostgresDiagnoseAndSolveProblemsPage extends DashboardPage {
 		const content = this.modelView.modelBuilder.divContainer().component();
 		root.addItem(content, { CSSStyles: { 'margin': '20px' } });
 
-		content.addItem(this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		content.addItem(this.modelView.modelBuilder.text().withProps({
 			value: loc.diagnoseAndSolveProblems,
 			CSSStyles: { ...cssStyles.title, 'margin-bottom': '20px' }
 		}).component());
 
-		content.addItem(this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		content.addItem(this.modelView.modelBuilder.text().withProps({
 			value: loc.clickTheTroubleshootButton('Postgres'),
 			CSSStyles: { ...cssStyles.text, 'margin-bottom': '20px' }
 		}).component());
 
-		const troubleshootButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		const troubleshootButton = this.modelView.modelBuilder.button().withProps({
 			iconPath: IconPathHelper.wrench,
 			label: loc.troubleshoot,
 			width: '160px'

extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts

@@ -65,13 +65,13 @@ export class PostgresOverviewPage extends DashboardPage {
 
 		// Properties
 		this.properties = this.modelView.modelBuilder.propertiesContainer()
-			.withProperties<azdata.PropertiesContainerComponentProperties>({
+			.withProps({
 				propertyItems: this.getProperties()
 			}).component();
 
 		this.propertiesLoading = this.modelView.modelBuilder.loadingComponent()
 			.withItem(this.properties)
-			.withProperties<azdata.LoadingComponentProperties>({
+			.withProps({
 				loading: !this._controllerModel.registrationsLastUpdated && !this._postgresModel.configLastUpdated
 			}).component();
 
@@ -79,7 +79,7 @@ export class PostgresOverviewPage extends DashboardPage {
 
 		// Service endpoints
 		const titleCSS = { ...cssStyles.title, 'margin-block-start': '2em', 'margin-block-end': '0' };
-		content.addItem(this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		content.addItem(this.modelView.modelBuilder.text().withProps({
 			value: loc.serviceEndpoints,
 			CSSStyles: titleCSS
 		}).component());
@@ -89,13 +89,13 @@ export class PostgresOverviewPage extends DashboardPage {
 		this.grafanaLink = this.modelView.modelBuilder.hyperlink().component();
 
 		this.kibanaLoading = this.modelView.modelBuilder.loadingComponent()
-			.withProperties<azdata.LoadingComponentProperties>(
+			.withProps(
 				{ loading: !this._postgresModel?.configLastUpdated }
 			)
 			.component();
 
 		this.grafanaLoading = this.modelView.modelBuilder.loadingComponent()
-			.withProperties<azdata.LoadingComponentProperties>(
+			.withProps(
 				{ loading: !this._postgresModel?.configLastUpdated }
 			)
 			.component();
@@ -105,7 +105,7 @@ export class PostgresOverviewPage extends DashboardPage {
 		this.kibanaLoading.component = this.kibanaLink;
 		this.grafanaLoading.component = this.grafanaLink;
 
-		const endpointsTable = this.modelView.modelBuilder.declarativeTable().withProperties<azdata.DeclarativeTableProperties>({
+		const endpointsTable = this.modelView.modelBuilder.declarativeTable().withProps({
 			width: '100%',
 			columns: [
 				{
@@ -146,7 +146,7 @@ export class PostgresOverviewPage extends DashboardPage {
 		content.addItem(endpointsTable);
 
 		// Server Group Nodes
-		content.addItem(this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		content.addItem(this.modelView.modelBuilder.text().withProps({
 			value: loc.serverGroupNodes,
 			CSSStyles: titleCSS
 		}).component());
@@ -194,7 +194,7 @@ export class PostgresOverviewPage extends DashboardPage {
 
 		this.serverGroupNodesLoading = this.modelView.modelBuilder.loadingComponent()
 			.withItem(this.podStatusTable)
-			.withProperties<azdata.LoadingComponentProperties>({
+			.withProps({
 				loading: !this._postgresModel.configLastUpdated
 			}).component();
 
@@ -208,7 +208,7 @@ export class PostgresOverviewPage extends DashboardPage {
 
 	protected get toolbarContainer(): azdata.ToolbarContainer {
 		// Reset password
-		const resetPasswordButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		const resetPasswordButton = this.modelView.modelBuilder.button().withProps({
 			label: loc.resetPassword,
 			iconPath: IconPathHelper.edit
 		}).component();
@@ -236,7 +236,7 @@ export class PostgresOverviewPage extends DashboardPage {
 			}));
 
 		// Delete service
-		this.deleteButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		this.deleteButton = this.modelView.modelBuilder.button().withProps({
 			label: loc.deleteText,
 			iconPath: IconPathHelper.delete
 		}).component();
@@ -274,7 +274,7 @@ export class PostgresOverviewPage extends DashboardPage {
 			}));
 
 		// Refresh
-		const refreshButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		const refreshButton = this.modelView.modelBuilder.button().withProps({
 			label: loc.refresh,
 			iconPath: IconPathHelper.refresh
 		}).component();
@@ -301,7 +301,7 @@ export class PostgresOverviewPage extends DashboardPage {
 			}));
 
 		// Open in Azure portal
-		const openInAzurePortalButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		const openInAzurePortalButton = this.modelView.modelBuilder.button().withProps({
 			label: loc.openInAzurePortal,
 			iconPath: IconPathHelper.openInTab
 		}).component();

extensions/arc/src/ui/dashboards/postgres/postgresPropertiesPage.ts

@@ -44,7 +44,7 @@ export class PostgresPropertiesPage extends DashboardPage {
 		const content = this.modelView.modelBuilder.divContainer().component();
 		root.addItem(content, { CSSStyles: { 'margin': '20px' } });
 
-		content.addItem(this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		content.addItem(this.modelView.modelBuilder.text().withProps({
 			value: loc.properties,
 			CSSStyles: { ...cssStyles.title, 'margin-bottom': '25px' }
 		}).component());
@@ -55,7 +55,7 @@ export class PostgresPropertiesPage extends DashboardPage {
 
 		this.loading = this.modelView.modelBuilder.loadingComponent()
 			.withItem(this.keyValueContainer.container)
-			.withProperties<azdata.LoadingComponentProperties>({
+			.withProps({
 				loading: !this._postgresModel.configLastUpdated && !this._controllerModel.registrationsLastUpdated
 			}).component();
 
@@ -65,7 +65,7 @@ export class PostgresPropertiesPage extends DashboardPage {
 	}
 
 	protected get toolbarContainer(): azdata.ToolbarContainer {
-		const refreshButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		const refreshButton = this.modelView.modelBuilder.button().withProps({
 			label: loc.refresh,
 			iconPath: IconPathHelper.refresh
 		}).component();

extensions/arc/src/ui/dashboards/postgres/postgresResourceHealthPage.ts

@@ -133,7 +133,7 @@ export class PostgresResourceHealthPage extends DashboardPage {
 		this.podConditionsContainer.addItem(this.podConditionsTable);
 		this.podConditionsLoading = this.modelView.modelBuilder.loadingComponent()
 			.withItem(this.podConditionsContainer)
-			.withProperties<azdata.LoadingComponentProperties>({
+			.withProps({
 				loading: !this._postgresModel.configLastUpdated
 			}).component();
 

extensions/arc/src/ui/dashboards/postgres/postgresSupportRequestPage.ts

@@ -34,22 +34,22 @@ export class PostgresSupportRequestPage extends DashboardPage {
 		const content = this.modelView.modelBuilder.divContainer().component();
 		root.addItem(content, { CSSStyles: { 'margin': '20px' } });
 
-		content.addItem(this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		content.addItem(this.modelView.modelBuilder.text().withProps({
 			value: loc.newSupportRequest,
 			CSSStyles: { ...cssStyles.title, 'margin-bottom': '20px' }
 		}).component());
 
-		content.addItem(this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		content.addItem(this.modelView.modelBuilder.text().withProps({
 			value: loc.clickTheNewSupportRequestButton,
 			CSSStyles: { ...cssStyles.text, 'margin-bottom': '20px' }
 		}).component());
 
-		content.addItem(this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		content.addItem(this.modelView.modelBuilder.text().withProps({
 			value: loc.supportRequestNote,
 			CSSStyles: { ...cssStyles.text, 'margin-bottom': '20px' }
 		}).component());
 
-		const supportRequestButton = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		const supportRequestButton = this.modelView.modelBuilder.button().withProps({
 			iconPath: IconPathHelper.support,
 			label: loc.newSupportRequest,
 			width: '205px'

extensions/arc/src/ui/dialogs/addPGExtensionsDialog.ts

@@ -27,12 +27,12 @@ export class AddPGExtensionsDialog extends InitializingComponent {
 		dialog.registerContent(async view => {
 			this.modelBuilder = view.modelBuilder;
 
-			const info = this.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+			const info = this.modelBuilder.text().withProps({
 				value: loc.extensionsFunction,
 				CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' }
 			}).component();
 
-			const link = this.modelBuilder.hyperlink().withProperties<azdata.HyperlinkComponentProperties>({
+			const link = this.modelBuilder.hyperlink().withProps({
 				label: loc.extensionsLearnMore,
 				url: 'https://docs.microsoft.com/azure/azure-arc/data/using-extensions-in-postgresql-hyperscale-server-group',
 			}).component();
@@ -42,7 +42,7 @@ export class AddPGExtensionsDialog extends InitializingComponent {
 			infoAndLink.addItem(link);
 
 			this.extensionsListInputBox = this.modelBuilder.inputBox()
-				.withProperties<azdata.InputBoxProperties>({
+				.withProps({
 					value: '',
 					ariaLabel: loc.extensionsAddList,
 					enabled: true

extensions/arc/src/ui/dialogs/connectControllerDialog.ts

@@ -226,7 +226,7 @@ export class ConnectToControllerDialog extends ControllerDialogBase {
 	protected override initializeFields(controllerInfo: ControllerInfo | undefined, password: string | undefined) {
 		super.initializeFields(controllerInfo, password);
 		this.rememberPwCheckBox = this.modelBuilder.checkBox()
-			.withProperties<azdata.CheckBoxProperties>({
+			.withProps({
 				label: loc.rememberPassword,
 				checked: controllerInfo?.rememberPassword
 			}).component();

extensions/arc/src/ui/dialogs/connectSqlDialog.ts

@@ -35,22 +35,22 @@ export abstract class ConnectToSqlDialog extends InitializingComponent {
 			this.modelBuilder = view.modelBuilder;
 
 			this.serverNameInputBox = this.modelBuilder.inputBox()
-				.withProperties<azdata.InputBoxProperties>({
+				.withProps({
 					value: connectionProfile?.serverName,
 					enabled: false
 				}).component();
 			this.usernameInputBox = this.modelBuilder.inputBox()
-				.withProperties<azdata.InputBoxProperties>({
+				.withProps({
 					value: connectionProfile?.userName
 				}).component();
 			this.passwordInputBox = this.modelBuilder.inputBox()
-				.withProperties<azdata.InputBoxProperties>({
+				.withProps({
 					inputType: 'password',
 					value: connectionProfile?.password
 				})
 				.component();
 			this.rememberPwCheckBox = this.modelBuilder.checkBox()
-				.withProperties<azdata.CheckBoxProperties>({
+				.withProps({
 					label: loc.rememberPassword,
 					checked: connectionProfile?.savePassword
 				}).component();

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

@@ -119,7 +119,7 @@ export class AddControllerDialog {
 			this.uiModelBuilder = view.modelBuilder;
 
 			this.urlInputBox = this.uiModelBuilder.inputBox()
-				.withProperties<azdata.InputBoxProperties>({
+				.withProps({
 					placeHolder: loc.url.toLocaleLowerCase(),
 					value: this.model.prefilledUrl
 				}).component();
@@ -130,19 +130,19 @@ export class AddControllerDialog {
 			}).component();
 			this.authDropdown.onValueChanged(e => this.onAuthChanged());
 			this.usernameInputBox = this.uiModelBuilder.inputBox()
-				.withProperties<azdata.InputBoxProperties>({
+				.withProps({
 					placeHolder: loc.usernameRequired.toLocaleLowerCase(),
 					value: this.model.prefilledUsername
 				}).component();
 			this.passwordInputBox = this.uiModelBuilder.inputBox()
-				.withProperties<azdata.InputBoxProperties>({
+				.withProps({
 					placeHolder: loc.password,
 					inputType: 'password',
 					value: this.model.prefilledPassword
 				})
 				.component();
 			this.rememberPwCheckBox = this.uiModelBuilder.checkBox()
-				.withProperties<azdata.CheckBoxProperties>({
+				.withProps({
 					label: loc.rememberPassword,
 					checked: this.model.prefilledRememberPassword
 				}).component();

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

@@ -59,7 +59,7 @@ export class BdcDashboardOverviewPage extends BdcDashboardPage {
 		// ##############
 
 		const propertiesLabel = this.modelView.modelBuilder.text()
-			.withProperties<azdata.TextComponentProperties>({ value: loc.clusterProperties, CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '10px' } })
+			.withProps({ value: loc.clusterProperties, CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '10px' } })
 			.component();
 		rootContainer.addItem(propertiesLabel, { CSSStyles: { 'margin-top': '15px', 'padding-left': '10px', ...cssStyles.title } });
 
@@ -76,7 +76,7 @@ export class BdcDashboardOverviewPage extends BdcDashboardPage {
 		rootContainer.addItem(overviewHeaderContainer, { CSSStyles: { 'padding-left': '10px', 'padding-top': '15px' } });
 
 		const overviewLabel = this.modelView.modelBuilder.text()
-			.withProperties<azdata.TextComponentProperties>({
+			.withProps({
 				value: loc.clusterOverview,
 				CSSStyles: { ...cssStyles.text }
 			})
@@ -95,7 +95,7 @@ export class BdcDashboardOverviewPage extends BdcDashboardPage {
 		const overviewContainer = this.modelView.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '100%', height: '100%' }).component();
 
 		this.serviceStatusTable = this.modelView.modelBuilder.declarativeTable()
-			.withProperties<azdata.DeclarativeTableProperties>(
+			.withProps(
 				{
 					columns: [
 						{ // status icon
@@ -197,7 +197,7 @@ export class BdcDashboardOverviewPage extends BdcDashboardPage {
 
 		this.serviceStatusDisplayContainer.addItem(this.serviceStatusLoadingComponent, { flex: '0 0 auto', CSSStyles: { 'padding-left': '150px', width: '30px' } });
 
-		this.serviceStatusErrorMessage = this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ display: 'none', CSSStyles: { ...cssStyles.errorText } }).component();
+		this.serviceStatusErrorMessage = this.modelView.modelBuilder.text().withProps({ display: 'none', CSSStyles: { ...cssStyles.errorText } }).component();
 		overviewContainer.addItem(this.serviceStatusErrorMessage);
 
 		overviewContainer.addItem(this.serviceStatusDisplayContainer);
@@ -209,16 +209,16 @@ export class BdcDashboardOverviewPage extends BdcDashboardPage {
 		// #####################
 
 		const endpointsLabel = this.modelView.modelBuilder.text()
-			.withProperties<azdata.TextComponentProperties>({ value: loc.serviceEndpoints, CSSStyles: { 'margin-block-start': '20px', 'margin-block-end': '0px' } })
+			.withProps({ value: loc.serviceEndpoints, CSSStyles: { 'margin-block-start': '20px', 'margin-block-end': '0px' } })
 			.component();
 		rootContainer.addItem(endpointsLabel, { CSSStyles: { 'padding-left': '10px', ...cssStyles.title } });
 
-		this.endpointsErrorMessage = this.modelView.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ display: 'none', CSSStyles: { ...cssStyles.errorText } }).component();
+		this.endpointsErrorMessage = this.modelView.modelBuilder.text().withProps({ display: 'none', CSSStyles: { ...cssStyles.errorText } }).component();
 
 		const endpointsContainer = this.modelView.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '100%', height: '100%' }).component();
 
 		this.endpointsTable = this.modelView.modelBuilder.declarativeTable()
-			.withProperties<azdata.DeclarativeTableProperties>(
+			.withProps(
 				{
 					columns: [
 						{ // service
@@ -326,14 +326,14 @@ export class BdcDashboardOverviewPage extends BdcDashboardPage {
 		if (bdcStatus.services) {
 			this.serviceStatusTable.data = bdcStatus.services.map(serviceStatus => {
 				const statusIconCell = this.modelView.modelBuilder.text()
-					.withProperties<azdata.TextComponentProperties>({
+					.withProps({
 						value: getHealthStatusIcon(serviceStatus.healthStatus),
 						ariaRole: 'img',
 						title: getHealthStatusDisplayText(serviceStatus.healthStatus),
 						CSSStyles: { 'user-select': 'none', ...cssStyles.text }
 					}).component();
 				const nameCell = this.modelView.modelBuilder.hyperlink()
-					.withProperties<azdata.HyperlinkComponentProperties>({
+					.withProps({
 						label: getServiceNameDisplayText(serviceStatus.serviceName),
 						url: '',
 						CSSStyles: { ...cssStyles.text }
@@ -370,7 +370,7 @@ export class BdcDashboardOverviewPage extends BdcDashboardPage {
 		endpoints.unshift(...sqlServerMasterEndpoints);
 
 		this.endpointsTable.dataValues = endpoints.map(e => {
-			const copyValueCell = this.modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({ title: loc.copy }).component();
+			const copyValueCell = this.modelView.modelBuilder.button().withProps({ title: loc.copy }).component();
 			copyValueCell.iconPath = IconPathHelper.copy;
 			copyValueCell.onDidClick(() => {
 				vscode.env.clipboard.writeText(e.endpoint);
@@ -426,7 +426,7 @@ export class BdcDashboardOverviewPage extends BdcDashboardPage {
 function createEndpointComponent(modelBuilder: azdata.ModelBuilder, endpoint: EndpointModel, bdcModel: BdcDashboardModel, isHyperlink: boolean): azdata.HyperlinkComponent | azdata.TextComponent {
 	if (isHyperlink) {
 		return modelBuilder.hyperlink()
-			.withProperties<azdata.HyperlinkComponentProperties>({
+			.withProps({
 				label: endpoint.endpoint,
 				title: endpoint.endpoint,
 				url: endpoint.endpoint
@@ -435,7 +435,7 @@ function createEndpointComponent(modelBuilder: azdata.ModelBuilder, endpoint: En
 	}
 	else if (endpoint.name === Endpoint.sqlServerMaster) {
 		const endpointCell = modelBuilder.hyperlink()
-			.withProperties<azdata.HyperlinkComponentProperties>({
+			.withProps({
 				title: endpoint.endpoint,
 				label: endpoint.endpoint,
 				url: '',
@@ -458,7 +458,7 @@ function createEndpointComponent(modelBuilder: azdata.ModelBuilder, endpoint: En
 	}
 	else {
 		return modelBuilder.text()
-			.withProperties<azdata.TextComponentProperties>({
+			.withProps({
 				value: endpoint.endpoint,
 				title: endpoint.endpoint,
 				CSSStyles: { ...cssStyles.text }

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

@@ -30,7 +30,7 @@ export abstract class BdcDashboardPage extends InitializingComponent {
 	protected createToolbarContainer(): azdata.ToolbarContainer {
 		// Refresh button
 		this._refreshButton = this.modelView.modelBuilder.button()
-			.withProperties<azdata.ButtonProperties>({
+			.withProps({
 				label: loc.refresh,
 				iconPath: IconPathHelper.refresh
 			}).component();
@@ -40,7 +40,7 @@ export abstract class BdcDashboardPage extends InitializingComponent {
 		});
 
 		const openTroubleshootNotebookButton = this.modelView.modelBuilder.button()
-			.withProperties<azdata.ButtonProperties>({
+			.withProps({
 				label: loc.troubleshoot,
 				iconPath: IconPathHelper.notebook
 			}).component();

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

@@ -54,7 +54,7 @@ export class BdcDashboardResourceStatusPage extends BdcDashboardPage {
 
 		// Header label
 		const healthStatusHeaderLabel = this.modelView.modelBuilder.text()
-			.withProperties<azdata.TextComponentProperties>({
+			.withProps({
 				value: loc.healthStatusDetails,
 				CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '10px' }
 			})
@@ -72,7 +72,7 @@ export class BdcDashboardResourceStatusPage extends BdcDashboardPage {
 		healthStatusHeaderContainer.addItem(this.lastUpdatedLabel, { CSSStyles: { 'margin-left': '45px' } });
 
 		this.instanceHealthStatusTable = this.modelView.modelBuilder.declarativeTable()
-			.withProperties<azdata.DeclarativeTableProperties>(
+			.withProps(
 				{
 					columns: [
 						{ // status icon
@@ -168,7 +168,7 @@ export class BdcDashboardResourceStatusPage extends BdcDashboardPage {
 
 		// Title label
 		const endpointsLabel = this.modelView.modelBuilder.text()
-			.withProperties<azdata.TextComponentProperties>({ value: loc.metricsAndLogs, CSSStyles: { 'margin-block-start': '20px', 'margin-block-end': '0px' } })
+			.withProps({ value: loc.metricsAndLogs, CSSStyles: { 'margin-block-start': '20px', 'margin-block-end': '0px' } })
 			.component();
 		this.rootContainer.addItem(endpointsLabel, { CSSStyles: { 'padding-left': '10px', ...cssStyles.title } });
 
@@ -250,7 +250,7 @@ export class BdcDashboardResourceStatusPage extends BdcDashboardPage {
 			});
 
 		this.metricsAndLogsRowsTable = this.modelView.modelBuilder.declarativeTable()
-			.withProperties<azdata.DeclarativeTableProperties>(
+			.withProps(
 				{
 					columns: metricsAndLogsColumns,
 					data: this.createMetricsAndLogsRows(),
@@ -299,7 +299,7 @@ export class BdcDashboardResourceStatusPage extends BdcDashboardPage {
 		if (isNullOrUndefined(instanceStatus.dashboards) || isNullOrUndefined(instanceStatus.dashboards.nodeMetricsUrl)) {
 			row.push(this.modelView.modelBuilder.text().withProps({ value: loc.notAvailable, CSSStyles: { ...cssStyles.text } }).component());
 		} else {
-			row.push(this.modelView.modelBuilder.hyperlink().withProperties<azdata.HyperlinkComponentProperties>({
+			row.push(this.modelView.modelBuilder.hyperlink().withProps({
 				label: loc.view,
 				url: instanceStatus.dashboards.nodeMetricsUrl,
 				title: instanceStatus.dashboards.nodeMetricsUrl,
@@ -314,7 +314,7 @@ export class BdcDashboardResourceStatusPage extends BdcDashboardPage {
 			if (isNullOrUndefined(instanceStatus.dashboards) || isNullOrUndefined(instanceStatus.dashboards.sqlMetricsUrl)) {
 				row.push(this.modelView.modelBuilder.text().withProps({ value: loc.notAvailable, CSSStyles: { ...cssStyles.text } }).component());
 			} else {
-				row.push(this.modelView.modelBuilder.hyperlink().withProperties<azdata.HyperlinkComponentProperties>({
+				row.push(this.modelView.modelBuilder.hyperlink().withProps({
 					label: loc.view,
 					url: instanceStatus.dashboards.sqlMetricsUrl,
 					title: instanceStatus.dashboards.sqlMetricsUrl,
@@ -327,7 +327,7 @@ export class BdcDashboardResourceStatusPage extends BdcDashboardPage {
 		if (isNullOrUndefined(instanceStatus.dashboards) || isNullOrUndefined(instanceStatus.dashboards.logsUrl)) {
 			row.push(this.modelView.modelBuilder.text().withProps({ value: loc.notAvailable, CSSStyles: { ...cssStyles.text } }).component());
 		} else {
-			row.push(this.modelView.modelBuilder.hyperlink().withProperties<azdata.HyperlinkComponentProperties>({
+			row.push(this.modelView.modelBuilder.hyperlink().withProps({
 				label: loc.view,
 				url: instanceStatus.dashboards.logsUrl,
 				title: instanceStatus.dashboards.logsUrl,
@@ -340,7 +340,7 @@ export class BdcDashboardResourceStatusPage extends BdcDashboardPage {
 
 	private createHealthStatusRow(instanceStatus: InstanceStatusModel): any[] {
 		const statusIconCell = this.modelView.modelBuilder.text()
-			.withProperties<azdata.TextComponentProperties>({
+			.withProps({
 				value: getHealthStatusIcon(instanceStatus.healthStatus),
 				ariaRole: 'img',
 				title: getHealthStatusDisplayText(instanceStatus.healthStatus),

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

@@ -133,7 +133,7 @@ export abstract class HdfsDialogBase<T extends HdfsDialogProperties, R> {
 			this.uiModelBuilder = view.modelBuilder;
 
 			this.urlInputBox = this.uiModelBuilder.inputBox()
-				.withProperties<azdata.InputBoxProperties>({
+				.withProps({
 					placeHolder: loc.url.toLocaleLowerCase(),
 					value: this.model.props.url,
 					enabled: false
@@ -146,12 +146,12 @@ export abstract class HdfsDialogBase<T extends HdfsDialogProperties, R> {
 			}).component();
 			this.authDropdown.onValueChanged(e => this.onAuthChanged());
 			this.usernameInputBox = this.uiModelBuilder.inputBox()
-				.withProperties<azdata.InputBoxProperties>({
+				.withProps({
 					placeHolder: loc.username.toLocaleLowerCase(),
 					value: this.model.props.username
 				}).component();
 			this.passwordInputBox = this.uiModelBuilder.inputBox()
-				.withProperties<azdata.InputBoxProperties>({
+				.withProps({
 					placeHolder: loc.password.toLocaleLowerCase(),
 					inputType: 'password',
 					value: this.model.props.password

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

@@ -151,16 +151,16 @@ export class MountHdfsDialog extends HdfsDialogBase<MountHdfsProperties, void> {
 		let pathVal = this.model.props.hdfsPath;
 		pathVal = (!pathVal || pathVal === '/') ? newMountName : (pathVal + newMountName);
 		this.pathInputBox = this.uiModelBuilder.inputBox()
-			.withProperties<azdata.InputBoxProperties>({
+			.withProps({
 				value: pathVal
 			}).component();
 		this.remoteUriInputBox = this.uiModelBuilder.inputBox()
-			.withProperties<azdata.InputBoxProperties>({
+			.withProps({
 				value: this.model.props.remoteUri
 			})
 			.component();
 		this.credentialsInputBox = this.uiModelBuilder.inputBox()
-			.withProperties<azdata.InputBoxProperties>({
+			.withProps({
 				inputType: 'password',
 				value: this.model.props.credentials
 			})
@@ -224,7 +224,7 @@ export class RefreshMountDialog extends HdfsDialogBase<MountHdfsProperties, void
 
 	protected getMainSectionComponents(): (azdata.FormComponentGroup | azdata.FormComponent)[] {
 		this.pathInputBox = this.uiModelBuilder.inputBox()
-			.withProperties<azdata.InputBoxProperties>({
+			.withProps({
 				value: this.model.props.hdfsPath
 			}).component();
 		return [
@@ -305,7 +305,7 @@ export class DeleteMountDialog extends HdfsDialogBase<MountHdfsProperties, void>
 
 	protected getMainSectionComponents(): (azdata.FormComponentGroup | azdata.FormComponent)[] {
 		this.pathInputBox = this.uiModelBuilder.inputBox()
-			.withProperties<azdata.InputBoxProperties>({
+			.withProps({
 				value: this.model.props.hdfsPath
 			}).component();
 		return [

extensions/data-workspace/src/dialogs/openExistingDialog.ts

@@ -98,7 +98,7 @@ export class OpenExistingDialog extends DialogBase {
 	}
 
 	protected async initialize(view: azdataType.ModelView): Promise<void> {
-		this.localRadioButton = view.modelBuilder.radioButton().withProperties<azdataType.RadioButtonProperties>({
+		this.localRadioButton = view.modelBuilder.radioButton().withProps({
 			name: 'location',
 			label: constants.Local,
 			checked: true
@@ -112,7 +112,7 @@ export class OpenExistingDialog extends DialogBase {
 			}
 		}));
 
-		this.remoteGitRepoRadioButton = view.modelBuilder.radioButton().withProperties<azdataType.RadioButtonProperties>({
+		this.remoteGitRepoRadioButton = view.modelBuilder.radioButton().withProps({
 			name: 'location',
 			label: constants.RemoteGitRepo
 		}).component();
@@ -134,7 +134,7 @@ export class OpenExistingDialog extends DialogBase {
 			}
 		}));
 
-		const gitRepoTextBox = view.modelBuilder.inputBox().withProperties<azdataType.InputBoxProperties>({
+		const gitRepoTextBox = view.modelBuilder.inputBox().withProps({
 			ariaLabel: constants.GitRepoUrlTitle,
 			placeHolder: constants.GitRepoUrlPlaceholder,
 			required: true,
@@ -150,7 +150,7 @@ export class OpenExistingDialog extends DialogBase {
 			component: gitRepoTextBox
 		};
 
-		this.localClonePathTextBox = view.modelBuilder.inputBox().withProperties<azdataType.InputBoxProperties>({
+		this.localClonePathTextBox = view.modelBuilder.inputBox().withProps({
 			ariaLabel: constants.LocalClonePathTitle,
 			placeHolder: constants.LocalClonePathPlaceholder,
 			required: true,
@@ -161,7 +161,7 @@ export class OpenExistingDialog extends DialogBase {
 			this.localClonePathTextBox!.updateProperty('title', this.localClonePathTextBox!.value!);
 		}));
 
-		const localClonePathBrowseFolderButton = view.modelBuilder.button().withProperties<azdataType.ButtonProperties>({
+		const localClonePathBrowseFolderButton = view.modelBuilder.button().withProps({
 			ariaLabel: constants.BrowseButtonText,
 			iconPath: IconPathHelper.folder,
 			width: '18px',
@@ -190,7 +190,7 @@ export class OpenExistingDialog extends DialogBase {
 			required: true
 		};
 
-		this.filePathTextBox = view.modelBuilder.inputBox().withProperties<azdataType.InputBoxProperties>({
+		this.filePathTextBox = view.modelBuilder.inputBox().withProps({
 			ariaLabel: constants.LocationSelectorTitle,
 			placeHolder: constants.ProjectFilePlaceholder,
 			required: true,
@@ -201,7 +201,7 @@ export class OpenExistingDialog extends DialogBase {
 			this.filePathTextBox!.updateProperty('title', this.filePathTextBox!.value!);
 		}));
 
-		const localProjectBrowseFolderButton = view.modelBuilder.button().withProperties<azdataType.ButtonProperties>({
+		const localProjectBrowseFolderButton = view.modelBuilder.button().withProps({
 			ariaLabel: constants.BrowseButtonText,
 			iconPath: IconPathHelper.folder,
 			width: '18px',

extensions/data-workspace/src/dialogs/projectDashboard.ts

@@ -84,7 +84,7 @@ export class ProjectDashboard {
 		});
 
 		const refreshButton = this.modelView!.modelBuilder.button()
-			.withProperties<azdataType.ButtonProperties>({
+			.withProps({
 				label: constants.Refresh,
 				iconPath: IconPathHelper.refresh,
 				height: '20px'
@@ -110,7 +110,7 @@ export class ProjectDashboard {
 
 	private createButton(projectAction: IProjectAction): azdataType.ButtonComponent {
 		let button = this.modelView!.modelBuilder.button()
-			.withProperties<azdataType.ButtonProperties>({
+			.withProps({
 				label: projectAction.id,
 				iconPath: projectAction.icon,
 				height: '20px'
@@ -159,13 +159,13 @@ export class ProjectDashboard {
 			}).component();
 
 		const titleLabel = this.modelView!.modelBuilder.text()
-			.withProperties<azdataType.TextComponentProperties>({ value: title, CSSStyles: { 'margin-block-start': '20px', 'margin-block-end': '0px' } })
+			.withProps({ value: title, CSSStyles: { 'margin-block-start': '20px', 'margin-block-end': '0px' } })
 			.component();
 		header.addItem(titleLabel, { CSSStyles: { 'padding-left': '34px', 'padding-top': '15px', 'font-size': '36px', 'font-weight': '400' } });
 
 		const projectFolderPath = path.dirname(location);
 		const locationLabel = this.modelView!.modelBuilder.text()
-			.withProperties<azdataType.TextComponentProperties>({ value: projectFolderPath, CSSStyles: { 'margin-block-start': '20px', 'margin-block-end': '0px' } })
+			.withProps({ value: projectFolderPath, CSSStyles: { 'margin-block-start': '20px', 'margin-block-end': '0px' } })
 			.component();
 		header.addItem(locationLabel, { CSSStyles: { 'padding-left': '34px', 'padding-top': '15px', 'padding-bottom': '50px', 'font-size': '16px' } });
 
@@ -200,14 +200,14 @@ export class ProjectDashboard {
 
 		dashboardData.forEach(info => {
 			const tableNameLabel = this.modelView!.modelBuilder.text()
-				.withProperties<azdataType.TextComponentProperties>({ value: info.name, CSSStyles: { 'margin-block-start': '30px', 'margin-block-end': '0px' } })
+				.withProps({ value: info.name, CSSStyles: { 'margin-block-start': '30px', 'margin-block-end': '0px' } })
 				.component();
 			tableContainer.addItem(tableNameLabel, { CSSStyles: { 'padding-left': '25px', 'padding-bottom': '20px', ...constants.cssStyles.title } });
 
 			if (info.data.length === 0) {
 				const noDataText = constants.noPreviousData(info.name.toLocaleLowerCase());
 				const noDataLabel = this.modelView!.modelBuilder.text()
-					.withProperties<azdataType.TextComponentProperties>({ value: noDataText })
+					.withProps({ value: noDataText })
 					.component();
 				tableContainer.addItem(noDataLabel, { CSSStyles: { 'padding-left': '25px', 'padding-bottom': '20px' } });
 			} else {
@@ -236,14 +236,14 @@ export class ProjectDashboard {
 						if (typeof val === 'string') {
 							columnValue.push({ value: val });
 						} else {
-							const iconComponent = this.modelView!.modelBuilder.image().withProperties<azdataType.ImageComponentProperties>({
+							const iconComponent = this.modelView!.modelBuilder.image().withProps({
 								iconPath: val.icon,
 								width: '15px',
 								height: '15px',
 								iconHeight: '15px',
 								iconWidth: '15px'
 							}).component();
-							const stringComponent = this.modelView!.modelBuilder.text().withProperties<azdataType.TextComponentProperties>({
+							const stringComponent = this.modelView!.modelBuilder.text().withProps({
 								value: val.text,
 								CSSStyles: { 'margin-block-start': 'auto', 'block-size': 'auto', 'margin-block-end': '0px' }
 							}).component();
@@ -256,7 +256,7 @@ export class ProjectDashboard {
 				});
 
 				const table = this.modelView!.modelBuilder.declarativeTable()
-					.withProperties<azdataType.DeclarativeTableProperties>({ columns: columns, dataValues: data, ariaLabel: info.name, CSSStyles: { 'margin-left': '30px' } }).component();
+					.withProps({ columns: columns, dataValues: data, ariaLabel: info.name, CSSStyles: { 'margin-left': '30px' } }).component();
 
 				tableContainer.addItem(table);
 			}

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

@@ -65,7 +65,7 @@ export class ProsePreviewPage extends ImportPage {
 	}
 
 	async start(): Promise<boolean> {
-		this.table = this.view.modelBuilder.table().withProperties<azdata.TableComponentProperties>({
+		this.table = this.view.modelBuilder.table().withProps({
 			data: undefined,
 			columns: undefined,
 			forceFitColumns: azdata.ColumnSizingMode.DataFit

extensions/machine-learning/src/views/externalLanguages/languagesTable.ts

@@ -19,7 +19,7 @@ export class LanguagesTable extends LanguageViewBase {
 	constructor(apiWrapper: ApiWrapper, private _modelBuilder: azdata.ModelBuilder, parent: LanguageViewBase) {
 		super(apiWrapper, parent.root, parent);
 		this._table = _modelBuilder.declarativeTable()
-			.withProperties<azdata.DeclarativeTableProperties>(
+			.withProps(
 				{
 					columns: [
 						{ // Name

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

@@ -36,7 +36,7 @@ export class AzureModelsTable extends ModelViewBase implements IDataComponent<Wo
 	 */
 	public registerComponent(modelBuilder: azdata.ModelBuilder): azdata.DeclarativeTableComponent {
 		this._table = modelBuilder.declarativeTable()
-			.withProperties<azdata.DeclarativeTableProperties>(
+			.withProps(
 				{
 					columns: [
 						{ // Action

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

@@ -152,7 +152,7 @@ export class CurrentModelsTable extends ModelViewBase implements IDataComponent<
 			);
 		}
 		this._table = modelBuilder.declarativeTable()
-			.withProperties<azdata.DeclarativeTableProperties>(
+			.withProps(
 				{
 					columns: columns,
 					data: [],

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

@@ -28,7 +28,7 @@ export class ModelsDetailsTableComponent extends ModelViewBase implements IDataC
 	 */
 	public registerComponent(modelBuilder: azdata.ModelBuilder): azdata.Component {
 		this._table = modelBuilder.declarativeTable()
-			.withProperties<azdata.DeclarativeTableProperties>(
+			.withProps(
 				{
 					columns: [
 						{ // File Name

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

@@ -125,7 +125,7 @@ export class ColumnsTable extends ModelViewBase implements IDataComponent<Predic
 		}
 		this._table = modelBuilder.declarativeTable()
 
-			.withProperties<azdata.DeclarativeTableProperties>(
+			.withProps(
 				{
 					columns: columnHeader,
 					data: [],

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

@@ -486,7 +486,7 @@ export class DashboardWidget {
 	private createTaskButton(view: azdata.ModelView, taskMetaData: IActionMetadata): azdata.Component {
 		const maxHeight: number = 84;
 		const maxWidth: number = 236;
-		const buttonContainer = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		const buttonContainer = view.modelBuilder.button().withProps({
 			buttonType: azdata.ButtonType.Informational,
 			description: taskMetaData.description,
 			height: maxHeight,

extensions/mssql/src/dashboard/serviceEndpoints.ts

@@ -69,11 +69,11 @@ export function registerServiceEndpoints(context: vscode.ExtensionContext): void
 			const container = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '100%', height: '100%' }).component();
 			endpointsArray.forEach(endpointInfo => {
 				const endPointRow = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'row' }).component();
-				const nameCell = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: endpointInfo.description }).component();
+				const nameCell = view.modelBuilder.text().withProps({ value: endpointInfo.description }).component();
 				endPointRow.addItem(nameCell, { CSSStyles: { 'width': '35%', 'font-weight': '600', 'user-select': 'text' } });
 				if (hyperlinkedEndpoints.findIndex(e => e === endpointInfo.name) >= 0) {
 					const linkCell = view.modelBuilder.hyperlink()
-						.withProperties<azdata.HyperlinkComponentProperties>({
+						.withProps({
 							label: endpointInfo.endpoint,
 							title: endpointInfo.endpoint,
 							url: endpointInfo.endpoint
@@ -83,7 +83,7 @@ export function registerServiceEndpoints(context: vscode.ExtensionContext): void
 				else {
 					const endpointCell =
 						view.modelBuilder.text()
-							.withProperties<azdata.TextComponentProperties>(
+							.withProps(
 								{
 									value: endpointInfo.endpoint,
 									title: endpointInfo.endpoint,

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

@@ -111,13 +111,13 @@ export class ManageAccessDialog {
 		const locationContainer = this.modelBuilder.flexContainer().withLayout({ flexFlow: 'row', alignItems: 'center' }).component();
 
 		const locationLabel = this.modelBuilder.text()
-			.withProperties<azdata.TextComponentProperties>({
+			.withProps({
 				value: loc.locationTitle,
 				CSSStyles: { ...cssStyles.titleCss }
 			}).component();
 
 		const pathLabel = this.modelBuilder.text()
-			.withProperties<azdata.TextComponentProperties>({
+			.withProps({
 				value: this.hdfsPath,
 				title: this.hdfsPath,
 				height: locationLabelHeight,
@@ -141,7 +141,7 @@ export class ManageAccessDialog {
 		// = Permissions Title =
 		// =====================
 		const permissionsTitle = this.modelBuilder.text()
-			.withProperties<azdata.TextComponentProperties>({ value: loc.permissionsHeader })
+			.withProps({ value: loc.permissionsHeader })
 			.component();
 		contentContainer.addItem(permissionsTitle, { CSSStyles: { 'margin-top': '15px', ...cssStyles.titleCss } });
 
@@ -158,7 +158,7 @@ export class ManageAccessDialog {
 		// = Sticky =
 		// ==========
 		this.stickyCheckbox = this.modelBuilder.checkBox()
-			.withProperties<azdata.CheckBoxProperties>({
+			.withProps({
 				width: checkboxSize,
 				height: checkboxSize,
 				checked: permissionStatus.stickyBit,
@@ -184,7 +184,7 @@ export class ManageAccessDialog {
 		// ===========================
 
 		const addUserOrGroupTitle = this.modelBuilder.text()
-			.withProperties<azdata.TextComponentProperties>({ value: loc.addUserOrGroupHeader, CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '10px' } })
+			.withProps({ value: loc.addUserOrGroupHeader, CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '10px' } })
 			.component();
 		contentContainer.addItem(addUserOrGroupTitle, { CSSStyles: { 'margin-top': '15px', ...cssStyles.titleCss } });
 
@@ -200,7 +200,7 @@ export class ManageAccessDialog {
 		const addUserOrGroupInputRow = this.modelBuilder.flexContainer().component();
 
 		this.addUserOrGroupInput = this.modelBuilder.inputBox()
-			.withProperties<azdata.InputBoxProperties>({
+			.withProps({
 				inputType: 'text',
 				placeHolder: loc.enterNamePlaceholder,
 				width: 250,
@@ -306,7 +306,7 @@ export class ManageAccessDialog {
 			namedUsersAndGroupsColumns.push(this.createTableColumn('', loc.deleteTitle, permissionsDeleteColumnWidth, azdata.DeclarativeDataType.component));
 
 			const posixPermissionsTable = this.modelBuilder.declarativeTable()
-				.withProperties<azdata.DeclarativeTableProperties>(
+				.withProps(
 					{
 						columns: posixPermissionsColumns,
 						data: posixPermissionData
@@ -321,7 +321,7 @@ export class ManageAccessDialog {
 			});
 
 			const namedUsersAndGroupsTable = this.modelBuilder.declarativeTable()
-				.withProperties<azdata.DeclarativeTableProperties>(
+				.withProps(
 					{
 						columns: namedUsersAndGroupsColumns,
 						data: namedUsersAndGroupsData
@@ -336,7 +336,7 @@ export class ManageAccessDialog {
 	}
 
 	private createRadioButton(modelBuilder: azdata.ModelBuilder, label: string, name: string, aclEntryType: AclType): azdata.RadioButtonComponent {
-		const button = modelBuilder.radioButton().withProperties<azdata.RadioButtonProperties>({ label: label, name: name }).component();
+		const button = modelBuilder.radioButton().withProps({ label: label, name: name }).component();
 		button.onDidClick(() => {
 			this.addUserOrGroupSelectedType = aclEntryType;
 		});
@@ -368,7 +368,7 @@ export class ManageAccessDialog {
 	private createImageComponent(type: AclType | PermissionType): azdata.ImageComponent {
 		const imageProperties = getImageForType(type);
 		return this.modelBuilder.image()
-			.withProperties<azdata.ImageComponentProperties>({
+			.withProps({
 				iconPath: imageProperties.iconPath,
 				width: permissionsTypeIconColumnWidth,
 				height: permissionsRowHeight,
@@ -474,7 +474,7 @@ export class ManageAccessDialog {
 
 		if (includeDelete) {
 			const deleteButton = this.modelBuilder.button()
-				.withProperties<azdata.ButtonProperties>(
+				.withProps(
 					{
 						label: '',
 						title: loc.deleteTitle,
@@ -492,7 +492,7 @@ export class ManageAccessDialog {
 
 	private createInheritDefaultsCheckbox(): azdata.CheckBoxComponent {
 		this.inheritDefaultsCheckbox = this.modelBuilder.checkBox()
-			.withProperties<azdata.CheckBoxProperties>({
+			.withProps({
 				width: checkboxSize,
 				height: checkboxSize,
 				checked: false, // Will be set when we get the model update
@@ -550,7 +550,7 @@ export class ManageAccessDialog {
 
 		// Access
 		const accessSectionHeader = this.modelBuilder.text()
-			.withProperties<azdata.TextComponentProperties>({
+			.withProps({
 				value: loc.accessHeader,
 				ariaHidden: true,
 				CSSStyles: {
@@ -571,7 +571,7 @@ export class ManageAccessDialog {
 
 			// Default
 			const defaultSectionHeader = this.modelBuilder.text()
-				.withProperties<azdata.TextComponentProperties>({
+				.withProps({
 					value: loc.defaultHeader,
 					ariaHidden: true,
 					CSSStyles: {
@@ -623,7 +623,7 @@ export class ManageAccessDialog {
  */
 function createCheckbox(builder: azdata.ModelBuilder, checked: boolean, enabled: boolean, containerWidth: number, containerHeight: number, ariaLabel: string): { container: azdata.FlexContainer, checkbox: azdata.CheckBoxComponent } {
 	const checkbox = builder.checkBox()
-		.withProperties<azdata.CheckBoxProperties>({
+		.withProps({
 			checked: checked,
 			enabled: enabled,
 			height: checkboxSize,

extensions/mssql/src/sparkFeature/dialog/sparkJobSubmission/sparkAdvancedTab.ts

@@ -99,7 +99,7 @@ export class SparkAdvancedTab {
 				});
 
 			this._driverCoresInputBox = builder.inputBox()
-				.withProperties<azdata.InputBoxProperties>({ inputType: 'number', min: 1 })
+				.withProps({ inputType: 'number', min: 1 })
 				.component();
 
 			formContainer.addFormItem(
@@ -124,7 +124,7 @@ export class SparkAdvancedTab {
 				});
 
 			this._executorCoresInputBox = builder.inputBox()
-				.withProperties<azdata.InputBoxProperties>({ inputType: 'number', min: 1 })
+				.withProps({ inputType: 'number', min: 1 })
 				.component();
 			formContainer.addFormItem(
 				{
@@ -137,7 +137,7 @@ export class SparkAdvancedTab {
 				});
 
 			this._executorCountInputBox = builder.inputBox()
-				.withProperties<azdata.InputBoxProperties>({ inputType: 'number', min: 1 })
+				.withProps({ inputType: 'number', min: 1 })
 				.component();
 			formContainer.addFormItem(
 				{

extensions/mssql/src/sparkFeature/dialog/sparkJobSubmission/sparkConfigurationTab.ts

@@ -75,7 +75,7 @@ export class SparkConfigurationTab {
 				title: localize('sparkJobSubmission.SparkCluster', "Spark Cluster")
 			}, baseFormItemLayout);
 
-			this._fileSourceDropDown = builder.dropDown().withProperties<azdata.DropDownProperties>({
+			this._fileSourceDropDown = builder.dropDown().withProps({
 				values: [SparkFileSource.Local.toString(), SparkFileSource.HDFS.toString()],
 				value: (this._path) ? SparkFileSource.HDFS.toString() : SparkFileSource.Local.toString()
 			}).component();

extensions/notebook/src/dialog/configurePython/configurePathPage.ts

@@ -32,7 +32,7 @@ export class ConfigurePathPage extends BasePage {
 			wizardDescription = localize('configurePython.descriptionWithoutKernel', "Notebook kernels require a Python runtime to be configured and dependencies to be installed.");
 		}
 		let wizardDescriptionLabel = this.view.modelBuilder.text()
-			.withProperties<azdata.TextComponentProperties>({
+			.withProps({
 				value: wizardDescription,
 				CSSStyles: {
 					'padding': '0px',
@@ -41,14 +41,14 @@ export class ConfigurePathPage extends BasePage {
 			}).component();
 
 		this.pythonLocationDropdown = this.view.modelBuilder.dropDown()
-			.withProperties<azdata.DropDownProperties>({
+			.withProps({
 				value: undefined,
 				values: [],
 				width: '400px'
 			}).component();
 		this.pythonDropdownLoader = this.view.modelBuilder.loadingComponent()
 			.withItem(this.pythonLocationDropdown)
-			.withProperties<azdata.LoadingComponentProperties>({
+			.withProps({
 				loading: false
 			})
 			.component();
@@ -78,13 +78,13 @@ export class ConfigurePathPage extends BasePage {
 			}]).component();
 		let selectInstallContainer = this.view.modelBuilder.divContainer()
 			.withItems([selectInstallForm])
-			.withProperties<azdata.DivContainerProperties>({
+			.withProps({
 				clickable: false
 			}).component();
 
 		let allParentItems = [selectInstallContainer];
 		if (this.model.pythonLocation) {
-			let installedPathTextBox = this.view.modelBuilder.inputBox().withProperties<azdata.TextComponentProperties>({
+			let installedPathTextBox = this.view.modelBuilder.inputBox().withProps({
 				value: this.model.pythonLocation,
 				enabled: false,
 				width: '400px'
@@ -105,7 +105,7 @@ export class ConfigurePathPage extends BasePage {
 
 			let editPathContainer = this.view.modelBuilder.divContainer()
 				.withItems([editPathForm])
-				.withProperties<azdata.DivContainerProperties>({
+				.withProps({
 					clickable: false
 				}).component();
 			allParentItems.push(editPathContainer);
@@ -202,7 +202,7 @@ export class ConfigurePathPage extends BasePage {
 	private createInstallRadioButtons(modelBuilder: azdata.ModelBuilder, useExistingPython: boolean): void {
 		let buttonGroup = 'installationType';
 		this.newInstallButton = modelBuilder.radioButton()
-			.withProperties<azdata.RadioButtonProperties>({
+			.withProps({
 				name: buttonGroup,
 				label: localize('configurePython.newInstall', "New Python installation"),
 				checked: !useExistingPython
@@ -216,7 +216,7 @@ export class ConfigurePathPage extends BasePage {
 		});
 
 		this.existingInstallButton = modelBuilder.radioButton()
-			.withProperties<azdata.RadioButtonProperties>({
+			.withProps({
 				name: buttonGroup,
 				label: localize('configurePython.existingInstall', "Use existing Python installation"),
 				checked: useExistingPython

extensions/notebook/src/dialog/configurePython/pickPackagesPage.ts

@@ -35,12 +35,12 @@ export class PickPackagesPage extends BasePage {
 	public async initialize(): Promise<boolean> {
 		if (this.model.kernelName) {
 			// Wizard was started for a specific kernel, so don't populate any other options
-			this.kernelLabel = this.view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+			this.kernelLabel = this.view.modelBuilder.text().withProps({
 				value: this.model.kernelName
 			}).component();
 		} else {
 			let dropdownValues = [python3DisplayName, pysparkDisplayName, sparkScalaDisplayName, sparkRDisplayName, powershellDisplayName, allKernelsName];
-			this.kernelDropdown = this.view.modelBuilder.dropDown().withProperties<azdata.DropDownProperties>({
+			this.kernelDropdown = this.view.modelBuilder.dropDown().withProps({
 				value: dropdownValues[0],
 				values: dropdownValues,
 				width: '300px'
@@ -53,7 +53,7 @@ export class PickPackagesPage extends BasePage {
 		let nameColumn = localize('configurePython.pkgNameColumn', "Name");
 		let existingVersionColumn = localize('configurePython.existingVersionColumn', "Existing Version");
 		let requiredVersionColumn = localize('configurePython.requiredVersionColumn', "Required Version");
-		this.requiredPackagesTable = this.view.modelBuilder.declarativeTable().withProperties<azdata.DeclarativeTableProperties>({
+		this.requiredPackagesTable = this.view.modelBuilder.declarativeTable().withProps({
 			columns: [{
 				displayName: nameColumn,
 				ariaLabel: nameColumn,

extensions/notebook/src/dialog/createBookDialog.ts

@@ -68,7 +68,7 @@ export class CreateBookDialog {
 			this.view = view;
 
 			const jupyterBookDocumentation = this.view.modelBuilder.hyperlink()
-				.withProperties<azdata.HyperlinkComponentProperties>({
+				.withProps({
 					label: loc.learnMore,
 					url: 'https://jupyterbook.org/intro.html',
 					CSSStyles: { 'margin-bottom': '0px', 'margin-top': '0px', 'font-size': 'small' }

extensions/notebook/src/dialog/remoteBookDialog.ts

@@ -60,7 +60,7 @@ export class RemoteBookDialog {
 				fireOnTextChange: true,
 			}).component();
 
-			this.searchButton = this.view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+			this.searchButton = this.view.modelBuilder.button().withProps({
 				label: loc.search,
 				title: loc.search,
 				width: '200px',

extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/deployAzureSQLDBWizardModel.ts

@@ -111,7 +111,7 @@ export class DeployAzureSQLDBWizardModel extends ResourceTypeModel {
 		});
 
 		const labelText = view.modelBuilder.text()
-			.withProperties<azdata.TextComponentProperties>(
+			.withProps(
 				{
 					value: title,
 					width: '250px',

extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/azureSettingsPage.ts

@@ -166,12 +166,12 @@ export class AzureSettingsPage extends BasePage {
 			this.populateAzureSubscriptionsDropdown();
 		});
 
-		this.signInButton = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		this.signInButton = view.modelBuilder.button().withProps({
 			label: localizedConstants.signIn,
 			width: '100px',
 			secondary: true
 		}).component();
-		this.refreshButton = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		this.refreshButton = view.modelBuilder.button().withProps({
 			label: localizedConstants.refresh,
 			width: '100px',
 			secondary: true

extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/summaryPage.ts

@@ -206,7 +206,7 @@ export class AzureSQLDBSummaryPage extends BasePage {
 	public createSummaryRow(view: azdata.ModelView, title: string, textComponent: azdata.TextComponent): azdata.FlexContainer {
 
 		const labelText = view.modelBuilder.text()
-			.withProperties<azdata.TextComponentProperties>(
+			.withProps(
 				{
 					value: title,
 					width: '250px',

extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/deployAzureSQLVMWizardModel.ts

@@ -146,7 +146,7 @@ export class DeployAzureSQLVMWizardModel extends ResourceTypeModel {
 		});
 
 		const labelText = view.modelBuilder.text()
-			.withProperties<azdata.TextComponentProperties>(
+			.withProps(
 				{
 					value: title,
 					width: '250px',

extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/azureSettingsPage.ts

@@ -110,12 +110,12 @@ export class AzureSettingsPage extends BasePage {
 			this.populateAzureSubscriptionsDropdown();
 		});
 
-		this.signInButton = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		this.signInButton = view.modelBuilder.button().withProps({
 			label: localizedConstants.signIn,
 			width: '100px',
 			secondary: true
 		}).component();
-		this.refreshButton = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		this.refreshButton = view.modelBuilder.button().withProps({
 			label: localizedConstants.refresh,
 			width: '100px',
 			secondary: true

extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/networkSettingsPage.ts

@@ -212,7 +212,7 @@ export class NetworkSettingsPage extends BasePage {
 
 	private async createSubnetDropdown(view: azdata.ModelView) {
 
-		this._newSubnetCheckbox = view.modelBuilder.checkBox().withProperties<azdata.CheckBoxProperties>({
+		this._newSubnetCheckbox = view.modelBuilder.checkBox().withProps({
 			label: constants.NetworkSettingsNewSubnet,
 			checked: false
 		}).component();

extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/summaryPage.ts

@@ -306,7 +306,7 @@ export class AzureSQLVMSummaryPage extends BasePage {
 	public createSummaryRow(view: azdata.ModelView, title: string, textComponent: azdata.TextComponent): azdata.FlexContainer {
 
 		const labelText = view.modelBuilder.text()
-			.withProperties<azdata.TextComponentProperties>(
+			.withProps(
 				{
 					value: title,
 					width: '250px',

extensions/resource-deployment/src/ui/deployClusterWizard/pages/deploymentProfilePage.ts

@@ -31,11 +31,11 @@ export class DeploymentProfilePage extends ResourceTypePage {
 	public initialize(): void {
 		this.pageObject.registerContent(async (view: azdata.ModelView): Promise<void> => {
 			this._container = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column' }).component();
-			const hintText = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+			const hintText = view.modelBuilder.text().withProps({
 				value: localize('deployCluster.ProfileHintText', "Note: The settings of the deployment profile can be customized in later steps.")
 			}).component();
 			const container = createFlexContainer(view, [this._container, hintText], false);
-			this._loadingComponent = view.modelBuilder.loadingComponent().withItem(container).withProperties<azdata.LoadingComponentProperties>({
+			this._loadingComponent = view.modelBuilder.loadingComponent().withItem(container).withProps({
 				loading: true,
 				loadingText: localize('deployCluster.loadingProfiles', "Loading profiles"),
 				loadingCompletedText: localize('deployCluster.loadingProfilesCompleted', "Loading profiles completed"),
@@ -121,7 +121,7 @@ export class DeploymentProfilePage extends ResourceTypePage {
 		const groupName = 'profileGroup';
 		const radioButtons = profiles.map(profile => {
 			const checked = profile.profileName === defaultProfile;
-			const radioButton = view.modelBuilder.radioButton().withProperties<azdata.RadioButtonProperties>({
+			const radioButton = view.modelBuilder.radioButton().withProps({
 				label: profile.profileName,
 				checked: checked,
 				name: groupName
@@ -147,7 +147,7 @@ export class DeploymentProfilePage extends ResourceTypePage {
 			[localize('deployCluster.hdfsLabel', "HDFS + Spark"), ...profiles.map(profile => profile.hdfsReplicas.toString())]
 		];
 
-		return view.modelBuilder.table().withProperties<azdata.TableComponentProperties>({
+		return view.modelBuilder.table().withProps({
 			columns: [this.createDescriptionColumn(localize('deployCluster.ServiceName', "Service")), ...this.createProfileColumns(profiles)],
 			data: data,
 			title: serviceScaleTableTitle,
@@ -162,7 +162,7 @@ export class DeploymentProfilePage extends ResourceTypePage {
 			[localize('deployCluster.dataStorageType', "Data"), ...profiles.map(profile => profile.controllerDataStorageSize.toString())],
 			[localize('deployCluster.logsStorageType', "Logs"), ...profiles.map(profile => profile.controllerLogsStorageSize.toString())]
 		];
-		return view.modelBuilder.table().withProperties<azdata.TableComponentProperties>({
+		return view.modelBuilder.table().withProps({
 			columns: [this.createDescriptionColumn(localize('deployCluster.StorageType', "Storage type")), ...this.createProfileColumns(profiles)],
 			data: data,
 			title: storageTableTitle,
@@ -184,7 +184,7 @@ export class DeploymentProfilePage extends ResourceTypePage {
 			data.push([localize('deployCluster.hadr', "High Availability"), ...profiles.map(profile => profile.sqlServerReplicas > 1 ? YesText : NoText)]);
 		}
 
-		return view.modelBuilder.table().withProperties<azdata.TableComponentProperties>({
+		return view.modelBuilder.table().withProps({
 			columns: [this.createDescriptionColumn(localize('deployCluster.featureText', "Feature")), ...this.createProfileColumns(profiles)],
 			data: data,
 			title: featureTableTitle,

extensions/resource-deployment/src/ui/deployClusterWizard/pages/serviceSettingsPage.ts

@@ -302,7 +302,7 @@ export class ServiceSettingsPage extends ResourceTypePage {
 		this.onNewInputComponentCreated(VariableNames.SQLServerLogsStorageSize_VariableName, sqlServerMasterLogsStorageClaimSizeInputInfo);
 
 		const storageSettingTable = view.modelBuilder.declarativeTable()
-			.withProperties<azdata.DeclarativeTableProperties>(
+			.withProps(
 				{
 					columns: [
 						this.createStorageSettingColumn(localize('deployCluster.ServiceName', "Service name"), false),

extensions/resource-deployment/src/ui/deployClusterWizard/pages/summaryPage.ts

@@ -358,7 +358,7 @@ export class SummaryPage extends ResourceTypePage {
 		};
 
 		const storageTableTitle = localize('deployCluster.StorageSettings', "Storage settings");
-		const storageTable = this.view.modelBuilder.table().withProperties<azdata.TableComponentProperties>({
+		const storageTable = this.view.modelBuilder.table().withProps({
 			title: storageTableTitle,
 			ariaLabel: storageTableTitle,
 			data: [

extensions/resource-deployment/src/ui/deployClusterWizard/pages/targetClusterPage.ts

@@ -96,7 +96,7 @@ export class TargetClusterContextPage extends ResourceTypePage {
 		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();
+		this.existingClusterControl = this.view!.modelBuilder.divContainer().withProps({ clickable: false }).component();
 		let clusterContextContainer = this.view!.modelBuilder.flexContainer().withLayout({ flexFlow: 'row', alignItems: 'start' }).component();
 		clusterContextContainer.addItem(this.clusterContextsLabel, { flex: '0 0 auto' });
 		clusterContextContainer.addItem(this.clusterContextLoadingComponent, { flex: '0 0 auto', CSSStyles: { 'width': '400px', 'margin-left': '10px', 'margin-top': '10px' } });
@@ -150,7 +150,7 @@ export class TargetClusterContextPage extends ResourceTypePage {
 		if (clusterContexts.length !== 0) {
 			self.wizard.model.setPropertyValue(KubeConfigPath_VariableName, configPath);
 			let options = clusterContexts.map(clusterContext => {
-				let option = this.view!.modelBuilder.radioButton().withProperties<azdata.RadioButtonProperties>({
+				let option = this.view!.modelBuilder.radioButton().withProps({
 					label: clusterContext.name,
 					checked: clusterContext.isCurrentContext,
 					name: ClusterRadioButtonGroupName

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

@@ -192,7 +192,7 @@ function createInputBoxField({ context, inputBoxType = 'text' }: { context: Fiel
 }
 
 export function createInputBoxInputInfo(view: azdata.ModelView, inputInfo: InputBoxInfo): InputComponentInfo<azdata.InputBoxComponent> {
-	const component = view.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({
+	const component = view.modelBuilder.inputBox().withProps({
 		value: inputInfo.defaultValue,
 		ariaLabel: inputInfo.ariaLabel,
 		inputType: inputInfo.type || 'text',
@@ -220,7 +220,7 @@ export function createLabel(view: azdata.ModelView, info: { text: string, descri
 		}
 	}
 
-	const text = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+	const text = view.modelBuilder.text().withProps({
 		value: info.text,
 		description: info.description,
 		requiredIndicator: info.required,
@@ -252,7 +252,7 @@ export function createCheckboxInputInfo(view: azdata.ModelView, info: { initialV
 	};
 }
 export function createCheckbox(view: azdata.ModelView, info: { initialValue: boolean, label: string, required?: boolean }): azdata.CheckBoxComponent {
-	return view.modelBuilder.checkBox().withProperties<azdata.CheckBoxProperties>({
+	return view.modelBuilder.checkBox().withProps({
 		checked: info.initialValue,
 		required: info.required,
 		label: info.label
@@ -260,7 +260,7 @@ export function createCheckbox(view: azdata.ModelView, info: { initialValue: boo
 }
 
 export function createDropdownInputInfo(view: azdata.ModelView, info: { defaultValue?: string | azdata.CategoryValue, values?: string[] | azdata.CategoryValue[], width?: string, editable?: boolean, required?: boolean, label: string }): InputComponentInfo<azdata.DropDownComponent> {
-	const dropdown = view.modelBuilder.dropDown().withProperties<azdata.DropDownProperties>({
+	const dropdown = view.modelBuilder.dropDown().withProps({
 		values: info.values,
 		value: info.defaultValue,
 		width: info.width,
@@ -512,7 +512,7 @@ export function createFlexContainer(view: azdata.ModelView, items: azdata.Compon
 	if (alignItems) {
 		flexLayout.alignItems = alignItems;
 	}
-	return view.modelBuilder.flexContainer().withItems(items, itemsStyle).withLayout(flexLayout).withProperties<azdata.ComponentProperties>({ CSSStyles: cssStyles || {} }).component();
+	return view.modelBuilder.flexContainer().withItems(items, itemsStyle).withLayout(flexLayout).withProps({ CSSStyles: cssStyles || {} }).component();
 }
 
 export function createGroupContainer(view: azdata.ModelView, items: azdata.Component[], layout: azdata.GroupLayout): azdata.GroupContainer {
@@ -771,7 +771,7 @@ function processPasswordField(context: FieldContext): void {
 	if (context.fieldInfo.confirmationRequired) {
 		const passwordNotMatchMessage = getPasswordMismatchMessage(context.fieldInfo.label);
 		const confirmPasswordLabel = createLabel(context.view, { text: context.fieldInfo.confirmationLabel!, required: true, width: context.fieldInfo.labelWidth, cssStyles: context.fieldInfo.labelCSSStyles });
-		const confirmPasswordInput = context.view.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({
+		const confirmPasswordInput = context.view.modelBuilder.inputBox().withProps({
 			ariaLabel: context.fieldInfo.confirmationLabel,
 			inputType: 'password',
 			required: true,

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

@@ -13,7 +13,7 @@ export class RadioGroupLoadingComponentBuilder implements azdata.ComponentBuilde
 	private _onValueChangedEmitter: vscode.EventEmitter<void> = new vscode.EventEmitter();
 	private _currentRadioOption!: azdata.RadioButtonComponent;
 	constructor(private _view: azdata.ModelView, private _onNewDisposableCreated: (disposable: vscode.Disposable) => void, private _fieldInfo: FieldInfo) {
-		this._optionsDivContainer = this._view!.modelBuilder.divContainer().withProperties<azdata.DivContainerProperties>({ clickable: false }).component();
+		this._optionsDivContainer = this._view!.modelBuilder.divContainer().withProps({ clickable: false }).component();
 		this._optionsLoadingBuilder = this._view!.modelBuilder.loadingComponent().withItem(this._optionsDivContainer);
 	}
 
@@ -47,7 +47,7 @@ export class RadioGroupLoadingComponentBuilder implements azdata.ComponentBuilde
 				const option: azdata.CategoryValue = (typeof op === 'string')
 					? { name: op, displayName: op }
 					: op as azdata.CategoryValue;
-				const radioOption = this._view!.modelBuilder.radioButton().withProperties<azdata.RadioButtonProperties>({
+				const radioOption = this._view!.modelBuilder.radioButton().withProps({
 					label: option.displayName,
 					value: option.name,
 					checked: option.displayName === defaultValue,

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

@@ -48,7 +48,7 @@ export class ResourceTypePickerDialog extends DialogBase {
 				.sort((a: ResourceType, b: ResourceType) => {
 					return (a.displayIndex || Number.MAX_VALUE) - (b.displayIndex || Number.MAX_VALUE);
 				});
-			this._cardGroup = view.modelBuilder.radioCardGroup().withProperties<azdata.RadioCardGroupComponentProperties>({
+			this._cardGroup = view.modelBuilder.radioCardGroup().withProps({
 				cards: this._resourceTypes.map((resourceType) => {
 					return this.createOrGetCard(resourceType);
 				}),

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

@@ -122,7 +122,7 @@ export class ToolsAndEulaPage extends ResourceTypePage {
 				value: loc.discoverPathOrAdditionalInformationText,
 				width: 435
 			};
-			this._toolsTable = view.modelBuilder.table().withProperties<azdata.TableComponentProperties>({
+			this._toolsTable = view.modelBuilder.table().withProps({
 				data: [],
 				columns: [toolColumn, descriptionColumn, installStatusColumn, versionColumn, minVersionColumn, installedPathColumn],
 				width: tableWidth,
@@ -131,7 +131,7 @@ export class ToolsAndEulaPage extends ResourceTypePage {
 
 			const toolsTableWrapper = view.modelBuilder.divContainer().withLayout({ width: tableWidth }).component();
 			toolsTableWrapper.addItem(this._toolsTable, { CSSStyles: { 'border-left': '1px solid silver', 'border-top': '1px solid silver' } });
-			this._toolsLoadingComponent = view.modelBuilder.loadingComponent().withItem(toolsTableWrapper).withProperties<azdata.LoadingComponentProperties>({
+			this._toolsLoadingComponent = view.modelBuilder.loadingComponent().withItem(toolsTableWrapper).withProps({
 				loadingCompletedText: localize('deploymentDialog.loadingRequiredToolsCompleted', "Loading required tools information completed"),
 				loadingText: localize('deploymentDialog.loadingRequiredTools', "Loading required tools information"),
 				showText: true
@@ -205,13 +205,13 @@ export class ToolsAndEulaPage extends ResourceTypePage {
 						if (optionValueFilter) {
 							optionValues = optionValues.filter(optionValue => optionValueFilter.includes(optionValue.name));
 						}
-						const optionLabel = this.view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+						const optionLabel = this.view.modelBuilder.text().withProps({
 							value: option.displayName,
 						}).component();
 						optionLabel.width = '150px';
 
 						const optionSelectedValue = (this.wizard.toolsEulaPagePresets) ? this.wizard.toolsEulaPagePresets[index] : optionValues[0];
-						const optionSelectBox = this.view.modelBuilder.dropDown().withProperties<azdata.DropDownProperties>({
+						const optionSelectBox = this.view.modelBuilder.dropDown().withProps({
 							values: optionValues,
 							value: optionSelectedValue,
 							width: '300px',
@@ -260,11 +260,11 @@ export class ToolsAndEulaPage extends ResourceTypePage {
 
 
 	private createAgreementCheckbox(agreementInfo: AgreementInfo): azdata.FlexContainer {
-		this._agreementCheckBox = this.view.modelBuilder.checkBox().withProperties<azdata.CheckBoxProperties>({
+		this._agreementCheckBox = this.view.modelBuilder.checkBox().withProps({
 			ariaLabel: this.getAgreementDisplayText(agreementInfo),
 			required: true
 		}).component();
-		const text = this.view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		const text = this.view.modelBuilder.text().withProps({
 			value: agreementInfo.template,
 			links: agreementInfo.links,
 			requiredIndicator: true

extensions/schema-compare/src/schemaCompareMainWindow.ts

@@ -163,13 +163,13 @@ export class SchemaCompareMainWindow {
 
 				this.sourceName = getEndpointName(this.sourceEndpointInfo);
 				this.targetName = ' ';
-				this.sourceNameComponent = this.view.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({
+				this.sourceNameComponent = this.view.modelBuilder.inputBox().withProps({
 					value: this.sourceName,
 					title: this.sourceName,
 					enabled: false
 				}).component();
 
-				this.targetNameComponent = this.view.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({
+				this.targetNameComponent = this.view.modelBuilder.inputBox().withProps({
 					value: this.targetName,
 					title: this.targetName,
 					enabled: false

extensions/sql-assessment/src/assessmentResultGrid.ts

@@ -58,7 +58,7 @@ export class AssessmentResultGrid implements vscode.Disposable {
 		};
 
 		this.table = view.modelBuilder.table()
-			.withProperties<azdata.TableComponentProperties>({
+			.withProps({
 				data: [],
 				columns: [
 					{
@@ -214,34 +214,34 @@ export class AssessmentResultGrid implements vscode.Disposable {
 		const flexSettings = '0 1 auto';
 
 
-		this.checkNamePlaceholder = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		this.checkNamePlaceholder = view.modelBuilder.text().withProps({
 			CSSStyles: { ...cssNoMarginFloatLeft, 'font-weight': 'bold', 'font-size': '16px', 'padding-bottom': '5px', 'display': 'block' }
 		}).component();
-		this.checkDescriptionPlaceholder = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		this.checkDescriptionPlaceholder = view.modelBuilder.text().withProps({
 			CSSStyles: { ...cssNoMarginFloatLeft, 'padding-right': '2px' }
 		}).component();
-		this.clickHereLabel = view.modelBuilder.hyperlink().withProperties<azdata.HyperlinkComponentProperties>({
+		this.clickHereLabel = view.modelBuilder.hyperlink().withProps({
 			label: localize('asmt.details.clickHere', "Click here"),
 			url: '',
 			CSSStyles: cssNoMarginFloatLeft
 		}).component();
-		const toLearnMoreText = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		const toLearnMoreText = view.modelBuilder.text().withProps({
 			CSSStyles: { ...cssNoMarginFloatLeft, 'padding-left': '2px' },
 			value: localize('asmt.details.toLearnMore', " to learn more.")
 		}).component();
-		const tagsCaption = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		const tagsCaption = view.modelBuilder.text().withProps({
 			CSSStyles: cssBlockCaption,
 			value: LocalizedStrings.TAGS_COLUMN_NAME
 		}).component();
-		this.tagsPlaceholder = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		this.tagsPlaceholder = view.modelBuilder.text().withProps({
 			CSSStyles: cssNoMarginFloatLeft
 		}).component();
 
-		this.asmtMessagePlaceholder = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		this.asmtMessagePlaceholder = view.modelBuilder.text().withProps({
 			CSSStyles: cssNoMarginFloatLeft
 		}).component();
 
-		this.descriptionCaption = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		this.descriptionCaption = view.modelBuilder.text().withProps({
 			CSSStyles: cssBlockCaption,
 			value: localize('asmt.details.ruleDescription', "Rule Description")
 		}).component();
@@ -251,7 +251,7 @@ export class AssessmentResultGrid implements vscode.Disposable {
 		);
 
 		this.asmtMessageDiv = view.modelBuilder.divContainer().withItems([
-			view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+			view.modelBuilder.text().withProps({
 				CSSStyles: cssBlockCaption,
 				value: localize('asmt.details.recommendation', "Recommendation")
 			}).component(),

extensions/sql-assessment/src/tabs/assessmentMainTab.ts

@@ -111,7 +111,7 @@ export class SqlAssessmentMainTab extends SqlAssessmentTab {
 		const maxNameLength: number = 40;
 
 		const btnInvokeAssessment = view.modelBuilder.button()
-			.withProperties<azdata.ButtonProperties>({
+			.withProps({
 				label: limitLongName(this.invokeAssessmentLabel, maxNameLength),
 				iconPath: targetIconPath,
 				iconHeight: iconSize,
@@ -121,7 +121,7 @@ export class SqlAssessmentMainTab extends SqlAssessmentTab {
 			}).component();
 		const btnInvokeAssessmentLoading = view.modelBuilder.loadingComponent()
 			.withItem(btnInvokeAssessment)
-			.withProperties<azdata.LoadingComponentProperties>({
+			.withProps({
 				loadingText: limitLongName(this.invokeAssessmentLabel, maxNameLength),
 				showText: true,
 				loading: false
@@ -145,7 +145,7 @@ export class SqlAssessmentMainTab extends SqlAssessmentTab {
 		}));
 
 		const btnGetAssessmentItems = view.modelBuilder.button()
-			.withProperties<azdata.ButtonProperties>({
+			.withProps({
 				label: limitLongName(this.getItemsLabel, maxNameLength),
 				iconPath: targetIconPath,
 				iconHeight: iconSize,
@@ -154,7 +154,7 @@ export class SqlAssessmentMainTab extends SqlAssessmentTab {
 			}).component();
 		const btnGetAssessmentItemsLoading = view.modelBuilder.loadingComponent()
 			.withItem(btnGetAssessmentItems)
-			.withProperties<azdata.LoadingComponentProperties>({
+			.withProps({
 				loadingText: limitLongName(this.getItemsLabel, maxNameLength),
 				showText: true,
 				loading: false
@@ -178,7 +178,7 @@ export class SqlAssessmentMainTab extends SqlAssessmentTab {
 		}));
 
 		this.btnExportAsScript = view.modelBuilder.button()
-			.withProperties<azdata.ButtonProperties>({
+			.withProps({
 				label: localize('btnExportAsScript', "Export as script"),
 				enabled: false,
 				iconPath: {
@@ -194,7 +194,7 @@ export class SqlAssessmentMainTab extends SqlAssessmentTab {
 		}));
 
 		this.btnHTMLExport = view.modelBuilder.button()
-			.withProperties<azdata.ButtonProperties>({
+			.withProps({
 				label: localize('btnGeneratehtmlreport', "Create HTML Report"),
 				enabled: false,
 				iconPath: {
@@ -230,7 +230,7 @@ export class SqlAssessmentMainTab extends SqlAssessmentTab {
 
 
 		let btnViewSamples = view.modelBuilder.button()
-			.withProperties<azdata.ButtonProperties>({
+			.withProps({
 				label: localize('btnViewSamplesShort', "View all on GitHub"),
 				iconPath: {
 					dark: this.extensionContext.asAbsolutePath('resources/dark/configuredashboard_inverse.svg'),
@@ -248,7 +248,7 @@ export class SqlAssessmentMainTab extends SqlAssessmentTab {
 		}));
 
 		let btnAPIDetails = view.modelBuilder.button()
-			.withProperties<azdata.ButtonProperties>({
+			.withProps({
 				label: LocalizedStrings.SECTION_TITLE_API,
 				iconPath: {
 					dark: this.extensionContext.asAbsolutePath('resources/dark/status_info.svg'),

extensions/sql-assessment/src/tabs/historyTab.ts

@@ -45,12 +45,12 @@ export class SqlAssessmentHistoryTab extends SqlAssessmentTab {
 				height: '100%'
 			}).component();
 
-		const title = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		const title = view.modelBuilder.text().withProps({
 			value: '',
 			CSSStyles: { 'font-weight': 'bold', 'margin-block-start': '0px', 'margin-block-end': '0px', 'font-size': '20px', 'padding-left': '20px', 'padding-bottom': '20px' }
 		}).component();
 
-		const backLink = view.modelBuilder.hyperlink().withProperties<azdata.HyperlinkComponentProperties>({
+		const backLink = view.modelBuilder.hyperlink().withProps({
 			label: localize('asmt.history.back', "<< Back"),
 			url: '',
 			CSSStyles: { 'text-decoration': 'none', 'width': '150px' }
@@ -65,7 +65,7 @@ export class SqlAssessmentHistoryTab extends SqlAssessmentTab {
 		const infoPanel = view.modelBuilder.flexContainer()
 			.withLayout({
 				flexFlow: 'row'
-			}).withProperties<azdata.ComponentProperties>({
+			}).withProps({
 				CSSStyles: {
 					'padding-left': '15px'
 				}
@@ -114,7 +114,7 @@ export class SqlAssessmentHistoryTab extends SqlAssessmentTab {
 	private async createHistorySummaryTable(view: azdata.ModelView): Promise<azdata.TableComponent> {
 		const cssHeader = 'no-borders align-with-header';
 		return view.modelBuilder.table()
-			.withProperties<azdata.TableComponentProperties>({
+			.withProps({
 				data: [],
 				columns: [
 					{ value: localize('asmt.history.summaryAsmtDate', "Assessment Date"), headerCssClass: cssHeader, width: 125 },

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

@@ -496,7 +496,7 @@ export class AddDatabaseReferenceDialog {
 	}
 
 	private createLabel(value: string, required: boolean = false): azdataType.TextComponent {
-		const label = this.view!.modelBuilder.text().withProperties<azdataType.TextComponentProperties>({
+		const label = this.view!.modelBuilder.text().withProps({
 			value: value,
 			width: cssStyles.addDatabaseReferenceDialogLabelWidth,
 			requiredIndicator: required

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

@@ -132,7 +132,7 @@ export class CreateProjectFromDatabaseDialog {
 		const sourceConnectionTextBox = this.createSourceConnectionComponent(view);
 		const selectConnectionButton: azdataType.Component = this.createSelectConnectionButton(view);
 
-		const serverLabel = view.modelBuilder.text().withProperties<azdataType.TextComponentProperties>({
+		const serverLabel = view.modelBuilder.text().withProps({
 			value: constants.server,
 			requiredIndicator: true,
 			width: cssStyles.createProjectFromDatabaseLabelWidth
@@ -156,7 +156,7 @@ export class CreateProjectFromDatabaseDialog {
 			this.tryEnableCreateButton();
 		});
 
-		const databaseLabel = view.modelBuilder.text().withProperties<azdataType.TextComponentProperties>({
+		const databaseLabel = view.modelBuilder.text().withProps({
 			value: constants.databaseNameLabel,
 			requiredIndicator: true,
 			width: cssStyles.createProjectFromDatabaseLabelWidth
@@ -240,7 +240,7 @@ export class CreateProjectFromDatabaseDialog {
 	}
 
 	private createProjectNameRow(view: azdataType.ModelView): azdataType.FlexContainer {
-		this.projectNameTextBox = view.modelBuilder.inputBox().withProperties<azdataType.InputBoxProperties>({
+		this.projectNameTextBox = view.modelBuilder.inputBox().withProps({
 			ariaLabel: constants.projectNamePlaceholderText,
 			placeHolder: constants.projectNamePlaceholderText,
 			required: true,
@@ -253,7 +253,7 @@ export class CreateProjectFromDatabaseDialog {
 			this.tryEnableCreateButton();
 		});
 
-		const projectNameLabel = view.modelBuilder.text().withProperties<azdataType.TextComponentProperties>({
+		const projectNameLabel = view.modelBuilder.text().withProps({
 			value: constants.projectNameLabel,
 			requiredIndicator: true,
 			width: cssStyles.createProjectFromDatabaseLabelWidth
@@ -279,7 +279,7 @@ export class CreateProjectFromDatabaseDialog {
 			this.tryEnableCreateButton();
 		});
 
-		const projectLocationLabel = view.modelBuilder.text().withProperties<azdataType.TextComponentProperties>({
+		const projectLocationLabel = view.modelBuilder.text().withProps({
 			value: constants.projectLocationLabel,
 			requiredIndicator: true,
 			width: cssStyles.createProjectFromDatabaseLabelWidth
@@ -292,7 +292,7 @@ export class CreateProjectFromDatabaseDialog {
 	}
 
 	private createBrowseFolderButton(view: azdataType.ModelView): azdataType.ButtonComponent {
-		const browseFolderButton = view.modelBuilder.button().withProperties<azdataType.ButtonProperties>({
+		const browseFolderButton = view.modelBuilder.button().withProps({
 			ariaLabel: constants.browseButtonText,
 			iconPath: IconPathHelper.folder_blue,
 			height: '18px',
@@ -331,7 +331,7 @@ export class CreateProjectFromDatabaseDialog {
 			this.tryEnableCreateButton();
 		});
 
-		const folderStructureLabel = view.modelBuilder.text().withProperties<azdataType.TextComponentProperties>({
+		const folderStructureLabel = view.modelBuilder.text().withProps({
 			value: constants.folderStructureLabel,
 			requiredIndicator: true,
 			width: cssStyles.createProjectFromDatabaseLabelWidth

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

@@ -368,7 +368,7 @@ export class PublishDatabaseDialog {
 			width: cssStyles.publishDialogTextboxWidth
 		}).component();
 
-		const profileLabel = view.modelBuilder.text().withProperties<azdataType.TextComponentProperties>({
+		const profileLabel = view.modelBuilder.text().withProps({
 			value: constants.profile,
 			width: cssStyles.publishDialogLabelWidth
 		}).component();
@@ -383,7 +383,7 @@ export class PublishDatabaseDialog {
 		this.targetConnectionTextBox = this.createTargetConnectionComponent(view);
 		const selectConnectionButton: azdataType.Component = this.createSelectConnectionButton(view);
 
-		const serverLabel = view.modelBuilder.text().withProperties<azdataType.TextComponentProperties>({
+		const serverLabel = view.modelBuilder.text().withProps({
 			value: constants.server,
 			requiredIndicator: true,
 			width: cssStyles.publishDialogLabelWidth
@@ -410,7 +410,7 @@ export class PublishDatabaseDialog {
 			this.tryEnableGenerateScriptAndOkButtons();
 		});
 
-		const databaseLabel = view.modelBuilder.text().withProperties<azdataType.TextComponentProperties>({
+		const databaseLabel = view.modelBuilder.text().withProps({
 			value: constants.databaseNameLabel,
 			requiredIndicator: true,
 			width: cssStyles.publishDialogLabelWidth
@@ -424,7 +424,7 @@ export class PublishDatabaseDialog {
 	private createSqlCmdTable(view: azdataType.ModelView): azdataType.DeclarativeTableComponent {
 		this.sqlCmdVars = { ...this.project.sqlCmdVariables };
 
-		const table = view.modelBuilder.declarativeTable().withProperties<azdataType.DeclarativeTableProperties>({
+		const table = view.modelBuilder.declarativeTable().withProps({
 			ariaLabel: constants.sqlCmdTableLabel,
 			dataValues: this.convertSqlCmdVarsToTableFormat(this.sqlCmdVars),
 			columns: [

extensions/sql-migration/src/dialog/assessmentResults/sqlAssessmentResult.ts

@@ -16,7 +16,7 @@ export class SqlAssessmentResult {
 	}
 
 	private createTitleComponent(view: azdata.ModelView): azdata.TextComponent {
-		const title = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		const title = view.modelBuilder.text().withProps({
 			value: 'Azure SQL Managed Instance does not support multiple log files', // TODO: Get this string from the actual results
 		});
 
@@ -24,7 +24,7 @@ export class SqlAssessmentResult {
 	}
 
 	private createImpactComponent(view: azdata.ModelView): azdata.TextComponent {
-		const impact = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		const impact = view.modelBuilder.text().withProps({
 			title: 'Impact', // TODO localize
 			value: 'SQL Server allows a database to log transactions across multiple files. This databases uses multiple log files' // TODO: Get this string from the actual results
 		});
@@ -33,7 +33,7 @@ export class SqlAssessmentResult {
 	}
 
 	private createRecommendationComponent(view: azdata.ModelView): azdata.TextComponent {
-		const recommendation = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		const recommendation = view.modelBuilder.text().withProps({
 			title: 'Recommendation', // TODO localize
 			value: 'Azure SQL Managed Instance allows a single log file per database only. Please delete all but one of the log files before migrating this database.' // TODO: Get this string from the actual results
 		});
@@ -42,7 +42,7 @@ export class SqlAssessmentResult {
 	}
 
 	private createMoreInfoComponent(view: azdata.ModelView): azdata.TextComponent {
-		const moreInfo = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		const moreInfo = view.modelBuilder.text().withProps({
 			title: 'More info', // TODO localize
 			value: '{0}',
 			links: [
@@ -57,7 +57,7 @@ export class SqlAssessmentResult {
 	}
 
 	private createImpactedObjectsComponent(view: azdata.ModelView): azdata.TableComponent {
-		const impactedObjects = view.modelBuilder.table().withProperties<azdata.TableComponentProperties>({
+		const impactedObjects = view.modelBuilder.table().withProps({
 			title: 'Impacted Objects',
 			columns: [
 				'Type', // TODO localize

extensions/sql-migration/src/dialog/assessmentResults/sqlAssessmentResultsList.ts

@@ -14,7 +14,7 @@ export class SqlAssessmentResultList {
 	}
 
 	private createListComponent(view: azdata.ModelView): azdata.ListBoxComponent {
-		const list = view.modelBuilder.listBox().withProperties<azdata.ListBoxProperties>({
+		const list = view.modelBuilder.listBox().withProps({
 			values: [
 				'Filestream not supported in Azure SQL Managed Instance',
 				'Number of Log files per database something something',

extensions/sql-migration/src/dialog/createSqlMigrationService/createSqlMigrationServiceDialog.ts

@@ -543,7 +543,7 @@ export class CreateSqlMigrationServiceDialog {
 		const location = this._model._targetServerInstance.location;
 		const keys = await getSqlMigrationServiceAuthKeys(this._model._azureAccount, subscription, resourceGroup, location, this._createdMigrationService!.name);
 
-		this._copyKey1Button = this._view.modelBuilder.button().withProperties<azdata.ComponentWithIconProperties>({
+		this._copyKey1Button = this._view.modelBuilder.button().withProps({
 			title: constants.COPY_KEY1,
 			iconPath: IconPathHelper.copy,
 			ariaLabel: constants.COPY_KEY1,
@@ -554,7 +554,7 @@ export class CreateSqlMigrationServiceDialog {
 			vscode.window.showInformationMessage(constants.SERVICE_KEY1_COPIED_HELP);
 		});
 
-		this._copyKey2Button = this._view.modelBuilder.button().withProperties<azdata.ComponentWithIconProperties>({
+		this._copyKey2Button = this._view.modelBuilder.button().withProps({
 			title: constants.COPY_KEY2,
 			iconPath: IconPathHelper.copy,
 			ariaLabel: constants.COPY_KEY2,
@@ -565,7 +565,7 @@ export class CreateSqlMigrationServiceDialog {
 			vscode.window.showInformationMessage(constants.SERVICE_KEY2_COPIED_HELP);
 		});
 
-		this._refreshKey1Button = this._view.modelBuilder.button().withProperties<azdata.ComponentWithIconProperties>({
+		this._refreshKey1Button = this._view.modelBuilder.button().withProps({
 			title: constants.REFRESH_KEY1,
 			iconPath: IconPathHelper.refresh,
 			ariaLabel: constants.REFRESH_KEY1,
@@ -574,7 +574,7 @@ export class CreateSqlMigrationServiceDialog {
 		this._refreshKey1Button.onDidClick((e) => {//TODO: add refresh logic
 		});
 
-		this._refreshKey2Button = this._view.modelBuilder.button().withProperties<azdata.ComponentWithIconProperties>({
+		this._refreshKey2Button = this._view.modelBuilder.button().withProps({
 			title: constants.REFRESH_KEY2,
 			iconPath: IconPathHelper.refresh,
 			ariaLabel: constants.REFRESH_KEY2,

extensions/sql-migration/src/dialog/sqlMigrationService/sqlMigrationServiceDetailsDialog.ts

@@ -229,7 +229,7 @@ export class SqlMigrationServiceDetailsDialog {
 
 		const copyKey1Button = view.modelBuilder
 			.button()
-			.withProperties<azdata.ComponentWithIconProperties>({
+			.withProps({
 				title: constants.COPY_KEY1,
 				iconPath: IconPathHelper.copy,
 				height: IMAGE_SIZE,
@@ -245,7 +245,7 @@ export class SqlMigrationServiceDetailsDialog {
 
 		const copyKey2Button = view.modelBuilder
 			.button()
-			.withProperties<azdata.ComponentWithIconProperties>({
+			.withProps({
 				title: constants.COPY_KEY2,
 				iconPath: IconPathHelper.copy,
 				height: IMAGE_SIZE,
@@ -261,7 +261,7 @@ export class SqlMigrationServiceDetailsDialog {
 
 		const refreshKey1Button = view.modelBuilder
 			.button()
-			.withProperties<azdata.ComponentWithIconProperties>({
+			.withProps({
 				title: constants.REFRESH_KEY1,
 				iconPath: IconPathHelper.refresh,
 				height: IMAGE_SIZE,
@@ -274,7 +274,7 @@ export class SqlMigrationServiceDetailsDialog {
 
 		const refreshKey2Button = view.modelBuilder
 			.button()
-			.withProperties<azdata.ComponentWithIconProperties>({
+			.withProps({
 				title: constants.REFRESH_KEY2,
 				iconPath: IconPathHelper.refresh,
 				height: IMAGE_SIZE,

extensions/sql-migration/src/wizard/integrationRuntimePage.ts

@@ -312,7 +312,7 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 			}
 		}).component();
 
-		this._copy1 = this._view.modelBuilder.button().withProperties<azdata.ComponentWithIconProperties>({
+		this._copy1 = this._view.modelBuilder.button().withProps({
 			title: constants.COPY_KEY1,
 			iconPath: IconPathHelper.copy,
 			ariaLabel: constants.COPY_KEY1,
@@ -323,7 +323,7 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 			vscode.window.showInformationMessage(constants.SERVICE_KEY1_COPIED_HELP);
 		});
 
-		this._copy2 = this._view.modelBuilder.button().withProperties<azdata.ComponentWithIconProperties>({
+		this._copy2 = this._view.modelBuilder.button().withProps({
 			title: constants.COPY_KEY2,
 			iconPath: IconPathHelper.copy,
 			ariaLabel: constants.COPY_KEY2,
@@ -334,13 +334,13 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
 			vscode.window.showInformationMessage(constants.SERVICE_KEY2_COPIED_HELP);
 		});
 
-		this._refresh1 = this._view.modelBuilder.button().withProperties<azdata.ComponentWithIconProperties>({
+		this._refresh1 = this._view.modelBuilder.button().withProps({
 			title: constants.REFRESH_KEY1,
 			iconPath: IconPathHelper.refresh,
 			ariaLabel: constants.REFRESH_KEY1,
 		}).component();
 
-		this._refresh2 = this._view.modelBuilder.button().withProperties<azdata.ComponentWithIconProperties>({
+		this._refresh2 = this._view.modelBuilder.button().withProps({
 			title: constants.REFRESH_KEY2,
 			iconPath: IconPathHelper.refresh,
 			ariaLabel: constants.REFRESH_KEY2,

extensions/sql-migration/src/wizard/subscriptionSelectionPage.ts

@@ -52,7 +52,7 @@ export class SubscriptionSelectionPage extends MigrationWizardPage {
 	}
 
 	private createAccountDropDown(view: azdata.ModelView): azdata.FormComponent<azdata.DropDownComponent> {
-		const dropDown = view.modelBuilder.dropDown().withProperties<azdata.DropDownProperties>({
+		const dropDown = view.modelBuilder.dropDown().withProps({
 			ariaLabel: SUBSCRIPTION_SELECTION_AZURE_ACCOUNT_TITLE,
 			values: [],
 			editable: true,
@@ -70,7 +70,7 @@ export class SubscriptionSelectionPage extends MigrationWizardPage {
 	}
 
 	private createSubscriptionDropDown(view: azdata.ModelView): azdata.FormComponent<azdata.DropDownComponent> {
-		const dropDown = view.modelBuilder.dropDown().withProperties<azdata.DropDownProperties>({
+		const dropDown = view.modelBuilder.dropDown().withProps({
 			ariaLabel: SUBSCRIPTION_SELECTION_AZURE_SUBSCRIPTION_TITLE,
 			values: [],
 			editable: true,
@@ -88,7 +88,7 @@ export class SubscriptionSelectionPage extends MigrationWizardPage {
 	}
 
 	private createProductDropDown(view: azdata.ModelView): azdata.FormComponent<azdata.DropDownComponent> {
-		const dropDown = view.modelBuilder.dropDown().withProperties<azdata.DropDownProperties>({
+		const dropDown = view.modelBuilder.dropDown().withProps({
 			ariaLabel: SUBSCRIPTION_SELECTION_AZURE_PRODUCT_TITLE,
 			values: [],
 			editable: true,

samples/sqlservices/src/controllers/mainController.ts

@@ -246,7 +246,7 @@ export default class MainController implements vscode.Disposable {
 			light: path.join(__dirname, '..', 'media', 'monitor.svg'),
 			dark: path.join(__dirname, '..', 'media', 'monitor_inverse.svg')
 		};
-		let table = view.modelBuilder.table().withProperties<azdata.TableComponentProperties>({
+		let table = view.modelBuilder.table().withProps({
 			data: [
 				['1', '2', '2', { enabled: false, checked: false },
 					undefined, // for button/hyperlink column, 'undefined' means to use the default information provided by the column definition
@@ -700,7 +700,7 @@ export default class MainController implements vscode.Disposable {
 						})
 						.withItems([
 							view.modelBuilder.card()
-								.withProperties<azdata.CardProperties>({
+								.withProps({
 									label: 'label1',
 									value: 'value1',
 									actions: [{ label: 'action' }]
@@ -712,7 +712,7 @@ export default class MainController implements vscode.Disposable {
 						.withLayout({ flexFlow: 'column' })
 						.withItems([
 							view.modelBuilder.card()
-								.withProperties<azdata.CardProperties>({
+								.withProps({
 									label: 'label2',
 									value: 'value2',
 									actions: [{ label: 'action' }]

samples/sqlservices/src/controllers/modelViewDashboard.ts

@@ -10,7 +10,7 @@ export async function openModelViewDashboard(context: vscode.ExtensionContext):
 	const dashboard = azdata.window.createModelViewDashboard('Test Dashboard');
 	dashboard.registerTabs(async (view: azdata.ModelView) => {
 		// Tab with toolbar
-		const button = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
+		const button = view.modelBuilder.button().withProps({
 			label: 'Add databases tab',
 			iconPath: {
 				light: context.asAbsolutePath('images/compare.svg'),
@@ -22,7 +22,7 @@ export async function openModelViewDashboard(context: vscode.ExtensionContext):
 			orientation: azdata.Orientation.Horizontal
 		}).component();
 
-		const input1 = view.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({ value: 'input 1' }).component();
+		const input1 = view.modelBuilder.inputBox().withProps({ value: 'input 1' }).component();
 		const homeTab: azdata.DashboardTab = {
 			id: 'home',
 			toolbar: toolbar,
@@ -32,8 +32,8 @@ export async function openModelViewDashboard(context: vscode.ExtensionContext):
 		};
 
 		// Tab with nested tabbed Panel
-		const addTabButton = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({ label: 'Add a tab', width: '150px' }).component();
+		const addTabButton = view.modelBuilder.button().withProps({ label: 'Add a tab', width: '150px' }).component();
-		const removeTabButton = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({ label: 'Remove a tab', width: '150px' }).component();
+		const removeTabButton = view.modelBuilder.button().withProps({ label: 'Remove a tab', width: '150px' }).component();
 		const container = view.modelBuilder.flexContainer().withItems([addTabButton, removeTabButton]).withLayout({ flexFlow: 'column' }).component();
 		const nestedTab1 = {
 			title: 'Tab1',
@@ -45,7 +45,7 @@ export async function openModelViewDashboard(context: vscode.ExtensionContext):
 			}
 		};
 
-		const input2 = view.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({ value: 'input 2' }).component();
+		const input2 = view.modelBuilder.inputBox().withProps({ value: 'input 2' }).component();
 		const nestedTab2 = {
 			title: 'Tab2',
 			content: input2,
@@ -56,7 +56,7 @@ export async function openModelViewDashboard(context: vscode.ExtensionContext):
 			id: 'tab2'
 		};
 
-		const input3 = view.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({ value: 'input 4' }).component();
+		const input3 = view.modelBuilder.inputBox().withProps({ value: 'input 4' }).component();
 		const nestedTab3 = {
 			title: 'Tab3',
 			content: input3,
@@ -95,7 +95,7 @@ export async function openModelViewDashboard(context: vscode.ExtensionContext):
 		};
 
 		// Databases tab
-		const databasesText = view.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({ value: 'This is databases tab', width: '200px' }).component();
+		const databasesText = view.modelBuilder.inputBox().withProps({ value: 'This is databases tab', width: '200px' }).component();
 		const databasesTab: azdata.DashboardTab = {
 			id: 'databases',
 			content: databasesText,