From 6939ae0123fcdf7adec72aaafdedbdaa8bac1bff Mon Sep 17 00:00:00 2001
From: Anton Kastritskiy <antonk52@meta.com>
Date: Fri, 2 Aug 2024 09:36:42 -0700
Subject: [PATCH] move diy fix connectivity modal to NavBar

Reviewed By: lblasa

Differential Revision: D60669004

fbshipit-source-id: 5dbddcf8dbd9fcee00dddda73947542fddf97a45
---
 .../flipper-ui/src/app-connection-updates.tsx | 189 +-----------------
 .../src/dispatcher/flipperServer.tsx          |   5 +
 .../src/sandy-chrome/DIYConnectivityFix.tsx   | 164 +++++++++++++++
 .../flipper-ui/src/sandy-chrome/Navbar.tsx    |  28 ++-
 4 files changed, 203 insertions(+), 183 deletions(-)
 create mode 100644 desktop/flipper-ui/src/sandy-chrome/DIYConnectivityFix.tsx

diff --git a/desktop/flipper-ui/src/app-connection-updates.tsx b/desktop/flipper-ui/src/app-connection-updates.tsx
index 9ce0edef2e2..652fbbb0822 100644
--- a/desktop/flipper-ui/src/app-connection-updates.tsx
+++ b/desktop/flipper-ui/src/app-connection-updates.tsx
@@ -8,12 +8,11 @@
  */
 
 import {css} from '@emotion/css';
-import {Button, message, Modal, notification, Typography} from 'antd';
+import {Button, message, notification, Typography} from 'antd';
 import React from 'react';
 import {Layout} from './ui';
