VAGOV-TEAM-103554: View-form page

[ryguyk]

Description

This PR puts the View-form page in place with a conditional switch between two versions:

1. When the viewing of the form is available
2. When the viewing of the form is unavailable

Eventually, whether viewing of the form is available/unavailable will be tied to whether a staging url is stored in Drupal. Since we do not yet have that field, this PR temporarily implements another dummy check so that we can readily view the page in both states (when the form title is "Form 1", the viewing of the form is available, otherwise it is unavailable).

Note: The copy of these pages is not finalized/approved. This PR is to build out structural concerns. The copy will be updated at a later date.

Closes department-of-veterans-affairs/va.gov-team#103554

Testing done

• Existing tests (controller/libraries/etc.) updated.
• New functional test added for View-form page.
• Manual testing of the entire Form Builder. This PR contains a number of refactors that have wide-reaching scope.

Screenshots

Link to the View-form page

View-form page when form viewing is available

(As noted above, the copy is not final)

View-form page when form viewing is unavailable

(As noted above, the copy is not final)

QA steps

As a Form Builder user:

1. Navigate to /form-builder/home and click on "Build a form".
   • Validate you are taken to /form-builder/form-info.
2. Create a form with Form name "Form 1"
   • Validate that you are taken to /form-builder/{nid} and that the page shows "Form 1" as the subtitle.
3. At the bottom of the page, click on "View form".
   • Validate that you are taken to /form-builder/{nid}/view-form.
   • Validate that the View-form page is in the "available" state.
     • Validate that the current-page breadcrumb reads "View form".
     • Validate that the first paragraph begins "By selecting Launch view...".
     • Validate that a primary button exists whose label reads "Launch view".
     • Validate that a secondary button exists (whose label for now reads "Return".
4. Click on the "Home" breadcrumb.
   • Validate that you are taken back to /form-builder/home.
5. Create or select any other form not named "Form 1".
   • Validate that you are again taken to /form-builder/{nid} and the page reflects this second form.
6. At the bottom of the page, click on "View form".
   • Validate that you are taken to /form-builder/{nid}/view-form.
   • Validate that the View-form page is in the "unavailable" state.
     • Validate that the current-page breadcrumb reads "Form not ready".
     • Validate that the first paragraph begins "It is not possible to view...".
     • Validate that a primary button exists (whose label for now reads "Return").
7. Return to the layout page of the current form by clicking on the form's name in the breadcrumb trail.
   • Validate that you are taken back to to the layout page for the form at /form-builder/{nid}.
8. Continue to click around and test the various pages. This PR contains a number of refactors that affect the majority of the Form Builder UI.
   • Validate navigation works as expected.
   • Validate look-and-feel is as expected.

Definition of Done

• Documentation has been updated, if applicable.
• Tests have been added if necessary.
• Automated tests have passed.
• Code Quality Tests have passed.
• Acceptance Criteria in related issue are met.
• Manual Code Review Approved.
• If there are field changes, front end output has been thoroughly checked.

Select Team for PR review

• CMS Team
• Public websites
• Facilities
• User support
• Accelerated Publishing
• Form Engine

Is this PR blocked by another PR?

• DO NOT MERGE

Does this PR need review from a Product Owner

• Needs PO review

CMS user-facing announcement

Is an announcement needed to let editors know of this change?

• Yes, and it's written in issue ____ and queued for publication.
  • Merge and ping the UX writer so they are ready to publish after deployment
• Yes, but it hasn't yet been written
  • Don't merge yet -- ping the UX writer to write and queue content
• No announcement is needed for this code change.
  • Merge & carry on unburdened by announcements

[github-actions]

Checking composer.lock changes...

[github-actions]

Checking composer.lock changes...

[derekhouck]

"Launch view" button currently redirects the user to the Form Builder "Home" page. I assume this is because we have not yet implemented staging URLs in Drupal so there's no way to redirect users to the correct form right now even if an app exists for it. This is not surprising behavior, but I wanted to document it just for completeness sake.

[derekhouck]

LGTM

[derekhouck]

I appreciate the comment here.

[github-actions]

Checking composer.lock changes...

[va-cms-bot]

Cypress Accessibility Violations

/test-data-assumenda

ID: button-name
Impact: critical
Tags: cat.name-role-value, wcag2a, wcag412, section508, section508.22.a, TTv5, TT6.a, EN-301-549, EN-9.4.1.2, ACT
Description: Ensure buttons have discernible text
Help: Buttons must have discernible text
Nodes:

• HTML: <button class="proofing-element-help" role="tooltip" data-proofing-help-title="About 'Page introduction' field" data-proofing-help="Add an introduction that helps visitors understand if information on the page is relevant to them."> <span aria-hidden="true">i</span> </button>
  Impact: critical
  Target: .field--name-field-intro-text-limited-html > .field__label > .proofing-element-help[role="tooltip"]
  Summary: Fix any of the following:
  Element does not have inner text that is visible to screen readers
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element does not have an implicit (wrapped) <label>
  Element does not have an explicit <label>
  Element's default semantics were not overridden with role="none" or role="presentation"

• HTML: <button class="proofing-element-help" role="tooltip" data-proofing-help-title="About 'Generate a table of contents from major headings' field" data-proofing-help="By checking this box, all h2's below this point on the page will be linked with with anchor links. This helps users navigate content on very long pages. Do not check this box unless there is at least 2 h2's on the page.">
  Impact: critical
  Target: .field--name-field-table-of-contents-boolean > .field__label > .proofing-element-help[role="tooltip"]
  Summary: Fix any of the following:
  Element does not have inner text that is visible to screen readers
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element does not have an implicit (wrapped) <label>
  Element does not have an explicit <label>
  Element's default semantics were not overridden with role="none" or role="presentation"

• HTML: <button class="proofing-element-help" role="tooltip" data-proofing-help-title="About 'Main content' field" data-proofing-help="The main body of the page, which appears below the featured content."> <span aria-hidden="true">i</span> </button>
  Impact: critical
  Target: button[data-proofing-help-title="About 'Main content' field"]
  Summary: Fix any of the following:
  Element does not have inner text that is visible to screen readers
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute
  Element does not have an implicit (wrapped) <label>
  Element does not have an explicit <label>
  Element's default semantics were not overridden with role="none" or role="presentation"