Create ProfileTreeComponent

Purpose: To fill in the details of the job profile. Part 1 is adding match profiles

As a staff person importing metadata records
I want to be able to associate the correct match profiles and action profiles with job profiles
So that I can create a complete import profile

NOTE: The entire job profile details are shown in https://drive.google.com/open?id=1qkdghHe02_tnpMmEpVi8pdABhrR4VQqldZudUur1NOg. Only the screens relevant to this story are attached.

Scenarios

1. Scenario 1
   • Given the Overview section of the Job profile Create/Edit screen
   • When there is no associated match or action profile
   • Then display
     • A grey plus sign button
     • Followed by a large blue and white "Click here to get started" message, as shown in 02 Job profile overview Part 1a.PNG [black & white now instead of blue and white, but that's OK]
2. Scenario 2
   • Given the plus sign
   • When the user clicks it
   • Then
     • Hide the "get started" message [mostly, still shows when I mouse over the Plus sign]
     • And display options to pick a match or action profile with their icons, preceded by "Add..." in grey, as shown in 03 Job profile overview Part 1b.PNG
3. Scenario 3
   • Given the match/action profile options
   • When the user clicks to add a Match profile
   • Then open the profile picker component, showing all available Match profiles, as shown in 04 Job profile overview Part 1c.PNG
4. Scenario 4
   • Given the match profile picker component
   • When a user selects a match profile
   • Then
     • Close the profile picker component
     • Add the match profile to the job profile using this one-line format left-to-right (as shown in 05 Job profile overview Part 1d.PNG)
       • Match profile icon
       • "Match profile:"
       • "[name of match profile, from first column of profile picker]"
       • [space] [dot] [space]
       • [match icon and summary of match, from second column of profile picker]
       • vertical line
       • trash can icon
5. Scenario 5
   • Given the newly-added match profile line in the job profile
   • When viewing the job profile
   • Add lines and indentations as shown in 05 Job profile overview Part 1d.PNG
     • With options "For matches" and then "For non-matches"
     • With an additional plus sign icon below each, so that additional profiles can be attached
6. Scenario 6
   • Ensure automated testing coverage for this new code is 80% plus and confirm with screenshot