[ERM-305] Apply new UX lookup pattern to the attaching of a license to an agreement Created: 29/Apr/19  Updated: 09/Sep/19  Resolved: 09/Sep/19

Status: Closed
Project: ERM Platform
Components: ui-agreements
Affects versions: None
Fix versions: None

Type: Story Priority: P3
Reporter: Gill Osguthorpe Assignee: steve.osguthorpe
Resolution: Done Votes: 0
Labels: erm, ux-consistency
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original estimate: Not Specified

Attachments: PNG File Agreement preview - controlling license card.png     PNG File Edit agreement - completed license card.png     PNG File Empty license card.png     PNG File Unlink license model.png     PNG File screenshot-1.png    
Issue links:
Defines
defines UXPROD-1669 UX improvements for Agreements up to ... Closed
Relates
relates to ERM-439 ERM | Agreements | Width of "Status (... Closed
Sprint: ERM Sprint 71
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 license 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 "License information" accordion. The user selects "Add license to agreement". The repeating field group for adding a license is displayed containing an empty license card, Status field and Note field.

The design shown in this mockup should be applied:

Repeating group header:

  1. Add a title to the repeating license group "License n".
  2. Add the shaded header band used for a repeating group.
  3. In the header display the title "License n" and the trash can.
  4. Add a tooltip to the trash can "Remove license".

Repeating group body:

  1. Add the shaded background for a repeating group body.
  2. In the body display the empty card shown in the wireframe. This includes:
    1. The license icon and heading "License".
    2. The "Add license" button. This is the button "Look-up a license" which needs renaming.
    3. The text "No license added"
    4. Text "Add a license to get started"

Scenario B

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

The design in this mockup should be applied:

  1. The button "Add license" is switched out for the "Unlink license" button.
  2. The card display is updated to show details from the selected license.
  3. The license name is a link to license record.

Scenario C

The user selects "Unlink license".

The license is unlinked, and the display reverts back to the empty license card.

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

Unlink license model.png|thumbnail

Text (please apply bold formatting):

Unlink license [license name].-

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

-Select Confirm unlink license to go ahead.

2. "Preview agreement" pane changes

Scenario D

The user previews an agreement which has a controlling license attached, and opens the "License information" accordion.

The linked controlling license should be displayed in the card format, as shown in the wireframe:

The heading "Controlling license" should be displayed in the card header and not displayed outside of the card.

Note that the subheading "Inactive licenses" should have a heading style applied.

Note that licenses which do not have a status="controlling" are displayed in the tabular format shown in the mockup (i.e. changing the display of non-controlling licenses is out of scope).



 Comments   
Comment by Claudia Malzer [ 28/Aug/19 ]

Gill Osguthorpe Mark said we are not using ConfirmationModal, so the issue should be updated (see Unlink license model.png)
Also the tooltip task can't be solved right know as I understood here:
https://folio-project.slack.com/archives/CAYCU07SN/p1565183811135500

Comment by Jag Goraya [ 28/Aug/19 ]

Gill Osguthorpe has confirmed that no confirmation modal or tooltips are required.

Comment by Gill Osguthorpe [ 05/Sep/19 ]

HI Claudia Malzer. I'm not sure whether I should be QAing this or not but I've had a look and it seems spot on to me. If it's possible to make the Status (this agreement) field the same width as the Role field, to give the Note field more space then this would be great. But it's not a problem to leave as it is.

Comment by Claudia Malzer [ 05/Sep/19 ]

Hi Gill Osguthorpe, if you want to have this changed you should assign the issue to me again and set it to ... whatever you set it to when you require changes. It's no problem to change the width of the field, i would suggest to make it as small as possible i.e. that the heading Status (this agreement) * is not breaking.
I can take care of it on Monday

Comment by Gill Osguthorpe [ 05/Sep/19 ]

Ok, Claudia Malzer, your suggestion sounds good - as small the field heading will allow. Thanks.

Comment by Owen Stephens [ 06/Sep/19 ]

Gill Osguthorpe Claudia Malzer I'm going to pass this issue for release (since the work is done and we can release) and have created a separate bug issue to fix the width

In general when doing QA I'll pass a story for release unless it really doesn't do what it is meant to. Doing it this way, rather than pushing this issue back into dev, makes it easier to manage the sprint turnover on Monday and to know what is in the release.

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