Making the Postgres Parameters Page Visible (#14156)

* Having parameters page be visible and fixing information bubbles

* Added sessions to edit commands

* Fix table style

extensions/arc/src/ui/dashboards/postgres/postgresDashboard.ts

@@ -14,6 +14,7 @@ import { Dashboard } from '../../components/dashboard';
 import { PostgresDiagnoseAndSolveProblemsPage } from './postgresDiagnoseAndSolveProblemsPage';
 import { PostgresSupportRequestPage } from './postgresSupportRequestPage';
 import { PostgresComputeAndStoragePage } from './postgresComputeAndStoragePage';
+import { PostgresParametersPage } from './postgresParametersPage';
 
 export class PostgresDashboard extends Dashboard {
 	constructor(private _context: vscode.ExtensionContext, private _controllerModel: ControllerModel, private _postgresModel: PostgresModel) {
@@ -34,8 +35,7 @@ export class PostgresDashboard extends Dashboard {
 		const computeAndStoragePage = new PostgresComputeAndStoragePage(modelView, this._postgresModel);
 		// TODO: Removed properties page while investigating bug where refreshed values don't appear in UI
 		// const propertiesPage = new PostgresPropertiesPage(modelView, this._controllerModel, this._postgresModel);
-		// TODO: Removed parameters page while investigating bug where UI freezes dealing with large declarative table of components
+		const parametersPage = new PostgresParametersPage(modelView, this._postgresModel);
-		// const parametersPage = new PostgresParametersPage(modelView, this._postgresModel);
 		const diagnoseAndSolveProblemsPage = new PostgresDiagnoseAndSolveProblemsPage(modelView, this._context, this._postgresModel);
 		const supportRequestPage = new PostgresSupportRequestPage(modelView, this._controllerModel, this._postgresModel);
 
@@ -45,7 +45,8 @@ export class PostgresDashboard extends Dashboard {
 				title: loc.settings,
 				tabs: [
 					connectionStringsPage.tab,
-					computeAndStoragePage.tab
+					computeAndStoragePage.tab,
+					parametersPage.tab
 				]
 			},
 			{

extensions/arc/src/ui/dashboards/postgres/postgresParametersPage.ts

@@ -165,7 +165,9 @@ export class PostgresParametersPage extends DashboardPage {
 									await this._azdataApi.azdata.arc.postgres.server.edit(
 										this._postgresModel.info.name,
 										{ engineSettings: engineSettings.toString() },
-										this._postgresModel.engineVersion);
+										this._postgresModel.engineVersion,
+										this._postgresModel.controllerModel.azdataAdditionalEnvVars,
+										session);
 								} finally {
 									session.dispose();
 								}
@@ -240,7 +242,9 @@ export class PostgresParametersPage extends DashboardPage {
 								await this._azdataApi.azdata.arc.postgres.server.edit(
 									this._postgresModel.info.name,
 									{ engineSettings: `''`, replaceEngineSettings: true },
-									this._postgresModel.engineVersion);
+									this._postgresModel.engineVersion,
+									this._postgresModel.controllerModel.azdataAdditionalEnvVars,
+									session);
 							} catch (err) {
 								// If an error occurs while resetting the instance then re-enable the reset button since
 								// the edit wasn't successfully applied
@@ -405,7 +409,6 @@ export class PostgresParametersPage extends DashboardPage {
 		// Container to hold input component and information bubble
 		const valueContainer = this.modelView.modelBuilder.flexContainer().withLayout({ alignItems: 'center' }).component();
 
-
 		if (engineSetting.type === 'enum') {
 			// If type is enum, component should be drop down menu
 			let options = engineSetting.options?.slice(1, -1).split(',');
@@ -417,8 +420,7 @@ export class PostgresParametersPage extends DashboardPage {
 			let valueBox = this.modelView.modelBuilder.dropDown().withProps({
 				values: values,
 				value: engineSetting.value,
-				width: '150px',
+				width: '150px'
-				CSSStyles: { 'height': '40px' }
 			}).component();
 			valueContainer.addItem(valueBox);
 
@@ -482,9 +484,6 @@ export class PostgresParametersPage extends DashboardPage {
 				})
 			);
 		} else {
-			// Child components to be added to container
-			let components: Array<azdata.Component> = [];
-
 			// If type is real or interger, component should be inputbox set to inputType of number. Max and min values also set.
 			let valueBox = this.modelView.modelBuilder.inputBox().withProps({
 				required: true,
@@ -496,7 +495,8 @@ export class PostgresParametersPage extends DashboardPage {
 				value: engineSetting.value,
 				width: '150px'
 			}).component();
-			components.push(valueBox);
+
+			valueContainer.addItem(valueBox, { CSSStyles: { 'margin-right': '0px' } });
 
 			this.disposables.push(
 				valueBox.onTextChanged(() => {
@@ -513,12 +513,10 @@ export class PostgresParametersPage extends DashboardPage {
 				iconPath: IconPathHelper.information,
 				width: '15px',
 				height: '15px',
-				enabled: false
+				enabled: false,
+				title: loc.allowedValue(loc.rangeSetting(engineSetting.min!, engineSetting.max!))
 			}).component();
-
+			valueContainer.addItem(information, { CSSStyles: { 'margin-left': '5px' } });
-			information.updateProperty('title', loc.allowedValue(loc.rangeSetting(engineSetting.min!, engineSetting.max!)));
-			components.push(information);
-			valueContainer.addItems(components);
 		}
 
 		// Can reset individual parameter
@@ -545,7 +543,9 @@ export class PostgresParametersPage extends DashboardPage {
 								await this._azdataApi.azdata.arc.postgres.server.edit(
 									this._postgresModel.info.name,
 									{ engineSettings: engineSetting.parameterName + '=' },
-									this._postgresModel.engineVersion);
+									this._postgresModel.engineVersion,
+									this._postgresModel.controllerModel.azdataAdditionalEnvVars,
+									session);
 							} finally {
 								session.dispose();
 							}
@@ -581,6 +581,8 @@ export class PostgresParametersPage extends DashboardPage {
 			this._parametersTableLoading!.loading = false;
 		} else if (this._postgresModel.engineSettingsLastUpdated) {
 			await this.callGetEngineSettings();
+			this.discardButton!.enabled = false;
+			this.saveButton!.enabled = false;
 		}
 	}
 }