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

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,9 +208,9 @@ export const AttributesInspector: React.FC<Props> = ({
   mode,
   rawDisplayEnabled = false,
 }) => {
-  return (
+  const keys = Object.keys(node.attributes);
-    <>
+  const sections = keys
-      {Object.keys(node.attributes).map(function (key, _) {
+    .map(function (key, _) {
       const metadataId: number = Number(key);
       /**
        * The node top-level attributes refer to the displayable panels.
@@ -222,8 +223,22 @@ export const AttributesInspector: React.FC<Props> = ({
         metadata.get(metadataId)?.name ?? '',
         node.attributes[metadataId] as InspectableObject,
       );
-      })}
+    })
-      {rawDisplayEnabled ?? (
+    .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 (
+    <>
+      {...sections}
+      {rawDisplayEnabled && (
         <Panel key="Raw" title="Raw Data" collapsed>
           <DataInspector data={node.attributes} />
         </Panel>

desktop/static/icons.json

@@ -254,7 +254,8 @@
     16
   ],
   "stop": [
-    16
+    16,
+    24
   ],
   "target": [
     12,