Custom Summary Page for NotebookWizard and notebook Cell with wizard variables (#10297)

* save not yet tested work * Merge from master. * Screeens Shared for Feeedback * Code complete * remove unneeded changes * remove unnecessary comma * remov wss * remove dead code * PR feedback * checkpoint fixes * PR & minor fixes * minor fix for feature of resourceType options being optional. * reverting experimental change * separating out changes for future featurework. * revert unneeded change * review feedback fixes * review feedback * rename InputFieldComponent to InputComponent * working version of custom summary page * add option to align items in a flex- container. * changes to support labelColor * save work , still pending issue with labelCSSStyles * Summary page and setting variabless in notebook. * minor fixes. * pr feedbck * fix formatting issues * pr feedback * pr feedback * pr feedback * fixing docs * summary page value setting fix * rename children of RowInfo to items * rename a method * rename summary_text to evaluated_text * rename properties of fieldInfo * revert inadvertent change * rename linked_texttext to hyperlinked_text and removing linking facility from readonly_text * pr feedback * fix setting tools variables in env and notebook * removing saving of originalValues for EvaluatedText * await on launchNotebookWithEdits * await on launchNotebookWithContent * merge RadioOptions & Options into 1 * merge ReadOnlyText, links & evaluatedText * Samples for new generic wizard features * fix comment * fix assertions * return type and comment for getClusterContext * fix inadvertent change * increase minimum required azdata version * remove unneeded environment variable settings * not leaking passwords in notebooks
2026-02-13 03:28:33 -05:00 · 2020-06-01 11:14:59 -07:00
parent 84492049e8
commit 678bbe3142
23 changed files with 1190 additions and 473 deletions
--- a/extensions/resource-deployment/src/ui/deployClusterWizard/pages/azureSettingsPage.ts
+++ b/extensions/resource-deployment/src/ui/deployClusterWizard/pages/azureSettingsPage.ts
@@ -7,7 +7,7 @@ import * as azdata from 'azdata';
 import * as vscode from 'vscode';
 import * as nls from 'vscode-nls';
 import { FieldType, LabelPosition, SectionInfo } from '../../../interfaces';
-import { createSection, getDropdownComponent, InputComponents, InputComponent, setModelValues, Validator } from '../../modelViewUtils';
+import { createSection, getDropdownComponent, InputComponentInfo, InputComponents, setModelValues, Validator } from '../../modelViewUtils';
 import { WizardPageBase } from '../../wizardPageBase';
 import { AksName_VariableName, Location_VariableName, ResourceGroup_VariableName, SubscriptionId_VariableName, VMCount_VariableName, VMSize_VariableName } from '../constants';
 import { DeployClusterWizard } from '../deployClusterWizard';
@@ -29,7 +29,7 @@ export class AzureSettingsPage extends WizardPageBase<DeployClusterWizard> {
 			labelPosition: LabelPosition.Left,
 			spaceBetweenFields: '5px',
 			rows: [{
-				fields: [{
+				items: [{
 					type: FieldType.Text,
 					label: localize('deployCluster.SubscriptionField', "Subscription id"),
 					required: false,
@@ -38,9 +38,7 @@ export class AzureSettingsPage extends WizardPageBase<DeployClusterWizard> {
 					description: localize('deployCluster.SubscriptionDescription', "The default subscription will be used if you leave this field blank.")
 				}, {
 					type: FieldType.ReadonlyText,
-					label: '',
-					labelWidth: '0px',
-					defaultValue: localize('deployCluster.SubscriptionHelpText', "{0}"),
+					label: '{0}',
 					links: [
 						{
 							text: localize('deployCluster.SubscriptionHelpLink', "View available Azure subscriptions"),
@@ -49,7 +47,7 @@ export class AzureSettingsPage extends WizardPageBase<DeployClusterWizard> {
 					]
 				}]
 			}, {
-				fields: [{
+				items: [{
 					type: FieldType.DateTimeText,
 					label: localize('deployCluster.ResourceGroupName', "New resource group name"),
 					required: true,
@@ -57,7 +55,7 @@ export class AzureSettingsPage extends WizardPageBase<DeployClusterWizard> {
 					defaultValue: 'mssql-'
 				}]
 			}, {
-				fields: [{
+				items: [{
 					type: FieldType.Options,
 					label: localize('deployCluster.Location', "Location"),
 					required: true,
@@ -79,9 +77,7 @@ export class AzureSettingsPage extends WizardPageBase<DeployClusterWizard> {
 					]
 				}, {
 					type: FieldType.ReadonlyText,
-					label: '',
-					labelWidth: '0px',
-					defaultValue: localize('deployCluster.LocationHelpText', "{0}"),
+					label: '{0}',
 					links: [
 						{
 							text: localize('deployCluster.AzureLocationHelpLink', "View available Azure locations"),
@@ -90,7 +86,7 @@ export class AzureSettingsPage extends WizardPageBase<DeployClusterWizard> {
 					]
 				}]
 			}, {
-				fields: [{
+				items: [{
 					type: FieldType.DateTimeText,
 					label: localize('deployCluster.AksName', "AKS cluster name"),
 					required: true,
@@ -98,7 +94,7 @@ export class AzureSettingsPage extends WizardPageBase<DeployClusterWizard> {
 					defaultValue: 'mssql-',
 				}]
 			}, {
-				fields: [
+				items: [
 					{
 						type: FieldType.Number,
 						label: localize('deployCluster.VMCount', "VM count"),
@@ -110,7 +106,7 @@ export class AzureSettingsPage extends WizardPageBase<DeployClusterWizard> {
 					}
 				]
 			}, {
-				fields: [{
+				items: [{
 					type: FieldType.Text,
 					label: localize('deployCluster.VMSize', "VM size"),
 					required: true,
@@ -118,9 +114,7 @@ export class AzureSettingsPage extends WizardPageBase<DeployClusterWizard> {
 					defaultValue: 'Standard_E8s_v3'
 				}, {
 					type: FieldType.ReadonlyText,
-					label: '',
-					labelWidth: '0px',
-					defaultValue: localize('deployCluster.VMSizeHelpText', "{0}"),
+					label: '{0}',
 					links: [
 						{
 							text: localize('deployCluster.VMSizeHelpLink', "View available VM sizes"),
@@ -137,13 +131,14 @@ export class AzureSettingsPage extends WizardPageBase<DeployClusterWizard> {
 				onNewDisposableCreated: (disposable: vscode.Disposable): void => {
 					self.wizard.registerDisposable(disposable);
 				},
-				onNewInputComponentCreated: (name: string, component: InputComponent): void => {
-					self.inputComponents[name] = { component: component };
+				onNewInputComponentCreated: (name: string, inputComponentInfo: InputComponentInfo): void => {
+					this.inputComponents[name] = { component: inputComponentInfo.component };
 				},
 				onNewValidatorCreated: (validator: Validator): void => {
 					self.validators.push(validator);
 				},
-				container: this.wizard.wizardObject
+				container: this.wizard.wizardObject,
+				inputComponents: this.wizard.inputComponents
 			});
 			const formBuilder = view.modelBuilder.formContainer().withFormItems(
 				[{
@@ -184,5 +179,6 @@ export class AzureSettingsPage extends WizardPageBase<DeployClusterWizard> {
 			return true;
 		});
 		setModelValues(this.inputComponents, this.wizard.model);
+		Object.assign(this.wizard.inputComponents, this.inputComponents);
 	}
 }
--- a/extensions/resource-deployment/src/ui/deployClusterWizard/pages/clusterSettingsPage.ts
+++ b/extensions/resource-deployment/src/ui/deployClusterWizard/pages/clusterSettingsPage.ts
@@ -4,14 +4,14 @@
 *--------------------------------------------------------------------------------------------*/

 import * as azdata from 'azdata';
+import { EOL } from 'os';
 import * as vscode from 'vscode';
 import * as nls from 'vscode-nls';
-import { DeployClusterWizard } from '../deployClusterWizard';
-import { SectionInfo, FieldType, LabelPosition } from '../../../interfaces';
-import { createSection, InputComponents, setModelValues, Validator, getInputBoxComponent, isValidSQLPassword, getInvalidSQLPasswordMessage, getPasswordMismatchMessage, InputComponent } from '../../modelViewUtils';
+import { FieldType, LabelPosition, SectionInfo } from '../../../interfaces';
+import { createSection, getInputBoxComponent, getInvalidSQLPasswordMessage, getPasswordMismatchMessage, InputComponentInfo, InputComponents, isValidSQLPassword, setModelValues, Validator } from '../../modelViewUtils';
 import { WizardPageBase } from '../../wizardPageBase';
 import * as VariableNames from '../constants';
-import { EOL } from 'os';
+import { DeployClusterWizard } from '../deployClusterWizard';
 import { AuthenticationMode } from '../deployClusterWizardModel';
 const localize = nls.loadMessageBundle();

@@ -174,7 +174,7 @@ export class ClusterSettingsPage extends WizardPageBase<DeployClusterWizard> {
 					variableName: VariableNames.DomainServiceAccountPassword_VariableName
 				}, {
 					type: FieldType.Text,
-					label: localize('deployCluster.AppOwers', "App owners"),
+					label: localize('deployCluster.AppOwners', "App owners"),
 					required: false,
 					variableName: VariableNames.AppOwners_VariableName,
 					placeHolder: localize('deployCluster.AppOwnersPlaceHolder', "Use comma to separate the values."),
@@ -193,12 +193,13 @@ export class ClusterSettingsPage extends WizardPageBase<DeployClusterWizard> {
 			const basicSettingsGroup = createSection({
 				view: view,
 				container: self.wizard.wizardObject,
+				inputComponents: this.wizard.inputComponents,
 				sectionInfo: basicSection,
 				onNewDisposableCreated: (disposable: vscode.Disposable): void => {
 					self.wizard.registerDisposable(disposable);
 				},
-				onNewInputComponentCreated: (name: string, component: InputComponent): void => {
-					self.inputComponents[name] = { component: component };
+				onNewInputComponentCreated: (name: string, inputComponent: InputComponentInfo): void => {
+					self.inputComponents[name] = { component: inputComponent.component };
 				},
 				onNewValidatorCreated: (validator: Validator): void => {
 					self.validators.push(validator);
@@ -207,12 +208,13 @@ export class ClusterSettingsPage extends WizardPageBase<DeployClusterWizard> {
 			const activeDirectorySettingsGroup = createSection({
 				view: view,
 				container: self.wizard.wizardObject,
+				inputComponents: this.wizard.inputComponents,
 				sectionInfo: activeDirectorySection,
 				onNewDisposableCreated: (disposable: vscode.Disposable): void => {
 					self.wizard.registerDisposable(disposable);
 				},
-				onNewInputComponentCreated: (name: string, component: InputComponent): void => {
-					self.inputComponents[name] = { component: component };
+				onNewInputComponentCreated: (name: string, inputComponentInfo: InputComponentInfo): void => {
+					this.inputComponents[name] = { component: inputComponentInfo.component };
 				},
 				onNewValidatorCreated: (validator: Validator): void => {
 					self.validators.push(validator);
@@ -221,12 +223,13 @@ export class ClusterSettingsPage extends WizardPageBase<DeployClusterWizard> {
 			const dockerSettingsGroup = createSection({
 				view: view,
 				container: self.wizard.wizardObject,
+				inputComponents: this.wizard.inputComponents,
 				sectionInfo: dockerSection,
 				onNewDisposableCreated: (disposable: vscode.Disposable): void => {
 					self.wizard.registerDisposable(disposable);
 				},
-				onNewInputComponentCreated: (name: string, component: InputComponent): void => {
-					self.inputComponents[name] = { component: component };
+				onNewInputComponentCreated: (name: string, inputComponentInfo: InputComponentInfo): void => {
+					this.inputComponents[name] = { component: inputComponentInfo.component };
 				},
 				onNewValidatorCreated: (validator: Validator): void => {
 					self.validators.push(validator);
@@ -266,6 +269,7 @@ export class ClusterSettingsPage extends WizardPageBase<DeployClusterWizard> {

 	public onLeave() {
 		setModelValues(this.inputComponents, this.wizard.model);
+		Object.assign(this.wizard.inputComponents, this.inputComponents);
 		if (this.wizard.model.authenticationMode === AuthenticationMode.ActiveDirectory) {
 			const variableDNSPrefixMapping: { [s: string]: string } = {};
 			variableDNSPrefixMapping[VariableNames.AppServiceProxyDNSName_VariableName] = 'bdc-appproxy';
--- a/extensions/resource-deployment/src/ui/deployClusterWizard/pages/serviceSettingsPage.ts
+++ b/extensions/resource-deployment/src/ui/deployClusterWizard/pages/serviceSettingsPage.ts
@@ -5,11 +5,11 @@
 import * as azdata from 'azdata';
 import * as vscode from 'vscode';
 import * as nls from 'vscode-nls';
-import { DeployClusterWizard } from '../deployClusterWizard';
-import { SectionInfo, FieldType } from '../../../interfaces';
-import { Validator, InputComponents, InputComponent, createSection, createGroupContainer, createLabel, createFlexContainer, createTextInput, createNumberInput, setModelValues, getInputBoxComponent, getCheckboxComponent, getDropdownComponent } from '../../modelViewUtils';
+import { FieldType, SectionInfo } from '../../../interfaces';
+import { createFlexContainer, createGroupContainer, createLabel, createNumberInput, createSection, createTextInput, getCheckboxComponent, getDropdownComponent, getInputBoxComponent, InputComponentInfo, InputComponents, setModelValues, Validator } from '../../modelViewUtils';
 import { WizardPageBase } from '../../wizardPageBase';
 import * as VariableNames from '../constants';
+import { DeployClusterWizard } from '../deployClusterWizard';
 import { AuthenticationMode } from '../deployClusterWizardModel';
 const localize = nls.loadMessageBundle();

@@ -59,7 +59,7 @@ export class ServiceSettingsPage extends WizardPageBase<DeployClusterWizard> {
 			inputWidth: NumberInputWidth,
 			spaceBetweenFields: '40px',
 			rows: [{
-				fields: [{
+				items: [{
 					type: FieldType.Options,
 					label: localize('deployCluster.MasterSqlServerInstances', "SQL Server master instances"),
 					options: ['1', '3', '4', '5', '6', '7', '8', '9'],
@@ -75,7 +75,7 @@ export class ServiceSettingsPage extends WizardPageBase<DeployClusterWizard> {
 					variableName: VariableNames.ComputePoolScale_VariableName,
 				}]
 			}, {
-				fields: [{
+				items: [{
 					type: FieldType.Number,
 					label: localize('deployCluster.DataPoolInstances', "Data pool instances"),
 					min: 1,
@@ -93,7 +93,7 @@ export class ServiceSettingsPage extends WizardPageBase<DeployClusterWizard> {
 					variableName: VariableNames.SparkPoolScale_VariableName
 				}]
 			}, {
-				fields: [
+				items: [
 					{
 						type: FieldType.Number,
 						label: localize('deployCluster.StoragePoolInstances', "Storage pool (HDFS) instances"),
@@ -119,12 +119,13 @@ export class ServiceSettingsPage extends WizardPageBase<DeployClusterWizard> {
 				return createSection({
 					view: view,
 					container: this.wizard.wizardObject,
+					inputComponents: this.inputComponents,
 					sectionInfo: sectionInfo,
 					onNewDisposableCreated: (disposable: vscode.Disposable): void => {
 						this.wizard.registerDisposable(disposable);
 					},
-					onNewInputComponentCreated: (name: string, component: InputComponent): void => {
-						this.inputComponents[name] = { component: component };
+					onNewInputComponentCreated: (name: string, inputComponentInfo: InputComponentInfo): void => {
+						this.inputComponents[name] = { component: inputComponentInfo.component };
 					},
 					onNewValidatorCreated: (validator: Validator): void => {
 					}
@@ -400,6 +401,7 @@ export class ServiceSettingsPage extends WizardPageBase<DeployClusterWizard> {

 	public onLeave(): void {
 		setModelValues(this.inputComponents, this.wizard.model);
+		Object.assign(this.wizard.inputComponents, this.inputComponents);
 		this.wizard.wizardObject.registerNavigationValidator((pcInfo) => {
 			return true;
 		});
--- a/extensions/resource-deployment/src/ui/deployClusterWizard/pages/summaryPage.ts
+++ b/extensions/resource-deployment/src/ui/deployClusterWizard/pages/summaryPage.ts
@@ -43,18 +43,17 @@ export class SummaryPage extends WizardPageBase<DeployClusterWizard> {
 			title: localize('deployCluster.DeploymentTarget', "Deployment target"),
 			rows: [
 				{
-					fields: [
+					items: [
 						{
 							type: FieldType.ReadonlyText,
 							label: localize('deployCluster.Kubeconfig', "Kube config"),
 							defaultValue: this.wizard.model.getStringValue(VariableNames.KubeConfigPath_VariableName),
-							labelFontWeight: FontWeight.Bold
+							labelCSSStyles: { fontWeight: FontWeight.Bold }
 						},
 						{
 							type: FieldType.ReadonlyText,
 							label: localize('deployCluster.ClusterContext', "Cluster context"),
-							defaultValue: this.wizard.model.getStringValue(VariableNames.ClusterContext_VariableName),
-							labelFontWeight: FontWeight.Bold
+							labelCSSStyles: { fontWeight: FontWeight.Bold }
 						}]
 				}
 			]
@@ -68,33 +67,33 @@ export class SummaryPage extends WizardPageBase<DeployClusterWizard> {
 			rows: [
 				{

-					fields: [
+					items: [
 						{
 							type: FieldType.ReadonlyText,
 							label: localize('deployCluster.DeploymentProfile', "Deployment profile"),
 							defaultValue: this.wizard.model.getStringValue(VariableNames.DeploymentProfile_VariableName),
-							labelFontWeight: FontWeight.Bold
+							labelCSSStyles: { fontWeight: FontWeight.Bold }
 						},
 						{
 							type: FieldType.ReadonlyText,
 							label: localize('deployCluster.ClusterName', "Cluster name"),
 							defaultValue: this.wizard.model.getStringValue(VariableNames.ClusterName_VariableName),
-							labelFontWeight: FontWeight.Bold
+							labelCSSStyles: { fontWeight: FontWeight.Bold }
 						}]
 				}, {
-					fields: [
+					items: [
 						{
 							type: FieldType.ReadonlyText,
 							label: localize('deployCluster.ControllerUsername', "Controller username"),
 							defaultValue: this.wizard.model.getStringValue(VariableNames.AdminUserName_VariableName),
-							labelFontWeight: FontWeight.Bold
+							labelCSSStyles: { fontWeight: FontWeight.Bold }
 						}, {
 							type: FieldType.ReadonlyText,
 							label: localize('deployCluster.AuthenticationMode', "Authentication mode"),
 							defaultValue: this.wizard.model.authenticationMode === AuthenticationMode.ActiveDirectory ?
 								localize('deployCluster.AuthenticationMode.ActiveDirectory', "Active Directory") :
 								localize('deployCluster.AuthenticationMode.Basic', "Basic"),
-							labelFontWeight: FontWeight.Bold
+							labelCSSStyles: { fontWeight: FontWeight.Bold }
 						}
 					]
 				}
@@ -103,72 +102,72 @@ export class SummaryPage extends WizardPageBase<DeployClusterWizard> {

 		if (this.wizard.model.authenticationMode === AuthenticationMode.ActiveDirectory) {
 			clusterSectionInfo.rows!.push({
-				fields: [
+				items: [
 					{
 						type: FieldType.ReadonlyText,
 						label: localize('deployCluster.OuDistinguishedName', "Organizational unit"),
 						defaultValue: this.wizard.model.getStringValue(VariableNames.OrganizationalUnitDistinguishedName_VariableName),
-						labelFontWeight: FontWeight.Bold
+						labelCSSStyles: { fontWeight: FontWeight.Bold }
 					},
 					{
 						type: FieldType.ReadonlyText,
 						label: localize('deployCluster.DomainControllerFQDNs', "Domain controller FQDNs"),
 						defaultValue: this.wizard.model.getStringValue(VariableNames.DomainControllerFQDNs_VariableName),
-						labelFontWeight: FontWeight.Bold
+						labelCSSStyles: { fontWeight: FontWeight.Bold }
 					}]
 			});
 			clusterSectionInfo.rows!.push({
-				fields: [
+				items: [
 					{
 						type: FieldType.ReadonlyText,
 						label: localize('deployCluster.DomainDNSIPAddresses', "Domain DNS IP addresses"),
 						defaultValue: this.wizard.model.getStringValue(VariableNames.DomainDNSIPAddresses_VariableName),
-						labelFontWeight: FontWeight.Bold
+						labelCSSStyles: { fontWeight: FontWeight.Bold }
 					},
 					{
 						type: FieldType.ReadonlyText,
 						label: localize('deployCluster.DomainDNSName', "Domain DNS name"),
 						defaultValue: this.wizard.model.getStringValue(VariableNames.DomainDNSName_VariableName),
-						labelFontWeight: FontWeight.Bold
+						labelCSSStyles: { fontWeight: FontWeight.Bold }
 					}]
 			});
 			clusterSectionInfo.rows!.push({
-				fields: [
+				items: [
 					{
 						type: FieldType.ReadonlyText,
 						label: localize('deployCluster.ClusterAdmins', "Cluster admin group"),
 						defaultValue: this.wizard.model.getStringValue(VariableNames.ClusterAdmins_VariableName),
-						labelFontWeight: FontWeight.Bold
+						labelCSSStyles: { fontWeight: FontWeight.Bold }
 					},
 					{
 						type: FieldType.ReadonlyText,
 						label: localize('deployCluster.ClusterUsers', "Cluster users"),
 						defaultValue: this.wizard.model.getStringValue(VariableNames.ClusterUsers_VariableName),
-						labelFontWeight: FontWeight.Bold
+						labelCSSStyles: { fontWeight: FontWeight.Bold }
 					}]
 			});
 			clusterSectionInfo.rows!.push({
-				fields: [
+				items: [
 					{
 						type: FieldType.ReadonlyText,
-						label: localize('deployCluster.AppOwers', "App owners"),
+						label: localize('deployCluster.AppOwners', "App owners"),
 						defaultValue: this.wizard.model.getStringValue(VariableNames.AppOwners_VariableName),
-						labelFontWeight: FontWeight.Bold
+						labelCSSStyles: { fontWeight: FontWeight.Bold }
 					},
 					{
 						type: FieldType.ReadonlyText,
 						label: localize('deployCluster.AppReaders', "App readers"),
 						defaultValue: this.wizard.model.getStringValue(VariableNames.AppReaders_VariableName),
-						labelFontWeight: FontWeight.Bold
+						labelCSSStyles: { fontWeight: FontWeight.Bold }
 					}]
 			});
 			clusterSectionInfo.rows!.push({
-				fields: [
+				items: [
 					{
 						type: FieldType.ReadonlyText,
 						label: localize('deployCluster.DomainServiceAccountUserName', "Service account username"),
 						defaultValue: this.wizard.model.getStringValue(VariableNames.DomainServiceAccountUserName_VariableName),
-						labelFontWeight: FontWeight.Bold
+						labelCSSStyles: { fontWeight: FontWeight.Bold }
 					}]
 			});
 		}
@@ -179,45 +178,45 @@ export class SummaryPage extends WizardPageBase<DeployClusterWizard> {
 			inputWidth: '200px',
 			title: localize('deployCluster.AzureSettings', "Azure settings"),
 			rows: [{
-				fields: [
+				items: [
 					{
 						type: FieldType.ReadonlyText,
 						label: localize('deployCluster.SubscriptionId', "Subscription id"),
 						defaultValue: this.wizard.model.getStringValue(VariableNames.SubscriptionId_VariableName) || localize('deployCluster.DefaultSubscription', "Default Azure Subscription"),
-						labelFontWeight: FontWeight.Bold
+						labelCSSStyles: { fontWeight: FontWeight.Bold }
 					}, {
 						type: FieldType.ReadonlyText,
 						label: localize('deployCluster.ResourceGroup', "Resource group"),
 						defaultValue: this.wizard.model.getStringValue(VariableNames.ResourceGroup_VariableName),
-						labelFontWeight: FontWeight.Bold
+						labelCSSStyles: { fontWeight: FontWeight.Bold }
 					}
 				]
 			}, {
-				fields: [
+				items: [
 					{
 						type: FieldType.ReadonlyText,
 						label: localize('deployCluster.Location', "Location"),
 						defaultValue: this.wizard.model.getStringValue(VariableNames.Location_VariableName),
-						labelFontWeight: FontWeight.Bold
+						labelCSSStyles: { fontWeight: FontWeight.Bold }
 					}, {
 						type: FieldType.ReadonlyText,
 						label: localize('deployCluster.AksClusterName', "AKS cluster name"),
 						defaultValue: this.wizard.model.getStringValue(VariableNames.AksName_VariableName),
-						labelFontWeight: FontWeight.Bold
+						labelCSSStyles: { fontWeight: FontWeight.Bold }
 					}
 				]
 			}, {
-				fields: [
+				items: [
 					{
 						type: FieldType.ReadonlyText,
 						label: localize('deployCluster.VMSize', "VM size"),
 						defaultValue: this.wizard.model.getStringValue(VariableNames.VMSize_VariableName),
-						labelFontWeight: FontWeight.Bold
+						labelCSSStyles: { fontWeight: FontWeight.Bold }
 					}, {
 						type: FieldType.ReadonlyText,
 						label: localize('deployCluster.VMCount', "VM count"),
 						defaultValue: this.wizard.model.getStringValue(VariableNames.VMCount_VariableName),
-						labelFontWeight: FontWeight.Bold
+						labelCSSStyles: { fontWeight: FontWeight.Bold }
 					}
 				]
 			}
@@ -231,35 +230,35 @@ export class SummaryPage extends WizardPageBase<DeployClusterWizard> {
 			title: localize('deployCluster.ScaleSettings', "Scale settings"),
 			rows: [
 				{
-					fields: [{
+					items: [{
 						type: FieldType.ReadonlyText,
 						label: localize('deployCluster.MasterSqlServerInstances', "SQL Server master instances"),
 						defaultValue: this.wizard.model.getStringValue(VariableNames.SQLServerScale_VariableName),
-						labelFontWeight: FontWeight.Bold
+						labelCSSStyles: { fontWeight: FontWeight.Bold }
 					}, {
 						type: FieldType.ReadonlyText,
 						label: localize('deployCluster.ComputePoolInstances', "Compute pool instances"),
 						defaultValue: this.wizard.model.getStringValue(VariableNames.ComputePoolScale_VariableName),
-						labelFontWeight: FontWeight.Bold
+						labelCSSStyles: { fontWeight: FontWeight.Bold }
 					}]
 				}, {
-					fields: [{
+					items: [{
 						type: FieldType.ReadonlyText,
 						label: localize('deployCluster.DataPoolInstances', "Data pool instances"),
 						defaultValue: this.wizard.model.getStringValue(VariableNames.DataPoolScale_VariableName),
-						labelFontWeight: FontWeight.Bold
+						labelCSSStyles: { fontWeight: FontWeight.Bold }
 					}, {
 						type: FieldType.ReadonlyText,
 						label: localize('deployCluster.SparkPoolInstances', "Spark pool instances"),
 						defaultValue: this.wizard.model.getStringValue(VariableNames.SparkPoolScale_VariableName),
-						labelFontWeight: FontWeight.Bold
+						labelCSSStyles: { fontWeight: FontWeight.Bold }
 					}]
 				}, {
-					fields: [{
+					items: [{
 						type: FieldType.ReadonlyText,
 						label: localize('deployCluster.StoragePoolInstances', "Storage pool (HDFS) instances"),
 						defaultValue: `${this.wizard.model.getStringValue(VariableNames.HDFSPoolScale_VariableName)} ${this.wizard.model.getBooleanValue(VariableNames.IncludeSpark_VariableName) ? localize('deployCluster.WithSpark', "(Spark included)") : ''}`,
-						labelFontWeight: FontWeight.Bold
+						labelCSSStyles: { fontWeight: FontWeight.Bold }
 					}]
 				}
 			]
@@ -270,6 +269,7 @@ export class SummaryPage extends WizardPageBase<DeployClusterWizard> {
 				title: '',
 				component: createSection({
 					container: this.wizard.wizardObject,
+					inputComponents: this.wizard.inputComponents,
 					sectionInfo: sectionInfo,
 					view: this.view,
 					onNewDisposableCreated: () => { },
@@ -398,7 +398,7 @@ export class SummaryPage extends WizardPageBase<DeployClusterWizard> {

 	private createEndpointRow(name: string, dnsVariableName: string, portVariableName: string): azdata.FlexContainer {
 		const items = [];
-		items.push(createLabel(this.view, { text: name, width: '150px', fontWeight: FontWeight.Bold }));
+		items.push(createLabel(this.view, { text: name, width: '150px', cssStyles: { fontWeight: FontWeight.Bold } }));
 		if (this.wizard.model.authenticationMode === AuthenticationMode.ActiveDirectory) {
 			items.push(createLabel(this.view, {
 				text: this.wizard.model.getStringValue(dnsVariableName)!, width: '200px'