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

@@ -173,15 +173,8 @@ export default class LogWatcher extends PureComponent<Props, State> {
   };
 
   onKeyDown = (e: React.KeyboardEvent) => {
-    if (
+    if (e.key === 'Delete' || e.key === 'Backspace') {
-      (e.key === 'Delete' || e.key === 'Backspace') &&
+      this.handleDelete();
-      this.state.highlightedRow != null
-    ) {
-      this.props.onChange(
-        this.props.counters.filter(
-          ({label}) => label !== this.state.highlightedRow,
-        ),
-      );
     }
   };
 
@@ -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>