Create landing page for Data Import app - DUPLICATE!

Purpose: To have a landing page when opening the Data Import app, showing status of preview, running, and recent imports, and to start importing a new file.

As a staff person
I want to be able to load files to FOLIO
So that I can create and update existing FOLIO records in Source record storage, Inventory, MARCcat, and Acquisitions.

When opening the data import app, the user needs a landing page where they can start the import process. On that landing page, it's also helpful to have some basic information about imports that are in the preview state, currently running imports, and recently run imports

See attached wireframe. There may be a few small wording differences between the scenarios and the wireframes. When there is a difference, follow the wording in the Jira scenario, not the wireframe.

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.
• It may be useful to have a meeting with Filip before beginning work, to discuss any design detail questions. Let A-M know if you want to do that.
• 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.
  Scenarios

1. Scenario 1
   • Given the Data Import app
   • When a User clicks the Data Import app icon in the top menu bar of FOLIO
   • Then the Data Import landing page should be displayed.
   • Note: we do not have an icon for the Data Import app, but we will soon. Just use a placeholder for now.
2. Scenario 2
   • Given the Data Import landing page
   • When displaying the page
   • Then the basic format should be as follows:
     • Header: Standard FOLIO app header bar, with Data Import app on the left,followed by other app icons in the middle/right, additional apps tile, followed by the personal user icon
     • 3 panes, consisting of
     • 1st pane: Jobs (details in a subsequent scenario)
     • 2nd pane: Logs (details in a subsequent scenario)
     • 3rd pane: Import (details in a subsequent scenario)
3. Scenario 3
   • Given the Data Import icon in the landing page header:
   • When left-clicking the Data Import icon or name
   • Then the User should see an button for Settings [no functionality behind the button yet]
   • Note Per Filip: Jeffrey and Frontside have just implemented the logic that you can click on the app icon that in our design shows the menu. That means that when we get to this, we need to merge these two; when implementing, please review with Filip, John Coburn, and Jeffrey Cherewaty, to make sure it works
4. Scenario 4
   • Given the Data Import landing page:
   • When viewing the 1st (left-most) pane
   • Then the User should see this:
     • Pane header of Jobs
     • Button to the right of the pane header saying Manage [no functionality behind the button yet]
     • The top half of the pane has a header of Previews (details in a subsequent scenario)
     • There is a caret to the left of the Previews header, so that section can be collapsed and expanded
     • The bottom half of the pane has a header of Running (details in a subsequent scenario)
     • There is a caret to the left of the Running header, so that section can be collapsed and expanded
5. 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 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)
     • 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.
     • At the end of this section, display an "end of list" icon so the user knows they have reached the end of the Previews list
6. Scenario 6
   • Data elements in the box (preview is ready)
     • Job name [from the job profile], bolded
     • followed by [space] [dash] [space]
     • followed by the Import file name, including its suffix
     • Second line: Import ID [sequential number, assigned when the preview button is pressed]
     • followed by [space] [dash] [space]
     • followed by Triggered by [user name of the user who pressed the Preview button, in firstname lastname order]
     • Third line: Ended running at [time] today (if today) or [date] if prior to today
     • Skip a line
     • Fifth line: Ready for Preview (bolded)
     • "Preview now" button in the bottom right of the box [no functionality behind the button yet]
7. Scenario 7
   • Data elements in the box (preview is running)
     • Job name [from the job profile], bolded
     • followed by [space] [dash] [space]
     • followed by the Import file name, including its suffix
     • Second line: Import ID [sequential number, assigned when the preview button is pressed]
     • followed by [space] [dash] [space]
     • followed by Triggered by [user name of the user who pressed the Preview button, in firstname lastname order]
     • Third line: Began running at [time] today (if today) or [date] if prior to today
     • Skip a line
     • Fifth line: Progress bar
     • followed by Running (bold)
     • followed by [x/y] (bold) where x is the record it's on, and y is the total number of records in the file
     • Note: if this is difficult, perhaps substitute % complete for [x/y]
8. Scenario 8
   • Once preview is complete, the box changes from "Preview is running" format to "Ready for Preview" format and moves to the top of the list
9. Scenario 9
   • Given the Data Import landing page:
   • When viewing jobs in the Running jobs section (bottom half) of the 1st (left-most) pane
   • Then the User should see this:
     • A separate box for each job that is running (details in a subsequent scenario)
     • Boxes should display in reverse chronological order, based on the start run time
     • If necessary, resize the bottom (preview) half of this pane or include a vertical slider to accommodate the Running job list versus the Current preview list above it
     • At the end of this section, display an "end of list" icon so the user knows they have reached the end of the Running job list
10. Scenario 10
    • Data elements in each running job box
      • Job name [from the job profile], bolded
      • followed by [space] [dash] [space]
      • followed by the Import file name, including its suffix
      • Second line: Import ID [sequential number, assigned when the preview button is pressed]
      • followed by [space] [dash] [space]
      • followed by Triggered by [user name who pressed the Run button, in firstname lastname order]
      • Third line: Began running at [time] today (if today) or [date] if prior to today
      • Skip a line
      • Fifth line: Progress bar
      • followed by Running (bold)
      • followed by [x/y] (bold) where x is the record it's on, and y is the total number of records in the file
      • Note: if this is difficult, perhaps substitute % complete for [x/y]
      • Once the run is complete, remove the job from this section. It will then become the top-most line in the log (second pane)
11. Scenario 11
    • Given the Data Import landing page:
    • When viewing the 2nd (center) pane
    • Then the User should see this:
      • Pane header of Logs
      • Button to the right of the pane header saying View all [no functionality behind the button yet]
      • Infinite scroll list of jobs formatted as follows:
        • A row for each of the most recent 25 imports
        • Every other row shaded, to allow for easy viewing; no other coloring for now; may refactor and add colors once we build the real log page
        • Column headers for the rows: Job profile [name of the job profile], then Import ID [sequential number assigned when Import is started], then Ended running [date, time], then Run by [user name who pressed the Run button, in firstname lastname order]
        • List should be sortable ascending and descending by clicking on each column header.
        • Starting (default) sort is reverse chronological order
        • In the future, there will be functionality to click on the row in the log, and go to the detail log for that particular import
12. Scenario 12
    • Given the Data Import landing page:
    • When viewing the 3rd (right-most) pane
    • Then the User should see this:
      • Pane header of Import
      • Large shaded space (see attached wireframe), with the following centered
        • Text: Drop one or more files to start a new data import job, or
        • Browse button, allowing the User to browse to a location to retrieve a file
        • Note: Preference is to allow the user to drag and drop files across the entire screen, not just the 3rd pane. Per Folijet, this will be difficult, given the multiple panes. A-M will flag this as a "nice-to-have" future feature and create a separate story.
    • Note: Once one or more files are retrieved, the user will go to the next screen automatically [which will be a future story]