Add upload states to Dashboard too

Introduces repetition — we have statuses in Status Bar already

I was thinking that maybe we should instead move this to Core, @goto-bus-stop, what do you think? Then plugins can share it, you can simply access state.status from any plugin

packages/@uppy/dashboard/src/components/PanelTopBar.js

@@ -1,8 +1,68 @@
 const { h } = require('preact')
 
-function DashboardContentTitle (props) {
-  if (props.newFiles.length) {
-    return props.i18n('xFilesSelected', { smart_count: props.newFiles.length })
+const uploadStates = {
+  'STATE_ERROR': 'error',
+  'STATE_WAITING': 'waiting',
+  'STATE_PREPROCESSING': 'preprocessing',
+  'STATE_UPLOADING': 'uploading',
+  'STATE_POSTPROCESSING': 'postprocessing',
+  'STATE_COMPLETE': 'complete',
+  'STATE_PAUSED': 'paused'
+}
+
+function getUploadingState (isAllErrored, isAllComplete, isAllPaused, files = {}) {
+  console.log(isAllComplete)
+  if (isAllErrored) {
+    return uploadStates.STATE_ERROR
+  }
+
+  if (isAllComplete) {
+    return uploadStates.STATE_COMPLETE
+  }
+
+  if (isAllPaused) {
+    return uploadStates.STATE_PAUSED
+  }
+
+  let state = uploadStates.STATE_WAITING
+  const fileIDs = Object.keys(files)
+  for (let i = 0; i < fileIDs.length; i++) {
+    const progress = files[fileIDs[i]].progress
+    // If ANY files are being uploaded right now, show the uploading state.
+    if (progress.uploadStarted && !progress.uploadComplete) {
+      return uploadStates.STATE_UPLOADING
+    }
+    // If files are being preprocessed AND postprocessed at this time, we show the
+    // preprocess state. If any files are being uploaded we show uploading.
+    if (progress.preprocess && state !== uploadStates.STATE_UPLOADING) {
+      state = uploadStates.STATE_PREPROCESSING
+    }
+    // If NO files are being preprocessed or uploaded right now, but some files are
+    // being postprocessed, show the postprocess state.
+    if (progress.postprocess && state !== uploadStates.STATE_UPLOADING && state !== uploadStates.STATE_PREPROCESSING) {
+      state = uploadStates.STATE_POSTPROCESSING
+    }
+  }
+  return state
+}
+
+function UploadStatus (props) {
+  const uploadingState = getUploadingState(
+    props.isAllErrored,
+    props.isAllComplete,
+    props.isAllPaused,
+    props.files
+  )
+
+  switch (uploadingState) {
+    case 'uploading':
+      return props.i18n('uploadingXFiles', { smart_count: props.inProgressFiles.length })
+    case 'paused':
+      return props.i18n('uploadPaused')
+    case 'waiting':
+      return props.i18n('xFilesSelected', { smart_count: props.newFiles.length })
+    case 'complete':
+      return props.i18n('uploadComplete')
   }
 }
 
@@ -13,11 +73,16 @@ function PanelTopBar (props) {
 
   return (
     <div class="uppy-DashboardContent-bar">
-      <button class="uppy-DashboardContent-back"
-        type="button"
-        onclick={props.cancelAll}>{props.i18n('cancel')}</button>
+      <div>
+        {!props.isAllComplete
+        ? <button class="uppy-DashboardContent-back"
+          type="button"
+          onclick={props.cancelAll}>{props.i18n('cancel')}</button>
+          : null
+        }
+      </div>
       <div class="uppy-DashboardContent-title" role="heading" aria-level="h1">
-        <DashboardContentTitle {...props} />
+        <UploadStatus {...props} />
       </div>
       { notOverFileLimit &&
         <button class="uppy-DashboardContent-addMore"

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

@@ -76,6 +76,7 @@ module.exports = class Dashboard extends Plugin {
         uploadAllNewFiles: 'Upload all new files',
         emptyFolderAdded: 'No files were added from empty folder',
         uploadComplete: 'Upload complete',
+        uploadPaused: 'Upload paused',
         resumeUpload: 'Resume upload',
         pauseUpload: 'Pause upload',
         retryUpload: 'Retry upload',
@@ -88,6 +89,10 @@ module.exports = class Dashboard extends Plugin {
           0: 'Upload %{smart_count} file',
           1: 'Upload %{smart_count} files'
         },
+        uploadingXFiles: {
+          0: 'Uploading %{smart_count} file',
+          1: 'Uploading %{smart_count} files'
+        },
         uploadXNewFiles: {
           0: 'Upload +%{smart_count} file',
           1: 'Upload +%{smart_count} files'
@@ -513,12 +518,43 @@ module.exports = class Dashboard extends Plugin {
     const newFiles = Object.keys(files).filter((file) => {
       return !files[file].progress.uploadStarted
     })
+
+    const uploadStartedFiles = Object.keys(files).filter((file) => {
+      return files[file].progress.uploadStarted
+    })
+
+    const completeFiles = Object.keys(files).filter((file) => {
+      return files[file].progress.uploadComplete
+    })
+
+    const erroredFiles = Object.keys(files).filter((file) => {
+      return files[file].error
+    })
+
     const inProgressFiles = Object.keys(files).filter((file) => {
       return !files[file].progress.uploadComplete &&
              files[file].progress.uploadStarted &&
              !files[file].isPaused
     })
 
+    const processingFiles = Object.keys(files).filter((file) => {
+      return files[file].progress.preprocess || files[file].progress.postprocess
+    })
+
+    const isUploadStarted = uploadStartedFiles.length > 0
+
+    const isAllComplete = state.totalProgress === 100 &&
+      completeFiles.length === Object.keys(files).length &&
+      processingFiles.length === 0
+
+    const isAllErrored = isUploadStarted &&
+      erroredFiles.length === uploadStartedFiles.length
+
+    const isAllPaused = inProgressFiles.length === 0 &&
+      !isAllComplete &&
+      !isAllErrored &&
+      uploadStartedFiles.length > 0
+
     let inProgressFilesArray = []
     inProgressFiles.forEach((file) => {
       inProgressFilesArray.push(files[file])
@@ -578,8 +614,17 @@ module.exports = class Dashboard extends Plugin {
     return DashboardUI({
       state: state,
       modal: pluginState,
-      newFiles: newFiles,
       files: files,
+      newFiles,
+      uploadStartedFiles,
+      completeFiles,
+      erroredFiles,
+      inProgressFiles,
+      processingFiles,
+      isUploadStarted,
+      isAllComplete,
+      isAllErrored,
+      isAllPaused,
       totalFileCount: Object.keys(files).length,
       totalProgress: state.totalProgress,
       acquirers: acquirers,
@@ -589,9 +634,6 @@ module.exports = class Dashboard extends Plugin {
       getPlugin: this.uppy.getPlugin,
       progressindicators: progressindicators,
       autoProceed: this.uppy.opts.autoProceed,
-      hideUploadButton: this.opts.hideUploadButton,
-      hideRetryButton: this.opts.hideRetryButton,
-      hidePauseResumeCancelButtons: this.opts.hidePauseResumeCancelButtons,
       id: this.id,
       closeModal: this.requestCloseModal,
       handleClickOutside: this.handleClickOutside,
@@ -672,7 +714,8 @@ module.exports = class Dashboard extends Plugin {
         target: this,
         hideUploadButton: this.opts.hideUploadButton,
         hideRetryButton: this.opts.hideRetryButton,
-        hidePauseResumeCancelButtons: this.opts.hidePauseResumeCancelButtons,
+        hidePauseResumeButton: this.opts.hidePauseResumeButton,
+        hideCancelButton: this.opts.hideCancelButton,
         showProgressDetails: this.opts.showProgressDetails,
         hideAfterFinish: this.opts.hideProgressAfterFinish,
         locale: this.opts.locale