From 418ec5434ef65bef1230ca98246341f67dd753e3 Mon Sep 17 00:00:00 2001
From: Murderlon <merlijn@soverin.net>
Date: Thu, 4 Nov 2021 14:02:49 +0100
Subject: [PATCH 1/4] Status bar improvements

---
 examples/dev/Dashboard.html                   | 11 -------
 .../src/components/FileItem/FileInfo/index.js | 17 ++++++----
 .../components/FileItem/FileInfo/index.scss   |  9 ++++++
 .../src/components/FileItem/index.scss        | 11 ++++---
 packages/@uppy/status-bar/src/Components.js   | 32 +++++++++++--------
 packages/@uppy/status-bar/src/StatusBar.js    | 27 ++++++++--------
 packages/@uppy/status-bar/src/index.js        |  7 ++--
 packages/@uppy/status-bar/src/style.scss      | 13 ++++++++
 8 files changed, 73 insertions(+), 54 deletions(-)

diff --git a/examples/dev/Dashboard.html b/examples/dev/Dashboard.html
index 99a64e8a8c..8e017e2453 100644
--- a/examples/dev/Dashboard.html
+++ b/examples/dev/Dashboard.html
@@ -16,14 +16,6 @@
         margin: auto;
       }
 
-      button,
-      input {
-        color: green;
-        font-size: 30px;
-        text-align: right;
-        border: 2px solid purple;
-      }
-
       /* css to make sure that Dashboard's css overrides page css */
       ul {
         margin: 60px;
@@ -31,9 +23,6 @@
       li {
         margin: 60px;
       }
-      a {
-        color: purple;
-      }
     </style>
   </head>
 
diff --git a/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.js b/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.js
index 843e1b3ca9..05790c66ce 100644
--- a/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.js
+++ b/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.js
@@ -91,22 +91,25 @@ const ErrorButton = ({ file, onClick }) => {
 }
 
 module.exports = function FileInfo (props) {
+  const { file } = props
   return (
     <div
       className="uppy-Dashboard-Item-fileInfo"
-      data-uppy-file-source={props.file.source}
+      data-uppy-file-source={file.source}
     >
-      {renderFileName(props)}
-      <div className="uppy-Dashboard-Item-status">
-        {renderAuthor(props)}
-        {renderFileSize(props)}
-        {ReSelectButton(props)}
+      <div className="uppy-Dashboard-Item-fileName">
+        {renderFileName(props)}
         <ErrorButton
-          file={props.file}
+          file={file}
           // eslint-disable-next-line no-alert
           onClick={() => alert(props.file.error)} // TODO: move to a custom alert implementation
         />
       </div>
+      <div className="uppy-Dashboard-Item-status">
+        {renderAuthor(props)}
+        {renderFileSize(props)}
+        {ReSelectButton(props)}
+      </div>
     </div>
   )
 }
diff --git a/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.scss b/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.scss
index b2a10f4a51..081cf72005 100644
--- a/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.scss
+++ b/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.scss
@@ -17,6 +17,15 @@
   }
 }
 
