Editor: Additional error messages for media upload failures

[SiobhyB]

Fixes #14400

Description

When an image fails to load via the image block in the editor (for any reason other than there being no Internet connection) a progress indicator currently remains indefinitely on screen. The user will only see an error if they tap on the image (in which case an error appears in the Retry action sheet) or if they save the post as a draft.

Proposed changes

When an upload's thumbnail is ready, we don't currently check whether the upload failed, we only check whether the app is connected to the Internet (as per #14140). That leads to a situation where uploads that fail (for reasons other than no Internet connection) are assigned an "uploading" state via this line of code. This sends a signal back to Gutenberg and prevents an error message for the failure from being displayed correctly.

With this PR, a check for whether an upload failed has been added to guard against that in the thumbnailReady state here. I chose to use media.remoteStatus == .failed for the check as it matches the pattern used in the switch statement here for uploads to the Media Library.

Screenshots

You'll see that, prior to this change, an upload failed "silently", with no error message to indicate that it was not successful. The changes in this PR address that issue so that the error message now displays as expected following the failure:

Before	After

Testing

Prerequisite: A WordPress.com Simple site with a media library that's been filled up to the site's storage limit. The credentials for an existing test site that matches that criteria be found here: paaHJt-17e-p2#comment-2395

Steps to test:

1. Start a new post.
2. Add an image block.
3. Select an image to upload.
4. Desired result: The image placeholder appears with an error message.
5. Prior to this change: The error message did not display, instead there was a permanent placeholder/progress indicator.

Regression Notes

1. Potential unintended areas of impact

The code area that's been tweaked with this change relates to the way an image's thumbnail appears when it's uploaded in the editor. It may therefore unintentionally impact the way the thumbnail appears.

2. What I did to test those areas of impact (or what existing automated tests I relied on)

Manually tested uploading an image to ensure the thumbnail displays as expected, both when the upload fails and when it's successful.

3. What automated tests I added (or what prevented me from doing so)

No automated tests have been added as this is a relatively small fix for the UI, I didn't feel an automated test was necessary.

---

PR submission checklist:

• I have completed the Regression Notes.
• I have considered adding unit tests for my changes.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[wpmobilebot]

You can test the WordPress changes on this Pull Request by downloading it from AppCenter here with build number: pr17971-3ebc362. IPA is available here. If you need access to this, you can ask a maintainer to add you.

[wpmobilebot]

You can test the Jetpack changes on this Pull Request by downloading it from AppCenter here with build number: pr17971-3ebc362. IPA is available here. If you need access to this, you can ask a maintainer to add you.

[mchowning]

Code looks good and this works well. Such a huge improvement to the UX! 🙌 🥇

[mchowning]

Not a big deal, but the quoted "missing" reads a bit oddly to me (why is missing in quotes? are they not really missing?). I might try phrasing this positively with something like "Additional error messages for media upload failures".

What you have now is fine, so this is definitely not a blocker. Feel free to leave as-is if you prefer.

[SiobhyB]

I appreciate that feedback, thank you! Updated the note in 3ebc362.

[peril-wordpress-mobile]

	Warnings
⚠️	This PR is assigned to a milestone which is closing in less than 4 days Please, make sure to get it merged by then or assign it to a later expiring milestone

Generated by 🚫 dangerJS