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/dataInfoComponent.ts

@@ -39,10 +39,10 @@ export class DataInfoComponent extends ViewBase {
 	}
 
 	public registerComponent(modelBuilder: azdata.ModelBuilder): azdata.Component {
-		this._descriptionComponent = modelBuilder.text().withProperties({
+		this._descriptionComponent = modelBuilder.text().withProps({
 			value: this._description,
 		}).component();
-		this._labelComponent = modelBuilder.text().withProperties({
+		this._labelComponent = modelBuilder.text().withProps({
 			value: this._title,
 		}).component();
 		this._labelContainer = modelBuilder.flexContainer().withLayout({
@@ -64,7 +64,7 @@ export class DataInfoComponent extends ViewBase {
 			};
 		}
 
-		this._iconComponent = modelBuilder.image().withProperties({
+		this._iconComponent = modelBuilder.image().withProps({
 			width: this._iconSettings?.containerWidth ?? this._defaultIconSize,
 			height: this._iconSettings?.containerHeight ?? this._defaultIconSize,
 			iconWidth: this._iconSettings?.width ?? this._defaultIconSize,
@@ -97,7 +97,7 @@ export class DataInfoComponent extends ViewBase {
 
 		this._loadingComponent = modelBuilder.loadingComponent().withItem(
 			this._labelContainer
-		).withProperties({
+		).withProps({
 			loading: false
 		}).component();
 

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

@@ -26,7 +26,7 @@ export class AddEditLanguageTab extends LanguageViewBase {
 		this._dialogTab.registerContent(async view => {
 			let language = this._languageUpdateModel.language;
 			let content = this._languageUpdateModel.content;
-			this.languageName = view.modelBuilder.inputBox().withProperties({
+			this.languageName = view.modelBuilder.inputBox().withProps({
 				value: language.name,
 				width: '150px',
 				enabled: !this._editMode
@@ -42,7 +42,7 @@ export class AddEditLanguageTab extends LanguageViewBase {
 			this.languageView = new LanguageContentView(this._apiWrapper, this, view.modelBuilder, formBuilder, content);
 
 			if (!this._editMode) {
-				this.saveButton = view.modelBuilder.button().withProperties({
+				this.saveButton = view.modelBuilder.button().withProps({
 					label: constants.extLangInstallButtonText,
 					width: '100px'
 				}).component();

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

@@ -28,7 +28,7 @@ export class CurrentLanguagesTab extends LanguageViewBase {
 			// TODO: only supporting single location for now. We should add a drop down for multi locations mode
 			//
 			let locationTitle = await this.getServerTitle();
-			this._locationComponent = view.modelBuilder.text().withProperties({
+			this._locationComponent = view.modelBuilder.text().withProps({
 				value: locationTitle
 			}).component();
 
@@ -46,7 +46,7 @@ export class CurrentLanguagesTab extends LanguageViewBase {
 
 			this._loader = view.modelBuilder.loadingComponent()
 				.withItem(formModel)
-				.withProperties({
+				.withProps({
 					loading: true
 				}).component();
 

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

@@ -30,10 +30,10 @@ export class FileBrowserDialog {
 		this._fileBrowserDialog.content = [fileBrowserTab];
 		fileBrowserTab.registerContent(async (view) => {
 			this._fileBrowserTree = view.modelBuilder.fileBrowserTree()
-				.withProperties({ ownerUri: this.ownerUri, width: 420, height: 700 })
+				.withProps({ ownerUri: this.ownerUri, width: 420, height: 700 })
 				.component();
 			this._selectedPathTextBox = view.modelBuilder.inputBox()
-				.withProperties({ inputType: 'text' })
+				.withProps({ inputType: 'text' })
 				.component();
 			this._fileBrowserTree.onDidChange((args) => {
 				if (this._selectedPathTextBox) {

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

@@ -31,7 +31,7 @@ export class LanguageContentView extends LanguageViewBase {
 	) {
 		super(apiWrapper, parent.root, parent);
 		this._localPath = this._modelBuilder.radioButton()
-			.withProperties({
+			.withProps({
 				value: 'local',
 				name: 'extensionLocation',
 				label: constants.extLangLocal,
@@ -39,7 +39,7 @@ export class LanguageContentView extends LanguageViewBase {
 			}).component();
 
 		this._serverPath = this._modelBuilder.radioButton()
-			.withProperties({
+			.withProps({
 				value: 'server',
 				name: 'extensionLocation',
 				label: this.getServerTitle(),
@@ -62,7 +62,7 @@ export class LanguageContentView extends LanguageViewBase {
 				this._localPath, this._serverPath]
 			).component();
 
-		this.extensionFile = this._modelBuilder.inputBox().withProperties({
+		this.extensionFile = this._modelBuilder.inputBox().withProps({
 			value: '',
 			width: parent.componentMaxLength - parent.browseButtonMaxLength - parent.spaceBetweenComponentsLength
 		}).component();
@@ -89,16 +89,16 @@ export class LanguageContentView extends LanguageViewBase {
 			this.onOpenFileBrowser({ filePath: '', target: this._isLocalPath ? constants.localhost : this.connectionUrl });
 		});
 
-		this.extensionFileName = this._modelBuilder.inputBox().withProperties({
+		this.extensionFileName = this._modelBuilder.inputBox().withProps({
 			value: '',
 			width: parent.componentMaxLength
 		}).component();
 
-		this.envVariables = this._modelBuilder.inputBox().withProperties({
+		this.envVariables = this._modelBuilder.inputBox().withProps({
 			value: '',
 			width: parent.componentMaxLength
 		}).component();
-		this.parameters = this._modelBuilder.inputBox().withProperties({
+		this.parameters = this._modelBuilder.inputBox().withProps({
 			value: '',
 			width: parent.componentMaxLength
 		}).component();

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

@@ -118,7 +118,7 @@ export class LanguagesTable extends LanguageViewBase {
 
 	private createTableRow(language: mssql.ExternalLanguage, content: mssql.ExternalLanguageContent): azdata.DeclarativeTableCellValue[] {
 		if (this._modelBuilder) {
-			let dropLanguageButton = this._modelBuilder.button().withProperties({
+			let dropLanguageButton = this._modelBuilder.button().withProps({
 				label: '',
 				title: constants.deleteTitle,
 				iconPath: {
@@ -136,7 +136,7 @@ export class LanguagesTable extends LanguageViewBase {
 				});
 			});
 
-			let editLanguageButton = this._modelBuilder.button().withProperties({
+			let editLanguageButton = this._modelBuilder.button().withProps({
 				label: '',
 				title: constants.editTitle,
 				iconPath: {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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