From e99b4a7bed1e94496f5d60b8cb9849865bb6ccce Mon Sep 17 00:00:00 2001
From: nasc17 <69922333+nasc17@users.noreply.github.com>
Date: Thu, 4 Feb 2021 12:39:51 -0800
Subject: [PATCH] Making the Postgres Properties Page Visible (#14161)

* Make properties page visible

* Set max length to text box
---
 .../arc/src/ui/dashboards/postgres/postgresDashboard.ts      | 5 +++--
 .../arc/src/ui/dashboards/postgres/postgresPropertiesPage.ts | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/extensions/arc/src/ui/dashboards/postgres/postgresDashboard.ts b/extensions/arc/src/ui/dashboards/postgres/postgresDashboard.ts
index cd7e948f7c..16be7f8d23 100644
--- a/extensions/arc/src/ui/dashboards/postgres/postgresDashboard.ts
+++ b/extensions/arc/src/ui/dashboards/postgres/postgresDashboard.ts
@@ -15,6 +15,7 @@ import { PostgresDiagnoseAndSolveProblemsPage } from './postgresDiagnoseAndSolve
 import { PostgresSupportRequestPage } from './postgresSupportRequestPage';
 import { PostgresComputeAndStoragePage } from './postgresComputeAndStoragePage';
 import { PostgresParametersPage } from './postgresParametersPage';
+import { PostgresPropertiesPage } from './postgresPropertiesPage';
 
 export class PostgresDashboard extends Dashboard {
 	constructor(private _context: vscode.ExtensionContext, private _controllerModel: ControllerModel, private _postgresModel: PostgresModel) {
@@ -33,8 +34,7 @@ export class PostgresDashboard extends Dashboard {
 		const overviewPage = new PostgresOverviewPage(modelView, this._controllerModel, this._postgresModel);
 		const connectionStringsPage = new PostgresConnectionStringsPage(modelView, this._postgresModel);
 		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);
+		const propertiesPage = new PostgresPropertiesPage(modelView, this._controllerModel, 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);
@@ -44,6 +44,7 @@ export class PostgresDashboard extends Dashboard {
 			{
 				title: loc.settings,
 				tabs: [
+					propertiesPage.tab,
 					connectionStringsPage.tab,
 					computeAndStoragePage.tab,
 					parametersPage.tab
diff --git a/extensions/arc/src/ui/dashboards/postgres/postgresPropertiesPage.ts b/extensions/arc/src/ui/dashboards/postgres/postgresPropertiesPage.ts
index 66c6fb780e..39b503a4aa 100644
--- a/extensions/arc/src/ui/dashboards/postgres/postgresPropertiesPage.ts
+++ b/extensions/arc/src/ui/dashboards/postgres/postgresPropertiesPage.ts
@@ -50,6 +50,7 @@ export class PostgresPropertiesPage extends DashboardPage {
 		}).component());
 
 		this.keyValueContainer = new KeyValueContainer(this.modelView.modelBuilder, this.getProperties());
+		this.keyValueContainer.container.updateCssStyles({ 'max-width': '750px' });
 		this.disposables.push(this.keyValueContainer);
 
 		this.loading = this.modelView.modelBuilder.loadingComponent()