Creating UI for File Upload. When file uploading of particular file(s) has failed

Purpose: To have UI for error handling, when something goes wrong while files are uploading (e.g. timeout, communication problem)

As a staff person
I want to be able to see if there are problems when files are uploaded to FOLIO
So that I can address the problem

Notes:

• This story is a logical addition to the UIDATIMP-37.
• In the scope of this story should be implemented styling for FileItem component, when upload was failed.
• And probably add some feature to restart the upload.

Scenarios

1. Scenario 1
   • Given the File Upload component
   • When there is a problem with the file upload (e.g. timeout or communication problem),
   • Then an error state should be displayed for the file(s) that had problems; see attached 13-Edit page with error files.png
     • Outline the file in red
     • Change text to red
     • Show exclamation point icon and "Error" text, along with brief description of error
     • At right side, have an "x" so that the message can be dismissed [actual behavior of the x is handled in separate story - UIDATIMP-72)
     • Note: when the file never makes it to the server and has a UUID assigned, the x dismisses the message, but doesn't have to interact with the server. When a UUID has been assigned by the server, then the x dismisses the message and deletes the file from the server. (See UIDATIMP-72)
2. Scenario 2
   • Given the File Upload component
   • When multiple files are uploaded, and all of them error
   • Then create separate icons and error messages for each file

Note: the User will need to manually re-upload any file that errors
Folijet will not create any re-upload handling; if Stripes Force does that, then we may pull that logic back into the Data Import file upload component.

Per Stephanie: I made two changes in the design as you can see. 1. Cards should have alternating background color. 2. When the list of uploads are within the upload component, a line + the title "Uploads" should be added. [not sure that these matter in our Data Import work, since this seems to relate to files being uploaded to the same screen, instead of switching screens]