More actionable notification message in case of www cert exchange failed

Summary: Improved message a bit to make it clear that VPN/Lighthouse is required on both sides - computer and mobile device. Also it will now show login link in case user is not signed in yet, because login is also required for www cert exchange.

Reviewed By: passy

Differential Revision: D28899558

fbshipit-source-id: 89de776f602a9f27a2c068efd8e3f08c28ec5f57

desktop/app/src/dispatcher/server.tsx

@@ -16,6 +16,10 @@ import {UninitializedClient} from '../UninitializedClient';
 import {addErrorNotification} from '../reducers/notifications';
 import {CertificateExchangeMedium} from '../utils/CertificateProvider';
 import {selectClient, selectDevice} from '../reducers/connections';
+import {isLoggedIn} from '../fb-stubs/user';
+import React from 'react';
+import {Typography} from 'antd';
+import {ACTIVE_SHEET_SIGN_IN, setActiveSheet} from '../reducers/application';
 
 export default (store: Store, logger: Logger) => {
   const server = new Server(logger, store);
@@ -71,7 +75,6 @@ export default (store: Store, logger: Logger) => {
     ({
       client,
       medium,
-      deviceID,
     }: {
       client: UninitializedClient;
       medium: CertificateExchangeMedium;
@@ -79,10 +82,31 @@ export default (store: Store, logger: Logger) => {
     }) => {
       store.dispatch(
         addErrorNotification(
-          `Client ${client.appName} with device ${deviceID} took long time to connect back on the trusted channel.`,
+          `Timed out establishing connection with "${client.appName}" on "${client.deviceName}".`,
-          medium === 'WWW'
+          medium === 'WWW' ? (
-            ? 'Verify that you are on lighthouse on your client and have a working internet connection. To connect to lighthouse on your client, use VPN. Follow this link: https://www.internalfb.com/intern/wiki/Ops/Network/Enterprise_Network_Engineering/ene_wlra/VPN_Help/Vpn/mobile/'
+            <>
-            : 'Verify if your client is connected to Flipper and verify if there is no error related to idb.',
+              Verify that both your computer and mobile device are on
+              Lighthouse/VPN{' '}
+              {!isLoggedIn().get() && (
+                <>
+                  and{' '}
+                  <Typography.Link
+                    onClick={() =>
+                      store.dispatch(setActiveSheet(ACTIVE_SHEET_SIGN_IN))
+                    }>
+                    log in to Facebook Intern
+                  </Typography.Link>
+                </>
+              )}{' '}
+              so they can exchange certificates.{' '}
+              <Typography.Link href="https://www.internalfb.com/intern/wiki/Ops/Network/Enterprise_Network_Engineering/ene_wlra/VPN_Help/Vpn/mobile/">
+                Check this link
+              </Typography.Link>{' '}
+              on how to enable VPN on mobile device.
+            </>
+          ) : (
+            'Verify that your client is connected to Flipper and that there is no error related to idb.'
+          ),
         ),
       );
     },

desktop/app/src/reducers/notifications.tsx

@@ -10,6 +10,7 @@
 import {Notification} from 'flipper-plugin';
 import {Actions} from './';
 import {getStringFromErrorLike} from '../utils';
+import React from 'react';
 
 export type PluginNotification = {
   notification: Notification;
@@ -200,7 +201,7 @@ export function removeNotification(
 
 export function addErrorNotification(
   title: string,
-  message: string,
+  message: string | React.ReactNode,
   error?: any,
 ): Action {
   // TODO: use this method for https://github.com/facebook/flipper/pull/1478/files as well
@@ -211,7 +212,14 @@ export function addErrorNotification(
     notification: {
       id: title,
       title,
-      message: error ? message + ' ' + getStringFromErrorLike(error) : message,
+      message: error ? (
+        <>
+          <p>{message}</p>
+          <p>{getStringFromErrorLike(error)}</p>
+        </>
+      ) : (
+        message
+      ),
       severity: 'error',
     },
   });