diff --git a/extensions/resource-deployment/src/ui/modelViewUtils.ts b/extensions/resource-deployment/src/ui/modelViewUtils.ts index 5686e9551d..b83332eca2 100644 --- a/extensions/resource-deployment/src/ui/modelViewUtils.ts +++ b/extensions/resource-deployment/src/ui/modelViewUtils.ts @@ -36,6 +36,7 @@ export type InputValueType = string | number | undefined; export type InputComponent = azdata.TextComponent | azdata.InputBoxComponent | azdata.DropDownComponent | azdata.CheckBoxComponent | RadioGroupLoadingComponentBuilder; export type InputComponentInfo = { component: T; + labelComponent?: azdata.TextComponent; getValue: () => Promise; getDisplayValue?: () => Promise; onValueChanged: vscode.Event; @@ -179,6 +180,7 @@ function createInputBoxField({ context, inputBoxType = 'text' }: { context: Fiel enabled: instanceOfDynamicEnablementInfo(context.fieldInfo.enabled) ? false : context.fieldInfo.enabled, // Dynamic enablement is initially set to false validations: context.fieldValidations }); + input.labelComponent = label; addLabelInputPairToContainer(context.view, context.components, label, input.component, context.fieldInfo); return input; } @@ -370,9 +372,13 @@ async function hookUpDynamicEnablement(context: WizardPageContext): Promise { const targetComponentValue = await targetComponent.getValue(); fieldComponent.component.enabled = targetComponentValue === targetValue; + const isRequired = fieldComponent.component.enabled === false ? false : field.required; + if (fieldComponent.labelComponent) { + fieldComponent.labelComponent.requiredIndicator = isRequired; + } // We also need to update the required flag so that when the component is disabled it won't block the page from proceeding if ('required' in fieldComponent.component) { - fieldComponent.component.required = fieldComponent.component.enabled === false ? false : field.required; + fieldComponent.component.required = isRequired; } }; targetComponent.onValueChanged(() => { @@ -632,6 +638,7 @@ function processDropdownOptionsTypeField(context: FieldContext): azdata.DropDown required: context.fieldInfo.required, label: context.fieldInfo.label }); + dropdown.labelComponent = label; dropdown.component.fireOnTextChange = true; context.onNewInputComponentCreated(context.fieldInfo.variableName || context.fieldInfo.label, dropdown); addLabelInputPairToContainer(context.view, context.components, label, dropdown.component, context.fieldInfo); @@ -798,6 +805,7 @@ function processFilePickerField(context: FieldContext): FilePickerInputs { enabled: typeof context.fieldInfo.enabled === 'boolean' ? context.fieldInfo.enabled : false, validations: context.fieldValidations }); + input.labelComponent = label; context.onNewInputComponentCreated(context.fieldInfo.variableName || context.fieldInfo.label, input); input.component.enabled = false; const browseFileButton = context.view!.modelBuilder.button().withProperties({ label: loc.browse, width: buttonWidth }).component(); @@ -928,6 +936,7 @@ async function createRadioOptions(context: FieldContext, getRadioButtonInfo?: (( context.fieldInfo.labelPosition = LabelPosition.Left; context.onNewInputComponentCreated(context.fieldInfo.variableName || context.fieldInfo.label, { component: radioGroupLoadingComponentBuilder, + labelComponent: label, getValue: async (): Promise => radioGroupLoadingComponentBuilder.value, getDisplayValue: async (): Promise => radioGroupLoadingComponentBuilder.displayValue, onValueChanged: radioGroupLoadingComponentBuilder.onValueChanged, @@ -1053,6 +1062,7 @@ async function processKubeStorageClassField(context: FieldContext): Promise({ label: loc.signIn, width: '100px' }).component(); const refreshButton = context.view!.modelBuilder.button().withProperties({ label: loc.refresh, width: '100px' }).component(); @@ -1111,6 +1122,7 @@ function createAzureSubscriptionDropdown( label: loc.subscription }); subscriptionDropdown.component.fireOnTextChange = true; + subscriptionDropdown.labelComponent = label; context.fieldInfo.subFields!.push({ label: label.value!, variableName: context.fieldInfo.subscriptionVariableName @@ -1245,6 +1257,7 @@ function createAzureResourceGroupsDropdown( label: loc.resourceGroup }); resourceGroupDropdown.component.fireOnTextChange = true; + resourceGroupDropdown.labelComponent = label; context.fieldInfo.subFields!.push({ label: label.value!, variableName: context.fieldInfo.resourceGroupVariableName @@ -1330,6 +1343,7 @@ async function processAzureLocationsField(context: AzureLocationsFieldContext): values: locationValues }); locationDropdown.component.fireOnTextChange = true; + locationDropdown.labelComponent = label; context.fieldInfo.subFields = context.fieldInfo.subFields || []; if (context.fieldInfo.locationVariableName) { context.fieldInfo.subFields!.push({ diff --git a/src/sql/workbench/api/common/extHostModelView.ts b/src/sql/workbench/api/common/extHostModelView.ts index fa618048f4..9d286727c4 100644 --- a/src/sql/workbench/api/common/extHostModelView.ts +++ b/src/sql/workbench/api/common/extHostModelView.ts @@ -1326,6 +1326,13 @@ class TextComponentWrapper extends ComponentWrapper implements azdata.TextCompon public set title(title: string) { this.setProperty('title', title); } + + public get requiredIndicator(): boolean { + return this.properties['requiredIndicator']; + } + public set requiredIndicator(requiredIndicator: boolean) { + this.setProperty('requiredIndicator', requiredIndicator); + } } class ImageComponentWrapper extends ComponentWithIconWrapper implements azdata.ImageComponentProperties {