Create data import settings page 1: page, 1st, and 2nd panes

This is the first story for a new set of Data Import-related screens in the Settings area of FOLIO

Purpose: To be able to create settings for various types of data import-related profiles and file extensions.

As a staff person
I want to be able to create and store settings related to the Data Import app
So that I don't have to create them on-the-fly each time I want to load a file of records.

Notes:

• This story is only for creating the screen and the first two panes. There will be additional stories for creating the individual profiles (for jobs, matches, actions, field mappings, and file extension handling).
• 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.
• Please review the existing Stripes components and Settings screens, and use standard components and consistent behavior whenever possible. If a new component is required, let's discuss and determine whether it should be designed as a standard Stripes component, especially if you think it will be useful for other screens or dev teams.

Live prototype:
https://xd.adobe.com/view/0bb2d8ab-aabd-4ff6-4d5a-faa59a93368e-7d83/

Brief video walk-through
https://www.dropbox.com/s/3slcv4v49qm92rv/2018-11-06-data-import-19.mp4?dl=0

Icons for developers (Job profile, Match profile, Action profile and Field Mapping profile)
https://www.dropbox.com/s/7oyo8lv2ocobb9g/icons-for-developers.zip?dl=0

Scenarios

1. Scenario 1 [already done]
   • Given the Settings app
   • When a User clicks the Settings app icon in the top menu bar of FOLIO
   • Then the Settings landing page should be displayed.
2. Scenario 2 [already done]
   • Given the Settings Landing page
   • When displaying the page
   • Then the basic format of the top and first pane should be as follows, as shown in attachment 01-Settings.png
     • Header: Standard FOLIO app header bar, with Settings app on the left, followed by other app icons in the middle/right, additional apps tile, followed by the personal user icon
     • First pane, consisting of the list of available settings, with System Information at the bottom.
     • Notes:
       • The list of settings are supposed to be in alphabetical order. That is being addressed in UXPROD-1364
       • Filip has included the app icon in the list (see 01-Settings.png, attached), but we will only use text for now. The icon will be added in a later story (UIDATIMP-62).
3. Scenario 3
   • Given the Settings landing page
   • When the user clicks the Data Import setting,
   • Then a second pane should display as follows, as shown in attachment 03-Settings Data Import.png
     • Pane header: [data import icon] followed by Data Import
     • Header: Profiles, followed by an "information" icon [see Scenario 4 for button action]
     • [purple job icon] followed by Job profiles [will open a third pane when clicked, but that's in a future story]
     • [green match icon] followed by Match profiles [will open a third pane when clicked, but that's in a future story]
     • [yellow action icon] followed by Action profiles [will open a third pane when clicked, but that's in a future story]
     • [pink field mapping icon] followed by Field mapping profiles [will open a third pane when clicked, but that's in a future story]
     • Skip a line
     • Header: Other
     • File extensions [will open a third pane when clicked, but that's in a future story]
4. Scenario 4
   • Given the Import Settings second pane
   • When the user clicks the Information icon,
   • Then a pop-up should display with the text and "Learn more" button, as displayed in attachment 02-Settings Data Import Profiles Info button.png
   • See https://ux.folio.org/docs/guidelines/components/info-popover/ for Stripes info pop-over details
5. Scenario 5
   • Given the Information pop-up
   • When the user clicks anywhere outside the pop-up or anywhere inside the pop-up except the "Learn more" button , the pop-up should disappear.
6. Scenario 6
   • Given the Information pop-up
   • When the user clicks the "Learn more" button
   • Then a new browser window should open with the following link: https://wiki.folio.org/display/FOLIOtips/Creating+and+using+profiles
7. Scenario 7 (??) see comment/question below; requires update to stripes component; moved to UIDATIMP-71 so that we could close this story
   • Given the "Learn more" browser window
   • When the user closes that browser window
   • Then they should be returned to the Data Import Settings browser window they were previously on