From e75238cbd2f588281fb99bc4c24f1e9cccd73364 Mon Sep 17 00:00:00 2001
From: Juan Tejada <jstejada@fb.com>
Date: Tue, 7 Dec 2021 10:51:05 -0800
Subject: [PATCH] Properly make use of status events provided by DevTools
 server

Summary: Uses the new statuses emitted by DevTools in https://github.com/facebook/react/pull/22848 to better handle the connection state when connecting to DevTools from Flipper.

Reviewed By: bvaughn

Differential Revision: D32891240

fbshipit-source-id: 142d9996e05b5113e6dca28074c461d5a5acd38f
---
 .../plugins/public/reactdevtools/index.tsx    | 30 +++++++++++++++++--
 .../reactdevtools/react-devtools-core.d.tsx   |  5 +++-
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/desktop/plugins/public/reactdevtools/index.tsx b/desktop/plugins/public/reactdevtools/index.tsx
index 80ae93852..7adcc42b3 100644
--- a/desktop/plugins/public/reactdevtools/index.tsx
+++ b/desktop/plugins/public/reactdevtools/index.tsx
@@ -233,9 +233,35 @@ export function devicePlugin(client: DevicePluginClient) {
       );
       startResult = devToolsInstance.module
         .setContentDOMNode(devToolsNode)
-        .setStatusListener((status: string) => {
+        .setStatusListener((message: string, status: string) => {
           // TODO: since devToolsInstance is an instance, we are probably leaking memory here
-          setStatus(ConnectionStatus.Initializing, status);
+          if (typeof status === 'undefined') {
+            // Preserves old behavior in case DevTools doesn't provide status,
+            // which may happen if loading an older version of DevTools.
+            setStatus(ConnectionStatus.Initializing, message);
+            return;
+          }
+
+          switch (status) {
+            case 'server-connected': {
+              setStatus(ConnectionStatus.Initializing, message);
+              break;
+            }
+            case 'devtools-connected': {
+              if (pollHandle) {
+                clearTimeout(pollHandle);
+              }
+              setStatus(ConnectionStatus.Connected, message);
+              break;
+            }
+            case 'error': {
+              if (pollHandle) {
+                clearTimeout(pollHandle);
+              }
+              setStatus(ConnectionStatus.Error, message);
+              break;
+            }
+          }
         })
         .startServer(DEV_TOOLS_PORT, 'localhost', undefined, {
           surface: 'flipper',
diff --git a/desktop/plugins/public/reactdevtools/react-devtools-core.d.tsx b/desktop/plugins/public/reactdevtools/react-devtools-core.d.tsx
index cfe8179fd..228999a4f 100644
--- a/desktop/plugins/public/reactdevtools/react-devtools-core.d.tsx
+++ b/desktop/plugins/public/reactdevtools/react-devtools-core.d.tsx
@@ -16,6 +16,9 @@ type LoggerOptions = {
   surface?: string;
 };
 
+type StatusTypes = 'server-connected' | 'devtools-connected' | 'error';
+type StatusListener = (message: string, status: StatusTypes) => void;
+
 declare module 'react-devtools-core/standalone' {
   interface DevTools {
     setContentDOMNode(node: HTMLElement): this;
@@ -25,7 +28,7 @@ declare module 'react-devtools-core/standalone' {
       httpsOptions?: ServerOptions,
       loggerOptions?: LoggerOptions,
     ): {close: () => void};
-    setStatusListener(listener: (message: string) => void): this;
+    setStatusListener(listener: StatusListener): this;
   }
   const DevTools: DevTools;
   export default DevTools;