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

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

As a staff person
I want to be able to view the details of match profiles and the job profiles they are associated with
So that I can understand the incoming FOLIO record types involved as well as the matchpoint details

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 Match profiles 3rd pane
   • When a User clicks a particular match profile in that third pane
   • Then that profile's row should turn grey and a 4th pane should open, showing the match profile details, as shown in the attached 41-Settings Match profiles Match profile details.png
   • 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 match profile details 4th pane
   • When a User views the screen
   • Then it should appear like this
     • Header: [match profile icon] followed by [the name of this particular match profile]
     • Down caret next to name with 3 options (no functionality yet, will be handled in separate stories); see attached 42a-Settings Match profile detail caret options.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: Match profile
     • Edit button [text only, no pencil icon] at right of the header (no actions yet, will be handled in a separate story UIDATIMP-143)
     • Match 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 job profiles which shows ALL job profiles that this match profile is associated with [default to closed]
       • Options button to the right (no action yet, will be in a future story - see UIDATIMP-177)
       • Search/filter box at the top of the list of job profiles (no action yet, will be in a future story - see UIDATIMP-178)
       • 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