UIEH-1440: Package Record - Title List Accordion - Improve Visibility of Search Within/Filter/Sort options.

[Dmytro-Melnyshyn]

Description

UI changes:

• replace the magnifying glass with a search box, search options box, and Actions button;
• remove accordion from all filters (they are shown in Actions dropdown);
• show a clear icon next to the filter label if the filter's option is selected;
• badge near Actions button shows hover over text;

Functionality changes:

• submit the search once the Enter keyboard key is hit, and once any filter option is selected;
• move focus to the filter label after hitting the clear icon or to the default option for filters with radio buttons.

Before:

After:

Issues

UIEH-1440

Approach

• create a separate component search-section for a search box, search options, and Actions button;
• the UI version with modal uses accordion for the access type and tags filters, so extract filters without accordion to a separate component to reuse in both the modal and newly created search section. Modal is still in use in other places;
• add the ability to render filters with radio buttons with and without accordion. The hasAccordion prop is used.

Screencasts:

2025-01-09_11h10_55.mp4

Approach

TODOS and Open Questions

Learning

Screenshots

[github-actions]

Jest Unit Test Results

    1 files  ± 0    194 suites  +2   4m 48s ⏱️ -7s
1 103 tests +11  1 100 ✅ +11  3 💤 ±0  0 ❌ ±0 
1 111 runs  +11  1 108 ✅ +11  3 💤 ±0  0 ❌ ±0 

Results for commit bf00856. ± Comparison against base commit fc842b3.

♻️ This comment has been updated with latest results.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
84.6% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[BogdanDenis]

Can we use autoFocus={isChecked} on <RadioButton> instead of this call?

[Dmytro-Melnyshyn]

We need to move the focus after hitting the clear icon, this will happen on page update, and autoFocus is only for page mounting.