withProperties -> withProps (#15876)

* withProperties -> withProps

* Fix errors

* remove ,

* fixes

* Update azdata-test

* Fix dacpac tests

* Add required and remove added layout

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

@@ -42,7 +42,7 @@ export class AzureModelsComponent extends ModelViewBase implements IDataComponen
 		this.azureSignInComponent = new AzureSignInComponent(this._apiWrapper, modelBuilder, this);
 		this._loader = modelBuilder.loadingComponent()
 			.withItem(this.azureModelsTable.component)
-			.withProperties({
+			.withProps({
 				loading: true
 			}).component();
 		this.azureModelsTable.onModelSelectionChanged(async () => {

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

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

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

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

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

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

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

@@ -66,9 +66,8 @@ export class CurrentModelsComponent extends ModelViewBase implements IPageView {
 		let dataCountString: string = constants.getDataCount(0);
 
 		this._tableDataCountContainer = modelBuilder.flexContainer().component();
-		this._tableDataCountComponent = modelBuilder.text().withProperties({
-			value: dataCountString,
-			margin: '0'
+		this._tableDataCountComponent = modelBuilder.text().withProps({
+			value: dataCountString
 		}).component();
 		this._tableDataCountContainer.addItem(this._tableDataCountComponent,
 			{
@@ -82,7 +81,7 @@ export class CurrentModelsComponent extends ModelViewBase implements IPageView {
 		let formModelBuilder = modelBuilder.formContainer();
 		this._loader = modelBuilder.loadingComponent()
 			.withItem(formModelBuilder.component())
-			.withProperties({
+			.withProps({
 				loading: true
 			}).component();
 		this._emptyModelsComponent = new DataInfoComponent(this._apiWrapper, this);
@@ -108,13 +107,13 @@ export class CurrentModelsComponent extends ModelViewBase implements IPageView {
 			flexFlow: 'column',
 			width: '452px'
 		}).component();
-		this._subheadingTextComponent = modelBuilder.text().withProperties(<azdata.CheckBoxProperties>{
+		this._subheadingTextComponent = modelBuilder.text().withProps(<azdata.CheckBoxProperties>{
 			value: this.modelActionType === ModelActionType.Import ? constants.viewImportModelsDesc : constants.viewImportModeledForPredictDesc,
 			CSSStyles: {
 				'font-size': '13px'
 			}
 		}).component();
-		this._subheadingLinkComponent = modelBuilder.hyperlink().withProperties({
+		this._subheadingLinkComponent = modelBuilder.hyperlink().withProps({
 			label: constants.learnMoreLink,
 			url: constants.importModelsDoc,
 			CSSStyles: {

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

@@ -161,7 +161,7 @@ export class CurrentModelsTable extends ModelViewBase implements IDataComponent<
 			.component();
 		this._loader = modelBuilder.loadingComponent()
 			.withItem(this._table)
-			.withProperties({
+			.withProps({
 				loading: true
 			}).component();
 		return this._loader;
@@ -265,24 +265,22 @@ export class CurrentModelsTable extends ModelViewBase implements IDataComponent<
 				this.onModelSelected();
 			};
 			if (this._settings.multiSelect) {
-				const checkbox = this._modelBuilder.checkBox().withProperties({
-					name: 'amlModel',
-					value: model.id,
+				const checkbox = this._modelBuilder.checkBox().withProps({
 					width: 15,
 					height: 15,
-					checked: this._selectedModels && this._selectedModels.find(x => x.id === model.id)
+					checked: !!this._selectedModels.find(x => x.id === model.id)
 				}).component();
 				checkbox.onChanged(() => {
 					onSelectItem(checkbox.checked || false);
 				});
 				selectModelButton = checkbox;
 			} else {
-				const radioButton = this._modelBuilder.radioButton().withProperties({
+				const radioButton = this._modelBuilder.radioButton().withProps({
 					name: 'amlModel',
-					value: model.id,
+					value: String(model.id),
 					width: 15,
 					height: 15,
-					checked: this._selectedModels && this._selectedModels.find(x => x.id === model.id)
+					checked: !!this._selectedModels.find(x => x.id === model.id)
 				}).component();
 				radioButton.onDidClick(() => {
 					onSelectItem(radioButton.checked || false);
@@ -298,7 +296,7 @@ export class CurrentModelsTable extends ModelViewBase implements IDataComponent<
 		let predictButton: azdata.ButtonComponent | undefined = undefined;
 		let editButton: azdata.ButtonComponent | undefined = undefined;
 		if (this._modelBuilder && this._settings.editable) {
-			dropButton = this._modelBuilder.button().withProperties({
+			dropButton = this._modelBuilder.button().withProps({
 				label: '',
 				title: constants.deleteTitle,
 				iconPath: {
@@ -321,7 +319,7 @@ export class CurrentModelsTable extends ModelViewBase implements IDataComponent<
 					this.showErrorMessage(`${constants.updateModelFailedError} ${constants.getErrorMessage(error)}`);
 				}
 			});
-			predictButton = this._modelBuilder.button().withProperties({
+			predictButton = this._modelBuilder.button().withProps({
 				label: '',
 				title: constants.predictModel,
 				iconPath: {
@@ -335,7 +333,7 @@ export class CurrentModelsTable extends ModelViewBase implements IDataComponent<
 				await this.sendDataRequest(PredictWizardEventName, [model]);
 			});
 
-			editButton = this._modelBuilder.button().withProperties({
+			editButton = this._modelBuilder.button().withProps({
 				label: '',
 				title: constants.editTitle,
 				iconPath: {

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

@@ -34,23 +34,23 @@ export class ModelDetailsComponent extends ModelViewBase implements IDataCompone
 	 * @param modelBuilder model builder
 	 */
 	public registerComponent(modelBuilder: azdata.ModelBuilder): azdata.Component {
-		this._createdComponent = modelBuilder.text().withProperties({
+		this._createdComponent = modelBuilder.text().withProps({
 			value: this._model.created
 		}).component();
-		this._deployedComponent = modelBuilder.text().withProperties({
+		this._deployedComponent = modelBuilder.text().withProps({
 			value: this._model.deploymentTime
 		}).component();
-		this._frameworkComponent = modelBuilder.text().withProperties({
+		this._frameworkComponent = modelBuilder.text().withProps({
 			value: this._model.framework
 		}).component();
-		this._frameworkVersionComponent = modelBuilder.text().withProperties({
+		this._frameworkVersionComponent = modelBuilder.text().withProps({
 			value: this._model.frameworkVersion
 		}).component();
-		this._nameComponent = modelBuilder.inputBox().withProperties({
+		this._nameComponent = modelBuilder.inputBox().withProps({
 			width: this.componentMaxLength,
 			value: this._model.modelName
 		}).component();
-		this._descriptionComponent = modelBuilder.inputBox().withProperties({
+		this._descriptionComponent = modelBuilder.inputBox().withProps({
 			width: this.componentMaxLength,
 			value: this._model.description,
 			multiline: true,

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

@@ -92,7 +92,7 @@ export class ModelSourcesComponent extends ModelViewBase implements IDataCompone
 			}
 		});
 		let radioCardGroup = modelBuilder.radioCardGroup()
-			.withProperties({
+			.withProps({
 				cards: components,
 				iconHeight: '100px',
 				iconWidth: '100px',
@@ -104,7 +104,7 @@ export class ModelSourcesComponent extends ModelViewBase implements IDataCompone
 		this._flexContainer = modelBuilder.flexContainer().withLayout({
 			flexFlow: 'column'
 		}).withItems([radioCardGroup]).component();
-		this._selectedSourceLabel = modelBuilder.text().withProperties({
+		this._selectedSourceLabel = modelBuilder.text().withProps({
 			value: this.getSourceTypeDescription(this._sourceType),
 			CSSStyles: {
 				'font-size': '13px',

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

@@ -129,12 +129,12 @@ export class ModelsDetailsTableComponent extends ModelViewBase implements IDataC
 
 	private createTableRow(model: ModelViewData | undefined): any[] {
 		if (this._modelBuilder && model && model.modelDetails) {
-			const nameComponent = this._modelBuilder.inputBox().withProperties({
+			const nameComponent = this._modelBuilder.inputBox().withProps({
 				value: model.modelDetails.modelName,
 				width: this.componentMaxLength - 100,
 				required: true
 			}).component();
-			const descriptionComponent = this._modelBuilder.inputBox().withProperties({
+			const descriptionComponent = this._modelBuilder.inputBox().withProps({
 				value: model.modelDetails.description,
 				width: this.componentMaxLength
 			}).component();
@@ -148,7 +148,7 @@ export class ModelsDetailsTableComponent extends ModelViewBase implements IDataC
 					model.modelDetails.modelName = nameComponent.value || '';
 				}
 			});
-			let deleteButton = this._modelBuilder.button().withProperties({
+			let deleteButton = this._modelBuilder.button().withProps({
 				label: '',
 				title: constants.deleteTitle,
 				width: 15,

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

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

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

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