Create UI for File Upload, Part 5: Action when file upload begins

Purpose: To describe the UI/UX actions when a file upload begins

Notes:

• This story covers the behavior needed by the Data Import app. If the File Upload component becomes a general component, other developers may choose to allow different behavior
• 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

Scenario 1

• Given the File Upload portion of the Data Import landing page:
• When a User "drops" the file(s) or selects browsed file(s),
• Then the User should be taken to the "Choose Job Profile" screen"
  • Standard header with Data Import app Icon and Name
  • Three pane layout, with second and third panes blank for now
  • First pane layout
    • Cards for in process uploading and upload completed files, oldest card at the bottom, newest card at the top.
    • End of list icon and text below the last card
    • Vertical scroll bar for the pane when the list of cards exceeds the screen size

Notes

• Card format for In Progress card should follow the styling in UIDATIMP-37
• Card format for Completed cards should follow the styling in UIDATIMP-38, including the delete confirmation modal and toast
• The component should allow for these "In Process and Completed" cards 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 this page.
• This first pane styling may be refined when the second and third panes for this screen are finalized