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