Merge branch 'main' into tus-retry-fix

* main:
  website: update documents that were out of date (#3317)
  Status bar error state improvements (#3299)
  Fix typo in `docs/drag-drop.md` (#3319)
  website: Update /support and docs about Transloadit-hosted Companion (#3243)

.github/ISSUE_TEMPLATE/integration_help.md

@@ -5,10 +5,10 @@ about: Do you need assistance with building the Uppy client in your bundler, or
 labels: Not Accepted, Triage
 ---
 
-Transloadit is providing Uppy free of charge. If you want, you can self-host all of its components and never pay us a dime. There are docs and tests, and your Bug Reports and Feature Requests are always welcome on GitHub. 
+Transloadit is providing Uppy free of charge. If you want, you can self-host all its components and never pay us a dime. You can access docs and tests, and your Bug Reports and Feature Requests are always welcome on GitHub.
 
-There is also a different category of support that we like to call Integration Help: assistance to make things work for your environment, that have already been reported as working for the larger community.
+We offer also a different category of support that we like to call Integration Help: help to make things work for your environment, that have already been reported as working for the larger community.
 
-As much as we at Transloadit would like to provide detailed Integration Help to every non-paying user, Uppy has reached a point where this is no longer sustainable for our small crew. If we end up investing our time in a million different apps that use Uppy, as long as there is no money flowing back, we won't be able to ramp up our team to meet the demand. This would spread the team ever thinner and eventually grind development to a halt.
+As much as we at Transloadit would like to provide detailed Integration Help to every non-paying user, Uppy has reached a point where this is no longer sustainable for our small crew. If we end up investing our time in a million different apps that use Uppy, as long as no money is flowing back, we won’t be able to ramp up our team to meet the demand. This would spread the team ever thinner and eventually grind development to a halt.
 
-That is not where we want to be. So, in order to offer enthusiasts, businesses, and enterprises assistance in a sustainable way, we're providing community-based Integration Help for free at <https://community.transloadit.com/c/uppy>. If you are unable to solve your problem with help of the Uppy community, we offer paid Integration Help via <https://uppy.io/support>.
+That is not where we want to be. So, to offer enthusiasts, businesses, and enterprises help in a sustainable way, we’re providing community-based Integration Help for free at <https://community.transloadit.com/c/uppy>. If you are unable to solve your problem with help of the Uppy community, we offer paid Integration Help via <https://uppy.io/support>.

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

@@ -77,7 +77,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"
@@ -92,22 +92,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}
           // 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>
       <MetaErrorMessage
         file={props.file}
         i18n={props.i18n}

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;

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 {

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

@@ -246,7 +246,7 @@ function ProgressDetails (props) {
   )
 }
 
-function UnknownProgressDetails (props) {
+function FileUploadCount (props) {
   const { i18n, complete, numUploads } = props
 
   return (
@@ -327,7 +327,7 @@ function ProgressBarUploading (props) {
         )
       }
       return (
-        <UnknownProgressDetails
+        <FileUploadCount
           i18n={i18n}
           complete={complete}
           numUploads={numUploads}
@@ -388,7 +388,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}`
@@ -397,36 +397,35 @@ function ProgressBarError (props) {
   }
 
   return (
-    <div
-      className="uppy-StatusBar-content"
-      role="alert"
-      title={i18n('uploadFailed')}
-    >
+    <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-u-reset 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>
   )
 }

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

@@ -139,7 +139,7 @@ function StatusBar (props) {
     && !hidePauseResumeButton
     && uploadState === STATE_UPLOADING
 
-  const showRetryBtn = error && !hideRetryButton
+  const showRetryBtn = error && !isAllComplete && !hideRetryButton
 
   const showDoneBtn = doneButtonHandler && uploadState === STATE_COMPLETE
 
@@ -171,15 +171,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
@@ -205,7 +208,7 @@ function StatusBar (props) {
       })()}
 
       <div className="uppy-StatusBar-actions">
-        {(recoveredState || showUploadBtn) ? (
+        {recoveredState || showUploadBtn ? (
           <UploadBtn
             newFiles={newFiles}
             isUploadStarted={isUploadStarted}

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

@@ -101,7 +101,7 @@ module.exports = class StatusBar extends UIPlugin {
     return StatusBarUI({
       error,
       uploadState: getUploadingState(
-        isAllErrored,
+        error,
         isAllComplete,
         recoveredState,
         state.files || {},
@@ -180,8 +180,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
   }
 

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',
   },
 }

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

@@ -129,6 +129,11 @@
 .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;

website/src/docs/drag-drop.md

@@ -39,7 +39,7 @@ const { DragDrop } = Uppy
 
 ## CSS
 
-The `@uppy/drag-drop` plugin includes some basi c styles, like shown in the [example](/examples/dragdrop). You can also choose not to use it and provide your own styles instead.
+The `@uppy/drag-drop` plugin includes some basic styles, like shown in the [example](/examples/dragdrop). You can also choose not to use it and provide your own styles instead.
 
 ```js
 import '@uppy/core/dist/style.css'

website/src/support.md

@@ -21,8 +21,8 @@ This approach is new, we may make changes as we learn. Here are the current opti
 |                        Support on Uppy client |     best effort      |                        General Guidance                       |  Guidance based on your use case and circumstances, code & operational reviews  |
 | Support on Transloadit-hosted Companion & Tus |     best effort      |                        General Guidance                       |  Guidance based on your use case and circumstances, code & operational reviews  |
 |        Support on self-hosted Companion & Tus |     best effort      |                               -                                |                                        yes                                                                        |
-|  Access to Transloadit-hosted Companion & Tus |          -           |                              yes                               |                                        yes                                       |
-|     Access to Transloadit’s encoding features |          -           |                         10GB included                         |                                 0GB - unlimited                                 |
+|  Access to Transloadit-hosted Companion & Tus |          yes (with a <a href="https://transloadit.com/pricing/">free Transloadit Community plan</a>)           |                              yes                               |                                        yes                                       |
+|     Access to Transloadit’s encoding features |          yes           |                         10GB included                         |                                 0GB - unlimited                                 |
 | Guaranteed response times within office hours |          -           |                           <= 3 days                            |                                   <= 8h - 32h                                    |
 |              1-on-1 access to core developers |          -           |                               1h                               |                                     1h - 20h                                     |
 |                               Health & Status |          -           |            Access to Personal Transloadit Dashboard           |  Access to Personal Transloadit Dashboard. Proactive monitoring & notifications |

website/themes/uppy/layout/partials/frontpage-code-sample.html

@@ -1,5 +1,5 @@
 <!--
-You can `npm run web:inject-frontpagecodesample` to render this code snippet and
+You can `yarn run web:inject-frontpagecodesample` to render this code snippet and
 save it as a layout partial
 --><html><head></head><body><figure class="highlight bash"><table><tbody><tr><td class="code"><pre>$ <span class="token function">npm</span> <span class="token function">install</span> @uppy/core @uppy/dashboard @uppy/instagram @uppy/tus</pre></td></tr></tbody></table></figure>