Create UI for File Upload, Part 4: Styling for "Completed" file uploads

Purpose: To describe the UI changes when file(s) complete uploading

Notes:

• This story extends work done in the UIDATIMP-37 story
• See wireframes and videos attached.
• If discrepancies between the text in the wireframes and text in the Jira story, use the text that is in the Jira story. Styling in Upload&DeleteStylingFINAL is the final, approved styling

Scenario 1

• Given the File Upload portion of the Data Import landing page:
• When a file completes uploading,
• Then the "In Progress" card should change to a "Completed" card with the following data elements:
  • Icon (make this optional for the central component)
  • File name, including extension
  • Upload date (make this optional for the central component)
  • Trashcan at the top right of the block
• If multiple files are being uploaded, stack the blocks in the File Upload area, with the first file at the bottom and the last file at the top
• Make sure any long file names wrap to following lines, so that they stay in the block and don't run into the trashcan icon

Scenario 2

• Given the trash can in the completed upload card
• When a user clicks on the trashcan, then the file should be deleted, and a restyled, recoloured card displayed with "[filename] has been deleted" and with an "undo" button . See https://www.dropbox.com/s/5jecq7vye0mlsks/delete%20a%20file%20outside%20edit%20dialog%20box.gif?dl=0
  • NOTE: Other apps (where the user stays on the create/edit screen) will use a different behavior, represented by this video: https://www.dropbox.com/s/5yc53m90j73jnf8/Delete%20a%20file%20inside%20edit%20dialog%20box.gif?dl=0. Is it fairly simple to build this behavior as an option, or should we leave it to Stripes Force to take care of it?
  • IMPLEMENTATION NOTE: When customer clicks 'trash' icon - mark file to delete.
    Send delete request in 10 seconds (should be configurable).
    In case 'Undo' was clicked, don't remove the flag file for deletion.
    Viktor Soroka when I click the trashcan, instead of seeing [filename] has been deleted, I see ui-data-import.deletedFile (see attached screenshots:Deleted - no file name.PNG and Which to undo..PNG). Is it possible to show the file name? If I deleted several files and decided to undo one of them, I would need to be able to figure out which one to undo. UPDATE: checked on folio-snapshot, and it looks OK - folio-testing file name problem may be related to a larger Stripes problem that's happening right now.

Notes

• See final styling details in Upload&DeleteStylingFINAL, attached
• Depending on the card width, content can either be inline or in rows (icon and file name, then date underneath). Cards should be responsive to resizing
• The component should allow for these "Completed" blocks to appear on different screens in FOLIO, depending on what an individual app needs. Developers in other apps may choose to remain on the File Upload area or advance the User to another page. Data Import will advance the User to another page, which will be detailed in the next story
• Information toast should be displayed upon deletion.