Create data import settings page's 4th pane for Action Profile Details

Purpose: To be able to view details for various types of action profiles.

As a staff person
I want to be able to view the details of action profiles and the field mapping and job profiles they are associated with
So that I can understand what actions will be taking on which types of FOLIO records

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

Scenarios

1. Scenario 1
   • Given the Data Import Settings Action profiles 3rd pane
   • When a User clicks a particular action profile in that third pane
   • Then that profile's row should turn grey and a 4th pane should open, showing the action profile details, as shown in the attached ???
   • And the 3rd pane should have a horizontal scroll bar at the bottom, so that the user can see all of the columns of the 3rd pane. As an example, see the horizontal scroll bar in the 2nd pane of Users or Inventory when a detail record is displayed in the 3rd pane.
   • NOTE To allow room for the fourth pane, the third pane results list table format will have less space horizontally on the screen. Ideal solution is that the third pane will change to a static card format or change to the resizable, responsive card format. Based on results of UIDATIMP-161, we will not implement this responsive card design right now, but instead wait for a solution for the central component.
2. Scenario 2
   • Given the action profile details 4th pane
   • When a User views the screen
   • Then it should appear like this
     • Header: [action profile icon] followed by [the name of this particular action profile]
     • Down caret next to name with 3 options (no functionality yet, will be handled in separate stories); see attached 63-Settings Action profiles Action profile details.png
       • Edit, preceded by the pencil icon
       • Duplicate, preceded by the duplicate (2 boxes) icon
       • Delete, preceded by the trashcan icon (even though the mockup doesn't show the trash can)
     • Subheader: Action profile
     • Edit button [text only, no pencil icon] at right of the header (no actions yet, will be handled in a separate story UIDATIMP-149)
     • Action profile's name, in larger font (see wireframe)
     • First accordion header: Summary (not Basic Info, like it shows in the wireframe) [default to open]
       • Standard metadata component showing created when and by, last updated when and by
       • Description [free text field]
     • Second accordion header: Details (not Overview, like it shows in the wireframe) [default to open]
       • Leave this section blank for now [will contain details about the incoming record type and its match field(s), existing FOLIO record type and its match field(s), and how the matching is to be done]. See UIDATIMP-??? for details
     • Third accordion header: Associated field mapping profile which shows a single field mapping profile that this action profile is associated with [default to open]
       • [No Options button; ignore that on the wireframe]
       • [No Search/filter box at the top of the list of field mapping profiles; ignore that on the wireframe]
       • And for each profile
         • First row:
           • [No checkbox; ignore that on the wireframe]
           • The field mapping profile icon followed by the field mapping profile name
           • NOTE: Field mapping profile name will be a hot link - see UIDATIMP-214 for details
         • Second row:
           • TBD - see UIDATIMP-??? for details [just placeholder for now]
           • Tag icon followed by tags; multiple tags are separated by comma [space], e,g. first, second, third
           • Followed by some space, and then the Edit pencil icon followed by most recent update date
           • Followed by some space, and then the User icon followed by most recent updater's name (firstname lastname) and username in parentheses, e.g. John Doe (johndoe)
     • Fourth accordion header: Associated job profiles which shows ALL job profiles that this action profile is associated with [default to closed]
       • Options button to the right (no action yet, will be in a future story - see UIDATIMP-216)
       • Search/filter box at the top of the list of job profiles (no action yet, will be in a future story - see UIDATIMP-217)
       • Checkbox at the top of the list of job profiles, so that all can be selected
       • And for each profile (in card format if possible, like the wireframe, otherwise in table format with horizontal scroll, as described in UIDATIMP-6)
         • First row:
           • Checkbox to the left of each job profile, so that each job profile can be checked/unchecked
           • The job profile icon followed by the job profile name
         • Second row:
           • Tag icon followed by tags; multiple tags are separated by comma [space], e,g. first, second, third
           • Followed by some space, and then the Edit pencil icon followed by most recent update date
         • Third row:
           • User icon followed by most recent updater's name (firstname lastname) and username in parentheses, e.g. John Doe (johndoe)
       • Job profiles should be alphabetical A-Z by job profile name
     • End of record component (icon and wording)
3. Scenario 3
   • Include standard automated testing coverage; add screenshot or other details to confirm test coverage is in place