informer, status-bar: Display a browser alert when an error question mark button is clicked (#2031)

* Display a browser alrert when an error question mark button is clicked

Informer can dissappear, while the alert dialog will stay on screen indefinitely. Plus it’s easier to copy/paste from the alert, than the bubble (virtually impossible).

* Keep displaying Informer when the message ? bubble is hovered

* Tweak line-height

packages/@uppy/informer/src/index.js

@@ -19,16 +19,26 @@ module.exports = class Informer extends Plugin {
 
     // set default options
     const defaultOptions = {}
-
     // merge default options with the ones set by user
     this.opts = Object.assign({}, defaultOptions, opts)
-
-    this.render = this.render.bind(this)
   }
 
-  render (state) {
+  render = (state) => {
     const { isHidden, message, details } = state.info
 
+    function displayErrorAlert () {
+      const errorMessage = `${message} \n\n ${details}`
+      alert(errorMessage)
+    }
+
+    const handleMouseOver = () => {
+      clearTimeout(this.uppy.infoTimeoutID)
+    }
+
+    const handleMouseLeave = () => {
+      this.uppy.infoTimeoutID = setTimeout(this.uppy.hideInfo, 2000)
+    }
+
     return (
       <div
         class="uppy uppy-Informer"
@@ -43,6 +53,9 @@ module.exports = class Informer extends Plugin {
               data-microtip-position="top-left"
               data-microtip-size="medium"
               role="tooltip"
+              onclick={displayErrorAlert}
+              onMouseOver={handleMouseOver}
+              onMouseLeave={handleMouseLeave}
             >
               ?
             </span>

packages/@uppy/status-bar/src/StatusBar.js

@@ -369,6 +369,11 @@ const ProgressBarComplete = ({ totalProgress, i18n }) => {
 }
 
 const ProgressBarError = ({ error, retryAll, hideRetryButton, i18n }) => {
+  function displayErrorAlert () {
+    const errorMessage = `${i18n('uploadFailed')} \n\n ${error}`
+    alert(errorMessage)
+  }
+
   return (
     <div class="uppy-StatusBar-content" role="alert" title={i18n('uploadFailed')}>
       <div class="uppy-StatusBar-status">
@@ -388,6 +393,7 @@ const ProgressBarError = ({ error, retryAll, hideRetryButton, i18n }) => {
         data-microtip-position="top-right"
         data-microtip-size="medium"
         role="tooltip"
+        onclick={displayErrorAlert}
       >
         ?
       </span>

packages/@uppy/status-bar/src/style.scss

@@ -119,6 +119,7 @@
 
 .uppy-StatusBar-statusPrimary {
   font-weight: 500;
+  line-height: 1;
 }
 
 .uppy-StatusBar-statusSecondary {