ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

Switch withProperties to be withProps (#16380)

Browse Source 
* Transition to withProps in arc

* Transition to withProps inputbox

* Transition to withProps in checkbox

* Transition to withProps text

* Transition to withProps in declarative table

* Transition to withProps hyperlink

* Transition to withProps in button

* Transition to withProps radiobutton

* Transition to withProps in input

* Transition to withProps button

* Transition to withProps in text

* Transition to withProps image

* Transition to withProps declare table

* Transition to withProps in table

* Transition to withProps radio button

* Transition to withProps in image

* Transition to withProps radio button

* Transition to withProps in commit

* Transition to withProps div cont

* Transition to withProps in comp

* Transition to withProps radio card

* Transition to withProps in comp icon

* Transition to withProps card

* Transition to withProps list
This commit is contained in:
nasc17
2021-07-21 11:12:47 -07:00
committed by GitHub
parent b2a2a48ed6
commit b472539646
70 changed files with 274 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
extensions/arc/src/ui/components/filePicker.ts
View File

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

10
extensions/arc/src/ui/components/keyValueContainer.ts
View File

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

4
extensions/arc/src/ui/components/radioOptionsGroup.ts
View File

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

16
extensions/arc/src/ui/dashboards/controller/controllerDashboardOverviewPage.ts
View File

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

26
extensions/arc/src/ui/dashboards/miaa/miaaComputeAndStoragePage.ts
View File

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

6
extensions/arc/src/ui/dashboards/miaa/miaaConnectionStringsPage.ts
View File

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

18
extensions/arc/src/ui/dashboards/miaa/miaaDashboardOverviewPage.ts
View File

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

4
extensions/arc/src/ui/dashboards/postgres/postgresComputeAndStoragePage.ts
View File

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

8
extensions/arc/src/ui/dashboards/postgres/postgresConnectionStringsPage.ts
View File

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

6
extensions/arc/src/ui/dashboards/postgres/postgresDiagnoseAndSolveProblemsPage.ts
View File

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

24
extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts
View File

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

6
extensions/arc/src/ui/dashboards/postgres/postgresPropertiesPage.ts
View File

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

2
extensions/arc/src/ui/dashboards/postgres/postgresResourceHealthPage.ts
View File

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

8
extensions/arc/src/ui/dashboards/postgres/postgresSupportRequestPage.ts
View File

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

6
extensions/arc/src/ui/dialogs/addPGExtensionsDialog.ts
View File

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

2
extensions/arc/src/ui/dialogs/connectControllerDialog.ts
View File

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

8
extensions/arc/src/ui/dialogs/connectSqlDialog.ts
View File

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