-import {Dialog, getFlipperLib, path} from 'flipper-plugin';
-import {getFlipperServer} from './flipperServer';
-import {getLogger} from 'flipper-common';
+import {Store} from './reducers';
+import {openDiyConnectivityFixModal} from './reducers/application';
 
 type ConnectionUpdate = {
   key: string;
@@ -41,6 +40,7 @@ const className = css`
 export const connectionUpdate = (
   update: ConnectionUpdate,
   onClick: () => void,
+  dispatch: Store['dispatch'],
 ) => {
   const title = `${update.app} on ${update.device} ${update.title}`;
 
@@ -120,186 +120,11 @@ export const connectionUpdate = (
       // Thus we can use it trigger a timeout modal for hanging "attempting to connect" messages
       onClose: () => {
         if (update.type === 'loading') {
-          Dialog.showModal((hide) => (
-            <DIYConnectivityFixModal
-              onHide={hide}
-              app={update.app}
-              os={update.os}
-            />
-          ));
+          dispatch(
+            openDiyConnectivityFixModal({app: update.app, os: update.os}),
+          );
         }
       },
     });
   }
 };
-
-const styles = {
-  numberedList: {
-    listStyle: 'auto',
-    paddingLeft: 16,
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 4,
-  } satisfies React.CSSProperties,
-  title: {
-    marginBottom: 8,
-  } satisfies React.CSSProperties,
-};
-
-function DIYConnectivityFixModal({
-  app,
-  os,
-  onHide,
-}: {
-  app: string;
-  os: string;
-  onHide: () => void;
-}) {
-  return (
-    <Modal onCancel={onHide} open footer={null}>
-      <div>
-        <Typography.Title style={styles.title}>
-          Connecting to {app} has timed out.
-        </Typography.Title>
-        <DIYConnectivityFix os={os} mode="app-connectivity" />
-      </div>
-    </Modal>
-  );
-}
-
-export function DIYConnectivityFix({
-  os,
-  mode,
-}: {
-  os: string;
-  mode: 'cant-see-device' | 'app-connectivity';
-}) {
-  return (
-    <div>
-      <Typography.Paragraph>
-        This is usually can be fixed in a few ways. Try the following in the
-        order presented.
-      </Typography.Paragraph>
-      <Typography.Title level={3} style={styles.title}>
-        Least involved
-      </Typography.Title>
-      <ol style={styles.numberedList}>
-        {mode === 'app-connectivity' && (
-          <li>
-            <Typography.Text>
-              Completly close the app on the device
-            </Typography.Text>
-          </li>
-        )}
-        <li>
-          <Button
-            type="primary"
-            size="small"
-            onClick={() => {
-              const step = os === 'iOS' ? 'ios-idb-kill' : 'android-adb-kill';
-              logTroubleshootGuideStep(step);
-              getFlipperServer()
-                .exec(step)
-                .then(() => {
-                  notification.info({
-                    message: `Restarted ${os} connections`,
-                  });
-                })
-                .catch((e) => {
-                  notification.error({
-                    message: `Failed to restart ${os} connections`,
-                    description: e.message,
-                  });
-                });
-            }}>
-            Click to restart{' '}
-            {os === 'iOS'
-              ? 'IDB (iOS connections)'
-              : 'ADB (Android connections)'}
-          </Button>
-        </li>
-        {mode === 'app-connectivity' && (
-          <li>
-            <Typography.Text>Launch the app on the device</Typography.Text>
-          </li>
-        )}
-      </ol>
-      <Typography.Title level={3} style={styles.title}>
-        More involved
-      </Typography.Title>
-      <ol style={styles.numberedList}>
-        <li>
-          <Typography.Text>Restart device / emulator</Typography.Text>
-        </li>
-        {mode === 'app-connectivity' && (
-          <li>
-            <Button
-              type="primary"
-              size="small"
-              onClick={() => {
-                getFlipperLib()
-                  .remoteServerContext.fs.rm(
-                    path.join(
-                      getFlipperLib().paths.homePath,
-                      '.flipper',
-                      'certs',
-                    ),
-                  )
-                  .then(() => {
-                    logTroubleshootGuideStep('delete-certs');
-                    notification.info({
-                      message: `Certificates deleted`,
-                      description: 'Please restart Flipper',
-                      duration: 10000,
-                    });
-                  })
-                  .catch((e) => {
-                    notification.error({
-                      message: `Failed to delete cerificates folder, ${e}`,
-                    });
-                  });
-              }}>
-              Click to clear Flipper certificates
-            </Button>
-          </li>
-        )}
-
-        <li>
-          <Button
-            type="primary"
-            size="small"
-            onClick={() => {
-              logTroubleshootGuideStep('restart-flipper');
-              getFlipperServer()
-                .exec('restart')
-                .then(() => {
-                  notification.info({
-                    message: `Restarting Flipper server`,
-                  });
-                })
-                .catch((e) => {
-                  notification.error({
-                    message: `Failed to restart Flipper`,
-                    description: e.message,
-                  });
-                });
-            }}>
-            Click to restart Flipper
-          </Button>
-        </li>
-      </ol>
-      <Typography.Title level={3} style={styles.title}>
-        Most involved
-      </Typography.Title>
-      <Typography.Paragraph>
-        Restarting your computer can frequently solve these sorts of issues.
-      </Typography.Paragraph>
-    </div>
-  );
-}
-
-export function logTroubleshootGuideStep(step: string) {
-  getLogger().track('usage', 'troubleshoot-guide-v2-step', {
-    step,
-  });
-}
diff --git a/desktop/flipper-ui/src/dispatcher/flipperServer.tsx b/desktop/flipper-ui/src/dispatcher/flipperServer.tsx
index 649c312e602..e208d24cb5a 100644
--- a/desktop/flipper-ui/src/dispatcher/flipperServer.tsx
+++ b/desktop/flipper-ui/src/dispatcher/flipperServer.tsx
@@ -106,6 +106,7 @@ export function connectFlipperServerToStore(
         title: 'is attempting to connect...',
       },
       troubleshootConnection,
+      store.dispatch,
     );
   });
 
@@ -121,6 +122,7 @@ export function connectFlipperServerToStore(
         detail: message,
       },
       troubleshootConnection,
+      store.dispatch,
     );
   });
 
@@ -168,6 +170,7 @@ export function connectFlipperServerToStore(
         title: step,
       },
       troubleshootConnection,
+      store.dispatch,
     );
   });
 
@@ -189,6 +192,7 @@ export function connectFlipperServerToStore(
         title: 'successfully connected',
       },
       troubleshootConnection,
+      store.dispatch,
     );
   });
 
@@ -207,6 +211,7 @@ export function connectFlipperServerToStore(
           title: 'disconnected',
         },
         troubleshootConnection,
+        store.dispatch,
       );
     }
   });
diff --git a/desktop/flipper-ui/src/sandy-chrome/DIYConnectivityFix.tsx b/desktop/flipper-ui/src/sandy-chrome/DIYConnectivityFix.tsx
new file mode 100644
index 00000000000..7b5406cfe5d
--- /dev/null
+++ b/desktop/flipper-ui/src/sandy-chrome/DIYConnectivityFix.tsx
@@ -0,0 +1,164 @@
+/**
+ * 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 React from 'react';
+import {Button, notification, Typography} from 'antd';
+import {getLogger} from 'flipper-common';
+import {getFlipperLib, path} from 'flipper-plugin';
+import {getFlipperServer} from '../flipperServer';
+
+const styles = {
+  numberedList: {
+    listStyle: 'auto',
+    paddingLeft: 16,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+  } satisfies React.CSSProperties,
+  title: {
+    marginBottom: 8,
+  } satisfies React.CSSProperties,
+};
+
+export function DIYConnectivityFix({
+  os,
+  mode,
+}: {
+  os: string;
+  mode: 'cant-see-device' | 'app-connectivity';
+}) {
+  return (
+    <div>
+      <Typography.Paragraph>
+        This is usually can be fixed in a few ways. Try the following in the
+        order presented.
+      </Typography.Paragraph>
+      <Typography.Title level={3} style={styles.title}>
+        Least involved
+      </Typography.Title>
+      <ol style={styles.numberedList}>
+        {mode === 'app-connectivity' && (
+          <li>
+            <Typography.Text>
+              Completly close the app on the device
+            </Typography.Text>
+          </li>
+        )}
+        <li>
+          <Button
+            type="primary"
+            size="small"
+            onClick={() => {
+              const step = os === 'iOS' ? 'ios-idb-kill' : 'android-adb-kill';
+              logTroubleshootGuideStep(step);
+              getFlipperServer()
+                .exec(step)
+                .then(() => {
+                  notification.info({
+                    message: `Restarted ${os} connections`,
+                  });
+                })
+                .catch((e) => {
+                  notification.error({
+                    message: `Failed to restart ${os} connections`,
+                    description: e.message,
+                  });
+                });
+            }}>
+            Click to restart{' '}
+            {os === 'iOS'
+              ? 'IDB (iOS connections)'
+              : 'ADB (Android connections)'}
+          </Button>
+        </li>
+        {mode === 'app-connectivity' && (
+          <li>
+            <Typography.Text>Launch the app on the device</Typography.Text>
+          </li>
+        )}
+      </ol>
+      <Typography.Title level={3} style={styles.title}>
+        More involved
+      </Typography.Title>
+      <ol style={styles.numberedList}>
+        <li>
+          <Typography.Text>Restart device / emulator</Typography.Text>
+        </li>
+        {mode === 'app-connectivity' && (
+          <li>
+            <Button
+              type="primary"
+              size="small"
+              onClick={() => {
+                getFlipperLib()
+                  .remoteServerContext.fs.rm(
+                    path.join(
+                      getFlipperLib().paths.homePath,
+                      '.flipper',
+                      'certs',
+                    ),
+                  )
+                  .then(() => {
+                    logTroubleshootGuideStep('delete-certs');
+                    notification.info({
+                      message: `Certificates deleted`,
+                      description: 'Please restart Flipper',
+                      duration: 10000,
+                    });
+                  })
+                  .catch((e) => {
+                    notification.error({
+                      message: `Failed to delete cerificates folder, ${e}`,
+                    });
+                  });
+              }}>
+              Click to clear Flipper certificates
+            </Button>
+          </li>
+        )}
+
+        <li>
+          <Button
+            type="primary"
+            size="small"
+            onClick={() => {
+              logTroubleshootGuideStep('restart-flipper');
+              getFlipperServer()
+                .exec('restart')
+                .then(() => {
+                  notification.info({
+                    message: `Restarting Flipper server`,
+                  });
+                })
+                .catch((e) => {
+                  notification.error({
+                    message: `Failed to restart Flipper`,
+                    description: e.message,
+                  });
+                });
+            }}>
+            Click to restart Flipper
+          </Button>
+        </li>
+      </ol>
+      <Typography.Title level={3} style={styles.title}>
+        Most involved
+      </Typography.Title>
+      <Typography.Paragraph>
+        Restarting your computer can frequently solve these sorts of issues.
+      </Typography.Paragraph>
+    </div>
+  );
+}
+
+export function logTroubleshootGuideStep(step: string) {
+  getLogger().track('usage', 'troubleshoot-guide-v2-step', {
+    step,
+  });
+}
diff --git a/desktop/flipper-ui/src/sandy-chrome/Navbar.tsx b/desktop/flipper-ui/src/sandy-chrome/Navbar.tsx
index 50f7ba3cd4d..606b8c17967 100644
--- a/desktop/flipper-ui/src/sandy-chrome/Navbar.tsx
+++ b/desktop/flipper-ui/src/sandy-chrome/Navbar.tsx
@@ -22,7 +22,8 @@ import React, {useEffect, useMemo, useState} from 'react';
 import {useDispatch, useStore} from '../utils/useStore';
 import config from '../fb-stubs/config';
 import {currentUser, isConnected, logoutUser} from '../fb-stubs/user';
-import {Badge, Button, Menu, Modal} from 'antd';
+import {DIYConnectivityFix} from './DIYConnectivityFix';
+import {Badge, Button, Menu, Modal, Typography} from 'antd';
 import {
   BellOutlined,
   BugOutlined,
@@ -36,6 +37,7 @@ import {
   toggleLeftSidebarVisible,
   toggleRightSidebarVisible,
   toggleSettingsModal,
+  closeDiyConnectivityFixModal,
 } from '../reducers/application';
 import PluginManager from '../chrome/plugin-manager/PluginManager';
 import {showEmulatorLauncher} from './appinspect/LaunchEmulator';
@@ -608,6 +610,7 @@ function TroubleshootMenu({
         onClose={() => setFlipperDevToolsModalOpen(false)}
       />
       <TroubleshootingModal />
+      <DIYConnectivityFixModal />
     </>
   );
 }
@@ -800,3 +803,26 @@ function logTroubleShootGuideOpen(source: string) {
     source,
   });
 }
+
+function DIYConnectivityFixModal() {
+  const state = useStore((s) => s.application.diyConnectivityFixModal);
+  const dispatch = useDispatch();
+  if (!state.isOpen) {
+    return null;
+  }
+  return (
+    <Modal
+      onCancel={() => {
+        dispatch(closeDiyConnectivityFixModal());
+      }}
+      open
+      footer={null}>
+      <div>
+        <Typography.Title style={{marginBottom: 8}}>
+          Connecting to {state.app} has timed out.
+        </Typography.Title>
+        <DIYConnectivityFix os={state.os} mode="app-connectivity" />
+      </div>
+    </Modal>
+  );
+}