From 8d0f3b29674fbd94db04cba4a91534f6f732670c Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Mon, 4 Sep 2023 02:19:53 -0700
Subject: [PATCH] Use new drop down api for wireframe mode

Reviewed By: lblasa

Differential Revision: D48910673

fbshipit-source-id: 74a1ca0fc096d4619d281a2ed4175c5d90e551a4
---
 .../shared/SelectableDropDownItem.tsx         | 37 -----------------
 .../visualizer/VisualizerControls.tsx         | 41 ++++++++-----------
 2 files changed, 18 insertions(+), 60 deletions(-)
 delete mode 100644 desktop/plugins/public/ui-debugger/components/shared/SelectableDropDownItem.tsx

diff --git a/desktop/plugins/public/ui-debugger/components/shared/SelectableDropDownItem.tsx b/desktop/plugins/public/ui-debugger/components/shared/SelectableDropDownItem.tsx
deleted file mode 100644
index e18e12558..000000000
--- a/desktop/plugins/public/ui-debugger/components/shared/SelectableDropDownItem.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * 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 {theme} from 'flipper-plugin';
-import React from 'react';
-
-export function SelectableDropDownItem<T>({
-  value,
-  selectedValue,
-  onSelect,
-  text,
-}: {
-  value: T;
-  selectedValue: T;
-  onSelect: (value: T) => void;
-  text: string;
-}) {
-  return (
-    <Menu.Item
-      style={{
-        color:
-          value === selectedValue ? theme.primaryColor : theme.textColorActive,
-      }}
-      onClick={() => {
-        onSelect(value);
-      }}>
-      {text}
-    </Menu.Item>
-  );
-}
diff --git a/desktop/plugins/public/ui-debugger/components/visualizer/VisualizerControls.tsx b/desktop/plugins/public/ui-debugger/components/visualizer/VisualizerControls.tsx
index 9c7e558c8..7c7a27dcd 100644
--- a/desktop/plugins/public/ui-debugger/components/visualizer/VisualizerControls.tsx
+++ b/desktop/plugins/public/ui-debugger/components/visualizer/VisualizerControls.tsx
@@ -21,7 +21,6 @@ import {
 import {tracker} from '../../utils/tracker';
 import {debounce} from 'lodash';
 import {WireFrameMode} from '../../DesktopTypes';
-import {SelectableDropDownItem} from '../shared/SelectableDropDownItem';
 export type TargetModeState =
   | {
       state: 'selected';
@@ -35,6 +34,16 @@ export type TargetModeState =
       state: 'disabled';
     };
 
+function createItem(wireframeMode: WireFrameMode, label: string) {
+  return {key: wireframeMode, label: label};
+}
+
+const wireFrameModeDropDownItems = [
+  createItem('All', 'All'),
+  createItem('SelectedAndChildren', 'Selected and children'),
+  createItem('SelectedOnly', 'Selected only'),
+];
+
 export function VisualiserControls({
   targetMode,
   setTargetMode,
@@ -98,28 +107,14 @@ export function VisualiserControls({
 
       <Layout.Horizontal gap="medium" center>
         <Dropdown
-          overlay={
-            <Menu>
-              <SelectableDropDownItem
-                onSelect={onSetWireFrameMode}
-                text="All"
-                selectedValue={wireFrameMode}
-                value="All"
-              />
-              <SelectableDropDownItem
-                onSelect={onSetWireFrameMode}
-                text="Selected and children"
-                selectedValue={wireFrameMode}
-                value="SelectedAndChildren"
-              />
-              <SelectableDropDownItem
-                onSelect={onSetWireFrameMode}
-                text="Selected only"
-                selectedValue={wireFrameMode}
-                value="SelectedOnly"
-              />
-            </Menu>
-          }>
+          menu={{
+            selectable: true,
+            selectedKeys: [wireFrameMode],
+            items: wireFrameModeDropDownItems,
+            onSelect: (event) => {
+              onSetWireFrameMode(event.selectedKeys[0] as WireFrameMode);
+            },
+          }}>
           <Tooltip title="Wireframe Mode">
             <Button shape="circle">
               <PicCenterOutlined />