Badge for events instead of inline approach

Summary:
Instead of showing events as inline attributes, just show a badge with the number of it. Event details will be displayed with other means:

- Hover
- Dedicated tab
- Other

Reviewed By: mweststrate

Differential Revision: D43946575

fbshipit-source-id: 762a241040d7fc6afb2c86d129a620ff2bb15feb

desktop/plugins/public/ui-debugger/components/Tree.tsx

@@ -31,9 +31,9 @@ import {
 } from 'flipper-plugin';
 import {plugin} from '../index';
 import {Glyph} from 'flipper';
-import {groupBy, head, isEqual, last} from 'lodash';
+import {head, isEqual, last} from 'lodash';
 import {reverse} from 'lodash/fp';
-import {Dropdown, Menu, Typography} from 'antd';
+import {Badge, Dropdown, Menu, Typography} from 'antd';
 import {UIDebuggerMenuItem} from './util/UIDebuggerMenuItem';
 
 const {Text} = Typography;
@@ -232,6 +232,11 @@ function TreeItemContainer({
   onCollapseNode: (node: Id) => void;
   onHoverNode: (node: Id) => void;
 }) {
+  let events = frameworkEvents.get(treeNode.id);
+  if (events) {
+    events = events.filter((e) => frameworkEventsMonitoring.get(e.type));
+  }
+
   return (
     <div>
       {treeNode.indentGuide != null && (
@@ -253,7 +258,8 @@ function TreeItemContainer({
         onClick={() => {
           onSelectNode(treeNode.id);
         }}
-        item={treeNode}>
+        item={treeNode}
+        style={{overflow: 'visible'}}>
         <ExpandedIconOrSpace
           expanded={treeNode.isExpanded}
           showIcon={treeNode.children.length > 0}
@@ -266,18 +272,32 @@ function TreeItemContainer({
           }}
         />
         {nodeIcon(treeNode)}
-        <HighlightedText text={treeNode.name} />
+        {events ? (
-        <InlineAttributes attributes={treeNode.inlineAttributes} />
+          <Badge
-        <MonitoredEventSummary
+            key={treeNode.id}
-          node={treeNode}
+            count={events.length}
-          frameworkEvents={frameworkEvents}
+            size="small"
-          frameworkEventsMonitoring={frameworkEventsMonitoring}
+            color={theme.primaryColor}
-        />
+            offset={[10, 5]}>
+            <TreeItemRowContent treeNode={treeNode} />
+          </Badge>
+        ) : (
+          <TreeItemRowContent treeNode={treeNode} />
+        )}
       </TreeItemRow>
     </div>
   );
 }
 
+function TreeItemRowContent({treeNode}: {treeNode: TreeNode}) {
+  return (
+    <>
+      <HighlightedText text={treeNode.name} />
+      <InlineAttributes attributes={treeNode.inlineAttributes} />
+    </>
+  );
+}
+
 const TreeAttributeContainer = styled(Text)({
   color: theme.textColorSecondary,
   fontWeight: 300,
@@ -285,35 +305,6 @@ const TreeAttributeContainer = styled(Text)({
   fontSize: 12,
 });
 
-function MonitoredEventSummary({
-  node,
-  frameworkEvents,
-  frameworkEventsMonitoring,
-}: {
-  node: UINode;
-  frameworkEvents: Map<Id, FrameworkEvent[]>;
-  frameworkEventsMonitoring: Map<FrameworkEventType, boolean>;
-}) {
-  const events = frameworkEvents.get(node.id);
-  if (events) {
-    return (
-      <>
-        {Object.entries(groupBy(events, (e) => e.type))
-          .filter(([type]) => frameworkEventsMonitoring.get(type))
-          .map(([key, values]) => (
-            <TreeAttributeContainer key={key}>
-              <span style={{color: theme.errorColor}}>
-                {last(key.split(':'))}
-              </span>
-              <span>={values.length}</span>
-            </TreeAttributeContainer>
-          ))}
-      </>
-    );
-  }
-  return null;
-}
-
 function InlineAttributes({attributes}: {attributes: Record<string, string>}) {
   const highlightManager: HighlightManager = useHighlighter();