diff --git a/extensions/arc/src/ui/components/filePicker.ts b/extensions/arc/src/ui/components/filePicker.ts index a9472d6f49..b0629e5a0a 100644 --- a/extensions/arc/src/ui/components/filePicker.ts +++ b/extensions/arc/src/ui/components/filePicker.ts @@ -26,7 +26,7 @@ export class FilePicker { ) { const buttonWidth = 80; this.filePathInputBox = modelBuilder.inputBox() - .withProperties({ + .withProps({ value: initialPath, ariaLabel: ariaLabel, validationErrorMessage: validationErrorMessage, @@ -43,7 +43,7 @@ export class FilePicker { }).component(); this.filePickerButton = modelBuilder.button() - .withProperties({ + .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({ CSSStyles: cssStyles || {} }).component(); + return modelBuilder.flexContainer().withItems(items, itemsStyle).withLayout(flexLayout).withProps({ CSSStyles: cssStyles || {} }).component(); } diff --git a/extensions/arc/src/ui/components/keyValueContainer.ts b/extensions/arc/src/ui/components/keyValueContainer.ts index 120daa2094..8261767fd0 100644 --- a/extensions/arc/src/ui/components/keyValueContainer.ts +++ b/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({ + 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({ + 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({ + 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({ + 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({ + this.link = modelBuilder.hyperlink().withProps({ label: value, url: '' }).component(); diff --git a/extensions/arc/src/ui/components/radioOptionsGroup.ts b/extensions/arc/src/ui/components/radioOptionsGroup.ts index 0d521db0bf..05b68beefb 100644 --- a/extensions/arc/src/ui/components/radioOptionsGroup.ts +++ b/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({ 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({ + const radioOption = this._modelBuilder.radioButton().withProps({ label: option, checked: option === defaultValue, name: this._groupName, diff --git a/extensions/arc/src/ui/dashboards/controller/controllerDashboardOverviewPage.ts b/extensions/arc/src/ui/dashboards/controller/controllerDashboardOverviewPage.ts index 26e66b67d4..3bfd0f7ea9 100644 --- a/extensions/arc/src/ui/dashboards/controller/controllerDashboardOverviewPage.ts +++ b/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({ + 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({ 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({ + 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({ + 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({ + 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({ + 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({ + .withProps({ width: iconSize, height: iconSize, iconPath: iconPath, @@ -238,7 +238,7 @@ export class ControllerDashboardOverviewPage extends DashboardPage { }).component(); const nameComponent = this.modelView.modelBuilder.hyperlink() - .withProperties({ + .withProps({ label: r.instanceName || '', url: '' }).component(); diff --git a/extensions/arc/src/ui/dashboards/miaa/miaaComputeAndStoragePage.ts b/extensions/arc/src/ui/dashboards/miaa/miaaComputeAndStoragePage.ts index 6141abcaeb..7450fb7a15 100644 --- a/extensions/arc/src/ui/dashboards/miaa/miaaComputeAndStoragePage.ts +++ b/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({ + content.addItem(this.modelView.modelBuilder.text().withProps({ value: loc.computeAndStorage, CSSStyles: { ...cssStyles.title } }).component()); - const infoComputeStorage_p1 = this.modelView.modelBuilder.text().withProperties({ + 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({ + 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({ + 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({ + 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({ + 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({ + 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({ + 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({ + 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({ + 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({ + 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({ + 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({ + const keyComponent = this.modelView.modelBuilder.text().withProps({ value: `${key} :`, CSSStyles: { ...cssStyles.text, 'margin-block-start': '0px', 'margin-block-end': '0px' } }).component(); diff --git a/extensions/arc/src/ui/dashboards/miaa/miaaConnectionStringsPage.ts b/extensions/arc/src/ui/dashboards/miaa/miaaConnectionStringsPage.ts index f621fdf1f1..08934f9809 100644 --- a/extensions/arc/src/ui/dashboards/miaa/miaaConnectionStringsPage.ts +++ b/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({ + content.addItem(this.modelView.modelBuilder.text().withProps({ value: loc.connectionStrings, CSSStyles: { ...cssStyles.title } }).component()); - const info = this.modelView.modelBuilder.text().withProperties({ + 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({ CSSStyles: { 'text-align': 'center' } }) + .withProps({ CSSStyles: { 'text-align': 'center' } }) .component(); content.addItem(this._connectionStringsMessage); diff --git a/extensions/arc/src/ui/dashboards/miaa/miaaDashboardOverviewPage.ts b/extensions/arc/src/ui/dashboards/miaa/miaaDashboardOverviewPage.ts index 311029bd22..d4c5604c4b 100644 --- a/extensions/arc/src/ui/dashboards/miaa/miaaDashboardOverviewPage.ts +++ b/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({ + 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({ 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({ 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({ + 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({ 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({ + 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({ + 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({ + 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({ + const troubleshootButton = this.modelView.modelBuilder.button().withProps({ label: loc.troubleshoot, iconPath: IconPathHelper.wrench }).component(); diff --git a/extensions/arc/src/ui/dashboards/postgres/postgresComputeAndStoragePage.ts b/extensions/arc/src/ui/dashboards/postgres/postgresComputeAndStoragePage.ts index 1d4b81032c..1583856a44 100644 --- a/extensions/arc/src/ui/dashboards/postgres/postgresComputeAndStoragePage.ts +++ b/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({ + 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({ + 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' } diff --git a/extensions/arc/src/ui/dashboards/postgres/postgresConnectionStringsPage.ts b/extensions/arc/src/ui/dashboards/postgres/postgresConnectionStringsPage.ts index b4f81806ea..a207b78caa 100644 --- a/extensions/arc/src/ui/dashboards/postgres/postgresConnectionStringsPage.ts +++ b/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({ + content.addItem(this.modelView.modelBuilder.text().withProps({ value: loc.connectionStrings, CSSStyles: { ...cssStyles.title } }).component()); - const info = this.modelView.modelBuilder.text().withProperties({ + 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({ + 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({ + .withProps({ loading: !this._postgresModel.configLastUpdated }).component(); diff --git a/extensions/arc/src/ui/dashboards/postgres/postgresDiagnoseAndSolveProblemsPage.ts b/extensions/arc/src/ui/dashboards/postgres/postgresDiagnoseAndSolveProblemsPage.ts index 33369668b2..1510bef236 100644 --- a/extensions/arc/src/ui/dashboards/postgres/postgresDiagnoseAndSolveProblemsPage.ts +++ b/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({ + content.addItem(this.modelView.modelBuilder.text().withProps({ value: loc.diagnoseAndSolveProblems, CSSStyles: { ...cssStyles.title, 'margin-bottom': '20px' } }).component()); - content.addItem(this.modelView.modelBuilder.text().withProperties({ + 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({ + const troubleshootButton = this.modelView.modelBuilder.button().withProps({ iconPath: IconPathHelper.wrench, label: loc.troubleshoot, width: '160px' diff --git a/extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts b/extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts index dcd5d22347..b5329b6666 100644 --- a/extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts +++ b/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({ + .withProps({ propertyItems: this.getProperties() }).component(); this.propertiesLoading = this.modelView.modelBuilder.loadingComponent() .withItem(this.properties) - .withProperties({ + .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({ + 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( + .withProps( { loading: !this._postgresModel?.configLastUpdated } ) .component(); this.grafanaLoading = this.modelView.modelBuilder.loadingComponent() - .withProperties( + .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({ + 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({ + 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({ + .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({ + 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({ + 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({ + 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({ + const openInAzurePortalButton = this.modelView.modelBuilder.button().withProps({ label: loc.openInAzurePortal, iconPath: IconPathHelper.openInTab }).component(); diff --git a/extensions/arc/src/ui/dashboards/postgres/postgresPropertiesPage.ts b/extensions/arc/src/ui/dashboards/postgres/postgresPropertiesPage.ts index c818659415..a3f57c212c 100644 --- a/extensions/arc/src/ui/dashboards/postgres/postgresPropertiesPage.ts +++ b/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({ + 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({ + .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({ + const refreshButton = this.modelView.modelBuilder.button().withProps({ label: loc.refresh, iconPath: IconPathHelper.refresh }).component(); diff --git a/extensions/arc/src/ui/dashboards/postgres/postgresResourceHealthPage.ts b/extensions/arc/src/ui/dashboards/postgres/postgresResourceHealthPage.ts index 9055f79bc1..5413679b7e 100644 --- a/extensions/arc/src/ui/dashboards/postgres/postgresResourceHealthPage.ts +++ b/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({ + .withProps({ loading: !this._postgresModel.configLastUpdated }).component(); diff --git a/extensions/arc/src/ui/dashboards/postgres/postgresSupportRequestPage.ts b/extensions/arc/src/ui/dashboards/postgres/postgresSupportRequestPage.ts index 7d9662e8f2..0f5be2ed54 100644 --- a/extensions/arc/src/ui/dashboards/postgres/postgresSupportRequestPage.ts +++ b/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({ + content.addItem(this.modelView.modelBuilder.text().withProps({ value: loc.newSupportRequest, CSSStyles: { ...cssStyles.title, 'margin-bottom': '20px' } }).component()); - content.addItem(this.modelView.modelBuilder.text().withProperties({ + content.addItem(this.modelView.modelBuilder.text().withProps({ value: loc.clickTheNewSupportRequestButton, CSSStyles: { ...cssStyles.text, 'margin-bottom': '20px' } }).component()); - content.addItem(this.modelView.modelBuilder.text().withProperties({ + content.addItem(this.modelView.modelBuilder.text().withProps({ value: loc.supportRequestNote, CSSStyles: { ...cssStyles.text, 'margin-bottom': '20px' } }).component()); - const supportRequestButton = this.modelView.modelBuilder.button().withProperties({ + const supportRequestButton = this.modelView.modelBuilder.button().withProps({ iconPath: IconPathHelper.support, label: loc.newSupportRequest, width: '205px' diff --git a/extensions/arc/src/ui/dialogs/addPGExtensionsDialog.ts b/extensions/arc/src/ui/dialogs/addPGExtensionsDialog.ts index 9f507631e5..53128eb9ac 100644 --- a/extensions/arc/src/ui/dialogs/addPGExtensionsDialog.ts +++ b/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({ + 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({ + 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({ + .withProps({ value: '', ariaLabel: loc.extensionsAddList, enabled: true diff --git a/extensions/arc/src/ui/dialogs/connectControllerDialog.ts b/extensions/arc/src/ui/dialogs/connectControllerDialog.ts index fd8f09b8db..10adb5bcbb 100644 --- a/extensions/arc/src/ui/dialogs/connectControllerDialog.ts +++ b/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({ + .withProps({ label: loc.rememberPassword, checked: controllerInfo?.rememberPassword }).component(); diff --git a/extensions/arc/src/ui/dialogs/connectSqlDialog.ts b/extensions/arc/src/ui/dialogs/connectSqlDialog.ts index 73e8e9ae0d..4e9fad0ce7 100644 --- a/extensions/arc/src/ui/dialogs/connectSqlDialog.ts +++ b/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({ + .withProps({ value: connectionProfile?.serverName, enabled: false }).component(); this.usernameInputBox = this.modelBuilder.inputBox() - .withProperties({ + .withProps({ value: connectionProfile?.userName }).component(); this.passwordInputBox = this.modelBuilder.inputBox() - .withProperties({ + .withProps({ inputType: 'password', value: connectionProfile?.password }) .component(); this.rememberPwCheckBox = this.modelBuilder.checkBox() - .withProperties({ + .withProps({ label: loc.rememberPassword, checked: connectionProfile?.savePassword }).component(); diff --git a/extensions/big-data-cluster/src/bigDataCluster/dialog/addControllerDialog.ts b/extensions/big-data-cluster/src/bigDataCluster/dialog/addControllerDialog.ts index 21bf34009c..dd9b0d473e 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/dialog/addControllerDialog.ts +++ b/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({ + .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({ + .withProps({ placeHolder: loc.usernameRequired.toLocaleLowerCase(), value: this.model.prefilledUsername }).component(); this.passwordInputBox = this.uiModelBuilder.inputBox() - .withProperties({ + .withProps({ placeHolder: loc.password, inputType: 'password', value: this.model.prefilledPassword }) .component(); this.rememberPwCheckBox = this.uiModelBuilder.checkBox() - .withProperties({ + .withProps({ label: loc.rememberPassword, checked: this.model.prefilledRememberPassword }).component(); diff --git a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts index 863dce632f..94a5d20950 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts +++ b/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({ 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({ + .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( + .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({ 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({ 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({ 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( + .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({ + .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({ + .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({ 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({ + .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({ + .withProps({ title: endpoint.endpoint, label: endpoint.endpoint, url: '', @@ -458,7 +458,7 @@ function createEndpointComponent(modelBuilder: azdata.ModelBuilder, endpoint: En } else { return modelBuilder.text() - .withProperties({ + .withProps({ value: endpoint.endpoint, title: endpoint.endpoint, CSSStyles: { ...cssStyles.text } diff --git a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardPage.ts b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardPage.ts index 382ed95a3b..951ba88324 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardPage.ts +++ b/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({ + .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({ + .withProps({ label: loc.troubleshoot, iconPath: IconPathHelper.notebook }).component(); diff --git a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts index 3694a933d3..3b7c52eb89 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts +++ b/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({ + .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( + .withProps( { columns: [ { // status icon @@ -168,7 +168,7 @@ export class BdcDashboardResourceStatusPage extends BdcDashboardPage { // Title label const endpointsLabel = this.modelView.modelBuilder.text() - .withProperties({ 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( + .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({ + 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({ + 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({ + 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({ + .withProps({ value: getHealthStatusIcon(instanceStatus.healthStatus), ariaRole: 'img', title: getHealthStatusDisplayText(instanceStatus.healthStatus), diff --git a/extensions/big-data-cluster/src/bigDataCluster/dialog/hdfsDialogBase.ts b/extensions/big-data-cluster/src/bigDataCluster/dialog/hdfsDialogBase.ts index bdde2d5b7c..a92b17281e 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/dialog/hdfsDialogBase.ts +++ b/extensions/big-data-cluster/src/bigDataCluster/dialog/hdfsDialogBase.ts @@ -133,7 +133,7 @@ export abstract class HdfsDialogBase { this.uiModelBuilder = view.modelBuilder; this.urlInputBox = this.uiModelBuilder.inputBox() - .withProperties({ + .withProps({ placeHolder: loc.url.toLocaleLowerCase(), value: this.model.props.url, enabled: false @@ -146,12 +146,12 @@ export abstract class HdfsDialogBase { }).component(); this.authDropdown.onValueChanged(e => this.onAuthChanged()); this.usernameInputBox = this.uiModelBuilder.inputBox() - .withProperties({ + .withProps({ placeHolder: loc.username.toLocaleLowerCase(), value: this.model.props.username }).component(); this.passwordInputBox = this.uiModelBuilder.inputBox() - .withProperties({ + .withProps({ placeHolder: loc.password.toLocaleLowerCase(), inputType: 'password', value: this.model.props.password diff --git a/extensions/big-data-cluster/src/bigDataCluster/dialog/mountHdfsDialog.ts b/extensions/big-data-cluster/src/bigDataCluster/dialog/mountHdfsDialog.ts index 63036ed744..fa0a48eaf1 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/dialog/mountHdfsDialog.ts +++ b/extensions/big-data-cluster/src/bigDataCluster/dialog/mountHdfsDialog.ts @@ -151,16 +151,16 @@ export class MountHdfsDialog extends HdfsDialogBase { let pathVal = this.model.props.hdfsPath; pathVal = (!pathVal || pathVal === '/') ? newMountName : (pathVal + newMountName); this.pathInputBox = this.uiModelBuilder.inputBox() - .withProperties({ + .withProps({ value: pathVal }).component(); this.remoteUriInputBox = this.uiModelBuilder.inputBox() - .withProperties({ + .withProps({ value: this.model.props.remoteUri }) .component(); this.credentialsInputBox = this.uiModelBuilder.inputBox() - .withProperties({ + .withProps({ inputType: 'password', value: this.model.props.credentials }) @@ -224,7 +224,7 @@ export class RefreshMountDialog extends HdfsDialogBase({ + .withProps({ value: this.model.props.hdfsPath }).component(); return [ @@ -305,7 +305,7 @@ export class DeleteMountDialog extends HdfsDialogBase protected getMainSectionComponents(): (azdata.FormComponentGroup | azdata.FormComponent)[] { this.pathInputBox = this.uiModelBuilder.inputBox() - .withProperties({ + .withProps({ value: this.model.props.hdfsPath }).component(); return [ diff --git a/extensions/data-workspace/src/dialogs/openExistingDialog.ts b/extensions/data-workspace/src/dialogs/openExistingDialog.ts index 72f35cf13c..bfb1d8b483 100644 --- a/extensions/data-workspace/src/dialogs/openExistingDialog.ts +++ b/extensions/data-workspace/src/dialogs/openExistingDialog.ts @@ -98,7 +98,7 @@ export class OpenExistingDialog extends DialogBase { } protected async initialize(view: azdataType.ModelView): Promise { - this.localRadioButton = view.modelBuilder.radioButton().withProperties({ + 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({ + 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({ + 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({ + 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({ + 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({ + 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({ + const localProjectBrowseFolderButton = view.modelBuilder.button().withProps({ ariaLabel: constants.BrowseButtonText, iconPath: IconPathHelper.folder, width: '18px', diff --git a/extensions/data-workspace/src/dialogs/projectDashboard.ts b/extensions/data-workspace/src/dialogs/projectDashboard.ts index fb4daa7314..d26e2762fb 100644 --- a/extensions/data-workspace/src/dialogs/projectDashboard.ts +++ b/extensions/data-workspace/src/dialogs/projectDashboard.ts @@ -84,7 +84,7 @@ export class ProjectDashboard { }); const refreshButton = this.modelView!.modelBuilder.button() - .withProperties({ + .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({ + .withProps({ label: projectAction.id, iconPath: projectAction.icon, height: '20px' @@ -159,13 +159,13 @@ export class ProjectDashboard { }).component(); const titleLabel = this.modelView!.modelBuilder.text() - .withProperties({ 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({ 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({ 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({ 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({ + 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({ + 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({ 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); } diff --git a/extensions/import/src/wizard/pages/prosePreviewPage.ts b/extensions/import/src/wizard/pages/prosePreviewPage.ts index 1c1180efeb..5844b1fee1 100644 --- a/extensions/import/src/wizard/pages/prosePreviewPage.ts +++ b/extensions/import/src/wizard/pages/prosePreviewPage.ts @@ -65,7 +65,7 @@ export class ProsePreviewPage extends ImportPage { } async start(): Promise { - this.table = this.view.modelBuilder.table().withProperties({ + this.table = this.view.modelBuilder.table().withProps({ data: undefined, columns: undefined, forceFitColumns: azdata.ColumnSizingMode.DataFit diff --git a/extensions/machine-learning/src/views/externalLanguages/languagesTable.ts b/extensions/machine-learning/src/views/externalLanguages/languagesTable.ts index c484e2f0f2..a807a5d65a 100644 --- a/extensions/machine-learning/src/views/externalLanguages/languagesTable.ts +++ b/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( + .withProps( { columns: [ { // Name diff --git a/extensions/machine-learning/src/views/models/azureModelsTable.ts b/extensions/machine-learning/src/views/models/azureModelsTable.ts index c5e211d14f..8b24e23dc3 100644 --- a/extensions/machine-learning/src/views/models/azureModelsTable.ts +++ b/extensions/machine-learning/src/views/models/azureModelsTable.ts @@ -36,7 +36,7 @@ export class AzureModelsTable extends ModelViewBase implements IDataComponent( + .withProps( { columns: [ { // Action diff --git a/extensions/machine-learning/src/views/models/manageModels/currentModelsTable.ts b/extensions/machine-learning/src/views/models/manageModels/currentModelsTable.ts index 3eca672c09..ff4a5ada9e 100644 --- a/extensions/machine-learning/src/views/models/manageModels/currentModelsTable.ts +++ b/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( + .withProps( { columns: columns, data: [], diff --git a/extensions/machine-learning/src/views/models/modelsDetailsTableComponent.ts b/extensions/machine-learning/src/views/models/modelsDetailsTableComponent.ts index 10ca1ab5ab..dbc38ea8cf 100644 --- a/extensions/machine-learning/src/views/models/modelsDetailsTableComponent.ts +++ b/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( + .withProps( { columns: [ { // File Name diff --git a/extensions/machine-learning/src/views/models/prediction/columnsTable.ts b/extensions/machine-learning/src/views/models/prediction/columnsTable.ts index 6b6c21f844..47baa96411 100644 --- a/extensions/machine-learning/src/views/models/prediction/columnsTable.ts +++ b/extensions/machine-learning/src/views/models/prediction/columnsTable.ts @@ -125,7 +125,7 @@ export class ColumnsTable extends ModelViewBase implements IDataComponent( + .withProps( { columns: columnHeader, data: [], diff --git a/extensions/machine-learning/src/views/widgets/dashboardWidget.ts b/extensions/machine-learning/src/views/widgets/dashboardWidget.ts index b8685d11db..46997b7c22 100644 --- a/extensions/machine-learning/src/views/widgets/dashboardWidget.ts +++ b/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({ + const buttonContainer = view.modelBuilder.button().withProps({ buttonType: azdata.ButtonType.Informational, description: taskMetaData.description, height: maxHeight, diff --git a/extensions/mssql/src/dashboard/serviceEndpoints.ts b/extensions/mssql/src/dashboard/serviceEndpoints.ts index 24c13087d8..bd615b0241 100644 --- a/extensions/mssql/src/dashboard/serviceEndpoints.ts +++ b/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({ 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({ + .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( + .withProps( { value: endpointInfo.endpoint, title: endpointInfo.endpoint, diff --git a/extensions/mssql/src/hdfs/ui/hdfsManageAccessDialog.ts b/extensions/mssql/src/hdfs/ui/hdfsManageAccessDialog.ts index 5d7a14b6eb..f43d6d41bf 100644 --- a/extensions/mssql/src/hdfs/ui/hdfsManageAccessDialog.ts +++ b/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({ + .withProps({ value: loc.locationTitle, CSSStyles: { ...cssStyles.titleCss } }).component(); const pathLabel = this.modelBuilder.text() - .withProperties({ + .withProps({ value: this.hdfsPath, title: this.hdfsPath, height: locationLabelHeight, @@ -141,7 +141,7 @@ export class ManageAccessDialog { // = Permissions Title = // ===================== const permissionsTitle = this.modelBuilder.text() - .withProperties({ 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({ + .withProps({ width: checkboxSize, height: checkboxSize, checked: permissionStatus.stickyBit, @@ -184,7 +184,7 @@ export class ManageAccessDialog { // =========================== const addUserOrGroupTitle = this.modelBuilder.text() - .withProperties({ 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({ + .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( + .withProps( { columns: posixPermissionsColumns, data: posixPermissionData @@ -321,7 +321,7 @@ export class ManageAccessDialog { }); const namedUsersAndGroupsTable = this.modelBuilder.declarativeTable() - .withProperties( + .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({ 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({ + .withProps({ iconPath: imageProperties.iconPath, width: permissionsTypeIconColumnWidth, height: permissionsRowHeight, @@ -474,7 +474,7 @@ export class ManageAccessDialog { if (includeDelete) { const deleteButton = this.modelBuilder.button() - .withProperties( + .withProps( { label: '', title: loc.deleteTitle, @@ -492,7 +492,7 @@ export class ManageAccessDialog { private createInheritDefaultsCheckbox(): azdata.CheckBoxComponent { this.inheritDefaultsCheckbox = this.modelBuilder.checkBox() - .withProperties({ + .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({ + .withProps({ value: loc.accessHeader, ariaHidden: true, CSSStyles: { @@ -571,7 +571,7 @@ export class ManageAccessDialog { // Default const defaultSectionHeader = this.modelBuilder.text() - .withProperties({ + .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({ + .withProps({ checked: checked, enabled: enabled, height: checkboxSize, diff --git a/extensions/mssql/src/sparkFeature/dialog/sparkJobSubmission/sparkAdvancedTab.ts b/extensions/mssql/src/sparkFeature/dialog/sparkJobSubmission/sparkAdvancedTab.ts index 83ac3036d2..b7c4eecfc9 100644 --- a/extensions/mssql/src/sparkFeature/dialog/sparkJobSubmission/sparkAdvancedTab.ts +++ b/extensions/mssql/src/sparkFeature/dialog/sparkJobSubmission/sparkAdvancedTab.ts @@ -99,7 +99,7 @@ export class SparkAdvancedTab { }); this._driverCoresInputBox = builder.inputBox() - .withProperties({ inputType: 'number', min: 1 }) + .withProps({ inputType: 'number', min: 1 }) .component(); formContainer.addFormItem( @@ -124,7 +124,7 @@ export class SparkAdvancedTab { }); this._executorCoresInputBox = builder.inputBox() - .withProperties({ inputType: 'number', min: 1 }) + .withProps({ inputType: 'number', min: 1 }) .component(); formContainer.addFormItem( { @@ -137,7 +137,7 @@ export class SparkAdvancedTab { }); this._executorCountInputBox = builder.inputBox() - .withProperties({ inputType: 'number', min: 1 }) + .withProps({ inputType: 'number', min: 1 }) .component(); formContainer.addFormItem( { diff --git a/extensions/mssql/src/sparkFeature/dialog/sparkJobSubmission/sparkConfigurationTab.ts b/extensions/mssql/src/sparkFeature/dialog/sparkJobSubmission/sparkConfigurationTab.ts index aa70bdd7f1..0225f29bd4 100644 --- a/extensions/mssql/src/sparkFeature/dialog/sparkJobSubmission/sparkConfigurationTab.ts +++ b/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({ + this._fileSourceDropDown = builder.dropDown().withProps({ values: [SparkFileSource.Local.toString(), SparkFileSource.HDFS.toString()], value: (this._path) ? SparkFileSource.HDFS.toString() : SparkFileSource.Local.toString() }).component(); diff --git a/extensions/notebook/src/dialog/configurePython/configurePathPage.ts b/extensions/notebook/src/dialog/configurePython/configurePathPage.ts index af3a8c1a62..8454279709 100644 --- a/extensions/notebook/src/dialog/configurePython/configurePathPage.ts +++ b/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({ + .withProps({ value: wizardDescription, CSSStyles: { 'padding': '0px', @@ -41,14 +41,14 @@ export class ConfigurePathPage extends BasePage { }).component(); this.pythonLocationDropdown = this.view.modelBuilder.dropDown() - .withProperties({ + .withProps({ value: undefined, values: [], width: '400px' }).component(); this.pythonDropdownLoader = this.view.modelBuilder.loadingComponent() .withItem(this.pythonLocationDropdown) - .withProperties({ + .withProps({ loading: false }) .component(); @@ -78,13 +78,13 @@ export class ConfigurePathPage extends BasePage { }]).component(); let selectInstallContainer = this.view.modelBuilder.divContainer() .withItems([selectInstallForm]) - .withProperties({ + .withProps({ clickable: false }).component(); let allParentItems = [selectInstallContainer]; if (this.model.pythonLocation) { - let installedPathTextBox = this.view.modelBuilder.inputBox().withProperties({ + 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({ + .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({ + .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({ + .withProps({ name: buttonGroup, label: localize('configurePython.existingInstall', "Use existing Python installation"), checked: useExistingPython diff --git a/extensions/notebook/src/dialog/configurePython/pickPackagesPage.ts b/extensions/notebook/src/dialog/configurePython/pickPackagesPage.ts index 8dfc3a5c5e..cfe178266b 100644 --- a/extensions/notebook/src/dialog/configurePython/pickPackagesPage.ts +++ b/extensions/notebook/src/dialog/configurePython/pickPackagesPage.ts @@ -35,12 +35,12 @@ export class PickPackagesPage extends BasePage { public async initialize(): Promise { 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({ + 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({ + 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({ + this.requiredPackagesTable = this.view.modelBuilder.declarativeTable().withProps({ columns: [{ displayName: nameColumn, ariaLabel: nameColumn, diff --git a/extensions/notebook/src/dialog/createBookDialog.ts b/extensions/notebook/src/dialog/createBookDialog.ts index b80d003ae9..ccc8fae9bc 100644 --- a/extensions/notebook/src/dialog/createBookDialog.ts +++ b/extensions/notebook/src/dialog/createBookDialog.ts @@ -68,7 +68,7 @@ export class CreateBookDialog { this.view = view; const jupyterBookDocumentation = this.view.modelBuilder.hyperlink() - .withProperties({ + .withProps({ label: loc.learnMore, url: 'https://jupyterbook.org/intro.html', CSSStyles: { 'margin-bottom': '0px', 'margin-top': '0px', 'font-size': 'small' } diff --git a/extensions/notebook/src/dialog/remoteBookDialog.ts b/extensions/notebook/src/dialog/remoteBookDialog.ts index d91236face..907d6a27e1 100644 --- a/extensions/notebook/src/dialog/remoteBookDialog.ts +++ b/extensions/notebook/src/dialog/remoteBookDialog.ts @@ -60,7 +60,7 @@ export class RemoteBookDialog { fireOnTextChange: true, }).component(); - this.searchButton = this.view.modelBuilder.button().withProperties({ + this.searchButton = this.view.modelBuilder.button().withProps({ label: loc.search, title: loc.search, width: '200px', diff --git a/extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/deployAzureSQLDBWizardModel.ts b/extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/deployAzureSQLDBWizardModel.ts index fdde91f9ff..3f7af93536 100644 --- a/extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/deployAzureSQLDBWizardModel.ts +++ b/extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/deployAzureSQLDBWizardModel.ts @@ -111,7 +111,7 @@ export class DeployAzureSQLDBWizardModel extends ResourceTypeModel { }); const labelText = view.modelBuilder.text() - .withProperties( + .withProps( { value: title, width: '250px', diff --git a/extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/azureSettingsPage.ts b/extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/azureSettingsPage.ts index 90b1b58e32..86ddd66945 100644 --- a/extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/azureSettingsPage.ts +++ b/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({ + this.signInButton = view.modelBuilder.button().withProps({ label: localizedConstants.signIn, width: '100px', secondary: true }).component(); - this.refreshButton = view.modelBuilder.button().withProperties({ + this.refreshButton = view.modelBuilder.button().withProps({ label: localizedConstants.refresh, width: '100px', secondary: true diff --git a/extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/summaryPage.ts b/extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/summaryPage.ts index a58d504ab1..d18762dc54 100644 --- a/extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/summaryPage.ts +++ b/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( + .withProps( { value: title, width: '250px', diff --git a/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/deployAzureSQLVMWizardModel.ts b/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/deployAzureSQLVMWizardModel.ts index 76423375e2..3fe02b3e64 100644 --- a/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/deployAzureSQLVMWizardModel.ts +++ b/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/deployAzureSQLVMWizardModel.ts @@ -146,7 +146,7 @@ export class DeployAzureSQLVMWizardModel extends ResourceTypeModel { }); const labelText = view.modelBuilder.text() - .withProperties( + .withProps( { value: title, width: '250px', diff --git a/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/azureSettingsPage.ts b/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/azureSettingsPage.ts index b1e8cbbae1..f24b8d2bf4 100644 --- a/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/azureSettingsPage.ts +++ b/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({ + this.signInButton = view.modelBuilder.button().withProps({ label: localizedConstants.signIn, width: '100px', secondary: true }).component(); - this.refreshButton = view.modelBuilder.button().withProperties({ + this.refreshButton = view.modelBuilder.button().withProps({ label: localizedConstants.refresh, width: '100px', secondary: true diff --git a/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/networkSettingsPage.ts b/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/networkSettingsPage.ts index 95ad5456ab..6283770d11 100644 --- a/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/networkSettingsPage.ts +++ b/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({ + this._newSubnetCheckbox = view.modelBuilder.checkBox().withProps({ label: constants.NetworkSettingsNewSubnet, checked: false }).component(); diff --git a/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/summaryPage.ts b/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/summaryPage.ts index ea91e48e31..6d39d30ffc 100644 --- a/extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/summaryPage.ts +++ b/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( + .withProps( { value: title, width: '250px', diff --git a/extensions/resource-deployment/src/ui/deployClusterWizard/pages/deploymentProfilePage.ts b/extensions/resource-deployment/src/ui/deployClusterWizard/pages/deploymentProfilePage.ts index 2803cce97e..3078173038 100644 --- a/extensions/resource-deployment/src/ui/deployClusterWizard/pages/deploymentProfilePage.ts +++ b/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 => { this._container = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column' }).component(); - const hintText = view.modelBuilder.text().withProperties({ + 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({ + 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({ + 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({ + 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({ + 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({ + return view.modelBuilder.table().withProps({ columns: [this.createDescriptionColumn(localize('deployCluster.featureText', "Feature")), ...this.createProfileColumns(profiles)], data: data, title: featureTableTitle, diff --git a/extensions/resource-deployment/src/ui/deployClusterWizard/pages/serviceSettingsPage.ts b/extensions/resource-deployment/src/ui/deployClusterWizard/pages/serviceSettingsPage.ts index 89e3eac284..7b48ae43f6 100644 --- a/extensions/resource-deployment/src/ui/deployClusterWizard/pages/serviceSettingsPage.ts +++ b/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( + .withProps( { columns: [ this.createStorageSettingColumn(localize('deployCluster.ServiceName', "Service name"), false), diff --git a/extensions/resource-deployment/src/ui/deployClusterWizard/pages/summaryPage.ts b/extensions/resource-deployment/src/ui/deployClusterWizard/pages/summaryPage.ts index ff0b184ef6..561de85be6 100644 --- a/extensions/resource-deployment/src/ui/deployClusterWizard/pages/summaryPage.ts +++ b/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({ + const storageTable = this.view.modelBuilder.table().withProps({ title: storageTableTitle, ariaLabel: storageTableTitle, data: [ diff --git a/extensions/resource-deployment/src/ui/deployClusterWizard/pages/targetClusterPage.ts b/extensions/resource-deployment/src/ui/deployClusterWizard/pages/targetClusterPage.ts index 3bfbc244b6..730a8cf4ef 100644 --- a/extensions/resource-deployment/src/ui/deployClusterWizard/pages/targetClusterPage.ts +++ b/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({ 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({ + let option = this.view!.modelBuilder.radioButton().withProps({ label: clusterContext.name, checked: clusterContext.isCurrentContext, name: ClusterRadioButtonGroupName diff --git a/extensions/resource-deployment/src/ui/modelViewUtils.ts b/extensions/resource-deployment/src/ui/modelViewUtils.ts index f843aefa37..d6fce5834e 100644 --- a/extensions/resource-deployment/src/ui/modelViewUtils.ts +++ b/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 { - const component = view.modelBuilder.inputBox().withProperties({ + 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({ + 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({ + 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 { - const dropdown = view.modelBuilder.dropDown().withProperties({ + 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({ 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({ + const confirmPasswordInput = context.view.modelBuilder.inputBox().withProps({ ariaLabel: context.fieldInfo.confirmationLabel, inputType: 'password', required: true, diff --git a/extensions/resource-deployment/src/ui/radioGroupLoadingComponentBuilder.ts b/extensions/resource-deployment/src/ui/radioGroupLoadingComponentBuilder.ts index 4b6660358f..290d083065 100644 --- a/extensions/resource-deployment/src/ui/radioGroupLoadingComponentBuilder.ts +++ b/extensions/resource-deployment/src/ui/radioGroupLoadingComponentBuilder.ts @@ -13,7 +13,7 @@ export class RadioGroupLoadingComponentBuilder implements azdata.ComponentBuilde private _onValueChangedEmitter: vscode.EventEmitter = 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({ 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({ + const radioOption = this._view!.modelBuilder.radioButton().withProps({ label: option.displayName, value: option.name, checked: option.displayName === defaultValue, diff --git a/extensions/resource-deployment/src/ui/resourceTypePickerDialog.ts b/extensions/resource-deployment/src/ui/resourceTypePickerDialog.ts index e449b67193..0602cbf5d2 100644 --- a/extensions/resource-deployment/src/ui/resourceTypePickerDialog.ts +++ b/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({ + this._cardGroup = view.modelBuilder.radioCardGroup().withProps({ cards: this._resourceTypes.map((resourceType) => { return this.createOrGetCard(resourceType); }), diff --git a/extensions/resource-deployment/src/ui/toolsAndEulaSettingsPage.ts b/extensions/resource-deployment/src/ui/toolsAndEulaSettingsPage.ts index b5f1723c64..15831d0b72 100644 --- a/extensions/resource-deployment/src/ui/toolsAndEulaSettingsPage.ts +++ b/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({ + 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({ + 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({ + 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({ + 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({ + this._agreementCheckBox = this.view.modelBuilder.checkBox().withProps({ ariaLabel: this.getAgreementDisplayText(agreementInfo), required: true }).component(); - const text = this.view.modelBuilder.text().withProperties({ + const text = this.view.modelBuilder.text().withProps({ value: agreementInfo.template, links: agreementInfo.links, requiredIndicator: true diff --git a/extensions/schema-compare/src/schemaCompareMainWindow.ts b/extensions/schema-compare/src/schemaCompareMainWindow.ts index d3fe9e9beb..d192935bd5 100644 --- a/extensions/schema-compare/src/schemaCompareMainWindow.ts +++ b/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({ + this.sourceNameComponent = this.view.modelBuilder.inputBox().withProps({ value: this.sourceName, title: this.sourceName, enabled: false }).component(); - this.targetNameComponent = this.view.modelBuilder.inputBox().withProperties({ + this.targetNameComponent = this.view.modelBuilder.inputBox().withProps({ value: this.targetName, title: this.targetName, enabled: false diff --git a/extensions/sql-assessment/src/assessmentResultGrid.ts b/extensions/sql-assessment/src/assessmentResultGrid.ts index 1dd73c9819..abee71206e 100644 --- a/extensions/sql-assessment/src/assessmentResultGrid.ts +++ b/extensions/sql-assessment/src/assessmentResultGrid.ts @@ -58,7 +58,7 @@ export class AssessmentResultGrid implements vscode.Disposable { }; this.table = view.modelBuilder.table() - .withProperties({ + .withProps({ data: [], columns: [ { @@ -214,34 +214,34 @@ export class AssessmentResultGrid implements vscode.Disposable { const flexSettings = '0 1 auto'; - this.checkNamePlaceholder = view.modelBuilder.text().withProperties({ + 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({ + this.checkDescriptionPlaceholder = view.modelBuilder.text().withProps({ CSSStyles: { ...cssNoMarginFloatLeft, 'padding-right': '2px' } }).component(); - this.clickHereLabel = view.modelBuilder.hyperlink().withProperties({ + this.clickHereLabel = view.modelBuilder.hyperlink().withProps({ label: localize('asmt.details.clickHere', "Click here"), url: '', CSSStyles: cssNoMarginFloatLeft }).component(); - const toLearnMoreText = view.modelBuilder.text().withProperties({ + 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({ + const tagsCaption = view.modelBuilder.text().withProps({ CSSStyles: cssBlockCaption, value: LocalizedStrings.TAGS_COLUMN_NAME }).component(); - this.tagsPlaceholder = view.modelBuilder.text().withProperties({ + this.tagsPlaceholder = view.modelBuilder.text().withProps({ CSSStyles: cssNoMarginFloatLeft }).component(); - this.asmtMessagePlaceholder = view.modelBuilder.text().withProperties({ + this.asmtMessagePlaceholder = view.modelBuilder.text().withProps({ CSSStyles: cssNoMarginFloatLeft }).component(); - this.descriptionCaption = view.modelBuilder.text().withProperties({ + 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({ + view.modelBuilder.text().withProps({ CSSStyles: cssBlockCaption, value: localize('asmt.details.recommendation', "Recommendation") }).component(), diff --git a/extensions/sql-assessment/src/tabs/assessmentMainTab.ts b/extensions/sql-assessment/src/tabs/assessmentMainTab.ts index 34fbeeeb07..308c076a7e 100644 --- a/extensions/sql-assessment/src/tabs/assessmentMainTab.ts +++ b/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({ + .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({ + .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({ + .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({ + .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({ + .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({ + .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({ + .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({ + .withProps({ label: LocalizedStrings.SECTION_TITLE_API, iconPath: { dark: this.extensionContext.asAbsolutePath('resources/dark/status_info.svg'), diff --git a/extensions/sql-assessment/src/tabs/historyTab.ts b/extensions/sql-assessment/src/tabs/historyTab.ts index 7a21eb6a91..ba3b8d7484 100644 --- a/extensions/sql-assessment/src/tabs/historyTab.ts +++ b/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({ + 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({ + 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({ + }).withProps({ CSSStyles: { 'padding-left': '15px' } @@ -114,7 +114,7 @@ export class SqlAssessmentHistoryTab extends SqlAssessmentTab { private async createHistorySummaryTable(view: azdata.ModelView): Promise { const cssHeader = 'no-borders align-with-header'; return view.modelBuilder.table() - .withProperties({ + .withProps({ data: [], columns: [ { value: localize('asmt.history.summaryAsmtDate', "Assessment Date"), headerCssClass: cssHeader, width: 125 }, diff --git a/extensions/sql-database-projects/src/dialogs/addDatabaseReferenceDialog.ts b/extensions/sql-database-projects/src/dialogs/addDatabaseReferenceDialog.ts index 5538f54cf0..8510b269cd 100644 --- a/extensions/sql-database-projects/src/dialogs/addDatabaseReferenceDialog.ts +++ b/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({ + const label = this.view!.modelBuilder.text().withProps({ value: value, width: cssStyles.addDatabaseReferenceDialogLabelWidth, requiredIndicator: required diff --git a/extensions/sql-database-projects/src/dialogs/createProjectFromDatabaseDialog.ts b/extensions/sql-database-projects/src/dialogs/createProjectFromDatabaseDialog.ts index 73a33a6ebb..10e3ff8eb4 100644 --- a/extensions/sql-database-projects/src/dialogs/createProjectFromDatabaseDialog.ts +++ b/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({ + 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({ + 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({ + 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({ + 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({ + 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({ + 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({ + const folderStructureLabel = view.modelBuilder.text().withProps({ value: constants.folderStructureLabel, requiredIndicator: true, width: cssStyles.createProjectFromDatabaseLabelWidth diff --git a/extensions/sql-database-projects/src/dialogs/publishDatabaseDialog.ts b/extensions/sql-database-projects/src/dialogs/publishDatabaseDialog.ts index c14a59787c..9e1bf2afed 100644 --- a/extensions/sql-database-projects/src/dialogs/publishDatabaseDialog.ts +++ b/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({ + 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({ + 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({ + 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({ + const table = view.modelBuilder.declarativeTable().withProps({ ariaLabel: constants.sqlCmdTableLabel, dataValues: this.convertSqlCmdVarsToTableFormat(this.sqlCmdVars), columns: [ diff --git a/extensions/sql-migration/src/dialog/assessmentResults/sqlAssessmentResult.ts b/extensions/sql-migration/src/dialog/assessmentResults/sqlAssessmentResult.ts index 76c7dd1537..a935383f18 100644 --- a/extensions/sql-migration/src/dialog/assessmentResults/sqlAssessmentResult.ts +++ b/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({ + 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({ + 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({ + 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({ + 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({ + const impactedObjects = view.modelBuilder.table().withProps({ title: 'Impacted Objects', columns: [ 'Type', // TODO localize diff --git a/extensions/sql-migration/src/dialog/assessmentResults/sqlAssessmentResultsList.ts b/extensions/sql-migration/src/dialog/assessmentResults/sqlAssessmentResultsList.ts index 67ee8da896..b6b97cca23 100644 --- a/extensions/sql-migration/src/dialog/assessmentResults/sqlAssessmentResultsList.ts +++ b/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({ + const list = view.modelBuilder.listBox().withProps({ values: [ 'Filestream not supported in Azure SQL Managed Instance', 'Number of Log files per database something something', diff --git a/extensions/sql-migration/src/dialog/createSqlMigrationService/createSqlMigrationServiceDialog.ts b/extensions/sql-migration/src/dialog/createSqlMigrationService/createSqlMigrationServiceDialog.ts index e6418c4974..f10fcc0441 100644 --- a/extensions/sql-migration/src/dialog/createSqlMigrationService/createSqlMigrationServiceDialog.ts +++ b/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({ + 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({ + 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({ + 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({ + this._refreshKey2Button = this._view.modelBuilder.button().withProps({ title: constants.REFRESH_KEY2, iconPath: IconPathHelper.refresh, ariaLabel: constants.REFRESH_KEY2, diff --git a/extensions/sql-migration/src/dialog/sqlMigrationService/sqlMigrationServiceDetailsDialog.ts b/extensions/sql-migration/src/dialog/sqlMigrationService/sqlMigrationServiceDetailsDialog.ts index 96d7d66e52..16dad8719d 100644 --- a/extensions/sql-migration/src/dialog/sqlMigrationService/sqlMigrationServiceDetailsDialog.ts +++ b/extensions/sql-migration/src/dialog/sqlMigrationService/sqlMigrationServiceDetailsDialog.ts @@ -229,7 +229,7 @@ export class SqlMigrationServiceDetailsDialog { const copyKey1Button = view.modelBuilder .button() - .withProperties({ + .withProps({ title: constants.COPY_KEY1, iconPath: IconPathHelper.copy, height: IMAGE_SIZE, @@ -245,7 +245,7 @@ export class SqlMigrationServiceDetailsDialog { const copyKey2Button = view.modelBuilder .button() - .withProperties({ + .withProps({ title: constants.COPY_KEY2, iconPath: IconPathHelper.copy, height: IMAGE_SIZE, @@ -261,7 +261,7 @@ export class SqlMigrationServiceDetailsDialog { const refreshKey1Button = view.modelBuilder .button() - .withProperties({ + .withProps({ title: constants.REFRESH_KEY1, iconPath: IconPathHelper.refresh, height: IMAGE_SIZE, @@ -274,7 +274,7 @@ export class SqlMigrationServiceDetailsDialog { const refreshKey2Button = view.modelBuilder .button() - .withProperties({ + .withProps({ title: constants.REFRESH_KEY2, iconPath: IconPathHelper.refresh, height: IMAGE_SIZE, diff --git a/extensions/sql-migration/src/wizard/integrationRuntimePage.ts b/extensions/sql-migration/src/wizard/integrationRuntimePage.ts index 0ba9cbde6e..61bac5e744 100644 --- a/extensions/sql-migration/src/wizard/integrationRuntimePage.ts +++ b/extensions/sql-migration/src/wizard/integrationRuntimePage.ts @@ -312,7 +312,7 @@ export class IntergrationRuntimePage extends MigrationWizardPage { } }).component(); - this._copy1 = this._view.modelBuilder.button().withProperties({ + 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({ + 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({ + 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({ + this._refresh2 = this._view.modelBuilder.button().withProps({ title: constants.REFRESH_KEY2, iconPath: IconPathHelper.refresh, ariaLabel: constants.REFRESH_KEY2, diff --git a/extensions/sql-migration/src/wizard/subscriptionSelectionPage.ts b/extensions/sql-migration/src/wizard/subscriptionSelectionPage.ts index 3cf704a367..42d04ac435 100644 --- a/extensions/sql-migration/src/wizard/subscriptionSelectionPage.ts +++ b/extensions/sql-migration/src/wizard/subscriptionSelectionPage.ts @@ -52,7 +52,7 @@ export class SubscriptionSelectionPage extends MigrationWizardPage { } private createAccountDropDown(view: azdata.ModelView): azdata.FormComponent { - const dropDown = view.modelBuilder.dropDown().withProperties({ + 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 { - const dropDown = view.modelBuilder.dropDown().withProperties({ + 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 { - const dropDown = view.modelBuilder.dropDown().withProperties({ + const dropDown = view.modelBuilder.dropDown().withProps({ ariaLabel: SUBSCRIPTION_SELECTION_AZURE_PRODUCT_TITLE, values: [], editable: true, diff --git a/samples/sqlservices/src/controllers/mainController.ts b/samples/sqlservices/src/controllers/mainController.ts index bed53b2337..d97f2078be 100644 --- a/samples/sqlservices/src/controllers/mainController.ts +++ b/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({ + 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({ + .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({ + .withProps({ label: 'label2', value: 'value2', actions: [{ label: 'action' }] diff --git a/samples/sqlservices/src/controllers/modelViewDashboard.ts b/samples/sqlservices/src/controllers/modelViewDashboard.ts index d57b93ab93..42d2a9de22 100644 --- a/samples/sqlservices/src/controllers/modelViewDashboard.ts +++ b/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({ + 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({ 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({ label: 'Add a tab', width: '150px' }).component(); - const removeTabButton = view.modelBuilder.button().withProperties({ label: 'Remove a tab', width: '150px' }).component(); + const addTabButton = view.modelBuilder.button().withProps({ label: 'Add 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({ 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({ 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({ 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,