mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-02-16 10:58:30 -05:00
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:
@@ -111,7 +111,7 @@ export class DeployAzureSQLDBWizardModel extends ResourceTypeModel {
|
||||
});
|
||||
|
||||
const labelText = view.modelBuilder.text()
|
||||
.withProperties<azdata.TextComponentProperties>(
|
||||
.withProps(
|
||||
{
|
||||
value: title,
|
||||
width: '250px',
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -146,7 +146,7 @@ export class DeployAzureSQLVMWizardModel extends ResourceTypeModel {
|
||||
});
|
||||
|
||||
const labelText = view.modelBuilder.text()
|
||||
.withProperties<azdata.TextComponentProperties>(
|
||||
.withProps(
|
||||
{
|
||||
value: title,
|
||||
width: '250px',
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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),
|
||||
|
||||
@@ -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: [
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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);
|
||||
}),
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user