disable "Open Debugger" item when packager is disconnected (#42873)

Summary:
Pull Request resolved: #42873

Changelog:
[iOS][Fixed] Disable the "Open Debugger" item from dev menu if packager is disconnected

# Existing
In our dev menu, the "Open Debugger" menu item is shown even if the packager isn't connected.

{F1434746954}

# In this PR
The "Open Debugger" menu item is disabled when the packager is disconnected.

{F1451344668}

# Reference
* Also on Android: D53428914

Reviewed By: robhogan

Differential Revision: D53354110

fbshipit-source-id: 6eb4e826fe9317798c704a5441b5e462edab1c4b

packages/react-native/React/CoreModules/RCTDevMenu.h

@@ -98,6 +98,8 @@ typedef NSString * (^RCTDevMenuItemTitleBlock)(void);
  */
 + (instancetype)buttonItemWithTitleBlock:(RCTDevMenuItemTitleBlock)titleBlock handler:(dispatch_block_t)handler;
 
+@property (nonatomic, assign, getter=isDisabled) BOOL disabled;
+
 @end
 
 /**

packages/react-native/React/CoreModules/RCTDevMenu.mm

@@ -265,18 +265,20 @@ - (void)setDefaultJSBundle
 #if RCT_ENABLE_INSPECTOR
     if (devSettings.isDeviceDebuggingAvailable) {
       // On-device JS debugging (CDP). Render action to open debugger frontend.
-      [items
-          addObject:
-              [RCTDevMenuItem
-                  buttonItemWithTitleBlock:^NSString * {
-                    return @"Open Debugger";
-                  }
-                  handler:^{
-                    [RCTInspectorDevServerHelper
-                            openDebugger:bundleManager.bundleURL
-                        withErrorMessage:
-                            @"Failed to open debugger. Please check that the dev server is running and reload the app."];
-                  }]];
+      BOOL isDisconnected = RCTInspectorDevServerHelper.isPackagerDisconnected;
+      NSString *title = isDisconnected
+          ? [NSString stringWithFormat:@"Connect to %@ to debug JavaScript", RCT_PACKAGER_NAME]
+          : @"Open Debugger";
+      RCTDevMenuItem *item = [RCTDevMenuItem
+          buttonItemWithTitle:title
+                      handler:^{
+                        [RCTInspectorDevServerHelper
+                                openDebugger:bundleManager.bundleURL
+                            withErrorMessage:
+                                @"Failed to open debugger. Please check that the dev server is running and reload the app."];
+                      }];
+      [item setDisabled:isDisconnected];
+      [items addObject:item];
     }
 #endif
   }
@@ -390,9 +392,11 @@ - (void)setDefaultJSBundle
 
   NSArray<RCTDevMenuItem *> *items = [self _menuItemsToPresent];
   for (RCTDevMenuItem *item in items) {
-    [_actionSheet addAction:[UIAlertAction actionWithTitle:item.title
+    UIAlertAction *action = [UIAlertAction actionWithTitle:item.title
                                                      style:UIAlertActionStyleDefault
-                                                   handler:[self alertActionHandlerForDevItem:item]]];
+                                                   handler:[self alertActionHandlerForDevItem:item]];
+    [action setEnabled:!item.isDisabled];
+    [_actionSheet addAction:action];
   }
 
   [_actionSheet addAction:[UIAlertAction actionWithTitle:@"Cancel"

packages/react-native/React/DevSupport/RCTInspectorDevServerHelper.h

@@ -17,6 +17,7 @@
 
 + (id<RCTInspectorPackagerConnectionProtocol>)connectWithBundleURL:(NSURL *)bundleURL;
 + (void)disableDebugger;
++ (BOOL)isPackagerDisconnected;
 + (void)openDebugger:(NSURL *)bundleURL withErrorMessage:(NSString *)errorMessage;
 @end
 

packages/react-native/React/DevSupport/RCTInspectorDevServerHelper.mm

@@ -118,6 +118,17 @@ static void sendEventToAllConnections(NSString *event)
   }
 }
 
++ (BOOL)isPackagerDisconnected
+{
+  for (NSString *socketId in socketConnections) {
+    if ([socketConnections[socketId] isConnected]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
 + (void)openDebugger:(NSURL *)bundleURL withErrorMessage:(NSString *)errorMessage
 {
   NSString *appId = [[[NSBundle mainBundle] bundleIdentifier]