Switch withProperties to be withProps (#16380)

* 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

View File

@@ -111,7 +111,7 @@ export class DeployAzureSQLDBWizardModel extends ResourceTypeModel {
});
const labelText = view.modelBuilder.text()
.withProperties<azdata.TextComponentProperties>(
.withProps(
{
value: title,
width: '250px',

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

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',

View File

@@ -146,7 +146,7 @@ export class DeployAzureSQLVMWizardModel extends ResourceTypeModel {
});
const labelText = view.modelBuilder.text()
.withProperties<azdata.TextComponentProperties>(
.withProps(
{
value: title,
width: '250px',

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

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();

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',

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,

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),

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: [

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

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,

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,

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);
}),

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