Added option to display error messages for each files in dashboard (#2224)

* Added option to display error messages for each files in dashboard

* Changed default behavior to always show icon

* docs: use default value for `showErrorIconInFileList` like with other options

* rename css class, add it to the Dashboard css, remove the option

Co-authored-by: Renée Kooi <renee@kooi.me>
Co-authored-by: Artur Paikin <artur@arturpaikin.com>

packages/@uppy/dashboard/src/components/FileItem/Buttons/index.js

@@ -66,6 +66,24 @@ function CopyLinkButton (props) {
   )
 }
 
+function ErrorButton ({ file, onClick }) {
+  if (file.error) {
+    return (
+      <span
+        class="uppy-DashboardItem-errorDetails"
+        aria-label={file.error}
+        data-microtip-position="bottom-left"
+        data-microtip-size="medium"
+        role="tooltip"
+        onclick={onClick}
+      >
+        ?
+      </span>
+    )
+  }
+  return null
+}
+
 module.exports = function Buttons (props) {
   const {
     file,
@@ -80,6 +98,12 @@ module.exports = function Buttons (props) {
 
   return (
     <div className="uppy-DashboardItem-actionWrapper">
+      <ErrorButton
+        file={file}
+        onClick={() => {
+          alert(file.error)
+        }}
+      />
       <EditButton
         i18n={i18n}
         file={file}

packages/@uppy/dashboard/src/components/FileItem/index.scss

@@ -67,6 +67,7 @@
       height: 140px;
     }
   }
+
   .uppy-DashboardItem-fileInfoAndButtons {
     flex-grow: 1;
     padding-right: 8px;
@@ -83,10 +84,12 @@
       padding-top: 9px;
     }
   }
+
     .uppy-DashboardItem-fileInfo {
       flex-grow: 1;
       flex-shrink: 1;
     }
+
     .uppy-DashboardItem-actionWrapper {
       flex-grow: 0;
       flex-shrink: 0;
@@ -111,3 +114,26 @@
     display: none;
   }
 }
+
+.uppy-DashboardItem-errorDetails {
+  line-height: 12px;
+  width: 13px;
+  height: 13px;
+  display: inline-block;
+  vertical-align: middle;
+  color: $white;
+  background-color: $gray-500;
+  border-radius: 50%;
+  position: relative;
+  top: 0;
+  left: 2px;
+  font-size: 10px;
+  font-weight: 600;
+  text-align: center;
+  cursor: help;
+}
+
+  .uppy-DashboardItem-errorDetails:after {
+    line-height: 1.3;
+    word-wrap: break-word;
+  }

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

@@ -330,10 +330,10 @@
   cursor: help;
 }
 
-.uppy-StatusBar-details:after {
-  line-height: 1.3;
-  word-wrap: break-word;
-}
+  .uppy-StatusBar-details:after {
+    line-height: 1.3;
+    word-wrap: break-word;
+  }
 
 .uppy-StatusBar-spinner {
   animation-name: uppy-StatusBar-spinnerAnimation;