Data Import landing page Scenario 5: First Pane Top Half Layout

Purpose: To create the basic layout of the top half of the first pane of the Data Import landing page

Notes:

• This story is only for creating the screen and the in-screen functionality. Any buttons or functionality that leads to different screens will be in a subsequent story.
• Complete list of landing page scenarios and wireframes in UIDATIMP-4
• Review the existing Stripes components and use standard components whenever possible. If a new component is required, design as a standard Stripes component, if you think it will be useful for other screens or dev teams.
• There are a few small wording differences between the scenarios and the wireframe. When there is a difference, follow the wording in the Jira scenario, not the wireframe.

Scenario 5

• Given the Data Import landing page:
• When viewing jobs in the Preview section (top half) of the 1st (left-most) pane
• Then the User should see this:
  • A separate box for each job that is in the process of preparing the preview (details in the subsequent scenario) or the preview is ready to review (details in a subsequent scenario)
  • Boxes representing previews that are ready should display above previews that are still running
  • If multiple jobs are in the same state, they should display in reverse chronological order (so ready to preview most recent ---> ready to preview oldest ---> preview is running most recent ---> preview is running oldest)
  • A-M: Not sure about this. Folio-testing and Folio-snapshot have no preview jobs, so no way to test the order of the cards. Folio-snapshot-stable has 1 ready and 1 in progress, so no way to check the order of the cards within Ready and In progress. Is it possible to add a couple more cards to confirm they displaying in the correct order? Per Sasha, we have a ticket to prepopulate jobs data - MODSOURMAN-26, which will help for demo/review purposes.
  • Previews should remain in this section until they are previewed (which leads to them either being dismissed, re-previewed, or run). There is no expiration for previews.
  • If necessary, resize the top (preview) half of this pane or include a vertical slider to accommodate the current preview list versus the Running job list below it.
  • A-M: There's not really a way for me to manually test this right now. Oleksandr Yehorov, can you confirm there will be a way to scroll down in this top pane if lots of cards in it? Sasha confirmed
  • At the end of this section, display the standard Stripes component with the (end-mark icon and text "End of list") so the user knows they have reached the end of the Previews list
  • On page reload - check the status of existing jobs and render status if need.
  • A-M: Probably OK - There's not really a way for me to manually test this right now.
• See wireframe attached

Relates to BE implementation ticket: MODSOURMAN-4