feat: add upload progress modal

[KristinAoki]

Description

The current implementation of video uploads notifies the user that there are uploads occurring but does not let the user cancel uploads not show the progress for individual uploads. This leads the user is suspense regarding which videos have completed the uploads. This PR add a modal the modal appears when the upload begins and disappears when upload is complete and progress bars as a visual representation to give the user a sense of how far along the upload is. This matches the upload flow of the legacy page with a new UI. This change impacts the Course Author.

Supporting information

JIRA Ticket: TNL-11629

The new Video Uploads modal will make it clear to users that closing the Videos page will cancel the upload and that refreshing the page will cancel the upload. Additionally, the modal includes a progress bar so that user can see approximately how far along the upload is.

Testing instructions

1. Open the videos page
2. Click "Add video"
3. Select multiple videos to upload
4. Upload in-progress modal should appear
5. Confirm that clicking outside of the modal is disabled
6. Each of the videos that were selected should be listed
7. Confirm that the progress bars switch to failed
8. Modal closes automatically once all videos are processed
9. Should show upload error message for all failed uploads
10. Select another set of videos to upload
11. Upload in-progress should appear
12. Before videos finish, click "Cancel uploads"
13. Should show upload error message for failed uploads and cancelled uploads

[codecov]

Codecov Report

Attention: Patch coverage is 98.11321% with 2 lines in your changes missing coverage. Please review.

Project coverage is 92.63%. Comparing base (db1250e) to head (199f744).
Report is 3 commits behind head on master.

Files	Patch %	Lines
src/files-and-videos/videos-page/data/thunks.js	96.96%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1113      +/-   ##
==========================================
+ Coverage   92.58%   92.63%   +0.04%     
==========================================
  Files         708      713       +5     
  Lines       12614    12749     +135     
  Branches     2770     2780      +10     
==========================================
+ Hits        11679    11810     +131     
- Misses        900      903       +3     
- Partials       35       36       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[jesperhodge]

Everything looks great, just some minor comments. I still need to test this though.

[jesperhodge]

Instead of running a map data function inside of JSX, why not make the whole thing line 72 to 104 its own component? That will be clean, easily testable, and more readable and maintainable.

[jesperhodge]

This looks to me like an instance of the known renderThing() antipattern. Calling a getIcon() function just looks like an alternative way to a React component. How about instead of having a getIcon() function having a RequestStatusIcon component that does exactly the same? That's much more the React way.

[jesperhodge]

Code looks great, just need to test somehow

.