ckaczor/azuredatastudio
Archived
1
0
Fork 0
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
extensions/arc/src/ui/components/filePicker.ts
+3 -3
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();
}
extensions/arc/src/ui/components/keyValueContainer.ts
+5 -5
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();
extensions/arc/src/ui/components/radioOptionsGroup.ts
+2 -2
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,
extensions/arc/src/ui/dashboards/controller/controllerDashboardOverviewPage.ts
+8 -8
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();
extensions/arc/src/ui/dashboards/miaa/miaaComputeAndStoragePage.ts
+13 -13
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();
extensions/arc/src/ui/dashboards/miaa/miaaConnectionStringsPage.ts
+3 -3
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);
extensions/arc/src/ui/dashboards/miaa/miaaDashboardOverviewPage.ts
+9 -9
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();
extensions/arc/src/ui/dashboards/postgres/postgresComputeAndStoragePage.ts
+2 -2
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' }
extensions/arc/src/ui/dashboards/postgres/postgresConnectionStringsPage.ts
+4 -4
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();
extensions/arc/src/ui/dashboards/postgres/postgresDiagnoseAndSolveProblemsPage.ts
+3 -3
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'
extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts
+12 -12
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();
extensions/arc/src/ui/dashboards/postgres/postgresPropertiesPage.ts
+3 -3
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();
extensions/arc/src/ui/dashboards/postgres/postgresResourceHealthPage.ts
+1 -1
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();
extensions/arc/src/ui/dashboards/postgres/postgresSupportRequestPage.ts
+4 -4
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'
extensions/arc/src/ui/dialogs/addPGExtensionsDialog.ts
+3 -3
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
extensions/arc/src/ui/dialogs/connectControllerDialog.ts
+1 -1
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();
extensions/arc/src/ui/dialogs/connectSqlDialog.ts
+4 -4
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();
extensions/big-data-cluster/src/bigDataCluster/dialog/addControllerDialog.ts
+4 -4
View File
@@ -119,7 +119,7 @@ export class AddControllerDialog {
this.uiModelBuilder = view.modelBuilder;
this.urlInputBox = this.uiModelBuilder.inputBox()
.withProperties<azdata.InputBoxProperties>({
.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<azdata.InputBoxProperties>({
.withProps({
placeHolder: loc.usernameRequired.toLocaleLowerCase(),
value: this.model.prefilledUsername
}).component();
this.passwordInputBox = this.uiModelBuilder.inputBox()
.withProperties<azdata.InputBoxProperties>({
.withProps({
placeHolder: loc.password,
inputType: 'password',
value: this.model.prefilledPassword
})
.component();
this.rememberPwCheckBox = this.uiModelBuilder.checkBox()
.withProperties<azdata.CheckBoxProperties>({
.withProps({
label: loc.rememberPassword,
checked: this.model.prefilledRememberPassword
}).component();
extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts
+13 -13
View File
@@ -59,7 +59,7 @@ export class BdcDashboardOverviewPage extends BdcDashboardPage {
// ##############
const propertiesLabel = this.modelView.modelBuilder.text()
.withProperties<azdata.TextComponentProperties>({ 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<azdata.TextComponentProperties>({
.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<azdata.DeclarativeTableProperties>(
.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<azdata.TextComponentProperties>({ 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<azdata.TextComponentProperties>({ 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<azdata.TextComponentProperties>({ 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<azdata.DeclarativeTableProperties>(
.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<azdata.TextComponentProperties>({
.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<azdata.HyperlinkComponentProperties>({
.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<azdata.ButtonProperties>({ 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<azdata.HyperlinkComponentProperties>({
.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<azdata.HyperlinkComponentProperties>({
.withProps({
title: endpoint.endpoint,
label: endpoint.endpoint,
url: '',
@@ -458,7 +458,7 @@ function createEndpointComponent(modelBuilder: azdata.ModelBuilder, endpoint: En
}
else {
return modelBuilder.text()
.withProperties<azdata.TextComponentProperties>({
.withProps({
value: endpoint.endpoint,
title: endpoint.endpoint,
CSSStyles: { ...cssStyles.text }
extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardPage.ts
+2 -2
View File
@@ -30,7 +30,7 @@ export abstract class BdcDashboardPage extends InitializingComponent {
protected createToolbarContainer(): azdata.ToolbarContainer {
// Refresh button
this._refreshButton = this.modelView.modelBuilder.button()
.withProperties<azdata.ButtonProperties>({
.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<azdata.ButtonProperties>({
.withProps({
label: loc.troubleshoot,
iconPath: IconPathHelper.notebook
}).component();
extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts
+8 -8
View File
@@ -54,7 +54,7 @@ export class BdcDashboardResourceStatusPage extends BdcDashboardPage {
// Header label
const healthStatusHeaderLabel = this.modelView.modelBuilder.text()
.withProperties<azdata.TextComponentProperties>({
.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<azdata.DeclarativeTableProperties>(
.withProps(
{
columns: [
{ // status icon
@@ -168,7 +168,7 @@ export class BdcDashboardResourceStatusPage extends BdcDashboardPage {
// Title label
const endpointsLabel = this.modelView.modelBuilder.text()
.withProperties<azdata.TextComponentProperties>({ 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<azdata.DeclarativeTableProperties>(
.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<azdata.HyperlinkComponentProperties>({
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<azdata.HyperlinkComponentProperties>({
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<azdata.HyperlinkComponentProperties>({
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<azdata.TextComponentProperties>({
.withProps({
value: getHealthStatusIcon(instanceStatus.healthStatus),
ariaRole: 'img',
title: getHealthStatusDisplayText(instanceStatus.healthStatus),
extensions/big-data-cluster/src/bigDataCluster/dialog/hdfsDialogBase.ts
+3 -3
View File
@@ -133,7 +133,7 @@ export abstract class HdfsDialogBase<T extends HdfsDialogProperties, R> {
this.uiModelBuilder = view.modelBuilder;
this.urlInputBox = this.uiModelBuilder.inputBox()
.withProperties<azdata.InputBoxProperties>({
.withProps({
placeHolder: loc.url.toLocaleLowerCase(),
value: this.model.props.url,
enabled: false
@@ -146,12 +146,12 @@ export abstract class HdfsDialogBase<T extends HdfsDialogProperties, R> {
}).component();
this.authDropdown.onValueChanged(e => this.onAuthChanged());
this.usernameInputBox = this.uiModelBuilder.inputBox()
.withProperties<azdata.InputBoxProperties>({
.withProps({
placeHolder: loc.username.toLocaleLowerCase(),
value: this.model.props.username
}).component();
this.passwordInputBox = this.uiModelBuilder.inputBox()
.withProperties<azdata.InputBoxProperties>({
.withProps({
placeHolder: loc.password.toLocaleLowerCase(),
inputType: 'password',
value: this.model.props.password
extensions/big-data-cluster/src/bigDataCluster/dialog/mountHdfsDialog.ts
+5 -5
View File
@@ -151,16 +151,16 @@ export class MountHdfsDialog extends HdfsDialogBase<MountHdfsProperties, void> {
let pathVal = this.model.props.hdfsPath;
pathVal = (!pathVal || pathVal === '/') ? newMountName : (pathVal + newMountName);
this.pathInputBox = this.uiModelBuilder.inputBox()
.withProperties<azdata.InputBoxProperties>({
.withProps({
value: pathVal
}).component();
this.remoteUriInputBox = this.uiModelBuilder.inputBox()
.withProperties<azdata.InputBoxProperties>({
.withProps({
value: this.model.props.remoteUri
})
.component();
this.credentialsInputBox = this.uiModelBuilder.inputBox()
.withProperties<azdata.InputBoxProperties>({
.withProps({
inputType: 'password',
value: this.model.props.credentials
})
@@ -224,7 +224,7 @@ export class RefreshMountDialog extends HdfsDialogBase<MountHdfsProperties, void
protected getMainSectionComponents(): (azdata.FormComponentGroup | azdata.FormComponent)[] {
this.pathInputBox = this.uiModelBuilder.inputBox()
.withProperties<azdata.InputBoxProperties>({
.withProps({
value: this.model.props.hdfsPath
}).component();
return [
@@ -305,7 +305,7 @@ export class DeleteMountDialog extends HdfsDialogBase<MountHdfsProperties, void>
protected getMainSectionComponents(): (azdata.FormComponentGroup | azdata.FormComponent)[] {
this.pathInputBox = this.uiModelBuilder.inputBox()
.withProperties<azdata.InputBoxProperties>({
.withProps({
value: this.model.props.hdfsPath
}).component();
return [
extensions/data-workspace/src/dialogs/openExistingDialog.ts
+7 -7
View File
@@ -98,7 +98,7 @@ export class OpenExistingDialog extends DialogBase {
}
protected async initialize(view: azdataType.ModelView): Promise<void> {
this.localRadioButton = view.modelBuilder.radioButton().withProperties<azdataType.RadioButtonProperties>({
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<azdataType.RadioButtonProperties>({
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<azdataType.InputBoxProperties>({
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<azdataType.InputBoxProperties>({
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<azdataType.ButtonProperties>({
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<azdataType.InputBoxProperties>({
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<azdataType.ButtonProperties>({
const localProjectBrowseFolderButton = view.modelBuilder.button().withProps({
ariaLabel: constants.BrowseButtonText,
iconPath: IconPathHelper.folder,
width: '18px',
extensions/data-workspace/src/dialogs/projectDashboard.ts
+9 -9
View File
@@ -84,7 +84,7 @@ export class ProjectDashboard {
});
const refreshButton = this.modelView!.modelBuilder.button()
.withProperties<azdataType.ButtonProperties>({
.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<azdataType.ButtonProperties>({
.withProps({
label: projectAction.id,
iconPath: projectAction.icon,
height: '20px'
@@ -159,13 +159,13 @@ export class ProjectDashboard {
}).component();
const titleLabel = this.modelView!.modelBuilder.text()
.withProperties<azdataType.TextComponentProperties>({ 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<azdataType.TextComponentProperties>({ 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<azdataType.TextComponentProperties>({ 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<azdataType.TextComponentProperties>({ 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<azdataType.ImageComponentProperties>({
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<azdataType.TextComponentProperties>({
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<azdataType.DeclarativeTableProperties>({ 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);
}
extensions/import/src/wizard/pages/prosePreviewPage.ts
+1 -1
View File
@@ -65,7 +65,7 @@ export class ProsePreviewPage extends ImportPage {
}
async start(): Promise<boolean> {
this.table = this.view.modelBuilder.table().withProperties<azdata.TableComponentProperties>({
this.table = this.view.modelBuilder.table().withProps({
data: undefined,
columns: undefined,
forceFitColumns: azdata.ColumnSizingMode.DataFit
extensions/machine-learning/src/views/externalLanguages/languagesTable.ts
+1 -1
View File
@@ -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<azdata.DeclarativeTableProperties>(
.withProps(
{
columns: [
{ // Name
extensions/machine-learning/src/views/models/azureModelsTable.ts
+1 -1
View File
@@ -36,7 +36,7 @@ export class AzureModelsTable extends ModelViewBase implements IDataComponent<Wo
*/
public registerComponent(modelBuilder: azdata.ModelBuilder): azdata.DeclarativeTableComponent {
this._table = modelBuilder.declarativeTable()
.withProperties<azdata.DeclarativeTableProperties>(
.withProps(
{
columns: [
{ // Action
extensions/machine-learning/src/views/models/manageModels/currentModelsTable.ts
+1 -1
View File
@@ -152,7 +152,7 @@ export class CurrentModelsTable extends ModelViewBase implements IDataComponent<
);
}
this._table = modelBuilder.declarativeTable()
.withProperties<azdata.DeclarativeTableProperties>(
.withProps(
{
columns: columns,
data: [],
extensions/machine-learning/src/views/models/modelsDetailsTableComponent.ts
+1 -1
View File
@@ -28,7 +28,7 @@ export class ModelsDetailsTableComponent extends ModelViewBase implements IDataC
*/
public registerComponent(modelBuilder: azdata.ModelBuilder): azdata.Component {
this._table = modelBuilder.declarativeTable()
.withProperties<azdata.DeclarativeTableProperties>(
.withProps(
{
columns: [
{ // File Name
extensions/machine-learning/src/views/models/prediction/columnsTable.ts
+1 -1
View File
@@ -125,7 +125,7 @@ export class ColumnsTable extends ModelViewBase implements IDataComponent<Predic
}
this._table = modelBuilder.declarativeTable()
.withProperties<azdata.DeclarativeTableProperties>(
.withProps(
{
columns: columnHeader,
data: [],
extensions/machine-learning/src/views/widgets/dashboardWidget.ts
+1 -1
View File
@@ -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<azdata.ButtonProperties>({
const buttonContainer = view.modelBuilder.button().withProps({
buttonType: azdata.ButtonType.Informational,
description: taskMetaData.description,
height: maxHeight,
extensions/mssql/src/dashboard/serviceEndpoints.ts
+3 -3
View File
@@ -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<azdata.TextComponentProperties>({ 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<azdata.HyperlinkComponentProperties>({
.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<azdata.TextComponentProperties>(
.withProps(
{
value: endpointInfo.endpoint,
title: endpointInfo.endpoint,
extensions/mssql/src/hdfs/ui/hdfsManageAccessDialog.ts
+15 -15
View File
@@ -111,13 +111,13 @@ export class ManageAccessDialog {
const locationContainer = this.modelBuilder.flexContainer().withLayout({ flexFlow: 'row', alignItems: 'center' }).component();
const locationLabel = this.modelBuilder.text()
.withProperties<azdata.TextComponentProperties>({
.withProps({
value: loc.locationTitle,
CSSStyles: { ...cssStyles.titleCss }
}).component();
const pathLabel = this.modelBuilder.text()
.withProperties<azdata.TextComponentProperties>({
.withProps({
value: this.hdfsPath,
title: this.hdfsPath,
height: locationLabelHeight,
@@ -141,7 +141,7 @@ export class ManageAccessDialog {
// = Permissions Title =
// =====================
const permissionsTitle = this.modelBuilder.text()
.withProperties<azdata.TextComponentProperties>({ 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<azdata.CheckBoxProperties>({
.withProps({
width: checkboxSize,
height: checkboxSize,
checked: permissionStatus.stickyBit,
@@ -184,7 +184,7 @@ export class ManageAccessDialog {
// ===========================
const addUserOrGroupTitle = this.modelBuilder.text()
.withProperties<azdata.TextComponentProperties>({ 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<azdata.InputBoxProperties>({
.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<azdata.DeclarativeTableProperties>(
.withProps(
{
columns: posixPermissionsColumns,
data: posixPermissionData
@@ -321,7 +321,7 @@ export class ManageAccessDialog {
});
const namedUsersAndGroupsTable = this.modelBuilder.declarativeTable()
.withProperties<azdata.DeclarativeTableProperties>(
.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<azdata.RadioButtonProperties>({ 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<azdata.ImageComponentProperties>({
.withProps({
iconPath: imageProperties.iconPath,
width: permissionsTypeIconColumnWidth,
height: permissionsRowHeight,
@@ -474,7 +474,7 @@ export class ManageAccessDialog {
if (includeDelete) {
const deleteButton = this.modelBuilder.button()
.withProperties<azdata.ButtonProperties>(
.withProps(
{
label: '',
title: loc.deleteTitle,
@@ -492,7 +492,7 @@ export class ManageAccessDialog {
private createInheritDefaultsCheckbox(): azdata.CheckBoxComponent {
this.inheritDefaultsCheckbox = this.modelBuilder.checkBox()
.withProperties<azdata.CheckBoxProperties>({
.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<azdata.TextComponentProperties>({
.withProps({
value: loc.accessHeader,
ariaHidden: true,
CSSStyles: {
@@ -571,7 +571,7 @@ export class ManageAccessDialog {
// Default
const defaultSectionHeader = this.modelBuilder.text()
.withProperties<azdata.TextComponentProperties>({
.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<azdata.CheckBoxProperties>({
.withProps({
checked: checked,
enabled: enabled,
height: checkboxSize,
extensions/mssql/src/sparkFeature/dialog/sparkJobSubmission/sparkAdvancedTab.ts
+3 -3
View File
@@ -99,7 +99,7 @@ export class SparkAdvancedTab {
});
this._driverCoresInputBox = builder.inputBox()
.withProperties<azdata.InputBoxProperties>({ inputType: 'number', min: 1 })
.withProps({ inputType: 'number', min: 1 })
.component();
formContainer.addFormItem(
@@ -124,7 +124,7 @@ export class SparkAdvancedTab {
});
this._executorCoresInputBox = builder.inputBox()
.withProperties<azdata.InputBoxProperties>({ inputType: 'number', min: 1 })
.withProps({ inputType: 'number', min: 1 })
.component();
formContainer.addFormItem(
{
@@ -137,7 +137,7 @@ export class SparkAdvancedTab {
});
this._executorCountInputBox = builder.inputBox()
.withProperties<azdata.InputBoxProperties>({ inputType: 'number', min: 1 })
.withProps({ inputType: 'number', min: 1 })
.component();
formContainer.addFormItem(
{
extensions/mssql/src/sparkFeature/dialog/sparkJobSubmission/sparkConfigurationTab.ts
+1 -1
View File
@@ -75,7 +75,7 @@ export class SparkConfigurationTab {
title: localize('sparkJobSubmission.SparkCluster', "Spark Cluster")
}, baseFormItemLayout);
this._fileSourceDropDown = builder.dropDown().withProperties<azdata.DropDownProperties>({
this._fileSourceDropDown = builder.dropDown().withProps({
values: [SparkFileSource.Local.toString(), SparkFileSource.HDFS.toString()],
value: (this._path) ? SparkFileSource.HDFS.toString() : SparkFileSource.Local.toString()
}).component();
extensions/notebook/src/dialog/configurePython/configurePathPage.ts
+8 -8
View File
@@ -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<azdata.TextComponentProperties>({
.withProps({
value: wizardDescription,
CSSStyles: {
'padding': '0px',
@@ -41,14 +41,14 @@ export class ConfigurePathPage extends BasePage {
}).component();
this.pythonLocationDropdown = this.view.modelBuilder.dropDown()
.withProperties<azdata.DropDownProperties>({
.withProps({
value: undefined,
values: [],
width: '400px'
}).component();
this.pythonDropdownLoader = this.view.modelBuilder.loadingComponent()
.withItem(this.pythonLocationDropdown)
.withProperties<azdata.LoadingComponentProperties>({
.withProps({
loading: false
})
.component();
@@ -78,13 +78,13 @@ export class ConfigurePathPage extends BasePage {
}]).component();
let selectInstallContainer = this.view.modelBuilder.divContainer()
.withItems([selectInstallForm])
.withProperties<azdata.DivContainerProperties>({
.withProps({
clickable: false
}).component();
let allParentItems = [selectInstallContainer];
if (this.model.pythonLocation) {
let installedPathTextBox = this.view.modelBuilder.inputBox().withProperties<azdata.TextComponentProperties>({
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<azdata.DivContainerProperties>({
.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<azdata.RadioButtonProperties>({
.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<azdata.RadioButtonProperties>({
.withProps({
name: buttonGroup,
label: localize('configurePython.existingInstall', "Use existing Python installation"),
checked: useExistingPython
extensions/notebook/src/dialog/configurePython/pickPackagesPage.ts
+3 -3
View File
@@ -35,12 +35,12 @@ export class PickPackagesPage extends BasePage {
public async initialize(): Promise<boolean> {
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<azdata.TextComponentProperties>({
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<azdata.DropDownProperties>({
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<azdata.DeclarativeTableProperties>({
this.requiredPackagesTable = this.view.modelBuilder.declarativeTable().withProps({
columns: [{
displayName: nameColumn,
ariaLabel: nameColumn,
extensions/notebook/src/dialog/createBookDialog.ts
+1 -1
View File
@@ -68,7 +68,7 @@ export class CreateBookDialog {
this.view = view;
const jupyterBookDocumentation = this.view.modelBuilder.hyperlink()
.withProperties<azdata.HyperlinkComponentProperties>({
.withProps({
label: loc.learnMore,
url: 'https://jupyterbook.org/intro.html',
CSSStyles: { 'margin-bottom': '0px', 'margin-top': '0px', 'font-size': 'small' }
extensions/notebook/src/dialog/remoteBookDialog.ts
+1 -1
View File
@@ -60,7 +60,7 @@ export class RemoteBookDialog {
fireOnTextChange: true,
}).component();
this.searchButton = this.view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
this.searchButton = this.view.modelBuilder.button().withProps({
label: loc.search,
title: loc.search,
width: '200px',
extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/deployAzureSQLDBWizardModel.ts
+1 -1
View File
@@ -111,7 +111,7 @@ export class DeployAzureSQLDBWizardModel extends ResourceTypeModel {
});
const labelText = view.modelBuilder.text()
.withProperties<azdata.TextComponentProperties>(
.withProps(
{
value: title,
width: '250px',
extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/azureSettingsPage.ts
+2 -2
View File
@@ -166,12 +166,12 @@ export class AzureSettingsPage extends BasePage {
this.populateAzureSubscriptionsDropdown();
});
this.signInButton = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
this.signInButton = view.modelBuilder.button().withProps({
label: localizedConstants.signIn,
width: '100px',
secondary: true
}).component();
this.refreshButton = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
this.refreshButton = view.modelBuilder.button().withProps({
label: localizedConstants.refresh,
width: '100px',
secondary: true
extensions/resource-deployment/src/ui/deployAzureSQLDBWizard/pages/summaryPage.ts
+1 -1
View File
@@ -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<azdata.TextComponentProperties>(
.withProps(
{
value: title,
width: '250px',
extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/deployAzureSQLVMWizardModel.ts
+1 -1
View File
@@ -146,7 +146,7 @@ export class DeployAzureSQLVMWizardModel extends ResourceTypeModel {
});
const labelText = view.modelBuilder.text()
.withProperties<azdata.TextComponentProperties>(
.withProps(
{
value: title,
width: '250px',
extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/azureSettingsPage.ts
+2 -2
View File
@@ -110,12 +110,12 @@ export class AzureSettingsPage extends BasePage {
this.populateAzureSubscriptionsDropdown();
});
this.signInButton = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
this.signInButton = view.modelBuilder.button().withProps({
label: localizedConstants.signIn,
width: '100px',
secondary: true
}).component();
this.refreshButton = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({
this.refreshButton = view.modelBuilder.button().withProps({
label: localizedConstants.refresh,
width: '100px',
secondary: true
extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/networkSettingsPage.ts
+1 -1
View File
@@ -212,7 +212,7 @@ export class NetworkSettingsPage extends BasePage {
private async createSubnetDropdown(view: azdata.ModelView) {
this._newSubnetCheckbox = view.modelBuilder.checkBox().withProperties<azdata.CheckBoxProperties>({
this._newSubnetCheckbox = view.modelBuilder.checkBox().withProps({
label: constants.NetworkSettingsNewSubnet,
checked: false
}).component();
extensions/resource-deployment/src/ui/deployAzureSQLVMWizard/pages/summaryPage.ts
+1 -1
View File
@@ -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<azdata.TextComponentProperties>(
.withProps(
{
value: title,
width: '250px',
extensions/resource-deployment/src/ui/deployClusterWizard/pages/deploymentProfilePage.ts
+6 -6
View File
@@ -31,11 +31,11 @@ export class DeploymentProfilePage extends ResourceTypePage {
public initialize(): void {
this.pageObject.registerContent(async (view: azdata.ModelView): Promise<void> => {
this._container = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column' }).component();
const hintText = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
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<azdata.LoadingComponentProperties>({
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<azdata.RadioButtonProperties>({
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<azdata.TableComponentProperties>({
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<azdata.TableComponentProperties>({
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<azdata.TableComponentProperties>({
return view.modelBuilder.table().withProps({
columns: [this.createDescriptionColumn(localize('deployCluster.featureText', "Feature")), ...this.createProfileColumns(profiles)],
data: data,
title: featureTableTitle,
extensions/resource-deployment/src/ui/deployClusterWizard/pages/serviceSettingsPage.ts
+1 -1
View File
@@ -302,7 +302,7 @@ export class ServiceSettingsPage extends ResourceTypePage {
this.onNewInputComponentCreated(VariableNames.SQLServerLogsStorageSize_VariableName, sqlServerMasterLogsStorageClaimSizeInputInfo);
const storageSettingTable = view.modelBuilder.declarativeTable()
.withProperties<azdata.DeclarativeTableProperties>(
.withProps(
{
columns: [
this.createStorageSettingColumn(localize('deployCluster.ServiceName', "Service name"), false),
extensions/resource-deployment/src/ui/deployClusterWizard/pages/summaryPage.ts
+1 -1
View File
@@ -358,7 +358,7 @@ export class SummaryPage extends ResourceTypePage {
};
const storageTableTitle = localize('deployCluster.StorageSettings', "Storage settings");
const storageTable = this.view.modelBuilder.table().withProperties<azdata.TableComponentProperties>({
const storageTable = this.view.modelBuilder.table().withProps({
title: storageTableTitle,
ariaLabel: storageTableTitle,
data: [
extensions/resource-deployment/src/ui/deployClusterWizard/pages/targetClusterPage.ts
+2 -2
View File
@@ -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<azdata.DivContainerProperties>({ 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<azdata.RadioButtonProperties>({
let option = this.view!.modelBuilder.radioButton().withProps({
label: clusterContext.name,
checked: clusterContext.isCurrentContext,
name: ClusterRadioButtonGroupName
extensions/resource-deployment/src/ui/modelViewUtils.ts
+6 -6
View File
@@ -192,7 +192,7 @@ function createInputBoxField({ context, inputBoxType = 'text' }: { context: Fiel
}
export function createInputBoxInputInfo(view: azdata.ModelView, inputInfo: InputBoxInfo): InputComponentInfo<azdata.InputBoxComponent> {
const component = view.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({
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<azdata.TextComponentProperties>({
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<azdata.CheckBoxProperties>({
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<azdata.DropDownComponent> {
const dropdown = view.modelBuilder.dropDown().withProperties<azdata.DropDownProperties>({
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<azdata.ComponentProperties>({ 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<azdata.InputBoxProperties>({
const confirmPasswordInput = context.view.modelBuilder.inputBox().withProps({
ariaLabel: context.fieldInfo.confirmationLabel,
inputType: 'password',
required: true,
extensions/resource-deployment/src/ui/radioGroupLoadingComponentBuilder.ts
+2 -2
View File
@@ -13,7 +13,7 @@ export class RadioGroupLoadingComponentBuilder implements azdata.ComponentBuilde
private _onValueChangedEmitter: vscode.EventEmitter<void> = 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<azdata.DivContainerProperties>({ 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<azdata.RadioButtonProperties>({
const radioOption = this._view!.modelBuilder.radioButton().withProps({
label: option.displayName,
value: option.name,
checked: option.displayName === defaultValue,
extensions/resource-deployment/src/ui/resourceTypePickerDialog.ts
+1 -1
View File
@@ -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<azdata.RadioCardGroupComponentProperties>({
this._cardGroup = view.modelBuilder.radioCardGroup().withProps({
cards: this._resourceTypes.map((resourceType) => {
return this.createOrGetCard(resourceType);
}),
extensions/resource-deployment/src/ui/toolsAndEulaSettingsPage.ts
+6 -6
View File
@@ -122,7 +122,7 @@ export class ToolsAndEulaPage extends ResourceTypePage {
value: loc.discoverPathOrAdditionalInformationText,
width: 435
};
this._toolsTable = view.modelBuilder.table().withProperties<azdata.TableComponentProperties>({
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<azdata.LoadingComponentProperties>({
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<azdata.TextComponentProperties>({
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<azdata.DropDownProperties>({
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<azdata.CheckBoxProperties>({
this._agreementCheckBox = this.view.modelBuilder.checkBox().withProps({
ariaLabel: this.getAgreementDisplayText(agreementInfo),
required: true
}).component();
const text = this.view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
const text = this.view.modelBuilder.text().withProps({
value: agreementInfo.template,
links: agreementInfo.links,
requiredIndicator: true
extensions/schema-compare/src/schemaCompareMainWindow.ts
+2 -2
View File
@@ -163,13 +163,13 @@ export class SchemaCompareMainWindow {
this.sourceName = getEndpointName(this.sourceEndpointInfo);
this.targetName = ' ';
this.sourceNameComponent = this.view.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({
this.sourceNameComponent = this.view.modelBuilder.inputBox().withProps({
value: this.sourceName,
title: this.sourceName,
enabled: false
}).component();
this.targetNameComponent = this.view.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({
this.targetNameComponent = this.view.modelBuilder.inputBox().withProps({
value: this.targetName,
title: this.targetName,
enabled: false
extensions/sql-assessment/src/assessmentResultGrid.ts
+10 -10
View File
@@ -58,7 +58,7 @@ export class AssessmentResultGrid implements vscode.Disposable {
};
this.table = view.modelBuilder.table()
.withProperties<azdata.TableComponentProperties>({
.withProps({
data: [],
columns: [
{
@@ -214,34 +214,34 @@ export class AssessmentResultGrid implements vscode.Disposable {
const flexSettings = '0 1 auto';
this.checkNamePlaceholder = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
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<azdata.TextComponentProperties>({
this.checkDescriptionPlaceholder = view.modelBuilder.text().withProps({
CSSStyles: { ...cssNoMarginFloatLeft, 'padding-right': '2px' }
}).component();
this.clickHereLabel = view.modelBuilder.hyperlink().withProperties<azdata.HyperlinkComponentProperties>({
this.clickHereLabel = view.modelBuilder.hyperlink().withProps({
label: localize('asmt.details.clickHere', "Click here"),
url: '',
CSSStyles: cssNoMarginFloatLeft
}).component();
const toLearnMoreText = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
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<azdata.TextComponentProperties>({
const tagsCaption = view.modelBuilder.text().withProps({
CSSStyles: cssBlockCaption,
value: LocalizedStrings.TAGS_COLUMN_NAME
}).component();
this.tagsPlaceholder = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
this.tagsPlaceholder = view.modelBuilder.text().withProps({
CSSStyles: cssNoMarginFloatLeft
}).component();
this.asmtMessagePlaceholder = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
this.asmtMessagePlaceholder = view.modelBuilder.text().withProps({
CSSStyles: cssNoMarginFloatLeft
}).component();
this.descriptionCaption = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
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<azdata.TextComponentProperties>({
view.modelBuilder.text().withProps({
CSSStyles: cssBlockCaption,
value: localize('asmt.details.recommendation', "Recommendation")
}).component(),
extensions/sql-assessment/src/tabs/assessmentMainTab.ts
+8 -8
View File
@@ -111,7 +111,7 @@ export class SqlAssessmentMainTab extends SqlAssessmentTab {
const maxNameLength: number = 40;
const btnInvokeAssessment = view.modelBuilder.button()
.withProperties<azdata.ButtonProperties>({
.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<azdata.LoadingComponentProperties>({
.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<azdata.ButtonProperties>({
.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<azdata.LoadingComponentProperties>({
.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<azdata.ButtonProperties>({
.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<azdata.ButtonProperties>({
.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<azdata.ButtonProperties>({
.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<azdata.ButtonProperties>({
.withProps({
label: LocalizedStrings.SECTION_TITLE_API,
iconPath: {
dark: this.extensionContext.asAbsolutePath('resources/dark/status_info.svg'),
extensions/sql-assessment/src/tabs/historyTab.ts
+4 -4
View File
@@ -45,12 +45,12 @@ export class SqlAssessmentHistoryTab extends SqlAssessmentTab {
height: '100%'
}).component();
const title = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
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<azdata.HyperlinkComponentProperties>({
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<azdata.ComponentProperties>({
}).withProps({
CSSStyles: {
'padding-left': '15px'
}
@@ -114,7 +114,7 @@ export class SqlAssessmentHistoryTab extends SqlAssessmentTab {
private async createHistorySummaryTable(view: azdata.ModelView): Promise<azdata.TableComponent> {
const cssHeader = 'no-borders align-with-header';
return view.modelBuilder.table()
.withProperties<azdata.TableComponentProperties>({
.withProps({
data: [],
columns: [
{ value: localize('asmt.history.summaryAsmtDate', "Assessment Date"), headerCssClass: cssHeader, width: 125 },
extensions/sql-database-projects/src/dialogs/addDatabaseReferenceDialog.ts
+1 -1
View File
@@ -496,7 +496,7 @@ export class AddDatabaseReferenceDialog {
}
private createLabel(value: string, required: boolean = false): azdataType.TextComponent {
const label = this.view!.modelBuilder.text().withProperties<azdataType.TextComponentProperties>({
const label = this.view!.modelBuilder.text().withProps({
value: value,
width: cssStyles.addDatabaseReferenceDialogLabelWidth,
requiredIndicator: required
extensions/sql-database-projects/src/dialogs/createProjectFromDatabaseDialog.ts
+7 -7
View File
@@ -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<azdataType.TextComponentProperties>({
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<azdataType.TextComponentProperties>({
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<azdataType.InputBoxProperties>({
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<azdataType.TextComponentProperties>({
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<azdataType.TextComponentProperties>({
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<azdataType.ButtonProperties>({
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<azdataType.TextComponentProperties>({
const folderStructureLabel = view.modelBuilder.text().withProps({
value: constants.folderStructureLabel,
requiredIndicator: true,
width: cssStyles.createProjectFromDatabaseLabelWidth
extensions/sql-database-projects/src/dialogs/publishDatabaseDialog.ts
+4 -4
View File
@@ -368,7 +368,7 @@ export class PublishDatabaseDialog {
width: cssStyles.publishDialogTextboxWidth
}).component();
const profileLabel = view.modelBuilder.text().withProperties<azdataType.TextComponentProperties>({
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<azdataType.TextComponentProperties>({
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<azdataType.TextComponentProperties>({
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<azdataType.DeclarativeTableProperties>({
const table = view.modelBuilder.declarativeTable().withProps({
ariaLabel: constants.sqlCmdTableLabel,
dataValues: this.convertSqlCmdVarsToTableFormat(this.sqlCmdVars),
columns: [
extensions/sql-migration/src/dialog/assessmentResults/sqlAssessmentResult.ts
+5 -5
View File
@@ -16,7 +16,7 @@ export class SqlAssessmentResult {
}
private createTitleComponent(view: azdata.ModelView): azdata.TextComponent {
const title = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
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<azdata.TextComponentProperties>({
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<azdata.TextComponentProperties>({
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<azdata.TextComponentProperties>({
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<azdata.TableComponentProperties>({
const impactedObjects = view.modelBuilder.table().withProps({
title: 'Impacted Objects',
columns: [
'Type', // TODO localize
extensions/sql-migration/src/dialog/assessmentResults/sqlAssessmentResultsList.ts
+1 -1
View File
@@ -14,7 +14,7 @@ export class SqlAssessmentResultList {
}
private createListComponent(view: azdata.ModelView): azdata.ListBoxComponent {
const list = view.modelBuilder.listBox().withProperties<azdata.ListBoxProperties>({
const list = view.modelBuilder.listBox().withProps({
values: [
'Filestream not supported in Azure SQL Managed Instance',
'Number of Log files per database something something',
extensions/sql-migration/src/dialog/createSqlMigrationService/createSqlMigrationServiceDialog.ts
+4 -4
View File
@@ -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<azdata.ComponentWithIconProperties>({
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<azdata.ComponentWithIconProperties>({
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<azdata.ComponentWithIconProperties>({
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<azdata.ComponentWithIconProperties>({
this._refreshKey2Button = this._view.modelBuilder.button().withProps({
title: constants.REFRESH_KEY2,
iconPath: IconPathHelper.refresh,
ariaLabel: constants.REFRESH_KEY2,
extensions/sql-migration/src/dialog/sqlMigrationService/sqlMigrationServiceDetailsDialog.ts
+4 -4
View File
@@ -229,7 +229,7 @@ export class SqlMigrationServiceDetailsDialog {
const copyKey1Button = view.modelBuilder
.button()
.withProperties<azdata.ComponentWithIconProperties>({
.withProps({
title: constants.COPY_KEY1,
iconPath: IconPathHelper.copy,
height: IMAGE_SIZE,
@@ -245,7 +245,7 @@ export class SqlMigrationServiceDetailsDialog {
const copyKey2Button = view.modelBuilder
.button()
.withProperties<azdata.ComponentWithIconProperties>({
.withProps({
title: constants.COPY_KEY2,
iconPath: IconPathHelper.copy,
height: IMAGE_SIZE,
@@ -261,7 +261,7 @@ export class SqlMigrationServiceDetailsDialog {
const refreshKey1Button = view.modelBuilder
.button()
.withProperties<azdata.ComponentWithIconProperties>({
.withProps({
title: constants.REFRESH_KEY1,
iconPath: IconPathHelper.refresh,
height: IMAGE_SIZE,
@@ -274,7 +274,7 @@ export class SqlMigrationServiceDetailsDialog {
const refreshKey2Button = view.modelBuilder
.button()
.withProperties<azdata.ComponentWithIconProperties>({
.withProps({
title: constants.REFRESH_KEY2,
iconPath: IconPathHelper.refresh,
height: IMAGE_SIZE,
extensions/sql-migration/src/wizard/integrationRuntimePage.ts
+4 -4
View File
@@ -312,7 +312,7 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
}
}).component();
this._copy1 = this._view.modelBuilder.button().withProperties<azdata.ComponentWithIconProperties>({
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<azdata.ComponentWithIconProperties>({
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<azdata.ComponentWithIconProperties>({
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<azdata.ComponentWithIconProperties>({
this._refresh2 = this._view.modelBuilder.button().withProps({
title: constants.REFRESH_KEY2,
iconPath: IconPathHelper.refresh,
ariaLabel: constants.REFRESH_KEY2,
extensions/sql-migration/src/wizard/subscriptionSelectionPage.ts
+3 -3
View File
@@ -52,7 +52,7 @@ export class SubscriptionSelectionPage extends MigrationWizardPage {
}
private createAccountDropDown(view: azdata.ModelView): azdata.FormComponent<azdata.DropDownComponent> {
const dropDown = view.modelBuilder.dropDown().withProperties<azdata.DropDownProperties>({
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<azdata.DropDownComponent> {
const dropDown = view.modelBuilder.dropDown().withProperties<azdata.DropDownProperties>({
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<azdata.DropDownComponent> {
const dropDown = view.modelBuilder.dropDown().withProperties<azdata.DropDownProperties>({
const dropDown = view.modelBuilder.dropDown().withProps({
ariaLabel: SUBSCRIPTION_SELECTION_AZURE_PRODUCT_TITLE,
values: [],
editable: true,
samples/sqlservices/src/controllers/mainController.ts
+3 -3
View File
@@ -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<azdata.TableComponentProperties>({
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<azdata.CardProperties>({
.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<azdata.CardProperties>({
.withProps({
label: 'label2',
value: 'value2',
actions: [{ label: 'action' }]
samples/sqlservices/src/controllers/modelViewDashboard.ts
+7 -7
View File
@@ -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<azdata.ButtonProperties>({
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<azdata.InputBoxProperties>({ 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<azdata.ButtonProperties>({ label: 'Add a tab', width: '150px' }).component();
const removeTabButton = view.modelBuilder.button().withProperties<azdata.ButtonProperties>({ 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<azdata.InputBoxProperties>({ 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<azdata.InputBoxProperties>({ 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<azdata.InputBoxProperties>({ 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,