From c04b26d2bc2a902904614e200b728ece4ec20de3 Mon Sep 17 00:00:00 2001
From: Chaiwat Ekkaewnumchai <cekkaewnumchai@fb.com>
Date: Thu, 5 Nov 2020 03:21:47 -0800
Subject: [PATCH] Fix Empty Array And Object Not Showing up

Summary:
Reported in [the Workplace group](https://fb.workplace.com/groups/flippersupport/permalink/1002324710248187/), the empty array and object in network plugin wasn't shown and left blank. This happened because data component checked for expandability and decided empty object is not expandable. Thus, it uses different path to render components.

This diff fixes that by rendering empty array and object as `[]` and `{}`

Reviewed By: jknoxville

Differential Revision: D24726219

fbshipit-source-id: 9b22e1011c39c363b73f759477f44f08520734a7
---
 .../components/data-inspector/DataDescription.tsx  | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/desktop/app/src/ui/components/data-inspector/DataDescription.tsx b/desktop/app/src/ui/components/data-inspector/DataDescription.tsx
index a8c22188c..724bf467d 100644
--- a/desktop/app/src/ui/components/data-inspector/DataDescription.tsx
+++ b/desktop/app/src/ui/components/data-inspector/DataDescription.tsx
@@ -80,6 +80,11 @@ const ColorPickerDescription = styled.div({
 });
 ColorPickerDescription.displayName = 'DataDescription:ColorPickerDescription';
 
+const EmptyObjectValue = styled.span({
+  fontStyle: 'italic',
+});
+EmptyObjectValue.displayName = 'DataDescription:EmptyObjectValue';
+
 type DataDescriptionProps = {
   path?: Array<string>;
   type: string;
@@ -708,11 +713,14 @@ class DataDescriptionContainer extends PureComponent<{
       case 'null':
         return <NullValue>null</NullValue>;
 
+      // no description necessary as we'll typically wrap it in [] or {} which
+      // already denotes the type
       case 'array':
+        return val.length <= 0 ? <EmptyObjectValue>[]</EmptyObjectValue> : null;
       case 'object':
-        // no description necessary as we'll typically wrap it in [] or {} which already denotes the
-        // type
-        return null;
+        return Object.keys(val).length <= 0 ? (
+          <EmptyObjectValue>{'{}'}</EmptyObjectValue>
+        ) : null;
 
       case 'function':
         return (