From 33ebe05126ce71412bf7a18c16767cbdf8863218 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Mon, 10 Jul 2023 09:22:39 -0700
Subject: [PATCH] Add icons to context menu

Summary: So pretty

Reviewed By: lblasa

Differential Revision: D47210293

fbshipit-source-id: 592dde396d43e4af30e38cab6a198e2153cfbf30
---
 .../public/ui-debugger/components/Tree.tsx       | 16 +++++++++++++---
 .../components/util/UIDebuggerMenuItem.tsx       | 10 +++++++---
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/Tree.tsx b/desktop/plugins/public/ui-debugger/components/Tree.tsx
index 8680de51b..3211c0ed1 100644
--- a/desktop/plugins/public/ui-debugger/components/Tree.tsx
+++ b/desktop/plugins/public/ui-debugger/components/Tree.tsx
@@ -41,6 +41,12 @@ import {
   BigGrepContextMenuItems,
   IDEContextMenuItems,
 } from './fb-stubs/IDEContextMenu';
+import {
+  CopyOutlined,
+  FullscreenExitOutlined,
+  FullscreenOutlined,
+  SnippetsOutlined,
+} from '@ant-design/icons';
 
 const {Text} = Typography;
 
@@ -492,8 +498,9 @@ const ContextMenu: React.FC<{
   if (hoveredNode) {
     copyItems.push(
       <UIDebuggerMenuItem
-        key={'Copy Element name'}
-        text={'Copy Element name'}
+        key="Copy Element name"
+        text="Copy Element name"
+        icon={<CopyOutlined />}
         onClick={() => {
           tracker.track('context-menu-name-copied', {name: hoveredNode.name});
           getFlipperLib().writeTextToClipboard(hoveredNode.name);
@@ -506,6 +513,7 @@ const ContextMenu: React.FC<{
         <UIDebuggerMenuItem
           key={key}
           text={`Copy ${key}`}
+          icon={<SnippetsOutlined />}
           onClick={() => {
             tracker.track('context-menu-copied', {
               name: hoveredNode.name,
@@ -526,7 +534,8 @@ const ContextMenu: React.FC<{
     hoveredNode.bounds.width !== 0 && (
       <UIDebuggerMenuItem
         key="focus"
-        text={`Focus ${hoveredNode.name}`}
+        text={`Focus element`}
+        icon={<FullscreenExitOutlined />}
         onClick={() => {
           onFocusNode(hoveredNodeId);
         }}
@@ -537,6 +546,7 @@ const ContextMenu: React.FC<{
     <UIDebuggerMenuItem
       key="remove-focus"
       text="Remove focus"
+      icon={<FullscreenOutlined />}
       onClick={() => {
         onFocusNode(undefined);
       }}
diff --git a/desktop/plugins/public/ui-debugger/components/util/UIDebuggerMenuItem.tsx b/desktop/plugins/public/ui-debugger/components/util/UIDebuggerMenuItem.tsx
index 5e4fbd7b0..9b88dd90c 100644
--- a/desktop/plugins/public/ui-debugger/components/util/UIDebuggerMenuItem.tsx
+++ b/desktop/plugins/public/ui-debugger/components/util/UIDebuggerMenuItem.tsx
@@ -8,7 +8,7 @@
  */
 
 import {Menu} from 'antd';
-import {usePlugin, useValue} from 'flipper-plugin';
+import {usePlugin, useValue, Layout} from 'flipper-plugin';
 import {plugin} from '../../index';
 import React from 'react';
 
@@ -20,8 +20,9 @@ import React from 'react';
  */
 export const UIDebuggerMenuItem: React.FC<{
   text: string;
+  icon?: React.ReactNode;
   onClick: () => void;
-}> = ({text, onClick}) => {
+}> = ({text, onClick, icon}) => {
   const instance = usePlugin(plugin);
 
   const isMenuOpen = useValue(instance.uiState.isContextMenuOpen);
@@ -39,7 +40,10 @@ export const UIDebuggerMenuItem: React.FC<{
         onClick();
         instance.uiState.isContextMenuOpen.set(false);
       }}>
-      {text}
+      <Layout.Horizontal center gap="small">
+        {icon}
+        {text}
+      </Layout.Horizontal>
     </Menu.Item>
   );
 };