+.uppy-Dashboard-Item-fileName {
+  display: flex;
+  align-items: baseline;
+
+  button {
+    margin-left: 5px;
+  }
+}
+
 .uppy-Dashboard-Item-author {
   color: $gray-600;
   vertical-align: bottom;
diff --git a/packages/@uppy/dashboard/src/components/FileItem/index.scss b/packages/@uppy/dashboard/src/components/FileItem/index.scss
index ccfd34d6f5..7472d82584 100644
--- a/packages/@uppy/dashboard/src/components/FileItem/index.scss
+++ b/packages/@uppy/dashboard/src/components/FileItem/index.scss
@@ -143,21 +143,22 @@
 
 .uppy-Dashboard-Item-errorDetails {
   position: relative;
-  top: -1px;
+  top: 0;
   display: inline-block;
-  width: 12px;
-  height: 12px;
+  width: 13px;
+  height: 13px;
   color: $white;
   font-weight: 600;
-  font-size: 8px;
+  font-size: 10px;
   line-height: 12px;
   text-align: center;
   vertical-align: middle;
   background-color: $gray-500;
   border-radius: 50%;
+  border: none;
   cursor: help;
   appearance: none;
-  inset-inline-start: 6px;
+  inset-inline-start: 2px;
 }
 
 .uppy-Dashboard-Item-errorDetails::after {
diff --git a/packages/@uppy/status-bar/src/Components.js b/packages/@uppy/status-bar/src/Components.js
index 083a432567..f21d1de7be 100644
--- a/packages/@uppy/status-bar/src/Components.js
+++ b/packages/@uppy/status-bar/src/Components.js
@@ -247,7 +247,7 @@ function ProgressDetails (props) {
   )
 }
 
-function UnknownProgressDetails (props) {
+function FileUploadCount (props) {
   const { i18n, complete, numUploads } = props
 
   return (
@@ -328,7 +328,7 @@ function ProgressBarUploading (props) {
         )
       }
       return (
-        <UnknownProgressDetails
+        <FileUploadCount
           i18n={i18n}
           complete={complete}
           numUploads={numUploads}
@@ -389,7 +389,7 @@ function ProgressBarComplete (props) {
 }
 
 function ProgressBarError (props) {
-  const { error, i18n } = props
+  const { error, i18n, complete, numUploads } = props
 
   function displayErrorAlert () {
     const errorMessage = `${i18n('uploadFailed')} \n\n ${error}`
@@ -403,7 +403,7 @@ function ProgressBarError (props) {
       role="alert"
       title={i18n('uploadFailed')}
     >
-      <div className="uppy-StatusBar-status">
+      <div className="uppy-StatusBar-status uppy-StatusBar-status--error">
         <div className="uppy-StatusBar-statusPrimary">
           <svg
             aria-hidden="true"
@@ -415,19 +415,23 @@ function ProgressBarError (props) {
           >
             <path d="M4.278 5.5L0 1.222 1.222 0 5.5 4.278 9.778 0 11 1.222 6.722 5.5 11 9.778 9.778 11 5.5 6.722 1.222 11 0 9.778z" />
           </svg>
+
           {i18n('uploadFailed')}
+
+          <button
+            className="uppy-StatusBar-details"
+            aria-label={i18n('showErrorDetails')}
+            data-microtip-position="top-right"
+            data-microtip-size="medium"
+            onClick={displayErrorAlert}
+            type="button"
+          >
+            ?
+          </button>
         </div>
+
+        <FileUploadCount i18n={i18n} complete={complete} numUploads={numUploads} />
       </div>
-      <button
-        className="uppy-StatusBar-details"
-        aria-label={error}
-        data-microtip-position="top-right"
-        data-microtip-size="medium"
-        onClick={displayErrorAlert}
-        type="button"
-      >
-        ?
-      </button>
     </div>
   )
 }
diff --git a/packages/@uppy/status-bar/src/StatusBar.js b/packages/@uppy/status-bar/src/StatusBar.js
index bbd412d4bc..130a63ed6c 100644
--- a/packages/@uppy/status-bar/src/StatusBar.js
+++ b/packages/@uppy/status-bar/src/StatusBar.js
@@ -133,16 +133,12 @@ function StatusBar (props) {
     && !hideUploadButton
 
   const showCancelBtn
-    = !hideCancelButton
-    && uploadState !== STATE_WAITING
-    && uploadState !== STATE_COMPLETE
+    = !hideCancelButton && uploadState !== STATE_WAITING && uploadState !== STATE_COMPLETE
 
   const showPauseResumeBtn
-    = resumableUploads
-    && !hidePauseResumeButton
-    && uploadState === STATE_UPLOADING
+    = resumableUploads && !hidePauseResumeButton && uploadState === STATE_UPLOADING
 
-  const showRetryBtn = error && !hideRetryButton
+  const showRetryBtn = error && !isAllComplete && !hideRetryButton
 
   const showDoneBtn = doneButtonHandler && uploadState === STATE_COMPLETE
 
@@ -174,15 +170,18 @@ function StatusBar (props) {
         switch (uploadState) {
           case STATE_PREPROCESSING:
           case STATE_POSTPROCESSING:
-            return (
-              <ProgressBarProcessing
-                progress={calculateProcessingProgress(files)}
-              />
-            )
+            return <ProgressBarProcessing progress={calculateProcessingProgress(files)} />
           case STATE_COMPLETE:
             return <ProgressBarComplete i18n={i18n} />
           case STATE_ERROR:
-            return <ProgressBarError error={error} i18n={i18n} />
+            return (
+              <ProgressBarError
+                error={error}
+                i18n={i18n}
+                numUploads={numUploads}
+                complete={complete}
+              />
+            )
           case STATE_UPLOADING:
             return (
               <ProgressBarUploading
@@ -208,7 +207,7 @@ function StatusBar (props) {
       })()}
 
       <div className="uppy-StatusBar-actions">
-        {(recoveredState || showUploadBtn) ? (
+        {recoveredState || showUploadBtn ? (
           <UploadBtn
             newFiles={newFiles}
             isUploadStarted={isUploadStarted}
diff --git a/packages/@uppy/status-bar/src/index.js b/packages/@uppy/status-bar/src/index.js
index 30ca006ec5..b562584413 100644
--- a/packages/@uppy/status-bar/src/index.js
+++ b/packages/@uppy/status-bar/src/index.js
@@ -28,6 +28,7 @@ module.exports = class StatusBar extends UIPlugin {
         paused: 'Paused',
         retry: 'Retry',
         retryUpload: 'Retry upload',
+        showErrorDetails: 'Show error details',
         cancel: 'Cancel',
         pause: 'Pause',
         resume: 'Resume',
@@ -131,7 +132,7 @@ module.exports = class StatusBar extends UIPlugin {
     return StatusBarUI({
       error,
       uploadState: getUploadingState(
-        isAllErrored,
+        error,
         isAllComplete,
         recoveredState,
         state.files || {}
@@ -210,8 +211,8 @@ function getTotalETA (files) {
   return Math.round((totalBytesRemaining / totalSpeed) * 10) / 10
 }
 
-function getUploadingState (isAllErrored, isAllComplete, recoveredState, files) {
-  if (isAllErrored) {
+function getUploadingState (error, isAllComplete, recoveredState, files) {
+  if (error && !isAllComplete) {
     return statusBarStates.STATE_ERROR
   }
 
diff --git a/packages/@uppy/status-bar/src/style.scss b/packages/@uppy/status-bar/src/style.scss
index eea2c756e8..ebc1cdcd9c 100644
--- a/packages/@uppy/status-bar/src/style.scss
+++ b/packages/@uppy/status-bar/src/style.scss
@@ -124,6 +124,18 @@
   font-weight: normal;
   line-height: 1.4;
   padding-inline-end: 0.3em;
+
+  &.uppy-StatusBar-status--error .uppy-StatusBar-statusPrimary {
+    display: flex;
+    align-items: center;
+
+    button.uppy-StatusBar-details {
+      margin-left: 6px;
+    }
+  }
+  &.uppy-StatusBar-status--error .uppy-StatusBar-statusSecondary {
+    margin-left: 18px;
+  }
 }
 
 .uppy-StatusBar-statusPrimary {
@@ -399,6 +411,7 @@
   vertical-align: middle;
   background-color: $gray-500;
   border-radius: 50%;
+  border: none;
   cursor: help;
   appearance: none;
   inset-inline-start: 2px;

From 7b1c1536cd51ec4b8dbc174ffbbecbe37f3c85f8 Mon Sep 17 00:00:00 2001
From: Murderlon <merlijn@soverin.net>
Date: Mon, 8 Nov 2021 12:10:00 +0100
Subject: [PATCH 2/4] Revert dashboard.html styles, improve layout of error
 state

---
 examples/dev/Dashboard.html                   | 11 +++++++
 .../@uppy/companion/src/server/Uploader.js    |  8 +++++
 .../src/components/FileItem/FileInfo/index.js |  2 +-
 packages/@uppy/status-bar/src/Components.js   | 31 ++++++++-----------
 packages/@uppy/status-bar/src/style.scss      | 18 +++--------
 5 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/examples/dev/Dashboard.html b/examples/dev/Dashboard.html
index 8e017e2453..99a64e8a8c 100644
--- a/examples/dev/Dashboard.html
+++ b/examples/dev/Dashboard.html
@@ -16,6 +16,14 @@
         margin: auto;
       }
 
+      button,
+      input {
+        color: green;
+        font-size: 30px;
+        text-align: right;
+        border: 2px solid purple;
+      }
+
       /* css to make sure that Dashboard's css overrides page css */
       ul {
         margin: 60px;
@@ -23,6 +31,9 @@
       li {
         margin: 60px;
       }
+      a {
+        color: purple;
+      }
     </style>
   </head>
 
diff --git a/packages/@uppy/companion/src/server/Uploader.js b/packages/@uppy/companion/src/server/Uploader.js
index a5266dc446..3debc97954 100644
--- a/packages/@uppy/companion/src/server/Uploader.js
+++ b/packages/@uppy/companion/src/server/Uploader.js
@@ -40,6 +40,8 @@ function exceedsMaxFileSize (maxFileSize, size) {
   return maxFileSize && size && size > maxFileSize
 }
 
+let testIdx = 0
+
 class AbortError extends Error {}
 
 class Uploader {
@@ -465,6 +467,12 @@ class Uploader {
    * @param {any} stream
    */
   async _uploadTus (stream) {
+    testIdx++
+    if (testIdx > 1) {
+      this.failed = true
+      setTimeout(() => this.emitError(new Error('test')), 1000)
+      return Promise.reject(new Error('test'))
+    }
     const uploader = this
 
     const isFileStream = stream instanceof ReadStream
diff --git a/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.js b/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.js
index 05790c66ce..c578503a66 100644
--- a/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.js
+++ b/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.js
@@ -76,7 +76,7 @@ const ErrorButton = ({ file, onClick }) => {
   if (file.error) {
     return (
       <button
-        className="uppy-Dashboard-Item-errorDetails"
+        className="uppy-u-reset uppy-Dashboard-Item-errorDetails"
         aria-label={file.error}
         data-microtip-position="bottom"
         data-microtip-size="medium"
diff --git a/packages/@uppy/status-bar/src/Components.js b/packages/@uppy/status-bar/src/Components.js
index f21d1de7be..2793077ef9 100644
--- a/packages/@uppy/status-bar/src/Components.js
+++ b/packages/@uppy/status-bar/src/Components.js
@@ -398,28 +398,23 @@ function ProgressBarError (props) {
   }
 
   return (
-    <div
-      className="uppy-StatusBar-content"
-      role="alert"
-      title={i18n('uploadFailed')}
-    >
-      <div className="uppy-StatusBar-status uppy-StatusBar-status--error">
+    <div className="uppy-StatusBar-content" title={i18n('uploadFailed')}>
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        className="uppy-StatusBar-statusIndicator uppy-c-icon"
+        width="11"
+        height="11"
+        viewBox="0 0 11 11"
+      >
+        <path d="M4.278 5.5L0 1.222 1.222 0 5.5 4.278 9.778 0 11 1.222 6.722 5.5 11 9.778 9.778 11 5.5 6.722 1.222 11 0 9.778z" />
+      </svg>
+      <div className="uppy-StatusBar-status">
         <div className="uppy-StatusBar-statusPrimary">
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            className="uppy-StatusBar-statusIndicator uppy-c-icon"
-            width="11"
-            height="11"
-            viewBox="0 0 11 11"
-          >
-            <path d="M4.278 5.5L0 1.222 1.222 0 5.5 4.278 9.778 0 11 1.222 6.722 5.5 11 9.778 9.778 11 5.5 6.722 1.222 11 0 9.778z" />
-          </svg>
-
           {i18n('uploadFailed')}
 
           <button
-            className="uppy-StatusBar-details"
+            className="uppy-u-reset uppy-StatusBar-details"
             aria-label={i18n('showErrorDetails')}
             data-microtip-position="top-right"
             data-microtip-size="medium"
diff --git a/packages/@uppy/status-bar/src/style.scss b/packages/@uppy/status-bar/src/style.scss
index ebc1cdcd9c..aece805b3b 100644
--- a/packages/@uppy/status-bar/src/style.scss
+++ b/packages/@uppy/status-bar/src/style.scss
@@ -124,23 +124,16 @@
   font-weight: normal;
   line-height: 1.4;
   padding-inline-end: 0.3em;
-
-  &.uppy-StatusBar-status--error .uppy-StatusBar-statusPrimary {
-    display: flex;
-    align-items: center;
-
-    button.uppy-StatusBar-details {
-      margin-left: 6px;
-    }
-  }
-  &.uppy-StatusBar-status--error .uppy-StatusBar-statusSecondary {
-    margin-left: 18px;
-  }
 }
 
 .uppy-StatusBar-statusPrimary {
   font-weight: 500;
   line-height: 1;
+  display: flex;
+
+  button.uppy-StatusBar-details {
+    margin-left: 5px;
+  }
 
   [data-uppy-theme="dark"] & {
     color: $gray-200;
@@ -411,7 +404,6 @@
   vertical-align: middle;
   background-color: $gray-500;
   border-radius: 50%;
-  border: none;
   cursor: help;
   appearance: none;
   inset-inline-start: 2px;

From a621dff5354dad7abc398d02d06ed8891ee649a5 Mon Sep 17 00:00:00 2001
From: Murderlon <merlijn@soverin.net>
Date: Thu, 11 Nov 2021 22:12:22 +0100
Subject: [PATCH 3/4] Revert accidental change in Uploader

---
 packages/@uppy/companion/src/server/Uploader.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/@uppy/companion/src/server/Uploader.js b/packages/@uppy/companion/src/server/Uploader.js
index 0bd7d18569..259b752dad 100644
--- a/packages/@uppy/companion/src/server/Uploader.js
+++ b/packages/@uppy/companion/src/server/Uploader.js
@@ -40,8 +40,6 @@ function exceedsMaxFileSize (maxFileSize, size) {
   return maxFileSize && size && size > maxFileSize
 }
 
-let testIdx = 0
-
 class AbortError extends Error {}
 
 class Uploader {
@@ -467,12 +465,6 @@ class Uploader {
    * @param {any} stream
    */
   async _uploadTus (stream) {
-    testIdx++
-    if (testIdx > 1) {
-      this.failed = true
-      setTimeout(() => this.emitError(new Error('test')), 1000)
-      return Promise.reject(new Error('test'))
-    }
     const uploader = this
 
     const isFileStream = stream instanceof ReadStream

From 893489aff95e9e2a2df0dcd776e0fd237e01f5c4 Mon Sep 17 00:00:00 2001
From: Murderlon <merlijn@soverin.net>
Date: Fri, 12 Nov 2021 13:12:08 +0100
Subject: [PATCH 4/4] Fix locale string which got lost in merge

---
 packages/@uppy/status-bar/src/locale.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/@uppy/status-bar/src/locale.js b/packages/@uppy/status-bar/src/locale.js
index 7da3099a3c..5ec26ece33 100644
--- a/packages/@uppy/status-bar/src/locale.js
+++ b/packages/@uppy/status-bar/src/locale.js
@@ -44,5 +44,6 @@ module.exports = {
       0: '%{smart_count} more file added',
       1: '%{smart_count} more files added',
     },
+    showErrorDetails: 'Show error details',
   },
 }