From 579172fa39e364a2331907adfdb44dfae6a0e461 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Thu, 4 Jun 2020 09:54:09 -0700
Subject: [PATCH] Add context menu item to remove watch expression

Summary: See https://github.com/facebook/flipper/issues/1185

Reviewed By: jknoxville

Differential Revision: D21882508

fbshipit-source-id: 584c8b6eb01c821afe421d1b816fa77842c502fd
---
 desktop/plugins/logs/LogWatcher.tsx | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/desktop/plugins/logs/LogWatcher.tsx b/desktop/plugins/logs/LogWatcher.tsx
index 841917e73..5a29c8217 100644
--- a/desktop/plugins/logs/LogWatcher.tsx
+++ b/desktop/plugins/logs/LogWatcher.tsx
@@ -173,15 +173,8 @@ export default class LogWatcher extends PureComponent<Props, State> {
   };
 
   onKeyDown = (e: React.KeyboardEvent) => {
-    if (
-      (e.key === 'Delete' || e.key === 'Backspace') &&
-      this.state.highlightedRow != null
-    ) {
-      this.props.onChange(
-        this.props.counters.filter(
-          ({label}) => label !== this.state.highlightedRow,
-        ),
-      );
+    if (e.key === 'Delete' || e.key === 'Backspace') {
+      this.handleDelete();
     }
   };
 
@@ -191,6 +184,16 @@ export default class LogWatcher extends PureComponent<Props, State> {
     }
   };
 
+  handleDelete = () => {
+    if (this.state.highlightedRow != null) {
+      this.props.onChange(
+        this.props.counters.filter(
+          ({label}) => label !== this.state.highlightedRow,
+        ),
+      );
+    }
+  };
+
   render() {
     return (
       <FlexColumn grow={true} tabIndex={-1} onKeyDown={this.onKeyDown}>
@@ -220,6 +223,9 @@ export default class LogWatcher extends PureComponent<Props, State> {
             autoHeight={true}
             floating={false}
             zebra={false}
+            buildContextMenuItems={() => {
+              return [{label: 'Delete', click: this.handleDelete}];
+            }}
           />
         </WatcherPanel>
       </FlexColumn>