Refactor out UI debugger menu item

Summary: We have to do a couple of odd things to get the context menu items to behave. The code was duplicated between tree and visualizer. This custom component removes duplication and makes the approach a bit clearer (via js doc)

Reviewed By: antonk52

Differential Revision: D41495718

fbshipit-source-id: ec98d5101e636a2c9034c656d29991d4fe348762

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

@@ -31,6 +31,7 @@ import {
 
 import {head} from 'lodash';
 import {Dropdown, Menu} from 'antd';
+import {UIDebuggerMenuItem} from './util/UIDebuggerMenuItem';
 
 export function Tree(props: {
   rootId: Id;
@@ -209,23 +210,23 @@ const ContextMenu: React.FC<ContextMenuProps> = ({id, title, children}) => {
       overlay={() => (
         <Menu>
           {focusedNode !== head(instance.hoveredNodes.get()) && (
-            <Menu.Item
+            <UIDebuggerMenuItem
+              key="focus"
+              text={`Focus ${title}`}
               onClick={() => {
                 instance.focusedNode.set(id);
-                instance.isContextMenuOpen.set(false);
-              }}>
-              Focus {title}
-            </Menu.Item>
+              }}
+            />
           )}
 
           {focusedNode && (
-            <Menu.Item
+            <UIDebuggerMenuItem
+              key="remove-focus"
+              text="Remove focus"
               onClick={() => {
                 instance.focusedNode.set(undefined);
-                instance.isContextMenuOpen.set(false);
-              }}>
-              Remove focus
-            </Menu.Item>
+              }}
+            />
           )}
         </Menu>
       )}