From 3dcfe9f3aef2b02ec8f520c0d331a962c1a1e197 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Tue, 11 Feb 2020 07:27:00 -0800
Subject: [PATCH] Move Metro control buttons to titlebar

Summary:
The Metro control buttons are now in the titlebar. This has a few benefits:
- the buttons are accessible if you are inspecting other metro plugins
- the buttons are even usuable if you selected an app on the actual device. This should help with reducing the cognitive dissonance of having apps both as 'android' app and metro device
- killed the Metro plugin again :)

Reviewed By: nikoant

Differential Revision: D19789455

fbshipit-source-id: 476fd0af1d3fc7b51a33f1af6d3fc3578aeeefae
---
 .../index.tsx => chrome/MetroButton.tsx}      | 105 ++++++++----------
 src/chrome/TitleBar.tsx                       |  14 ++-
 src/plugins/metro/package.json                |  18 ---
 static/icons.json                             |   8 +-
 4 files changed, 65 insertions(+), 80 deletions(-)
 rename src/{plugins/metro/index.tsx => chrome/MetroButton.tsx} (63%)
 delete mode 100644 src/plugins/metro/package.json

diff --git a/src/plugins/metro/index.tsx b/src/chrome/MetroButton.tsx
similarity index 63%
rename from src/plugins/metro/index.tsx
rename to src/chrome/MetroButton.tsx
index 47e79f9dc..482ca18a3 100644
--- a/src/plugins/metro/index.tsx
+++ b/src/chrome/MetroButton.tsx
@@ -7,16 +7,9 @@
  * @format
  */
 
-import React from 'react';
-import {
-  FlipperDevicePlugin,
-  Device,
-  View,
-  Button,
-  Toolbar,
-  ButtonGroup,
-  MetroDevice,
-} from 'flipper';
+import React, {useCallback} from 'react';
+import {Button, ButtonGroup, MetroDevice, connect} from 'flipper';
+import {State} from '../reducers';
 
 type LogEntry = {};
 
@@ -24,8 +17,6 @@ export type PersistedState = {
   logs: LogEntry[];
 };
 
-type State = {};
-
 /*
 Flow types for events 
 
@@ -120,52 +111,50 @@ export type ReportableEvent =
     };
 */
 
