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/util/UIDebuggerMenuItem.tsx

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {Menu} from 'antd';
+import {usePlugin, useValue} from 'flipper-plugin';
+import {plugin} from '../../index';
+import React from 'react';
+
+/**
+ * The Menu item visibility event does not fire when a menu item is clicked.
+ * This is apparently by design https://github.com/ant-design/ant-design/issues/4994#issuecomment-281585872
+ * This component simply wraps a menu item but will ensure that  the atom is set to false when an item is clicked.
+ * Additionally, it ensures menu items do not render when the atom is false
+ */
+export const UIDebuggerMenuItem: React.FC<{
+  text: string;
+  onClick: () => void;
+}> = ({text, onClick}) => {
+  const instance = usePlugin(plugin);
+
+  const isMenuOpen = useValue(instance.isContextMenuOpen);
+  /**
+   * The menu is not a controlled component and seems to be a bit slow to close when user clicks on it.
+   * React may rerender the menu before it has time to close resulting in seeing an incorrect context menu for a frame.
+   * This is here to just hide all the menu items when the menu closes. A little strange but works well in practice.
+   */
+  if (!isMenuOpen) {
+    return null;
+  }
+  return (
+    <Menu.Item
+      onClick={() => {
+        onClick();
+        instance.isContextMenuOpen.set(false);
+      }}>
+      {text}
+    </Menu.Item>
+  );
+};