From 1adcf2bc68acf137c41d99c967012b5dfc80dff5 Mon Sep 17 00:00:00 2001
From: Lorenzo Blasa <lblasa@meta.com>
Date: Fri, 18 Nov 2022 05:21:56 -0800
Subject: [PATCH] No data available

Summary: If there are no attributes for a given section, display a 'No data available' message rather than having an empty panel.

Reviewed By: antonk52

Differential Revision: D41400252

fbshipit-source-id: 0337702f638b9b917e6b3be5962838d2eb15c20d
---
 .../sidebar/inspector/AttributesInspector.tsx | 45 ++++++++++++-------
 desktop/static/icons.json                     |  5 ++-
 2 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx
index 6ad1c4f350a..12cc3c62bfa 100644
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx
@@ -32,6 +32,7 @@ import {
   RowStyle,
   TextAttributeValueStyle,
 } from './Styles';
+import {Glyph} from 'flipper';
 
 const NumberValue = styled.span(NumberAttributeValueStyle);
 const TextValue = styled.span(TextAttributeValueStyle);
@@ -207,23 +208,37 @@ export const AttributesInspector: React.FC<Props> = ({
   mode,
   rawDisplayEnabled = false,
 }) => {
+  const keys = Object.keys(node.attributes);
+  const sections = keys
+    .map(function (key, _) {
+      const metadataId: number = Number(key);
+      /**
+       * The node top-level attributes refer to the displayable panels.
+       * The panel name is obtained by querying the metadata.
+       * The inspectable contains the actual attributes belonging to each panel.
+       */
+      return createSection(
+        mode,
+        metadata,
+        metadata.get(metadataId)?.name ?? '',
+        node.attributes[metadataId] as InspectableObject,
+      );
+    })
+    .filter((section) => section !== undefined);
+
+  if (sections.length === 0) {
+    return (
+      <div style={{textAlign: 'center'}}>
+        <Glyph name="stop" size={24} style={{margin: 20}} />
+        <p>No data is available</p>
+      </div>
+    );
+  }
+
   return (
     <>
-      {Object.keys(node.attributes).map(function (key, _) {
-        const metadataId: number = Number(key);
-        /**
-         * The node top-level attributes refer to the displayable panels.
-         * The panel name is obtained by querying the metadata.
-         * The inspectable contains the actual attributes belonging to each panel.
-         */
-        return createSection(
-          mode,
-          metadata,
-          metadata.get(metadataId)?.name ?? '',
-          node.attributes[metadataId] as InspectableObject,
-        );
-      })}
-      {rawDisplayEnabled ?? (
+      {...sections}
+      {rawDisplayEnabled && (
         <Panel key="Raw" title="Raw Data" collapsed>
           <DataInspector data={node.attributes} />
         </Panel>
diff --git a/desktop/static/icons.json b/desktop/static/icons.json
index a74dda59081..f43a0726148 100644
--- a/desktop/static/icons.json
+++ b/desktop/static/icons.json
@@ -254,7 +254,8 @@
     16
   ],
   "stop": [
-    16
+    16,
+    24
   ],
   "target": [
     12,
@@ -658,4 +659,4 @@
   "square-ruler": [
     16
   ]
-}
\ No newline at end of file
+}