feat(ui-concerto): Improve rendering for relationship values

[mttrbrts]

Summary

This PR improves the formatting for relationship fields to better support relationship URIs (e.g. resource:test.AnAsset#49253). The internal URI format is difficult to understand for a novice user and the current field doesn't enforce the URI format when editing, this can easily lead to mistakes.

Changes

• Relationship fields and relationship array fields now use the new ConcertoRelationship component which understands the relationship URI. This is instead of the ConcertoInput component which is used elsewhere.
• The new ConcertoRelationship component now hides the URI protocol and namespace from the path. The Type is shown in a label, and only the identifier value is editable.
• Also, this PR changes the styling of the array Add and Remove buttons. These buttons also include aria labels to improve accessibility.

Flags

• Because concerto doesn't allow empty identifiers (https://github.com/accordproject/concerto/blob/f2d9942d1bda59797216468404d21e545d4d1e07/packages/concerto-core/lib/model/resourceid.js#L48) and because empty string is falsy in JavaScript, the behavior when you try to delete the last character is a little odd. If the value is empty, we have to fall back to using a non-empty default value (I've chosen resource1).

Screenshots or Video

Author Checklist

• Vital features and changes captured in unit and/or integration tests
• Commits messages follow AP format
• Extend the documentation, if necessary
• Merging to master from fork:branchname
• Manual accessibility test performed
  • Keyboard-only access, including forms
  • Contrast at least WCAG Level A
  • Appropriate labels, alt text, and instructions

[dselman]

1. The right arrow doesn't render on Safari.
2. The event that is getting fired doesn't seem to include the ID for the relationship

[Michael-Grover]

What does the arrow and tag mean? I don't think I've seen this in a form UI before.

What did this UI look like before the change?

[mttrbrts]

What does the arrow and tag mean? I don't think I've seen this in a form UI before.

What did this UI look like before the change?

Previously this just appeared as a standard input field. I'm trying to find a way to distinguish between values and relationships (https://docs.accordproject.org/docs/model-relationships.html).
This is required because without it we end up displaying ugly values in the field, e.g. resource:test.AnAsset#49253 when the only thing that I should be able to change is 49253

In the latest iteration, I've added a popup to give more explanation

[mttrbrts]

1. The right arrow doesn't render on Safari.
2. The event that is getting fired doesn't seem to include the ID for the relationship

I've fixed 2, I believe that this was an instance of bad URI parsing. I'm now using the concerto Relationship.toURI/fromURI functions.

1. Appears to be a preexisting issue related to rollup. I can only replicate in netlify.

[DianaLease]

✨

[jeromesimeon]

As a developer, I really love the arrow and resource syntax under the field. I think it looks very nice.

[jeromesimeon]

LGTM

[jeromesimeon]

The README says to use npm run storybook.. does this do something different?

[mttrbrts]

Yes, this is helpful when developing to have the storybook auto-rebuild when the code changes. The README is correct, but personally I prefer to work like this.