diff --git a/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx b/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx index 52d9b42b9..7d9160c92 100644 --- a/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx +++ b/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx @@ -30,7 +30,7 @@ import { } from 'flipper-plugin'; import {plugin} from '../../index'; import {head, last} from 'lodash'; -import {Badge, Typography} from 'antd'; +import {Badge, Tooltip, Typography} from 'antd'; import {useVirtualizer} from '@tanstack/react-virtual'; import {ContextMenu} from './ContextMenu'; @@ -577,33 +577,52 @@ function HighlightedText(props: {text: string}) { } function nodeIcon(node: TreeNode) { + const [icon, tooltip] = nodeData(node); + + const iconComp = + typeof icon === 'string' ? : icon; + + if (tooltip == null) { + return iconComp; + } else { + return {iconComp}; + } +} + +function nodeData(node: TreeNode) { if (node.tags.includes('LithoMountable')) { - return ; + return ['icons/litho-logo-blue.png', 'Litho Mountable (Primitive)']; } else if (node.tags.includes('Litho')) { - return ; + return ['icons/litho-logo.png', 'Litho Component']; } else if (node.tags.includes('CK')) { if (node.tags.includes('iOS')) { - return ; + return ['icons/ck-mounted-logo.png', 'CK Mounted Component']; } - return ; + return ['icons/ck-logo.png', 'CK Component']; } else if (node.tags.includes('BloksBoundTree')) { - return ; + return ['facebook/bloks-logo-orange.png', 'Bloks Bridged component']; } else if (node.tags.includes('BloksDerived')) { - return ; + return ['facebook/bloks-logo-blue.png', 'Bloks Derived (Server) component']; } else if (node.tags.includes('Warning')) { - return ( - - ); + return [ + , + null, + ]; } else { - return ( + return [
- ); + />, + null, + ]; } }