Golden retriever 2 fixes (#2895)

* rename StatusBar-ghosts to StatusBar-serviceMsg

* resumeAll after restore

* Adjust recovered copy: remove from StatusBar, make it depend on number of ghosts, add re-select button

* Update en_US.js

* add sorting — display ghost files first

* make ghosts more opaque

//cc @nqst

* Update packages/@uppy/dashboard/src/components/FileList.js

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

* Update packages/@uppy/dashboard/src/components/FileList.js

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

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

@@ -1,3 +1,5 @@
+const { h } = require('preact')
+const classNames = require('classnames')
 const FileList = require('./FileList')
 const AddFiles = require('./AddFiles')
 const AddFilesPanel = require('./AddFilesPanel')
@@ -6,9 +8,7 @@ const EditorPanel = require('./EditorPanel')
 const PanelTopBar = require('./PickerPanelTopBar')
 const FileCard = require('./FileCard')
 const Slide = require('./Slide')
-const classNames = require('classnames')
 const isDragDropSupported = require('@uppy/utils/lib/isDragDropSupported')
-const { h } = require('preact')
 
 // http://dev.edenspiekermann.com/2016/02/11/introducing-accessible-modal-dialog
 // https://github.com/ghosh/micromodal
@@ -52,17 +52,18 @@ module.exports = function Dashboard (props) {
   }
 
   const showFileList = props.showSelectedFiles && !noFiles
+
   const numberOfFilesForRecovery = props.recoveredState ? Object.keys(props.recoveredState.files).length : null
+  const numberOfGhosts = props.files ? Object.keys(props.files).filter((fileID) => props.files[fileID].isGhost).length : null
 
-  const renderStartOverBtn = () => {
-    return (
-      <button
-        className="uppy-u-reset uppy-c-btn uppy-Dashboard-serviceMsg-actionBtn"
-        onClick={props.handleCancelRestore}
-      >
-        {props.i18n('startOver')}
-      </button>
-    )
+  const renderRestoredText = () => {
+    if (numberOfGhosts > 0) {
+      return props.i18n('recoveredXFiles', {
+        smart_count: numberOfGhosts,
+      })
+    }
+
+    return props.i18n('recoveredAllFiles')
   }
 
   const dashboard = (
@@ -114,21 +115,23 @@ module.exports = function Dashboard (props) {
 
           {showFileList && <PanelTopBar {...props} />}
 
-          {numberOfFilesForRecovery ? (
+          {numberOfFilesForRecovery && (
             <div className="uppy-Dashboard-serviceMsg">
-              <svg className="uppy-Dashboard-serviceMsg-icon" aria-hidden="true" focusable="false" width="24" height="19" viewBox="0 0 24 19">
+              <svg className="uppy-Dashboard-serviceMsg-icon" aria-hidden="true" focusable="false" width="21" height="16" viewBox="0 0 24 19">
                 <g transform="translate(0 -1)" fill="none" fillRule="evenodd">
                   <path d="M12.857 1.43l10.234 17.056A1 1 0 0122.234 20H1.766a1 1 0 01-.857-1.514L11.143 1.429a1 1 0 011.714 0z" fill="#FFD300" />
                   <path fill="#000" d="M11 6h2l-.3 8h-1.4z" />
                   <circle fill="#000" cx="12" cy="17" r="1" />
                 </g>
               </svg>
-              {props.i18nArray('recoveredXFiles', {
-                smart_count: numberOfFilesForRecovery,
-                startOver: renderStartOverBtn(),
-              })}
+              <strong className="uppy-Dashboard-serviceMsg-title">
+                {props.i18n('sessionRestored')}
+              </strong>
+              <div class="uppy-Dashboard-serviceMsg-text">
+                {renderRestoredText()}
+              </div>
             </div>
-          ) : null}
+          )}
 
           {showFileList ? (
             <FileList

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

@@ -8,20 +8,6 @@ const renderAcquirerIcon = (acquirer, props) => (
   </span>
 )
 
-const renderFileSource = (props) => (
-  props.file.source
-  && props.file.source !== props.id
-    && (
-    <div className="uppy-Dashboard-Item-sourceIcon">
-      {props.acquirers.map(acquirer => {
-        if (acquirer.id === props.file.source) {
-          return renderAcquirerIcon(acquirer, props)
-        }
-      })}
-    </div>
-    )
-)
-
 const renderFileName = (props) => {
   // Take up at most 2 lines on any screen
   let maxNameLength
@@ -52,6 +38,22 @@ const renderFileSize = (props) => (
     )
 )
 
+const ReSelectButton = (props) => (
+  props.file.isGhost
+    && (
+      <span>
+        {' \u2022 '}
+        <button
+          className="uppy-u-reset uppy-c-btn uppy-Dashboard-Item-reSelect"
+          type="button"
+          onClick={props.toggleAddFilesPanel}
+        >
+          {props.i18n('reSelect')}
+        </button>
+      </span>
+    )
+)
+
 const ErrorButton = ({ file, onClick }) => {
   if (file.error) {
     return (
@@ -76,7 +78,7 @@ module.exports = function FileInfo (props) {
       {renderFileName(props)}
       <div className="uppy-Dashboard-Item-status">
         {renderFileSize(props)}
-        {renderFileSource(props)}
+        {ReSelectButton(props)}
         <ErrorButton
           file={props.file}
           onClick={() => {

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

@@ -5,7 +5,7 @@
     font-size: 12px;
     line-height: 1.3;
     font-weight: 500;
-    margin-bottom: 4px;
+    margin-bottom: 5px;
 
     word-break: break-all;
     // Must be present
@@ -19,7 +19,7 @@
 
   .uppy-Dashboard-Item-status {
     font-size: 11px;
-    line-height: 1.3;
+    line-height: 1;
     font-weight: normal;
     color: $gray-600;
 
@@ -32,26 +32,12 @@
       vertical-align: bottom;
       text-transform: uppercase;
     }
-    .uppy-Dashboard-Item-sourceIcon {
-      // display: inline-block;
-      display: none;
-      vertical-align: bottom;
-      color: $gray-400;
-      &:not(:first-child) {
-        position: relative;
-        margin-inline-start: 14px;
-      }
-      svg,
-      svg * {
-        max-width: 100%;
-        max-height: 100%;
-        display: inline-block;
-        vertical-align: text-bottom;
-        overflow: hidden;
-        fill: currentColor;
-        width: 11px;
-        height: 12px;
-      }
-    }
+
+  .uppy-Dashboard-Item-reSelect {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 600;
+    color: $blue;
+  }
   // ...uppy-Dashboard-Item-status|
 // ...uppy-Dashboard-Item-fileInfo|

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

@@ -102,6 +102,7 @@ module.exports = class FileItem extends Component {
             acquirers={this.props.acquirers}
             containerWidth={this.props.containerWidth}
             i18n={this.props.i18n}
+            toggleAddFilesPanel={this.props.toggleAddFilesPanel}
           />
           <Buttons
             file={file}

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

@@ -44,16 +44,12 @@
   }
 }
 
-  .uppy-Dashboard-Item.is-ghost .uppy-Dashboard-Item-preview {
-    opacity: 0.5;
+  .uppy-Dashboard-Item.is-ghost .uppy-Dashboard-Item-previewInnerWrap {
+    opacity: 0.2;
   }
 
-  .uppy-Dashboard-Item.is-ghost .uppy-Dashboard-Item-fileInfo {
-    opacity: 0.5;
-
-    [data-uppy-theme="dark"] & {
-      opacity: 0.8;
-    }
+  .uppy-Dashboard-Item.is-ghost .uppy-Dashboard-Item-name {
+    opacity: 0.7;
   }
 
   .uppy-Dashboard-Item.is-ghost .uppy-Dashboard-Item-preview:before {
@@ -68,6 +64,7 @@
     background-position: 50% 10px;
     background-size: 25px;
     z-index: $zIndex-5;
+    opacity: 0.5;
 
     .uppy-size--md & {
       background-size: 40px;

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

@@ -64,7 +64,14 @@ module.exports = (props) => {
     handleCancelThumbnail: props.handleCancelThumbnail,
   }
 
-  const rows = chunks(Object.keys(props.files), props.itemsPerRow)
+  const sortByGhostComesFirst = (file1, file2) => {
+    return props.files[file2].isGhost - props.files[file1].isGhost
+  }
+
+  // Sort files by file.isGhost, ghost files first, only if recoveredState is present
+  const files = Object.keys(props.files)
+  if (props.recoveredState) files.sort(sortByGhostComesFirst)
+  const rows = chunks(files, props.itemsPerRow)
 
   function renderRow (row) {
     return (
@@ -78,6 +85,7 @@ module.exports = (props) => {
             role="listitem"
             openFileEditor={props.openFileEditor}
             canEditFile={props.canEditFile}
+            toggleAddFilesPanel={props.toggleAddFilesPanel}
             file={props.files[fileID]}
           />
         ))}

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

@@ -100,11 +100,12 @@ module.exports = class Dashboard extends Plugin {
           1: 'Processing %{smart_count} files',
         },
         recoveredXFiles: {
-          0: 'We’ve recovered %{smart_count} file you’ve previousely selected. You can keep it or %{startOver}',
-          1: 'We’ve recovered %{smart_count} files you’ve previousely selected. You can keep them or %{startOver}',
+          0: 'We could not fully recover 1 file. Please re-select it and resume the upload.',
+          1: 'We could not fully recover %{smart_count} files. Please re-select them and resume the upload.',
         },
-        reSelectGhosts: 'Please re-select (or remove) files marked with ghosts',
-        startOver: 'start over',
+        recoveredAllFiles: 'We restored all files. You can now resume the upload.',
+        sessionRestored: 'Session restored',
+        reSelect: 'Re-select',
         // The default `poweredBy2` string only combines the `poweredBy` string (%{backwardsCompat}) with the size.
         // Locales can override `poweredBy2` to specify a different word order. This is for backwards compat with
         // Uppy 1.9.x and below which did a naive concatenation of `poweredBy2 + size` instead of using a locale-specific

packages/@uppy/dashboard/src/style.scss

@@ -218,10 +218,10 @@
   font-size: 12px;
   line-height: 1.3;
   font-weight: 500;
-  padding: 12px 50px;
+  padding: 12px 0;
   position: relative;
   top: -1px;
-  z-index: $zIndex-5;
+  z-index: $zIndex-4;
 
   .uppy-size--md & {
     font-size: 14px;
@@ -236,6 +236,17 @@
   }
 }
 
+.uppy-Dashboard-serviceMsg-title {
+  display: block;
+  margin-bottom: 4px;
+  padding-left: 42px;
+  line-height: 1;
+}
+
+.uppy-Dashboard-serviceMsg-text {
+  padding: 0 15px;
+}
+
 .uppy-Dashboard-serviceMsg-actionBtn {
   font-size: inherit;
   font-weight: inherit;
@@ -249,7 +260,7 @@
 
 .uppy-Dashboard-serviceMsg-icon {
   position: absolute;
-  top: 13px;
+  top: 10px;
   left: 15px;
 }
 

packages/@uppy/golden-retriever/src/index.js

@@ -302,6 +302,7 @@ module.exports = class GoldenRetriever extends Plugin {
       Object.keys(currentUploads).forEach((uploadId) => {
         this.uppy.restore(uploadId, currentUploads[uploadId])
       })
+      this.uppy.resumeAll()
     }
     this.uppy.upload()
     this.uppy.setState({ recoveredState: null })

packages/@uppy/locales/src/en_US.js

@@ -94,13 +94,14 @@ en_US.strings = {
     '0': 'Processing %{smart_count} file',
     '1': 'Processing %{smart_count} files',
   },
-  reSelectGhosts: 'Please re-select (or remove) files marked with ghosts',
+  reSelect: 'Re-select',
   recording: 'Recording',
   recordingLength: 'Recording length %{recording_length}',
   recordingStoppedMaxSize: 'Recording stopped because the file size is about to exceed the limit',
+  recoveredAllFiles: 'We restored all files. You can now resume the upload.',
   recoveredXFiles: {
-    '0': 'We’ve recovered %{smart_count} file you’ve previousely selected. You can keep it or %{startOver}',
-    '1': 'We’ve recovered %{smart_count} files you’ve previousely selected. You can keep them or %{startOver}',
+    '0': 'We could not fully recover 1 file. Please re-select it and resume the upload.',
+    '1': 'We could not fully recover %{smart_count} files. Please re-select them and resume the upload.',
   },
   removeFile: 'Remove file',
   resetFilter: 'Reset filter',
@@ -119,9 +120,9 @@ en_US.strings = {
     '0': 'Select %{smart_count}',
     '1': 'Select %{smart_count}',
   },
+  sessionRestored: 'Session restored',
   smile: 'Smile!',
   startCapturing: 'Begin screen capturing',
-  startOver: 'start over',
   startRecording: 'Begin video recording',
   stopCapturing: 'Stop screen capturing',
   stopRecording: 'Stop video recording',

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

@@ -51,9 +51,9 @@ function togglePauseResume (props) {
 
 function RenderReSelectGhosts ({ i18n }) {
   return (
-    <div className="uppy-StatusBar-ghosts">
+    <div className="uppy-StatusBar-serviceMsg">
       {i18n('reSelectGhosts')}
-      <svg className="uppy-c-icon uppy-StatusBar-ghostsIcon" aria-hidden="true" width="15" height="19" viewBox="0 0 35 39">
+      <svg className="uppy-c-icon uppy-StatusBar-serviceMsg-ghostsIcon" aria-hidden="true" width="15" height="19" viewBox="0 0 35 39">
         <path d="M1.708 38.66c1.709 0 3.417-3.417 6.834-3.417 3.416 0 5.125 3.417 8.61 3.417 3.348 0 5.056-3.417 8.473-3.417 4.305 0 5.125 3.417 6.833 3.417.889 0 1.709-.889 1.709-1.709v-19.68C34.167-5.757 0-5.757 0 17.271v19.68c0 .82.888 1.709 1.708 1.709zm8.542-17.084a3.383 3.383 0 01-3.417-3.416 3.383 3.383 0 013.417-3.417 3.383 3.383 0 013.417 3.417 3.383 3.383 0 01-3.417 3.416zm13.667 0A3.383 3.383 0 0120.5 18.16a3.383 3.383 0 013.417-3.417 3.383 3.383 0 013.416 3.417 3.383 3.383 0 01-3.416 3.416z" fillRule="nonzero" />
       </svg>
     </div>
@@ -156,8 +156,6 @@ module.exports = (props) => {
         {showPauseResumeBtn ? <PauseResumeButton {...props} /> : null}
         {showCancelBtn ? <CancelBtn {...props} /> : null}
         {showDoneBtn ? <DoneBtn {...props} /> : null}
-
-        {props.isSomeGhost ? <RenderReSelectGhosts {...props} /> : null}
       </div>
     </div>
   )

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

@@ -50,7 +50,6 @@ module.exports = class StatusBar extends Plugin {
           0: '%{smart_count} more file added',
           1: '%{smart_count} more files added',
         },
-        reSelectGhosts: 'Please re-select (or remove) files marked with ghosts',
       },
     }
 

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

@@ -353,7 +353,7 @@
     font-size: 14px;
   }
 
-.uppy-StatusBar-ghosts {
+.uppy-StatusBar-serviceMsg {
   font-size: 11px;
   line-height: 1.1;
   color: $black;
@@ -369,7 +369,7 @@
   }
 }
 
-.uppy-StatusBar-ghostsIcon {
+.uppy-StatusBar-serviceMsg-ghostsIcon {
   opacity: 0.5;
   vertical-align: text-bottom;
   position: relative;