Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Status bar error state improvements #3299

Merged
merged 8 commits into from Nov 15, 2021
Merged

Status bar error state improvements #3299

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
418ec54
Status bar improvements
Murderlon Nov 4, 2021
7b1c153
Revert dashboard.html styles, improve layout of error state
Murderlon Nov 8, 2021
c1e2296
Merge branch 'main' into status-error-state
Murderlon Nov 8, 2021
d4f396b
Merge branch 'main' into status-error-state
arturi Nov 9, 2021
697171b
Merge branch 'main' into status-error-state
Murderlon Nov 11, 2021
6e638e9
Merge branch 'status-error-state' of https://github.com/transloadit/u…
Murderlon Nov 11, 2021
a621dff
Revert accidental change in Uploader
Murderlon Nov 11, 2021
893489a
Fix locale string which got lost in merge
Murderlon Nov 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 8 additions & 0 deletions packages/@uppy/companion/src/server/Uploader.js
View file
Open in desktop
Expand Up @@ -40,6 +40,8 @@ function exceedsMaxFileSize (maxFileSize, size) {
return maxFileSize && size && size > maxFileSize
}

let testIdx = 0

class AbortError extends Error {}

class Uploader {
Expand Down Expand Up @@ -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'))
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this a deliberate change or was meant to be removed after testing?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ooh good catch this was taking along from a different branch.

const uploader = this

const isFileStream = stream instanceof ReadStream
Expand Down
17 changes: 10 additions & 7 deletions packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.js
View file
Open in desktop
Expand Up @@ -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"
Expand All @@ -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}
Expand Down
9 changes: 9 additions & 0 deletions packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.scss
View file
Open in desktop
Expand Up @@ -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;
Expand Down
11 changes: 6 additions & 5 deletions packages/@uppy/dashboard/src/components/FileItem/index.scss
View file
Open in desktop
Expand Up @@ -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 {
Expand Down
55 changes: 27 additions & 28 deletions packages/@uppy/status-bar/src/Components.js
View file
Open in desktop
Expand Up @@ -246,7 +246,7 @@ function ProgressDetails (props) {
)
}

function UnknownProgressDetails (props) {
function FileUploadCount (props) {
const { i18n, complete, numUploads } = props

return (
Expand Down Expand Up @@ -327,7 +327,7 @@ function ProgressBarUploading (props) {
)
}
return (
<UnknownProgressDetails
<FileUploadCount
i18n={i18n}
complete={complete}
numUploads={numUploads}
Expand Down Expand Up @@ -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}`
Expand All @@ -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>
)
}
Expand Down
19 changes: 11 additions & 8 deletions packages/@uppy/status-bar/src/StatusBar.js
View file
Open in desktop
Expand Up @@ -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

Expand Down Expand Up @@ -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
Expand All @@ -205,7 +208,7 @@ function StatusBar (props) {
})()}

<div className="uppy-StatusBar-actions">
{(recoveredState || showUploadBtn) ? (
{recoveredState || showUploadBtn ? (
<UploadBtn
newFiles={newFiles}
isUploadStarted={isUploadStarted}
Expand Down
6 changes: 3 additions & 3 deletions packages/@uppy/status-bar/src/index.js
View file
Open in desktop
Expand Up @@ -101,7 +101,7 @@ module.exports = class StatusBar extends UIPlugin {
return StatusBarUI({
error,
uploadState: getUploadingState(
isAllErrored,
error,
isAllComplete,
recoveredState,
state.files || {},
Expand Down Expand Up @@ -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
}

Expand Down
5 changes: 5 additions & 0 deletions packages/@uppy/status-bar/src/style.scss
View file
Open in desktop
Expand Up @@ -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;
Expand Down