Offline troubleshoot when server disconnects

Summary:
If there server disconnects, we used to show a red box message on the lower left section of the screen. It didn't say much other than the server had disconnected.
If you are aware of what the server is, then you may try to manually restart it.

Instead of doing that, a much better experience is to show the no connection troubleshoot with the button to start the server or with instructions on how to achieve this.

Reviewed By: antonk52

Differential Revision: D48467308

fbshipit-source-id: 0ffded95789c7548d9f1e1a9127409e02e72ab8c

desktop/flipper-ui-browser/src/HMRClient.tsx

@@ -270,7 +270,7 @@ function showCompileError() {
   // Symbolicating compile errors is wasted effort
   // because the stack trace is meaningless:
   (error as any).preventSymbolication = true;
-  window.flipperShowError?.(message);
+  window.flipperShowMessage?.(message);
   throw error;
 }
 

desktop/flipper-ui-browser/src/global.tsx

@@ -17,7 +17,8 @@ declare global {
       debug: boolean;
     };
 
-    flipperShowError?(error: string): void;
-    flipperHideError?(): void;
+    flipperShowMessage?(message: string): void;
+    flipperHideMessage?(): void;
+    flipperShowNoConnection?(): void;
   }
 }

desktop/flipper-ui-browser/src/index.tsx

@@ -47,13 +47,13 @@ async function start() {
     (state: FlipperServerState) => {
       switch (state) {
         case FlipperServerState.CONNECTING:
-          window.flipperShowError?.('Connecting to server...');
+          window.flipperShowMessage?.('Connecting to server...');
           break;
         case FlipperServerState.CONNECTED:
-          window?.flipperHideError?.();
+          window?.flipperHideMessage?.();
           break;
         case FlipperServerState.DISCONNECTED:
-          window?.flipperShowError?.('Lost connection to server');
+          window?.flipperShowNoConnection?.();
           break;
       }
     },
@@ -78,17 +78,17 @@ async function start() {
   // This prevent issues where the render host is referred at module initialisation level,
   // but not set yet, which might happen when using normal imports.
   // TODO: remove
-  window.flipperShowError?.('Connected to Flipper Server successfully');
+  window.flipperShowMessage?.('Connected to Flipper Server successfully');
 
   // @ts-ignore
   // eslint-disable-next-line import/no-commonjs
   require('flipper-ui-core').startFlipperDesktop(flipperServer);
-  window.flipperHideError?.();
+  window.flipperHideMessage?.();
 }
 
 start().catch((e) => {
   console.error('Failed to start flipper-ui-browser', e);
-  window.flipperShowError?.('Failed to start flipper-ui-browser: ' + e);
+  window.flipperShowMessage?.('Failed to start flipper-ui-browser: ' + e);
 });
 
 async function initializePWA() {

desktop/flipper-ui-browser/src/initializeRenderHost.tsx

@@ -169,7 +169,7 @@ export function initializeRenderHost(
       );
     },
     restartFlipper() {
-      window.flipperShowError?.(
+      window.flipperShowMessage?.(
         'Flipper settings have changed, please restart flipper server for the changes to take effect',
       );
     },