[ERM-309] Apply new UX lookup pattern to the attaching of a user to an agreement. Created: 29/Apr/19  Updated: 26/Aug/19  Resolved: 26/Aug/19

Status: Closed
Project: ERM Platform
Components: stripes-erm-components, ui-agreements, ui-licenses
Affects versions: None
Fix versions: None

Type: Story Priority: P3
Reporter: Gill Osguthorpe Assignee: Owen Stephens
Resolution: Done Votes: 0
Labels: erm
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original estimate: Not Specified

Attachments: PNG File Agreement preview - Internal contacts.png     PNG File Empty user card.png     PNG File Internal contact with selected user.png     PNG File Unlink user modal.png    
Issue links:
Defines
defines UXPROD-1669 UX improvements for Agreements up to ... Closed
Sprint: ERM Sprint 70
Development Team: Bienenvolk

 Description   

A UX pattern for the looking up of and linking between records in Folio apps has been defined and needs to be be applied to the attaching of a user to an agreement, to ensure a consistent user experience.

The repeating group UX pattern should be applied.

The new Stripes lookup component defined in STCOM-534 Closed should be applied.

1. "Edit agreement" pane changes

Scenario A

The user is editing an agreement and has opened the "Internal contacts" accordion. The user selects "Add internal contact". The repeating field group for adding an internal contact is displayed containing

  1. an empty user card and
  2. the Role field

The design shown in this mockup should be applied:

The repeating group header should have:

  1. A shaded background (as used for a repeating group in FOLIO).
  2. On the left, a title "Internal contact n".
  3. On the right, a gray trash can.
  4. A tooltip on the trash can "Remove internal contact".

The repeating group body should have:

  1. A shaded background (as used for a repeating group in FOLIO).
  2. An empty user card. This includes:
    1. The user icon and heading "User".
    2. The "Add user" button. When selected, the button calls the User lookup modal.
    3. The text "No user added"
    4. Text "Add a user to get started"

Scenario B

The user selects "Add user" which causes the user lookup modal to display. The user selects a user which causes the lookup to close. The Edit Agreement pane is redisplayed, containing the selected user.

The design in this mockup should be applied:

  1. The button "Add user" is switched out for the "Unlink user" button.
  2. The card display is updated to show details from the selected user.

Questions:

  1. What info should we display about the user here?
  2. Should any of the fields link to the user record?
  3. Is use of the card overkill? Do users prefer the simple approach already in use?

Is confirmation of unlinking definitely needed?

Scenario C

The user selects "Unlink user".

The confirmation modal shown in the below mockup should be applied.

Unable to render embedded object: File (Unlink license model.png) not found.

Text (please apply bold formatting):

Unlink user*[last name, first name]*.

The user will be removed from agreement [agreement name].

Select Confirm unlink user to go ahead.

Not sure whether this is needed. Users may be happy with the current display of internal contacts.

2. "Preview agreement" pane changes

Scenario D

The user previews an agreement which has at least one internal contact, and opens the "Internal contacts" accordion.

The user(s) should be displayed in the card format, as shown in the wireframe:


Generated at Fri Feb 09 00:17:32 UTC 2024 using Jira 1001.0.0-SNAPSHOT#100246-sha1:7a5c50119eb0633d306e14180817ddef5e80c75d.