VACMS-10851 Find Forms code cleanup #34628

randimays · 2025-02-11T22:10:58Z

Are you removing, renaming or moving a folder in this PR?

No, I'm not changing any folders (skip to TeamSites and delete the rest of this section)
Yes, I'm removing, renaming or moving a folder

⚠️ TeamSites ⚠️

Did you change site-wide styles, platform utilities or other infrastructure?

No
Yes, and I used the proxy-rewrite steps to test the injected header scenario

Summary

Our Find Forms application is two-sided. We have the search results page that is essentially a full-page takeover, but still technically a React widget. Then we have the form detail pages that are almost 100% Drupal, the one exception being the "Download VA Form XXX" link on those pages.

The "Download VA Form XXX" link on both a search result and a form detail page functionally do the same thing. When clicked, they show a modal that warns the user to use Adobe Acrobat to view the PDF, and the modal has a link to download the form. Until now, the difference in the technical implementation is largely that the form detail pages ping the form URL with an HTTP HEAD call to ensure its validity (as URLs can be entered incorrectly in the DB, or forms moved, etc.). For some reason, the form search results download links did not do this check. We don't have the paper trail to explain why this gap existed, but because the data for both pages is from the same source (forms DB), the margin for human error is the same. We should check for URL validity on both pages.

This PR consolidates the code for both types of download links (form search results and form detail pages) to align them to the same functionality:

