Added inline tree attributes

Summary:
This is temporary solution to get to parity with the old plugin. In future would like to make this more flexible on the desktop side

Additionally getData was renamed to getAttributes for consistency

Reviewed By: lblasa

Differential Revision: D41845248

fbshipit-source-id: 50e94a7712f5d42938229134e212cef5d379475d

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

@@ -273,6 +273,7 @@ const FakeNode: UINode = {
   id: 'Fakeroot',
   qualifiedName: 'Fakeroot',
   name: 'Fakeroot',
+  inlineAttributes: {},
   children: [],
   attributes: {},
   bounds: {x: 0, y: 0, height: 0, width: 0},

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

@@ -30,9 +30,11 @@ import {plugin} from '../index';
 import {Glyph} from 'flipper';
 import {head} from 'lodash';
 import {reverse} from 'lodash/fp';
-import {Dropdown, Menu} from 'antd';
+import {Dropdown, Menu, Typography} from 'antd';
 import {UIDebuggerMenuItem} from './util/UIDebuggerMenuItem';
 
+const {Text} = Typography;
+
 export function Tree2({
   nodes,
   rootId,
@@ -168,11 +170,34 @@ function TreeItemContainer({
         />
         {nodeIcon(treeNode)}
         <HighlightedText text={treeNode.name} />
+        <InlineAttributes attributes={treeNode.inlineAttributes} />
       </TreeItem>
     </ContextMenu>
   );
 }
 
+const TreeAttributeContainer = styled(Text)({
+  color: theme.textColorSecondary,
+  fontWeight: 300,
+  marginLeft: 5,
+  fontSize: 12,
+});
+
+function InlineAttributes({attributes}: {attributes: Record<string, string>}) {
+  return (
+    <>
+      {Object.entries(attributes ?? {}).map(([key, value]) => (
+        <>
+          <TreeAttributeContainer key={key}>
+            <span style={{color: theme.warningColor}}>{key}</span>
+            <span>={value}</span>
+          </TreeAttributeContainer>
+        </>
+      ))}
+    </>
+  );
+}
+
 function useIsHovered(nodeId: Id) {
   const instance = usePlugin(plugin);
   const [isHovered, setIsHovered] = useState(false);
@@ -200,7 +225,7 @@ const TreeItem = styled.li<{
   isSelected: boolean;
 }>(({item, isHovered, isSelected}) => ({
   display: 'flex',
-  alignItems: 'center',
+  alignItems: 'baseline',
   height: '26px',
   paddingLeft: `${(item.depth + 1) * renderDepthOffset}px`,
   borderWidth: '1px',