-export default class MetroPlugin extends FlipperDevicePlugin<
-  State,
-  any,
-  PersistedState
-> {
-  static supportsDevice(device: Device) {
-    return device.os === 'Metro';
-  }
+type Props = {
+  device: MetroDevice;
+};
 
-  get ws(): WebSocket {
-    return (this.device as MetroDevice).ws;
-  }
+function MetroButton({device}: Props) {
+  const sendCommand = useCallback(
+    (command: string) => {
+      if (device.ws) {
+        device.ws.send(
+          JSON.stringify({
+            version: 2,
+            type: 'command',
+            command,
+          }),
+        );
+      }
+    },
+    [device],
+  );
 
-  sendCommand(command: string) {
-    if (this.ws) {
-      this.ws.send(
-        JSON.stringify({
-          version: 2,
-          type: 'command',
-          command,
-        }),
-      );
-    }
-  }
-
-  render() {
-    return (
-      <View>
-        <Toolbar>
-          <ButtonGroup>
-            Work-in-progress
-            <Button
-              onClick={() => {
-                this.sendCommand('reload');
-              }}>
-              Reload RN
-            </Button>
-            <Button
-              onClick={() => {
-                this.sendCommand('devMenu');
-              }}>
-              Dev Menu
-            </Button>
-          </ButtonGroup>
-        </Toolbar>
-      </View>
-    );
-  }
+  return (
+    <ButtonGroup>
+      <Button
+        title="Reload React Native App"
+        icon="arrows-circle"
+        compact
+        onClick={() => {
+          sendCommand('reload');
+        }}
+      />
+      <Button
+        title="Open the React Native Dev Menu on the device"
+        icon="navicon"
+        compact
+        onClick={() => {
+          sendCommand('devMenu');
+        }}
+      />
+    </ButtonGroup>
+  );
 }
+
+export default connect<Props, {}, {}, State>(({connections: {devices}}) => ({
+  device: devices.find(
+    device => device.os === 'Metro' && !device.isArchived,
+  ) as MetroDevice,
+}))(MetroButton);
diff --git a/src/chrome/TitleBar.tsx b/src/chrome/TitleBar.tsx
index 27c43f23c..6c73642dd 100644
--- a/src/chrome/TitleBar.tsx
+++ b/src/chrome/TitleBar.tsx
@@ -42,9 +42,10 @@ import {isAutoUpdaterEnabled} from '../utils/argvUtils';
 import isProduction from '../utils/isProduction';
 import {clipboard} from 'electron';
 import React from 'react';
-import {State} from 'src/reducers';
+import {State} from '../reducers';
 import {reportUsage} from '../utils/metrics';
 import FpsGraph from './FpsGraph';
+import MetroButton from './MetroButton';
 
 const AppTitleBar = styled(FlexRow)<{focused?: boolean}>(({focused}) => ({
   background: focused
@@ -83,6 +84,7 @@ type StateFromProps = {
   launcherMsg: LauncherMsg;
   share: ShareType | null | undefined;
   navPluginIsActive: boolean;
+  isMetroActive: boolean;
 };
 
 const VersionText = styled(Text)({
@@ -144,7 +146,7 @@ function statusMessageComponent(
 type Props = OwnProps & DispatchFromProps & StateFromProps;
 class TitleBar extends React.Component<Props, StateFromProps> {
   render() {
-    const {navPluginIsActive, share} = this.props;
+    const {navPluginIsActive, share, isMetroActive} = this.props;
     return (
       <AppTitleBar focused={this.props.windowIsFocused} className="toolbar">
         {navPluginIsActive ? (
@@ -156,6 +158,8 @@ class TitleBar extends React.Component<Props, StateFromProps> {
           <DevicesButton />
         )}
 
+        {isMetroActive ? <MetroButton /> : null}
+
         <ScreenCaptureButtons />
         {statusMessageComponent(
           this.props.downloadingImportData,
@@ -238,7 +242,7 @@ export default connect<StateFromProps, DispatchFromProps, OwnProps, State>(
       launcherMsg,
       share,
     },
-    connections: {selectedDevice, selectedApp},
+    connections: {selectedDevice, selectedApp, devices},
     pluginStates,
   }) => {
     const navigationPluginKey = getPluginKey(
@@ -247,6 +251,9 @@ export default connect<StateFromProps, DispatchFromProps, OwnProps, State>(
       'Navigation',
     );
     const navPluginIsActive = !!pluginStates[navigationPluginKey];
+    const isMetroActive = !!devices.find(
+      device => device.os === 'Metro' && !device.isArchived,
+    );
 
     return {
       windowIsFocused,
@@ -257,6 +264,7 @@ export default connect<StateFromProps, DispatchFromProps, OwnProps, State>(
       launcherMsg,
       share,
       navPluginIsActive,
+      isMetroActive,
     };
   },
   {
diff --git a/src/plugins/metro/package.json b/src/plugins/metro/package.json
deleted file mode 100644
index 678b91ba1..000000000
--- a/src/plugins/metro/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "Metro",
-  "version": "0.1.0",
-  "description": "A plugin to manage React Native applications served trough Metro",
-  "main": "index.tsx",
-  "repository": "https://github.com/facebook/flipper",
-  "license": "MIT",
-  "keywords": [
-    "flipper-plugin",
-    "react-native",
-    "metro"
-  ],
-  "title": "Metro Bundler",
-  "bugs": {
-    "email": "mweststrate@fb.com"
-  },
-  "dependencies": {}
-}
diff --git a/static/icons.json b/static/icons.json
index 66308d613..07bba12af 100644
--- a/static/icons.json
+++ b/static/icons.json
@@ -365,5 +365,11 @@
   ],
   "plus-circle-outline": [
     16
+  ],
+  "arrows-circle": [
+    12
+  ],
+  "navicon": [
+    12
   ]
-}
\ No newline at end of file
+}