Data import settings page's 4rd pane for Match Profiles: Create Match Profiles Form renderer

Umbrella - will break this into several UI stories, plus link backend stories that are needed

Purpose: To be able to create the details of the match profile

As a staff person
I want to be able to create the details of the match profile
So that I can show the matches that will be taken on new or existing records in various FOLIO apps

NOTE: See attached 20-Match workflow.png for overview of how the details for Create/Edit match profiles will be organized

Story involves taking existing config and renderer and enhance them with

• Add the confirmation modals that react to the config
• Put correctly structured field naming into the renderer
• Add existing validation methods into renderer so that they can be used

Scenarios

1. Scenario 1
   • Given the Data Import Settings Match profiles
   • When a User clicks the New button in the third pane
   • Then the New match profile screen should open
2. Scenario 2
   • Given the New match profile screen
   • When a User views the screen with no edits
   • Then they should see the existing screen (New match profile screen - Current.PNG) plus the following changes
     • The new sticky Cancel/Save bar at the bottom of the screen instead of the Save button at the top right of the screen (see UIDATIMP-238 for details)
     • And the Details section as laid out in Scenario 3
3. Scenario 3
   • Given the Details section of the New match profile screen
   • Create it as displayed in attached 21-New match profile 01.png, 22-New match profile 02.png, and 23-New match profile 03.png
   • NOTES
     • This screen assumes a match profile for MARC bibliographic records. We may need to refine this slightly in the future, when we have more types of records to match from
     • Each of the "which type of existing record" blue bars should be a hot link, with the lines between them as shown on the wireframe. When the user clicks the existing record type, the screen changes as displayed in 22-New match profile 02.png with
       • Incoming MARC header on the left
       • MARC Bib icon and bar below it, to the left of the existing record type it is being compared to in the right column
         • Marc holdings should be MARC holdings (all caps for MARC)
       • "Compare" between the MARC Bib bar and the Existing record bar
       • "You are comparing to this record" message to the right of the existing record type bar
     • Ignore the Match metadata/Match name/Match description section of the wireframe, That's supposed to be above the record type table
     • Match criteria:
     • Incoming MARC record section
       • Field: allow 3 characters alpha and/or numeric
       • In.1: allow 1 character, alpha or numeric
       • In. 2: allow 1 character, alpha or numeric
       • Subfield: allow 1 character, alpha or numeric
     • If the user selects "Use a qualifier"
       • Mark the checkbox, and open an area that looks like 22b-Match Details-Qualifier section.PNG
       • Dropdown values need to be sentence case - added bug UIDATIMP-340 to fix them
         • Dropdown values in the left box (only 1 can be selected)
         • Placeholder text: Select qualifier type
         • Free text in the right box
     • If the user selects "Only compare part of the value"
       • Mark the checkbox, and open an area that looks like 22c-Match Details-Only compare part of the value.PNG with the dropdown choices as shown (only 1 can be selected)
       • Placeholder text: Select comparison type
     • Match criterion section
       • Dropdown box with choices as shown in 22d-Match Details-Match criterion.PNG (only 1 can be selected)
     • Existing [type] record section (separate story: see UIDATIMP-330)
     • Ignore the parentheses, + sign and next match section for now. This will allow for more complex boolean matches in the future (e.g. match on this field and this other). I think this story is plenty complex enough for now!
4. Scenario 4
   • Given the New match profile screen
   • When a user has finished entering details
   • Then the Cancel/Save buttons on the sticky bar should work as detailed in UIDATIMP-238, so that the user can compete their work
5. Scenario 5
   • Given the New match profile screen
   • When a user has unsaved changes and tries to navigate away from the page
   • The display the standard unsaved changes modal with the options to Close without saving or Keep editing
6. Scenario 6
   • Include standard automated testing coverage; add screenshot or other details to confirm test coverage is in place

NOTE: match metadata structure may need some updates. Tell A-M if we need to revisit any sections of it.
NOTE: Additional backend stories required; Oleksii will define and link