More actionable notification on plugin download failure

Summary: More actionable notification on plugin download failure.

Reviewed By: priteshrnandgaonkar

Differential Revision: D28856728

fbshipit-source-id: bd4a41af8812168949d83e2e0923ca7976485fa7

desktop/app/src/dispatcher/pluginDownloads.tsx

@@ -116,7 +116,7 @@ async function handlePluginDownload(
       });
       if (response.headers['content-type'] !== 'application/octet-stream') {
         throw new Error(
-          `Unexpected content type ${response.headers['content-type']} received from ${plugin.downloadUrl}`,
+          `It looks like you are not on VPN/Lighthouse. Unexpected content type received: ${response.headers['content-type']}.`,
         );
       }
       const responseStream = response.data as fs.ReadStream;
@@ -149,6 +149,7 @@ async function handlePluginDownload(
     if (startedByUser) {
       showErrorNotification(
         `Failed to download plugin "${title}" v${version}.`,
+        'Please check that you are on VPN/Lighthouse.',
       );
     }
     throw error;

desktop/app/src/utils/notifications.tsx

@@ -12,20 +12,31 @@ import React from 'react';
 import {ConsoleLogs} from '../chrome/ConsoleLogs';
 import {setStaticView} from '../reducers/connections';
 import {store} from '../store';
+import {Layout} from '../ui';
+import {v4 as uuid} from 'uuid';
 
-const {Text, Link} = Typography;
+const {Link} = Typography;
 
-export function showErrorNotification(message: string) {
+export function showErrorNotification(message: string, description?: string) {
+  const key = uuid();
   notification.error({
+    key,
     message,
     description: (
-      <Text>
-        See{' '}
-        <Link onClick={() => store.dispatch(setStaticView(ConsoleLogs))}>
-          logs
-        </Link>{' '}
-        for details.
-      </Text>
+      <Layout.Container gap>
+        {description ?? <p>{description}</p>}
+        <p>
+          See{' '}
+          <Link
+            onClick={() => {
+              store.dispatch(setStaticView(ConsoleLogs));
+              notification.close(key);
+            }}>
+            logs
+          </Link>{' '}
+          for details.
+        </p>
+      </Layout.Container>
     ),
     placement: 'bottomLeft',
   });