Remove inputValueTransformer and getInputComponentValue (#13502)

2026-02-11 02:32:35 -05:00 · 2020-11-20 10:51:00 -08:00
parent 2a81a0a70f
commit 172a044ba7
2 changed files with 124 additions and 170 deletions
--- a/extensions/resource-deployment/src/ui/modelViewUtils.ts
+++ b/extensions/resource-deployment/src/ui/modelViewUtils.ts
@@ -33,13 +33,11 @@ const localize = nls.loadMessageBundle();

 export type Validator = () => { valid: boolean, message: string };
 export type InputValueType = string | number | undefined;
-export type InputValueTransformer = (inputValue: string) => InputValueType | Promise<InputValueType>;
 export type InputComponent = azdata.TextComponent | azdata.InputBoxComponent | azdata.DropDownComponent | azdata.CheckBoxComponent | RadioGroupLoadingComponentBuilder;
 export type InputComponentInfo<T extends InputComponent> = {
 	component: T;
 	getValue: () => Promise<InputValueType>;
 	onValueChanged: vscode.Event<void>;
-	inputValueTransformer?: InputValueTransformer;
 	isPassword?: boolean
 };

@@ -168,7 +166,7 @@ interface InputBoxInfo {
 */
 function createInputBoxField({ context, inputBoxType = 'text' }: { context: FieldContext; inputBoxType?: azdata.InputBoxInputType; }) {
 	const label = createLabel(context.view, { text: context.fieldInfo.label, description: context.fieldInfo.description, required: context.fieldInfo.required, width: context.fieldInfo.labelWidth, cssStyles: context.fieldInfo.labelCSSStyles });
-	const input = createInputBox(context.view, {
+	const input = createInputBoxInputInfo(context.view, {
 		type: inputBoxType,
 		defaultValue: context.fieldInfo.defaultValue,
 		ariaLabel: context.fieldInfo.label,
@@ -184,7 +182,7 @@ function createInputBoxField({ context, inputBoxType = 'text' }: { context: Fiel
 	return input;
 }

-export function createInputBox(view: azdata.ModelView, inputInfo: InputBoxInfo): InputComponentInfo<azdata.InputBoxComponent> {
+export function createInputBoxInputInfo(view: azdata.ModelView, inputInfo: InputBoxInfo): InputComponentInfo<azdata.InputBoxComponent> {
 	const component = view.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({
 		value: inputInfo.defaultValue,
 		ariaLabel: inputInfo.ariaLabel,
@@ -198,7 +196,7 @@ export function createInputBox(view: azdata.ModelView, inputInfo: InputBoxInfo):
 	}).withValidation(async (component) => await validateInputBoxComponent(component, inputInfo.validations)).component();
 	return {
 		component: component,
-		getValue: async (): Promise<InputValueType> => component.value || '',
+		getValue: async (): Promise<InputValueType> => component.value,
 		onValueChanged: component.onTextChanged
 	};
 }
@@ -229,11 +227,19 @@ export function createLabel(view: azdata.ModelView, info: { text: string, descri
 * @param view - the ModelView object used to create the inputBox
 * @param info - an object to define the properties of the 'number' inputBox component. If the type property is set then it is overridden with 'number' type.
 */
-export function createNumberInput(view: azdata.ModelView, info: InputBoxInfo): InputComponentInfo<azdata.InputBoxComponent> {
+export function createNumberInputBoxInputInfo(view: azdata.ModelView, info: InputBoxInfo): InputComponentInfo<azdata.InputBoxComponent> {
 	info.type = 'number'; // for the type to be 'number'
-	return createInputBox(view, info);
+	return createInputBoxInputInfo(view, info);
 }

+export function createCheckboxInputInfo(view: azdata.ModelView, info: { initialValue: boolean, label: string, required?: boolean }): InputComponentInfo<azdata.CheckBoxComponent> {
+	const checkbox = createCheckbox(view, info);
+	return {
+		component: checkbox,
+		getValue: async () => checkbox.checked ? 'true' : 'false',
+		onValueChanged: checkbox.onChanged
+	};
+}
 export function createCheckbox(view: azdata.ModelView, info: { initialValue: boolean, label: string, required?: boolean }): azdata.CheckBoxComponent {
 	return view.modelBuilder.checkBox().withProperties<azdata.CheckBoxProperties>({
 		checked: info.initialValue,
@@ -242,8 +248,8 @@ export function createCheckbox(view: azdata.ModelView, info: { initialValue: boo
 	}).component();
 }

-export function createDropdown(view: azdata.ModelView, info: { defaultValue?: string | azdata.CategoryValue, values?: string[] | azdata.CategoryValue[], width?: string, editable?: boolean, required?: boolean, label: string }): azdata.DropDownComponent {
-	return view.modelBuilder.dropDown().withProperties<azdata.DropDownProperties>({
+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>({
 		values: info.values,
 		value: info.defaultValue,
 		width: info.width,
@@ -252,6 +258,12 @@ export function createDropdown(view: azdata.ModelView, info: { defaultValue?: st
 		required: info.required,
 		ariaLabel: info.label
 	}).component();
+
+	return {
+		component: dropdown,
+		getValue: async (): Promise<InputValueType> => typeof dropdown.value === 'string' ? dropdown.value : dropdown.value?.name,
+		onValueChanged: dropdown.onValueChanged,
+	};
 }

 export function initializeDialog(dialogContext: DialogContext): void {
@@ -451,7 +463,7 @@ export function createGroupContainer(view: azdata.ModelView, items: azdata.Compo
 	return view.modelBuilder.groupContainer().withItems(items).withLayout(layout).component();
 }

-function addLabelInputPairToContainer(view: azdata.ModelView, components: azdata.Component[], label: azdata.Component, input: azdata.Component | undefined, fieldInfo: FieldInfo, additionalComponents?: azdata.Component[]) {
+function addLabelInputPairToContainer(view: azdata.ModelView, components: azdata.Component[], label: azdata.Component, input: azdata.Component | undefined, fieldInfo: FieldInfo, additionalComponents?: azdata.Component[]): void {
 	const inputs: azdata.Component[] = [label];
 	if (input !== undefined) {
 		inputs.push(input);
@@ -479,7 +491,7 @@ async function processField(context: FieldContext): Promise<void> {
 			}
 		},
 		() => context.inputComponents[context.fieldInfo.variableName || context.fieldInfo.label].getValue(),  // callback to fetch the value of this field, and return the default value if the field value is undefined
-		(variable: string) => getInputComponentValue(context.inputComponents[variable]),  // callback to fetch the value of a variable corresponding to any field already defined.
+		(variable: string) => context.inputComponents[variable].getValue(),  // callback to fetch the value of a variable corresponding to any field already defined.
 		(targetVariable: string) => (<azdata.InputBoxComponent>context.inputComponents[targetVariable].component).onValidityChanged,
 		(disposable: vscode.Disposable) => context.onNewDisposableCreated(disposable)
 	)));
@@ -581,16 +593,18 @@ async function processOptionsTypeField(context: FieldContext): Promise<void> {
 	}
 }

-async function configureOptionsSourceSubfields(context: FieldContext, optionsSource: IOptionsSource, variableKey: string, optionsComponent: RadioGroupLoadingComponentBuilder | azdata.DropDownComponent, optionsSourceProvider: IOptionsSourceProvider) {
+async function configureOptionsSourceSubfields(context: FieldContext, optionsSource: IOptionsSource, variableKey: string, optionsComponent: RadioGroupLoadingComponentBuilder | azdata.DropDownComponent, optionsSourceProvider: IOptionsSourceProvider): Promise<void> {
 	context.fieldInfo.subFields!.push({
 		label: context.fieldInfo.label,
 		variableName: optionsSource.variableNames![variableKey]
 	});
 	context.onNewInputComponentCreated(optionsSource.variableNames![variableKey], {
 		component: optionsComponent,
-		inputValueTransformer: async (optionValue: string) => {
+		isPassword: await optionsSourceProvider.getIsPassword!(variableKey),
+		getValue: async (): Promise<InputValueType> => {
+			const value = (typeof optionsComponent.value === 'string' ? optionsComponent.value : optionsComponent.value?.name) || '';
 			try {
-				return await optionsSourceProvider.getVariableValue!(variableKey, optionValue);
+				return await optionsSourceProvider.getVariableValue!(variableKey, value);
 			} catch (e) {
 				disableControlButtons(context.container);
 				context.container.message = {
@@ -601,8 +615,6 @@ async function configureOptionsSourceSubfields(context: FieldContext, optionsSou
 				throw e;
 			}
 		},
-		isPassword: await optionsSourceProvider.getIsPassword!(variableKey),
-		getValue: async (): Promise<InputValueType> => (typeof optionsComponent.value === 'string' ? optionsComponent.value : optionsComponent.value?.displayName) || '',
 		onValueChanged: optionsComponent.onValueChanged
 	});
 }
@@ -610,7 +622,7 @@ async function configureOptionsSourceSubfields(context: FieldContext, optionsSou
 function processDropdownOptionsTypeField(context: FieldContext): azdata.DropDownComponent {
 	const label = createLabel(context.view, { text: context.fieldInfo.label, description: context.fieldInfo.description, required: context.fieldInfo.required, width: context.fieldInfo.labelWidth, cssStyles: context.fieldInfo.labelCSSStyles });
 	const options = context.fieldInfo.options as OptionsInfo;
-	const dropdown = createDropdown(context.view, {
+	const dropdown = createDropdownInputInfo(context.view, {
 		values: options.values,
 		defaultValue: options.defaultValue,
 		width: context.fieldInfo.inputWidth,
@@ -618,33 +630,27 @@ function processDropdownOptionsTypeField(context: FieldContext): azdata.DropDown
 		required: context.fieldInfo.required,
 		label: context.fieldInfo.label
 	});
-	dropdown.fireOnTextChange = true;
-	context.onNewInputComponentCreated(context.fieldInfo.variableName || context.fieldInfo.label, {
-		getValue: async (): Promise<InputValueType> => typeof dropdown.value === 'string' ? dropdown.value : dropdown.value?.displayName || '',
-		onValueChanged: dropdown.onValueChanged,
-		component: dropdown
-	});
-	addLabelInputPairToContainer(context.view, context.components, label, dropdown, context.fieldInfo);
-	return dropdown;
+	dropdown.component.fireOnTextChange = true;
+	context.onNewInputComponentCreated(context.fieldInfo.variableName || context.fieldInfo.label, dropdown);
+	addLabelInputPairToContainer(context.view, context.components, label, dropdown.component, context.fieldInfo);
+	return dropdown.component;
 }

 function processDateTimeTextField(context: FieldContext): void {
 	context.fieldInfo.defaultValue = context.fieldInfo.defaultValue + getDateTimeString();
 	const input = createInputBoxField({ context });
-	context.onNewInputComponentCreated(context.fieldInfo.variableName || context.fieldInfo.label, {
-		component: input.component,
-		getValue: async (): Promise<InputValueType> => input.component.value || '',
-		onValueChanged: input.component.onTextChanged
-	});
+	context.onNewInputComponentCreated(context.fieldInfo.variableName || context.fieldInfo.label, input);
 }

 function processNumberField(context: FieldContext): void {
 	const input = createInputBoxField({ context, inputBoxType: 'number' });
 	context.onNewInputComponentCreated(context.fieldInfo.variableName || context.fieldInfo.label, {
 		component: input.component,
-		getValue: input.getValue,
-		onValueChanged: input.onValueChanged,
-		inputValueTransformer: (value: string | number | undefined) => (typeof value === 'string') && value.length > 0 ? parseFloat(value) : value
+		getValue: async (): Promise<InputValueType> => {
+			const value = await input.getValue();
+			return typeof value === 'string' && value.length > 0 ? parseFloat(value) : value;
+		},
+		onValueChanged: input.onValueChanged
 	});
 }

@@ -655,8 +661,8 @@ function processTextField(context: FieldContext): InputComponentInfo<azdata.Inpu
 	input.isPassword = isPasswordField;
 	context.onNewInputComponentCreated(context.fieldInfo.variableName || context.fieldInfo.label, input);
 	return input;
-
 }
+
 function processPasswordField(context: FieldContext): void {
 	const passwordInput = processTextField(context);

@@ -732,16 +738,15 @@ function processHyperlinkedTextField(context: FieldContext): ReadOnlyFieldInputs

 function processEvaluatedTextField(context: FieldContext): ReadOnlyFieldInputs {
 	const readOnlyField = processReadonlyTextField(context, false /*allowEvaluation*/);
-	const onChangedEmitter = new vscode.EventEmitter<void>(); // Stub event since we don't currently supp
+	const onChangedEmitter = new vscode.EventEmitter<void>(); // Stub event since we don't currently support updating this when the dependent fields change
 	context.onNewDisposableCreated(onChangedEmitter);
 	context.onNewInputComponentCreated(context.fieldInfo.variableName || context.fieldInfo.label, {
 		component: readOnlyField.text!,
-		getValue: async (): Promise<InputValueType> => readOnlyField.text?.value || '',
-		onValueChanged: onChangedEmitter.event,
-		inputValueTransformer: async () => {
+		getValue: async (): Promise<InputValueType> => {
 			readOnlyField.text!.value = await substituteVariableValues(context.inputComponents, context.fieldInfo.defaultValue);
-			return readOnlyField.text?.value!;
-		}
+			return readOnlyField.text!.value;
+		},
+		onValueChanged: onChangedEmitter.event,
 	});
 	return readOnlyField;
 }
@@ -759,7 +764,7 @@ async function substituteVariableValues(inputComponents: InputComponents, inputV
 	await Promise.all(Object.keys(inputComponents)
 		.filter(key => key.startsWith(NoteBookEnvironmentVariablePrefix))
 		.map(async key => {
-			const value = (await getInputComponentValue(inputComponents[key])) ?? '<undefined>';
+			const value = (await inputComponents[key].getValue()) ?? '<undefined>';
 			const re: RegExp = new RegExp(`\\\$\\\(${key}\\\)`, 'gi');
 			inputValue = inputValue?.replace(re, value.toString());
 		})
@@ -768,17 +773,9 @@ async function substituteVariableValues(inputComponents: InputComponents, inputV
 }

 function processCheckboxField(context: FieldContext): void {
-	const checkbox = createCheckbox(context.view, { initialValue: context.fieldInfo.defaultValue! === 'true', label: context.fieldInfo.label, required: context.fieldInfo.required });
-	context.components.push(checkbox);
-	const onChangedEmitter = new vscode.EventEmitter<void>();
-	context.onNewDisposableCreated(onChangedEmitter);
-	const onChangedEvent = checkbox.onChanged(() => onChangedEmitter.fire());
-	context.onNewDisposableCreated(onChangedEvent);
-	context.onNewInputComponentCreated(context.fieldInfo.variableName || context.fieldInfo.label, {
-		getValue: async (): Promise<InputValueType> => checkbox.checked?.toString() || '',
-		onValueChanged: onChangedEmitter.event,
-		component: checkbox
-	});
+	const checkbox = createCheckboxInputInfo(context.view, { initialValue: context.fieldInfo.defaultValue! === 'true', label: context.fieldInfo.label, required: context.fieldInfo.required });
+	context.components.push(checkbox.component);
+	context.onNewInputComponentCreated(context.fieldInfo.variableName || context.fieldInfo.label, checkbox);
 }

 /**
@@ -790,7 +787,7 @@ function processFilePickerField(context: FieldContext): FilePickerInputs {
 	const buttonWidth = 100;

 	const label = createLabel(context.view, { text: context.fieldInfo.label, description: context.fieldInfo.description, required: context.fieldInfo.required, width: context.fieldInfo.labelWidth, cssStyles: context.fieldInfo.labelCSSStyles });
-	const input = createInputBox(context.view, {
+	const input = createInputBoxInputInfo(context.view, {
 		defaultValue: context.fieldInfo.defaultValue || '',
 		ariaLabel: context.fieldInfo.label,
 		required: context.fieldInfo.required,
@@ -929,7 +926,7 @@ async function createRadioOptions(context: FieldContext, getRadioButtonInfo?: ((
 	context.fieldInfo.labelPosition = LabelPosition.Left;
 	context.onNewInputComponentCreated(context.fieldInfo.variableName || context.fieldInfo.label, {
 		component: radioGroupLoadingComponentBuilder,
-		getValue: async (): Promise<InputValueType> => radioGroupLoadingComponentBuilder.value || '',
+		getValue: async (): Promise<InputValueType> => radioGroupLoadingComponentBuilder.value,
 		onValueChanged: radioGroupLoadingComponentBuilder.onValueChanged,
 	});
 	addLabelInputPairToContainer(context.view, context.components, label, radioGroupLoadingComponentBuilder.component(), context.fieldInfo);
@@ -965,15 +962,11 @@ async function processAzureAccountField(context: AzureAccountFieldContext): Prom
 	const subscriptionDropdown = createAzureSubscriptionDropdown(context, subscriptionValueToSubscriptionMap);
 	const resourceGroupDropdown = createAzureResourceGroupsDropdown(context, accountDropdown, accountValueToAccountMap, subscriptionDropdown, subscriptionValueToSubscriptionMap);
 	if (context.fieldInfo.allowNewResourceGroup) {
-		const newRGCheckbox = createCheckbox(context.view, { initialValue: false, label: loc.createNewResourceGroup });
-		context.onNewInputComponentCreated(context.fieldInfo.newResourceGroupFlagVariableName!, {
-			component: newRGCheckbox,
-			getValue: async (): Promise<InputValueType> => newRGCheckbox.checked?.toString() || '',
-			onValueChanged: newRGCheckbox.onChanged
-		});
-		const newRGNameInput = createInputBox(context.view, { ariaLabel: loc.NewResourceGroupAriaLabel });
+		const newRGCheckbox = createCheckboxInputInfo(context.view, { initialValue: false, label: loc.createNewResourceGroup });
+		context.onNewInputComponentCreated(context.fieldInfo.newResourceGroupFlagVariableName!, newRGCheckbox);
+		const newRGNameInput = createInputBoxInputInfo(context.view, { ariaLabel: loc.NewResourceGroupAriaLabel });
 		context.onNewInputComponentCreated(context.fieldInfo.newResourceGroupNameVariableName!, newRGNameInput);
-		context.components.push(newRGCheckbox);
+		context.components.push(newRGCheckbox.component);
 		context.components.push(newRGNameInput.component);
 		const setRGStatus = (newRG: boolean) => {
 			resourceGroupDropdown.required = !newRG;
@@ -984,8 +977,8 @@ async function processAzureAccountField(context: AzureAccountFieldContext): Prom
 				newRGNameInput.component.value = '';
 			}
 		};
-		context.onNewDisposableCreated(newRGCheckbox.onChanged(() => {
-			setRGStatus(newRGCheckbox.checked!);
+		context.onNewDisposableCreated(newRGCheckbox.onValueChanged(() => {
+			setRGStatus(newRGCheckbox.component.checked!);
 		}));
 		setRGStatus(false);
 	}
@@ -1049,7 +1042,7 @@ async function processKubeStorageClassField(context: FieldContext): Promise<void
 		vscode.window.showErrorMessage(localize('resourceDeployment.errorFetchingStorageClasses', "Unexpected error fetching available kubectl storage classes : {0}", err.message ?? err));
 	}

-	const storageClassDropdown = createDropdown(context.view, {
+	const storageClassDropdown = createDropdownInputInfo(context.view, {
 		width: context.fieldInfo.inputWidth,
 		editable: true,
 		required: context.fieldInfo.required,
@@ -1057,13 +1050,9 @@ async function processKubeStorageClassField(context: FieldContext): Promise<void
 		values: storageClasses,
 		defaultValue: defaultStorageClass
 	});
-	storageClassDropdown.fireOnTextChange = true;
-	context.onNewInputComponentCreated(context.fieldInfo.variableName || context.fieldInfo.label, {
-		component: storageClassDropdown,
-		getValue: async (): Promise<InputValueType> => (typeof storageClassDropdown.value === 'string' ? storageClassDropdown.value : storageClassDropdown.value?.displayName) || '',
-		onValueChanged: storageClassDropdown.onValueChanged
-	});
-	addLabelInputPairToContainer(context.view, context.components, label, storageClassDropdown, context.fieldInfo);
+	storageClassDropdown.component.fireOnTextChange = true;
+	context.onNewInputComponentCreated(context.fieldInfo.variableName || context.fieldInfo.label, storageClassDropdown);
+	addLabelInputPairToContainer(context.view, context.components, label, storageClassDropdown.component, context.fieldInfo);
 }


@@ -1079,26 +1068,22 @@ function createAzureAccountDropdown(context: AzureAccountFieldContext): AzureAcc
 		width: context.fieldInfo.labelWidth,
 		cssStyles: context.fieldInfo.labelCSSStyles
 	});
-	const accountDropdown = createDropdown(context.view, {
+	const accountDropdown = createDropdownInputInfo(context.view, {
 		width: context.fieldInfo.inputWidth,
 		editable: false,
 		required: context.fieldInfo.required,
 		label: loc.account
 	});
-	accountDropdown.fireOnTextChange = true;
-	context.onNewInputComponentCreated(context.fieldInfo.variableName || context.fieldInfo.label, {
-		component: accountDropdown,
-		getValue: async (): Promise<InputValueType> => (typeof accountDropdown.value === 'string' ? accountDropdown.value : accountDropdown.value?.displayName) || '',
-		onValueChanged: accountDropdown.onValueChanged
-	});
+	accountDropdown.component.fireOnTextChange = true;
+	context.onNewInputComponentCreated(context.fieldInfo.variableName || context.fieldInfo.label, accountDropdown);
 	const signInButton = context.view!.modelBuilder.button().withProperties<azdata.ButtonProperties>({ label: loc.signIn, width: '100px' }).component();
 	const refreshButton = context.view!.modelBuilder.button().withProperties<azdata.ButtonProperties>({ label: loc.refresh, width: '100px' }).component();
-	addLabelInputPairToContainer(context.view, context.components, label, accountDropdown, context.fieldInfo);
+	addLabelInputPairToContainer(context.view, context.components, label, accountDropdown.component, context.fieldInfo);

 	const buttons = createFlexContainer(context.view!, [signInButton, refreshButton], true, undefined, undefined, undefined, { 'margin-right': '10px' });
 	context.components.push(buttons);
 	return {
-		accountDropdown: accountDropdown,
+		accountDropdown: accountDropdown.component,
 		signInButton: signInButton,
 		refreshAccountsButton: refreshButton
 	};
@@ -1115,39 +1100,35 @@ function createAzureSubscriptionDropdown(
 		width: context.fieldInfo.labelWidth,
 		cssStyles: context.fieldInfo.labelCSSStyles
 	});
-	const subscriptionDropdown = createDropdown(context.view, {
+	const subscriptionDropdown = createDropdownInputInfo(context.view, {
 		defaultValue: (context.fieldInfo.required) ? undefined : '',
 		width: context.fieldInfo.inputWidth,
 		editable: false,
 		required: context.fieldInfo.required,
 		label: loc.subscription
 	});
-	subscriptionDropdown.fireOnTextChange = true;
+	subscriptionDropdown.component.fireOnTextChange = true;
 	context.fieldInfo.subFields!.push({
 		label: label.value!,
 		variableName: context.fieldInfo.subscriptionVariableName
 	});
 	context.onNewInputComponentCreated(context.fieldInfo.subscriptionVariableName || context.fieldInfo.label, {
-		component: subscriptionDropdown,
-		getValue: async (): Promise<InputValueType> => (typeof subscriptionDropdown.value === 'string' ? subscriptionDropdown.value : subscriptionDropdown.value?.displayName) || '',
-		onValueChanged: subscriptionDropdown.onValueChanged,
-		inputValueTransformer: (inputValue: string) => {
+		component: subscriptionDropdown.component,
+		getValue: async (): Promise<InputValueType> => {
+			const inputValue = (await subscriptionDropdown.getValue())?.toString() || '';
 			return subscriptionValueToSubscriptionMap.get(inputValue)?.id || inputValue;
-		}
+		},
+		onValueChanged: subscriptionDropdown.onValueChanged
 	});
 	if (context.fieldInfo.displaySubscriptionVariableName) {
 		context.fieldInfo.subFields!.push({
 			label: label.value!,
 			variableName: context.fieldInfo.displaySubscriptionVariableName
 		});
-		context.onNewInputComponentCreated(context.fieldInfo.displaySubscriptionVariableName!, {
-			component: subscriptionDropdown,
-			getValue: async (): Promise<InputValueType> => (typeof subscriptionDropdown.value === 'string' ? subscriptionDropdown.value : subscriptionDropdown.value?.displayName) || '',
-			onValueChanged: subscriptionDropdown.onValueChanged,
-		});
+		context.onNewInputComponentCreated(context.fieldInfo.displaySubscriptionVariableName!, subscriptionDropdown);
 	}
-	addLabelInputPairToContainer(context.view, context.components, label, subscriptionDropdown, context.fieldInfo);
-	return subscriptionDropdown;
+	addLabelInputPairToContainer(context.view, context.components, label, subscriptionDropdown.component, context.fieldInfo);
+	return subscriptionDropdown.component;
 }

 async function handleSelectedAccountChanged(
@@ -1259,33 +1240,29 @@ function createAzureResourceGroupsDropdown(
 		width: context.fieldInfo.labelWidth,
 		cssStyles: context.fieldInfo.labelCSSStyles
 	});
-	const resourceGroupDropdown = createDropdown(context.view, {
+	const resourceGroupDropdown = createDropdownInputInfo(context.view, {
 		defaultValue: (context.fieldInfo.required) ? undefined : '',
 		width: context.fieldInfo.inputWidth,
 		editable: false,
 		required: context.fieldInfo.required,
 		label: loc.resourceGroup
 	});
-	resourceGroupDropdown.fireOnTextChange = true;
+	resourceGroupDropdown.component.fireOnTextChange = true;
 	context.fieldInfo.subFields!.push({
 		label: label.value!,
 		variableName: context.fieldInfo.resourceGroupVariableName
 	});
 	const rgValueChangedEmitter = new vscode.EventEmitter<void>();
 	resourceGroupDropdown.onValueChanged(() => rgValueChangedEmitter.fire());
-	context.onNewInputComponentCreated(context.fieldInfo.resourceGroupVariableName || context.fieldInfo.label, {
-		component: resourceGroupDropdown,
-		getValue: async (): Promise<InputValueType> => (typeof resourceGroupDropdown.value === 'string' ? resourceGroupDropdown.value : resourceGroupDropdown.value?.displayName) || '',
-		onValueChanged: resourceGroupDropdown.onValueChanged,
-	});
-	addLabelInputPairToContainer(context.view, context.components, label, resourceGroupDropdown, context.fieldInfo);
+	context.onNewInputComponentCreated(context.fieldInfo.resourceGroupVariableName || context.fieldInfo.label, resourceGroupDropdown);
+	addLabelInputPairToContainer(context.view, context.components, label, resourceGroupDropdown.component, context.fieldInfo);
 	subscriptionDropdown.onValueChanged(async selectedItem => {
 		const selectedAccount = !accountDropdown || !accountDropdown.value ? undefined : accountValueToAccountMap.get(accountDropdown.value.toString());
 		const selectedSubscription = subscriptionValueToSubscriptionMap.get(selectedItem.selected);
-		await handleSelectedSubscriptionChanged(context, selectedAccount, selectedSubscription, resourceGroupDropdown);
+		await handleSelectedSubscriptionChanged(context, selectedAccount, selectedSubscription, resourceGroupDropdown.component);
 		rgValueChangedEmitter.fire();
 	});
-	return resourceGroupDropdown;
+	return resourceGroupDropdown.component;
 }

 async function handleSelectedSubscriptionChanged(context: AzureAccountFieldContext, selectedAccount: azdata.Account | undefined, selectedSubscription: azureResource.AzureResourceSubscription | undefined, resourceGroupDropdown: azdata.DropDownComponent): Promise<void> {
@@ -1347,7 +1324,7 @@ async function processAzureLocationsField(context: AzureLocationsFieldContext):
 		cssStyles: context.fieldInfo.labelCSSStyles
 	});
 	const locationValues = context.fieldInfo.locations?.map(l => { return { name: l, displayName: apiService.azurecoreApi.getRegionDisplayName(l) }; });
-	const locationDropdown = createDropdown(context.view, {
+	const locationDropdown = createDropdownInputInfo(context.view, {
 		defaultValue: locationValues?.find(l => l.name === context.fieldInfo.defaultValue),
 		width: context.fieldInfo.inputWidth,
 		editable: false,
@@ -1355,33 +1332,33 @@ async function processAzureLocationsField(context: AzureLocationsFieldContext):
 		label: loc.location,
 		values: locationValues
 	});
-	locationDropdown.fireOnTextChange = true;
+	locationDropdown.component.fireOnTextChange = true;
 	context.fieldInfo.subFields = context.fieldInfo.subFields || [];
 	if (context.fieldInfo.locationVariableName) {
 		context.fieldInfo.subFields!.push({
 			label: label.value!,
 			variableName: context.fieldInfo.locationVariableName
 		});
-		context.onNewInputComponentCreated(context.fieldInfo.locationVariableName, {
-			component: locationDropdown,
-			getValue: async (): Promise<InputValueType> => (typeof locationDropdown.value === 'string' ? locationDropdown.value : locationDropdown.value?.displayName) || '',
-			onValueChanged: locationDropdown.onValueChanged,
-		});
+		context.onNewInputComponentCreated(context.fieldInfo.locationVariableName, locationDropdown);
 	}
 	if (context.fieldInfo.displayLocationVariableName) {
 		context.fieldInfo.subFields!.push({
 			label: label.value!,
 			variableName: context.fieldInfo.displayLocationVariableName
 		});
+		// Create a special input component that maps the dropdown to the display name for the location
+		// so that we have two variables - one for the value and one for the display name
 		context.onNewInputComponentCreated(context.fieldInfo.displayLocationVariableName, {
-			component: locationDropdown,
-			inputValueTransformer: (value => apiService.azurecoreApi.getRegionDisplayName(value)),
-			getValue: async (): Promise<InputValueType> => (typeof locationDropdown.value === 'string' ? locationDropdown.value : locationDropdown.value?.displayName) || '',
+			component: locationDropdown.component,
+			getValue: async (): Promise<InputValueType> => {
+				const inputValue = (await locationDropdown.getValue())?.toString();
+				return apiService.azurecoreApi.getRegionDisplayName(inputValue);
+			},
 			onValueChanged: locationDropdown.onValueChanged,
 		});
 	}
-	addLabelInputPairToContainer(context.view, context.components, label, locationDropdown, context.fieldInfo);
-	return locationDropdown;
+	addLabelInputPairToContainer(context.view, context.components, label, locationDropdown.component, context.fieldInfo);
+	return locationDropdown.component;
 }

 export function isValidSQLPassword(password: string, userName: string = 'sa'): boolean {
@@ -1413,34 +1390,11 @@ export function getPasswordMismatchMessage(fieldName: string): string {

 export async function setModelValues(inputComponents: InputComponents, model: Model): Promise<void> {
 	await Promise.all(Object.keys(inputComponents).map(async key => {
-		const value = await getInputComponentValue(inputComponents[key]);
+		const value = await inputComponents[key].getValue();
 		model.setPropertyValue(key, value);
 	}));
 }

-async function getInputComponentValue(inputComponentInfo: InputComponentInfo<InputComponent>): Promise<InputValueType> {
-	const input = inputComponentInfo.component;
-	if (input === undefined) {
-		return undefined;
-	}
-	let value: string | number | undefined;
-	if (input instanceof RadioGroupLoadingComponentBuilder) {
-		value = input.value;
-	} else if ('checked' in input) { // CheckBoxComponent
-		value = input.checked ? 'true' : 'false';
-	} else if ('value' in input) { // InputBoxComponent or DropDownComponent
-		const inputValue = input.value;
-		if (typeof inputValue === 'string' || typeof inputValue === 'undefined' || typeof inputValue === 'number') {
-			value = inputValue;
-		} else {
-			value = inputValue.name;
-		}
-	} else {
-		throw new Error(`Unknown input type with ID ${input.id}`);
-	}
-	return inputComponentInfo.inputValueTransformer ? await inputComponentInfo.inputValueTransformer(value ?? '') : value;
-}
-
 export function isInputBoxEmpty(input: azdata.InputBoxComponent): boolean {
 	return input.value === undefined || input.value === '';
 }