From e1bbbf2c9eebeaefad3520c0c48c16fee99095cf Mon Sep 17 00:00:00 2001
From: Brian Bergeron <brian.e.bergeron@gmail.com>
Date: Wed, 24 Jun 2020 14:19:21 -0700
Subject: [PATCH] Arc - Fix KeyValueContainer refresh (#11077)

---
 .../src/ui/components/keyValueContainer.ts    | 25 ++++++++++++++-----
 .../postgres/postgresOverviewPage.ts          |  1 -
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/extensions/arc/src/ui/components/keyValueContainer.ts b/extensions/arc/src/ui/components/keyValueContainer.ts
index 184c197c5c..db39469d24 100644
--- a/extensions/arc/src/ui/components/keyValueContainer.ts
+++ b/extensions/arc/src/ui/components/keyValueContainer.ts
@@ -11,24 +11,37 @@ import { IconPathHelper, cssStyles } from '../../constants';
 /** A container with a single vertical column of KeyValue pairs */
 export class KeyValueContainer {
 	public container: azdata.DivContainer;
+	private keyToComponent: Map<string, (azdata.TextComponent | azdata.InputBoxComponent)>;
 
 	constructor(private modelBuilder: azdata.ModelBuilder, pairs: KeyValue[]) {
 		this.container = modelBuilder.divContainer().component();
+		this.keyToComponent = new Map<string, azdata.Component>();
 		this.refresh(pairs);
 	}
 
+	// TODO: Support removing KeyValues, and handle race conditions when
+	// adding/removing KeyValues concurrently. For now this should only be used
+	// when the set of keys won't change (though their values can be refreshed).
 	public refresh(pairs: KeyValue[]) {
-		this.container.clearItems();
-		this.container.addItems(
-			pairs.map(p => p.getComponent(this.modelBuilder)),
-			{ CSSStyles: { 'margin-bottom': '15px', 'min-height': '30px' } }
-		);
+		pairs.forEach(p => {
+			let component = this.keyToComponent.get(p.key);
+			if (component) {
+				component.value = p.value;
+			} else {
+				component = p.getComponent(this.modelBuilder);
+				this.keyToComponent.set(p.key, component);
+				this.container.addItem(
+					component,
+					{ CSSStyles: { 'margin-bottom': '15px', 'min-height': '30px' } }
+				);
+			}
+		});
 	}
 }
 
 /** A key value pair in the KeyValueContainer */
 export abstract class KeyValue {
-	constructor(protected key: string, protected value: string) { }
+	constructor(public key: string, public value: string) { }
 
 	/** Returns a component representing the entire KeyValue pair */
 	public getComponent(modelBuilder: azdata.ModelBuilder) {
diff --git a/extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts b/extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts
index 67199fa692..cdec0aee25 100644
--- a/extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts
+++ b/extensions/arc/src/ui/dashboards/postgres/postgresOverviewPage.ts
@@ -383,7 +383,6 @@ export class PostgresOverviewPage extends DashboardPage {
 
 		this.nodesTable!.data = this.getNodes();
 		this.nodesTableLoading!.loading = false;
-
 	}
 
 	private handlePodsUpdated() {