HMS-5036: Update upload modal to allow cancellation

[Andrewgdewar]

Summary

• Adds ability to cancel and restart downloads
• Updates left side file icon to match color
• Left side icon now has a tooltip to explain how this file is being uploaded/if the file data has been reused (pending copy feedback)
• Added an overall upload progress bar.
• Removed the extra spinner to the left side of the toggle dropdown menu (redundant).

Testing steps

• Requires merging of the PR for HMS-5125
• Requires merging of the PR for HMS-5126

Once the above are merged (or checked the backend pr 5126 is checked out)

• Create an upload repository

• Upload a larger file (here is a good example list)

• While it is uploading, hit the cancel button. (can use network tab to turn on slow3g if necessary)

• You can now either close the file, or retry the download (to have it pull the completed chunk list from the backend and restart)

• Any combination of resuming/stopping/closing the modal/opening the modal/ reuploading SHOULD NOT result in any API error response. If one is seen during testing at any point, let me know.

[jlsherrill]

https://issues.redhat.com/browse/HMS-5036

[swadeley]

@Andrewgdewar Please rebase

[xbhouse]

another small thing - i see the icons are clickable but show the tooltip on hover. should they be clickable?

[xbhouse]

couple small nitpicks and needs a rebase, but overall this looks and works great!! nice job 🎉

[Andrewgdewar]

another small thing - i see the icons are clickable but show the tooltip on hover. should they be clickable?

This is likely from the patternfly component itself, and is likely due to accessibility requirements across platform (mobile) where there are no hover events.

Hover is not a thing on touch devices, so anyone on a phone, tablet, or touch-notebook will be better off with the touch action causing the tooltip to appear.

One thing I did change, was adding tabIndex={-1} to the file icons themselves, as I don't believe they need to be targetable via tabbing for screen readers, generally you want to only give tabbable elements actions, and the icons don't contain enough information for the screen reader to translate what we need here.

[xbhouse]

another small thing - i see the icons are clickable but show the tooltip on hover. should they be clickable?

This is likely from the patternfly component itself, and is likely due to accessibility requirements across platform (mobile) where there are no hover events.

Hover is not a thing on touch devices, so anyone on a phone, tablet, or touch-notebook will be better off with the touch action causing the tooltip to appear.

One thing I did change, was adding tabIndex={-1} to the file icons themselves, as I don't believe they need to be targetable via tabbing for screen readers, generally you want to only give tabbable elements actions, and the icons don't contain enough information for the screen reader to translate what we need here.

ahh right, thanks for pointing that out! makes sense 👍

[mayurilahane]

/retest

[mayurilahane]

• Adds ability to cancel and restart downloads

[mayurilahane]

• Updates left side file icon to match color
• [ ]