Dedicated connectivity troubleshoot notification

Summary:
There's a generic notification server event.

This change introduces a new notification server event dedicated for connection troubleshoot.

The difference is, this notification will have a button to troubleshoot the issue. Additionally, in the future, we may even be able to add a payload so that we can troubleshoot the exact problem.

Reviewed By: antonk52

Differential Revision: D47873697

fbshipit-source-id: 28843a08836d0054909f6b9ab7a88b14b8a1b868

desktop/flipper-common/src/server-types.tsx

@@ -161,6 +161,11 @@ export type FlipperServerEvents = {
   };
   'connectivity-troubleshoot-cmd': CommandRecordEntry;
   'connectivity-troubleshoot-log': ConnectionRecordEntry;
+  'connectivity-troubleshoot-notification': {
+    type: 'error' | 'warning';
+    title: string;
+    description: string;
+  };
   'plugins-server-add-on-message': ExecuteMessage;
   'download-file-update': DownloadFileUpdate;
   'server-log': LoggerInfo;

desktop/flipper-ui-core/src/dispatcher/flipperServer.tsx

@@ -47,6 +47,20 @@ export function connectFlipperServerToStore(
     });
   });
 
+  server.on(
+    'connectivity-troubleshoot-notification',
+    ({type, title, description}) => {
+      const text = `[${type}] ${title}: ${description}`;
+      notification.open({
+        message: title,
+        description: <NotificationBody text={description} />,
+        type: type,
+        duration: 0,
+        key: text,
+      });
+    },
+  );
+
   server.on('server-state', handleServerStateChange);
 
   server.on('server-error', (err) => {