From 193285c2c7fc04bc51f5900fa7e89dc75902165a Mon Sep 17 00:00:00 2001
From: Thibault Derousseaux <tibdex@gmail.com>
Date: Wed, 18 Sep 2019 17:32:16 +0200
Subject: [PATCH 1/3] Don't display node structure in json-extension

The item strings draw the attention of the user away from the actual content of the tree.
---
 packages/json-extension/src/component.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/json-extension/src/component.tsx b/packages/json-extension/src/component.tsx
index 5507baaf32fe..9338e10237ae 100644
--- a/packages/json-extension/src/component.tsx
+++ b/packages/json-extension/src/component.tsx
@@ -71,6 +71,7 @@ export class Component extends React.Component<IProps, IState> {
           }}
           invertTheme={false}
           keyPath={[root]}
+          getItemString={() => null}
           labelRenderer={([label, type]) => {
             // let className = 'cm-variable';
             // if (type === 'root') {

From 8013d190e8b41742aed0cf30191075ada28b2b89 Mon Sep 17 00:00:00 2001
From: Thibault Derousseaux <tibdex@gmail.com>
Date: Wed, 18 Sep 2019 20:26:10 +0200
Subject: [PATCH 2/3] Only show node structure when there is no data

---
 packages/json-extension/src/component.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/json-extension/src/component.tsx b/packages/json-extension/src/component.tsx
index 9338e10237ae..a75d6d06f67f 100644
--- a/packages/json-extension/src/component.tsx
+++ b/packages/json-extension/src/component.tsx
@@ -71,7 +71,14 @@ export class Component extends React.Component<IProps, IState> {
           }}
           invertTheme={false}
           keyPath={[root]}
-          getItemString={() => null}
+          getItemString={(type, data, itemType) =>
+            ((Array.isArray(data) && data) || Object.keys(data)).length ===
+            0 ? (
+              // When there is no data, we display the collection type ("{}" or "[]").
+              <span>{itemType}</span>
+            ) : // Otherwise, the data speaks for itself.
+            null
+          }
           labelRenderer={([label, type]) => {
             // let className = 'cm-variable';
             // if (type === 'root') {

From 47e11f9a8a2750599a4814ae550f92c8bc9473d8 Mon Sep 17 00:00:00 2001
From: Thibault Derousseaux <tibdex@gmail.com>
Date: Wed, 18 Sep 2019 22:11:37 +0200
Subject: [PATCH 3/3] Only display node structure in JSONTree for arrays and
 empty objects

---
 packages/json-extension/src/component.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/json-extension/src/component.tsx b/packages/json-extension/src/component.tsx
index a75d6d06f67f..9c7e68c92f56 100644
--- a/packages/json-extension/src/component.tsx
+++ b/packages/json-extension/src/component.tsx
@@ -71,13 +71,16 @@ export class Component extends React.Component<IProps, IState> {
           }}
           invertTheme={false}
           keyPath={[root]}
-          getItemString={(type, data, itemType) =>
-            ((Array.isArray(data) && data) || Object.keys(data)).length ===
-            0 ? (
-              // When there is no data, we display the collection type ("{}" or "[]").
+          getItemString={(type, data, itemType, itemString) =>
+            Array.isArray(data) ? (
+              // Always display array type and the number of items i.e. "[] 2 items".
+              <span>
+                {itemType} {itemString}
+              </span>
+            ) : Object.keys(data).length === 0 ? (
+              // Only display object type when it's empty i.e. "{}".
               <span>{itemType}</span>
-            ) : // Otherwise, the data speaks for itself.
-            null
+            ) : null
           }
           labelRenderer={([label, type]) => {
             // let className = 'cm-variable';