[V1 & 3 Components] Implement available components for Global Search Results

[FranECross]

Status

[2024-07-08] This appears to be unblocked. [2024-05-30] Still blocked by DST ticket in progress Bug - va-search-input suggestion box doesn't close #2795 [2024-05-21] Still blocked by DST ticket in progress Bug - va-search-input suggestion box doesn't close #2795 [2024-05-15] Still blocked by DST ticket in progress Bug - va-search-input suggestion box doesn't close #2795 [2024-05-07] Blocked by DST ticket Bug - va-search-input suggestion box doesn't close #2795

Description

The Design team is releasing a Typography update (sometime in March) which means that the PW team needs to upgrade any of our products where components aren't currently being using, but a V1 or V3 component is available.

If the updates aren't made prior to the Typography update, there's a chance that Veteran-facing issues may occur.

Search results

V3 Component that needs to be adjusted

1. The pagination is already using V3 (it was updated in Jan). However, I noticed a couple things that should be updated to improve this experience:
   • The maxpagelistlength is not formatted properly and is missing the dashes. It should be max-page-list-length
   • Also, the max pages is set to 5, however I think this should be increased to 7 because when you are on page 5 or above, you can only choose "Next" to go to the next page, there isn't an actual page number to choose. If you change this to 7 it will add the number before and after the active page.

Elements that are not using components that should be

1. Link: We should be using the component wherever possible
2. Search Input: We should be using the v3

Info from #17050

User story

AS A PO/PM for Public Websites products I WANT to implement available V1 or V3 components in features & products currently under Public Websites management where components aren't currently being used SO THAT all PW products are in alignment with the current component version AND Veterans and other users have a consistent experience throughout VA.gov tools and information

Engineering notes / background

Analytics considerations

Quality / testing notes

Acceptance criteria

• [x] Links are using V1 component
• [x] Search input is using V3 component
• [x] Pagination is adjusted
• [x] other features display correctly
• [x] verify/review the E2E tests
• [x] check desktop and mobile
• [ ] make sure all instances of <i> are removed with transition to web components
• [ ] a11y review

[jilladams]

Very high gateway latency slowing down ability to work locally on vets-api. Randi has escalated.

[randimays]

End-of-sprint update: This will likely carry over. I believe the work is completed, but I have a bug or two to work out and need to address tests. Plus, CI has been a hurdle so it's unlikely this will get reviewed and merged today.

[randimays]

Update here: this is taking longer than anticipated to upgrade due to the search v3 component. This also requires splitting out the original search component as it is shared in a couple places in the global header.

[randimays]

End-of-sprint update: This ticket involved cleaning up a lot of tech debt in order to convert to v3 cleanly. It's got some tentacles as a result. I believe it's almost finished but it will carry over to next week.

[randimays]

Update: This wrapped up a couple days ago, but we are against some strong headwinds with environments (review instances, Tugboat and ngrok not working). I've asked Chris and Eli to review locally, and we got Laura set up to run code locally so we can power through when the weather is brutal ✊🏻 Hoping this will be able to merge tomorrow.

[randimays]

🛑 We are blocked on merging this due to a search typeahead web component issue (Slack thread for context). A bug has been filed with DST: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2676 so we'll be blocked on merging this (as it does break functionality) until they can release a fix.

[randimays]

Putting into Blocked again. DST made a suggestion about how we could work around our typeahead blocker here: https://dsva.slack.com/archives/C01DBGX4P45/p1712343314348409?thread_ts=1712227557.801769&cid=C01DBGX4P45. In short, the suggestion was to leave the search field empty when entering the search results page with a search term.

This solution (while it may have worked temporarily while they fix the typeahead behavior) is an anti-pattern for how search results traditionally work and would not be a good experience for the user.

We also cannot only apply this behavior this when the page is loaded with a search term (such as when the global header is used to search). Because of the way the page works, the search term would never appear in the input.

We're going to need to wait until DST can address this issue in order to get this merged in.

[randimays]

DST update: their defect ticket (https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2676) will be picked up this coming Thursday at the beginning of their next sprint.

[jilladams]

(FYI: That's in exchange for pushing work on the va-link component out by a sprint, @laflannery )

[randimays]

Added an AC to make sure all instances of <i> are removed when we merge this in.

[randimays]

Confirmed with Alex Taker today that the fix was merged last week, but DST has not done a release yet. Alex said he will make sure they do one tomorrow, which should unblock this ticket.

[randimays]

Moving this ticket to Review/QA. The fix has been released and it seems to be working in my review instance!

[randimays]

Typeahead web component still has issues. I've reported to DST. Moving this back to Blocked.

Slack thread: https://dsva.slack.com/archives/C01DBGX4P45/p1714663661141389?thread_ts=1714054912.852109&cid=C01DBGX4P45