UI changes for the organization lookup on an Agreement

Scenario 1: User previews the organization accordion of an agreement.
In the agreement preview, display a card for each Organization-Role combination.

• In the card header display:
  1. The organization icon
  2. The organization name in bold. Note this is also a link to the organization record.
  3. A dot to separate the fields
  4. The Role assigned for this agreement.
• In the the card body, display the interfaces for the organization.
  • If the organization has no interfaces display the text "No interfaces found".
    

Scenario 2: User edits an agreement and selects "Add organization to agreement"
The repeating field group is displayed and presented with a header and shaded background as shown in the mockup.

• In the header display:
  1. "Organization [number]".
  2. A trash card icon for removing the field group, which has the tooltip "Remove organization".
• In the body display:
  1. The text as shown in the mockup
  2. The button "Add organization". This opens the organization lookup modal.
     

Scenario 3: User has used the organization lookup modal to select an organization.
A card is displayed as shown in the mockup.

• The card content is the same as described in scenario 1.
• A red button is displayed with the text "Unlink organization". When the user selects this:
  • the card is replaced with the layout described in scenario 2.