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.
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
Required meta fields UI #3285
Required meta fields UI #3285
Changes from 2 commits
e0ecab1
363ce4d
a0143f9
a5ad997
2a152d8
b64717f
35c7cc7
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -32,12 +32,6 @@ if (typeof AggregateError === 'undefined') { | |||||
} | ||||||
} | ||||||
} | ||||||
class AggregateRestrictionError extends AggregateError { | ||||||
constructor (...args) { | ||||||
super(...args) | ||||||
this.isRestriction = true | ||||||
} | ||||||
} | ||||||
|
||||||
/** | ||||||
* Uppy Core module. | ||||||
|
@@ -557,27 +551,42 @@ class Uppy { | |||||
} | ||||||
|
||||||
/** | ||||||
* Check if requiredMetaField restriction is met before uploading. | ||||||
* Check if requiredMetaField restriction is met for a specific file. | ||||||
* | ||||||
*/ | ||||||
#checkRequiredMetaFields (files) { | ||||||
#checkRequiredMetaFieldsOnFile (file) { | ||||||
const { requiredMetaFields } = this.opts.restrictions | ||||||
const { hasOwnProperty } = Object.prototype | ||||||
|
||||||
const errors = [] | ||||||
for (const fileID of Object.keys(files)) { | ||||||
const file = this.getFile(fileID) | ||||||
for (let i = 0; i < requiredMetaFields.length; i++) { | ||||||
if (!hasOwnProperty.call(file.meta, requiredMetaFields[i]) || file.meta[requiredMetaFields[i]] === '') { | ||||||
const err = new RestrictionError(`${this.i18n('missingRequiredMetaFieldOnFile', { fileName: file.name })}`) | ||||||
errors.push(err) | ||||||
this.#showOrLogErrorAndThrow(err, { file, showInformer: false, throwErr: false }) | ||||||
} | ||||||
const missingFields = [] | ||||||
for (let i = 0; i < requiredMetaFields.length; i++) { | ||||||
if (!hasOwnProperty.call(file.meta, requiredMetaFields[i]) || file.meta[requiredMetaFields[i]] === '') { | ||||||
const err = new RestrictionError(`${this.i18n('missingRequiredMetaFieldOnFile', { fileName: file.name })}`) | ||||||
errors.push(err) | ||||||
missingFields.push(requiredMetaFields[i]) | ||||||
this.#showOrLogErrorAndThrow(err, { file, showInformer: false, throwErr: false }) | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. are we still logging required fields in informer even with the new UI? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No, |
||||||
} | ||||||
} | ||||||
this.setFileState( | ||||||
file.id, | ||||||
{ missingRequiredMetaFields: missingFields } | ||||||
) | ||||||
return errors | ||||||
} | ||||||
|
||||||
/** | ||||||
* Check if requiredMetaField restriction is met before uploading. | ||||||
* | ||||||
*/ | ||||||
#checkRequiredMetaFields (files) { | ||||||
const errors = Object.keys(files).map((fileID) => { | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You need to flatten the result, otherwise
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks for the flatMap tip! |
||||||
const file = this.getFile(fileID) | ||||||
return this.#checkRequiredMetaFieldsOnFile(file) | ||||||
}) | ||||||
|
||||||
if (errors.length) { | ||||||
throw new AggregateRestrictionError(`${this.i18n('missingRequiredMetaField')}`, errors) | ||||||
throw new RestrictionError(`${this.i18n('missingRequiredMetaField')}`) | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. But this is going to show that huge informer bubble to the users? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Not it should be exactly the same. The reason we saw a huge informer before because the arguments were written the other way around (so the |
||||||
} | ||||||
} | ||||||
|
||||||
|
@@ -1277,6 +1286,12 @@ class Uppy { | |||||
this.calculateTotalProgress() | ||||||
}) | ||||||
|
||||||
this.on('dashboard:file-edit-complete', (file) => { | ||||||
if (file) { | ||||||
this.#checkRequiredMetaFieldsOnFile(file) | ||||||
} | ||||||
}) | ||||||
|
||||||
// show informer if offline | ||||||
if (typeof window !== 'undefined' && window.addEventListener) { | ||||||
window.addEventListener('online', this.#updateOnlineStatus) | ||||||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
const { h } = require('preact') | ||
|
||
module.exports = function renderMissingMetaFieldsError (props) { | ||
const { file, toggleFileCard, i18n } = props | ||
const { missingRequiredMetaFields } = file | ||
if (!missingRequiredMetaFields) { | ||
return null | ||
} | ||
const metaFieldsString = missingRequiredMetaFields.map(field => ( | ||
field.charAt(0).toUpperCase() + field.slice(1) | ||
)).join(', ') | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is there a way to get the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Only through Dashboard options, right? Which is not ideal, as in theory Core is independent of Dashboard and doesn’t know about it. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. But as you are making the UI for the dashboard and not for core, would it be possible to match ids of |
||
|
||
return ( | ||
<div className="uppy-Dashboard-Item-errorMessage"> | ||
{i18n('missingRequiredMetaFields', { | ||
smart_count: missingRequiredMetaFields.length, | ||
fields: metaFieldsString, | ||
})} | ||
{' '} | ||
<button | ||
type="button" | ||
class="uppy-u-reset uppy-Dashboard-Item-errorMessageBtn" | ||
onClick={() => toggleFileCard(true, file.id)} | ||
> | ||
{i18n('editFile')} | ||
</button> | ||
</div> | ||
) | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why are we removing this? I think we should keep it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Because it’s unused, how do you suggest we use it? We used to show an error info message with all the missing meta fields errors — but not anymore. I thought to log it maybe.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it can be quite useful for debugging, and in any case it's really cheap to keep it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The linter was complaining that it was unused, do you suggest we log with it?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I suggest to revert https://github.com/transloadit/uppy/pull/3285/files#diff-e522340b6dabc4b8f14b055b742c5c1adca74d15a06f06467956a59b7e106cc2L580-R589 and keep using it 😅 EDIT: see https://github.com/transloadit/uppy/pull/3285/files#r741085087