✨ Enhance tag handling on forms

[sjd78]

Summary

Enhance tag handling on forms to:

• Display the select list options as "Tag Category Name / Tag Name"
• Sort the options by the display name
• Add a tooltip to the selected tag labels to show the tag's category
• Sort the selected tag labels by the display name

Resolves: https://issues.redhat.com/browse/MTA-1533

Details

Enhance Tag handling on Application form, Tag and Stakeholder handling on Archetype form, and Stakeholder handling on Assessment Wizard

Tag fields will now:

• Show the tag category and tag name together in the select list
• Show the tag category and tag name on the selected label list
• Provide a tooltip on the tag with the name of the tag's tag category
• use a complex object as the form value type and default values: TagItemType
• make sure only Ref values get put in the assessment payload
• use a TagItemType[] provided by a new query for the list of options to work with

Stakeholders and Stakeholder Groups fields will now:

• use Ref as the form value type and default values
• make sure only Ref values get put in the assessment payload
• transform full data objects into items specifically formatted for use by Autocomplete

This uses refactoring in Autocomplete to support keeping a complex id and name object in the form values.

Form value types, default value calculations, and onValidSubmit payload building have been updated as needed. Form values are using complex objects with at least { id, name } data. Default values can push any objects that match the minimum form value complex object type. The payload builds make sure that the form values are converted to exactly a Ref object to satisfy hub's strict data marshaling.

Refactor Autocomplete and HookFormAutocomplete

• Use a complex object for its options and selections props. This allows for a richer experience with the typeahead component, select list, and selected label list.

• Minimize the states in use and to replace useEffect in favor of useMemo.

• An AutocompleteOptionProp allows rendering a name, a separate name in the selected label list, and a tooltip for the selected label.

• Renamed ItemsSelect to HookFormAutocomplete since all it needs to do now is wrap a react-hook-form around an Autocomplete

Update application and archetype rest api functions and queries

• Update api functions createApplication and createArchetype to take as input a New<> payload and return the newly created entity as a result.

• Update query useCreateApplicationMutation to pass the proper values to the onSuccess and onError callbacks.

• Update various fetch queries to return isSuccess so component code can ensure at least 1 successful fetch has happened before rendering data that depends on the fetch results.

• Add query useFetchTagsWithTagItems as a convenience to get a full list of tags with tag category refs, and a TagItemType transform of the tags to be useful for display.

Screen Shots

Manual Tags select list on Application Create:

Manual Tags showing existing selected tags:

Update Archetype form with existing selections for Criteria tags, Archetype Tags, Stakeholder(s) and Stakeholder Group(s) and a mouse hover on a selected criteria tag showing the tooltip:

[gitdallas]

lgtm couple nits

[codecov]

Codecov Report

Attention: 61 lines in your changes are missing coverage. Please review.

Comparison is base (1c5d80c) 40.82% compared to head (4a55766) 40.71%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1519      +/-   ##
==========================================
- Coverage   40.82%   40.71%   -0.11%     
==========================================
  Files         145      145              
  Lines        4576     4588      +12     
  Branches     1073     1076       +3     
==========================================
  Hits         1868     1868              
- Misses       2696     2706      +10     
- Partials       12       14       +2     

Flag	Coverage Δ
client	40.71% <46.95%> (-0.11%)	⬇️
server	∅ <ø> (∅)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files	Coverage Δ
...lient/src/app/components/HookFormPFFields/index.ts	100.00% <100.00%> (ø)
client/src/app/queries/stakeholders.ts	26.31% <100.00%> (ø)
client/src/app/queries/archetypes.ts	23.68% <0.00%> (ø)
client/src/app/queries/applications.ts	32.45% <33.33%> (ø)
client/src/app/api/rest.ts	51.16% <40.00%> (-0.15%)	⬇️
...mponents/HookFormPFFields/HookFormAutocomplete.tsx	72.72% <72.72%> (ø)
...s/components/application-form/application-form.tsx	64.67% <64.28%> (-1.29%)	⬇️
client/src/app/queries/tags.ts	25.84% <56.25%> (+5.57%)	⬆️
client/src/app/components/Autocomplete.tsx	32.11% <36.50%> (+0.77%)	⬆️

... and 1 file with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.