When clicked, make a HTTP HEAD request to validate the form URL (this only happens when the domain of the browser is the same as the domain of the form URL, e.g. prod form URL and prod VA.gov - locally you won't see this check unless you force it via code)
If the HTTP request comes back ok:

open a modal
the modal should show a link to download Adobe Acrobat and a link to download the form

If the HTTP request does not come back ok: show the banner to tell the user to email the forms managers for a copy of the form

In addition to code changes in support of getting both sides of the Find Forms app to use mostly the same code, I did a lot of renaming and culling old code that wasn't being used anymore.

Related issue(s)

department-of-veterans-affairs/va.gov-cms#10851

Testing done & screenshots

1. Searching for forms and clicking download with a failed HTTP request

Note: in order to reproduce this scenario, you will need to change src/applications/static-pages/find-forms/api/index.js -> line 21:

if (formPdfIsValid && isSameOrigin) {

to:

if (formPdfIsValid && true) {

This will produce a CORS error trying to make the network call and then you will be able to see the error banner.

Go to /find-forms
Enter search term (I used 1010)
Turn on your Adswerve (Chrome plugin) to track analytics calls
Kick off the search with your dev console open
Validate that you see the view_search_results analytics event with the correct data:

Note that it is expected that the counts differ across environments because the forms data is not consistent across envs.

Validate that the download button under each search result has the correct text: Download VA Form {form number} (PDF) e.g. for the result for Form 10-1086, the button should say Download VA Form 10-1086 (PDF).
Click download button for a search result (I used 10-1086)
Validate the error banner appears to replace the download button:

Inspect the email the forms managers URL to validate that the form URL is correct:

Click download button for a different search result (I used 10-10M)
Validate the same error banner appears to replace the download button
Inspect the email the forms managers URL to validate the correct URL for this banner
Click one of the pagination numbers at the bottom of the page
Verify that you get the appropriate set of results: e.g. if you clicked page 2, you should get the next 10 search results
Click download button for a search result that does not have its own detail page (the title is not a link; my example is from page 2):

2. Looking at a form detail page and clicking download with a failed HTTP request

Note: in order to reproduce this scenario, you will need to change src/applications/static-pages/find-forms/api/index.js -> line 21:

if (formPdfIsValid && isSameOrigin) {

to:

if (formPdfIsValid && true) {

This will produce a CORS error trying to make the network call and then you will be able to see the error banner.

Go to a form detail page (e.g. /find-forms/about-form-10-1086/)
Validate that the download button has the correct text: Download VA Form {form number} (PDF) e.g. for form 10-1086, the button should say Download VA Form 10-1086 (PDF)
Click the download button
Validate the error banner appears to replace the download button:

Inspect the email the forms managers URL to validate that the form URL is correct:

3. Searching for forms and clicking download with a successful HTTP request (modal appears)

Go to /find-forms
Enter search term (I used 1010)
Search
Validate that the download button under each search result has the correct text: Download VA Form {form number} (PDF) e.g. for the result for Form 10-1086, the button should say Download VA Form 10-1086 (PDF).
Click download button for a search result (I used 10-1086)
The modal should appear with two links: one to get Acrobat Reader, and the other should be the download link with the correct text: Download VA Form {form number} (PDF)
When the modal opens, the close button should be focused
Clicking the download link should lead you to the correct production version of the form. For form 10-1086, this would be https://www.va.gov/vaforms/medical/pdf/vha-10-1086.pdf. It should open in the same tab.
When the modal is closed, the page should re-focus the download button that was originally clicked.

4. Looking at a form detail page and clicking download with a successful HTTP request (modal appears)

Go to a form detail page (e.g. /find-forms/about-form-10-1086/)
Validate that the download button has the correct text: Download VA Form {form number} (PDF) e.g. for form 10-1086, the button should say Download VA Form 10-1086 (PDF)
Click the download button
The modal should appear with two links: one to get Acrobat Reader, and the other should be the download link with the correct text: Download VA Form {form number} (PDF)
When the modal opens, the close button should be focused
Clicking the download link should lead you to the correct production version of the form. For form 10-1086, this would be https://www.va.gov/vaforms/medical/pdf/vha-10-1086.pdf. It should open in the same tab.
When the modal is closed, the page should re-focus the download button that was originally clicked.

randimays · 2025-02-11T22:12:00Z

src/applications/static-pages/find-forms/types/index.js

@@ -1,36 +1,35 @@
 import PropTypes from 'prop-types';


Alphabetized / organized to mirror the structure of the Facility Locator types.

randimays · 2025-02-11T22:13:13Z

src/applications/static-pages/find-forms/reducers/findVAFormsReducer.js

@@ -1,73 +0,0 @@
-import cloneDeep from 'lodash/cloneDeep';


Having a separate file for this code with an index file to import it seemed unnecessary, so I moved this into the index file.

randimays · 2025-02-11T22:13:47Z

src/applications/static-pages/find-forms/download-widget/sentryLogger.js

@@ -1,11 +0,0 @@
-import * as Sentry from '@sentry/browser';


Moved this out of the download-widget folder and into the main app's helpers folder

randimays · 2025-02-11T22:14:44Z

src/applications/static-pages/find-forms/helpers/sentryLogger.js

@@ -0,0 +1,37 @@
+import * as Sentry from '@sentry/browser';


This content was moved in here because now the form detail page and the form search results are both going to check validity of the form URL/PDF before rendering the download modal. If the form is invalid on either page, we need to do Sentry logging.

randimays · 2025-02-11T22:15:09Z

src/applications/static-pages/find-forms/download-widget/DownloadHandler.js

@@ -1,103 +0,0 @@
-import React from 'react';


The download-widget code was simplified down to a single file.

randimays · 2025-02-11T22:15:48Z

src/applications/static-pages/find-forms/download-widget/DownloadPDFModal.jsx

@@ -1,53 +0,0 @@
-import React, { useEffect, useState } from 'react';


The download-widget code was simplified down to a single file, and now the download widget (on the detail page) shares its PDF code with the search results page.

src/applications/static-pages/find-forms/api/index.js

randimays · 2025-02-11T22:37:23Z

src/applications/static-pages/find-forms/actions/index.js

 export const updatePaginationAction = (page = 1, startIndex = 0) => ({
  page,
  startIndex,
  type: UPDATE_PAGINATION,
 });
-


Added some of this code directly into SearchForm and then directly connected that component to the fetchFormsApi call to (mostly) mirror the way the download widget is calling it.

randimays · 2025-02-12T18:44:22Z

src/applications/static-pages/find-forms/api/index.js

-  const mockRequest = options?.mockRequest || false;
+// Form URLs can be entered incorrectly, or the forms themselves can be deleted
+// by forms managers. This guards against sending users to 404 pages
+export const checkFormValidity = async (form, page) => {


This function represents what is now shared functionality between the search results page and the form detail pages. We need to double check that the form URL coming from the forms DB is a valid URL. If it isn't, we show an error banner with messaging on how to contact the forms managers (instead of the download button that shows the modal).

src/applications/static-pages/find-forms/api/index.js

randimays · 2025-02-13T21:19:13Z

src/applications/static-pages/find-forms/components/SearchResult.jsx

@@ -44,7 +47,7 @@ const deriveLanguageTranslation = (lang = 'en', whichNode, formName) => {
    },
    en: {
      goToOnlineTool: `Fill out VA Form ${formName} online`,
-      downloadVaForm: `Download VA Form ${formName}`,
+      downloadVaForm: `Download VA Form ${formName} (PDF)`,


Added (PDF) here to make this consistent with the form detail page (Slack thread).

va-vfs-bot temporarily deployed to master/10851-find-form-code-cleanup/main February 11, 2025 22:11 Inactive

randimays commented Feb 11, 2025

View reviewed changes

github-advanced-security bot found potential problems Feb 11, 2025

View reviewed changes

src/applications/static-pages/find-forms/api/index.js Fixed Show fixed Hide fixed

randimays commented Feb 11, 2025

View reviewed changes

va-vfs-bot temporarily deployed to master/10851-find-form-code-cleanup/main February 12, 2025 16:07 Inactive

randimays changed the title ~~10851 find form code cleanup~~ VACMS-10851 Find Forms code cleanup Feb 12, 2025

va-vfs-bot temporarily deployed to master/10851-find-form-code-cleanup/main February 12, 2025 17:40 Inactive

va-vfs-bot had a problem deploying to master/10851-find-form-code-cleanup/10851-find-form-code-cleanup February 12, 2025 18:43 Error

randimays commented Feb 12, 2025

View reviewed changes

github-advanced-security bot found potential problems Feb 12, 2025

View reviewed changes

src/applications/static-pages/find-forms/api/index.js Fixed Show fixed Hide fixed

va-vfs-bot had a problem deploying to master/10851-find-form-code-cleanup/10851-find-form-code-cleanup February 12, 2025 19:44 Error

randimays force-pushed the 10851-find-form-code-cleanup branch from 3a656fa to 0b98ddf Compare February 12, 2025 19:58

va-vfs-bot had a problem deploying to master/10851-find-form-code-cleanup/10851-find-form-code-cleanup February 12, 2025 19:59 Error

va-vfs-bot temporarily deployed to master/10851-find-form-code-cleanup/main February 13, 2025 17:14 Inactive

randimays commented Feb 13, 2025

View reviewed changes

va-vfs-bot temporarily deployed to master/10851-find-form-code-cleanup/main February 13, 2025 21:19 Inactive

randimays added 8 commits February 14, 2025 06:47

VACMS-10851 Consolidate Find Forms code

3116873

Isolating error handling

7cb68d9

Refactoring modal code, cleanup for search results

fbcb67e

Finishing up consolidating code

8208926

Adding a bit of documentation and fixing async/await issue

5ffd236

Add await to fetchFormsApi call

e7652da

Replace JS method for string safety

e2fbfbd

Revert to isSameOrigin check

6eebbb5

randimays added 4 commits February 14, 2025 06:47

Remove changes to README, update codeowners

9e7da51

Working on cleaning up Cypress tests

81f66ba

Finish adjustments to tests

112ca27

Add tests for API file

8310375

randimays force-pushed the 10851-find-form-code-cleanup branch from d69c1f7 to 8310375 Compare February 14, 2025 14:42

va-vfs-bot deployed to master/10851-find-form-code-cleanup/main February 14, 2025 14:45 View deployment

Add tests for API

3179a73

va-vfs-bot requested a deployment to master/10851-find-form-code-cleanup/main February 14, 2025 15:59 Pending

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

VACMS-10851 Find Forms code cleanup #34628

VACMS-10851 Find Forms code cleanup #34628

randimays commented Feb 11, 2025 •

edited

Loading

randimays Feb 11, 2025

randimays Feb 11, 2025 •

edited

Loading

randimays Feb 11, 2025

randimays Feb 11, 2025

randimays Feb 11, 2025

randimays Feb 11, 2025

randimays Feb 11, 2025

randimays Feb 12, 2025

randimays Feb 13, 2025

		@@ -1,53 +0,0 @@
		import React, { useEffect, useState } from 'react';

VACMS-10851 Find Forms code cleanup #34628

Are you sure you want to change the base?

VACMS-10851 Find Forms code cleanup #34628

Conversation

randimays commented Feb 11, 2025 • edited Loading

Are you removing, renaming or moving a folder in this PR?

⚠️ TeamSites ⚠️

Summary

Related issue(s)

Testing done & screenshots

Choose a reason for hiding this comment

randimays Feb 11, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

randimays commented Feb 11, 2025 •

edited

Loading

randimays Feb 11, 2025 •

edited

Loading