React-ify Find-Form Download Links Across Page Types

[dsasser]

Description

Move to a single react component for Find-A-Form PDF download links. This will reduce errors, complexity, and technical debt.

Veterans have two ways to download their Find-A-Form form assets (PDFs):

• From the Find-A-Form search page results
• From the Find-A-Form detail page

Developer notes:
These two page types contain vastly different code surrounding the download links, despite performing the same activity, which is to display a PDF Guidance modal (or immediately download the asset if javascript is disabled).

The main cause this code differs to the degree that it does is because the pages are assembled differently:

• The find-a-form search page* is a FE owned page which leverages the Lighthouse Forms API to seed react widgets.

• However the detail pages are built as static CMS owned pages during content-build content release, and the download links are not react components. Instead the page leverages traditional DOM link tags, and javascript is used to perform necessary functions by first listening to the download click events.

• Form search page result: https://github.com/department-of-veterans-affairs/vets-website/blob/7e75ac2f212fd90f1a42bf998ea702c20f1c025e/src/applications/static-pages/find-forms/components/SearchResult.jsx#L196

• githubForm detail page download widget: https://github.com/department-of-veterans-affairs/vets-website/tree/main/src/applications/static-pages/find-forms/download-widget

Acceptance Criteria

• Determine whether the Find Forms search results and detail pages can share the same code for the Download VA Form XXX link. If the code can be shared:
  • Implement the changes to do so
  • Update any unit or e2e tests that are affected
  • Run the test plan that comes from this ticket
• If the code cannot be shared between the two pages, document the reasoning in this ticket

[randimays]

@FranECross If we're looking for PW FE work, this could be good to work. I added a points estimate and updated the description a bit. I'm not 100% sure that the two experiences can share the same code so I think this will involve some technical research as well.

[FranECross]

@randimays Thanks, Randi! Do you want this turned into a Spike, with a subsequent (do the work) ticket?

[randimays]

@FranECross I don't think we need to split it up - the research/implementation will go hand-in-hand on this one.

[randimays]

@FranECross The download code is different for form detail pages largely because it checks for validity of the form URL coming from Lighthouse. For some reason, we don't perform these same checks before attempting to download forms from the form search results. Example: if you're on the form detail page for form 10-10m and the Lighthouse URL for the form download is invalid, once you click the Download button, it'll show a pink banner:

Before click

---

After click

---

---

For the form search results, we don't have any handling for invalid URLs, so the experience can be a bit more clunky. The below video what happens locally when I try to download the 10-10m form from both the search results page and the form detail page. I'm not even completely sure what is happening when I try to load the form from the search results page - the browser just dies?

Screen.Recording.2025-02-10.at.8.45.35.AM.mov

Considering there is margin for error in the form URLs in the Lighthouse DB, it would make sense to me that we'd have some sort of handling for a bad form URL on the form search results. We can add this as part of the work for this ticket, but we would need design input before doing so. Thoughts?

[FranECross]

@randimays Thanks so much for spelunking and the explanation. I totally agree with your assessment and path forward, and the need for design input. I wonder if Dave could pop into and out of the ticket to provide insight/input?

[randimays]

Thanks @FranECross - @davidmpickett given the above, does this sound like something you could give quick guidance on, or need a separate ticket to think through?

[davidmpickett]

So the question is basically where to display the error message on the search results listing page? My instinct would be to mirror the behavior on the detail page and have the alert replace the download link. Here's a quick mock up

Is that doable with the technical constraints? Would you need any more specifics from me?

[randimays]

@davidmpickett This seems doable to me. I'll report back if I run into any snags. Thank you!