USAGOV-1899 Benefits Redirect Modal

[cwacht]

Jira Task

https://cm-jira.usa.gov/browse/USAGOV-1899

Description

This adds a modal block-type for CMS users to create modals for the website.
It includes javascript to check the url for a modal query parameter and display a modal if one with a matching name exists.

Type of Changes

• New Feature
• Bugfix
• Frontend (Twig, Sass, JS)
  • Add screenshot showing what it should look like
• Drupal Config (requires "drush cim")
• New Modules (requires rebuild)
• Documentation
• Infrastructure
  • CMS
  • WAF
  • Egress
  • Tools
• Other

Testing Instructions

• Visit the Content blocks page /admin/content/block
• Click + Add content block
• Select Modal
• Fill in the fields for the modal.
  • Modal ID will be used in the URL query parameter so keep it URL safe
  • Button Text can be anything since this button remains hidden
  • Yes Button Text will be displayed as the button to exit the modal
  • No Button Text should be left blank
  • Make sure you select the correct language for the banner.
• Click Save
• Visit any page of the site and add "?modal=modal_id" to end of the URL
• Confirm that the modal is displayed properly at any screen size
• Confirm that the URL parameter is automatically removed from the URL
• Confirm that you can close the modal
• Confirm that the modal does not reappear when navigating the site (Even with the browser's back button)
• Confirm that a spanish modal will only appear on spanish pages and english only on english pages

Change Requirements

• Requires New Documentation (Link: {})
• Requires New Config
• Requires New Content

Validation Steps

• Test instruction 1
• Test instruction 2
• Test instruction 3

Security Review

• Adds/updates software (including a library or Drupal module)
• Communication with external service
• Changes permissions or workflow
• Requires SSPP updates

Reviewer Reminders

• Reviewed code changes
• Reviewed functionality
• Security review complete or not required

Post PR Approval Instructions

Follow these steps as soon as you merge the new changes.

1. Go to the USAGov Circle CI project.
2. Find the commit of this pull request.
3. Build and deploy the changes.
4. Update the Jira ticket by changing the ticket status to Review in Test and add a comment. State whether the change is already visible on cms-dev.usa.gov and beta-dev.usa.gov, or if the deployment is still in process.

[cwacht]

It would be nice if we could avoid the need to use this div to associate the modal-name with its numerical ID assigned by Drupal's paragraph system.

usagov-2021/web/themes/custom/usagov/templates/region--header-top.html.twig

Lines 37 to 39 in 4ef89d0

	{{ drupal_entity('block_content', modal_id) }}
	{# This div creates an association between the modal's name used in the query string and the numerical ID used by the paragraph component' #}
	<div data-modal-name="{{ modal_data['name']|url_encode }}" data-modal-id="{{ modal_data['id']['target_id'] }}"></div>

As far as I can tell, this would require us to call our modal template directly rather than letting Drupal render the content block entity with Drupal's internally assigned IDs (which currently happens on line 37 above).
I personally have a hard time navigating the data structures to find all the field values to provide them to the template from here:

usagov-2021/web/modules/custom/usa_twig_vars/usa_twig_vars.module

Lines 337 to 340 in 4ef89d0

	$variables['modals'][$modal->id()] = array(
	"name" => $modal->field_modal_id->value,
	"id" => $modal->field_modal[0]->getValue(),
	);

[YaritzaGarcia]

Hello! I'm still reviewing this but since I noticed that it shares a couple of things with the site banner, I wanted to let you know that I changed the way site_banners are added completely because of the cache issues. If this works we should be fine but if you're curious here is the PR: #1769

[akf]

I put a couple of questions in here, and they are just questions. I haven't had as much time as I'd like to look at this!

It worked well for me and I wasn't able to reproduce the problem I described with the original site banner implementation, nor am I seeing the problem where Drupal config sync warns that importing the config will delete the blocks I created. We (three) should probably look into why I'm seeing that issue on her PR and not on this one.

I'm ready to approve this to get it on dev, while we probably do want to follow up and maybe make some additional changes.

[akf]

I think this is ready for review on dev. There are two things I know of that should be in a follow-on:

• Sanitize that modal name after pulling it from the query parameters. I'm thinking that rather than use something like DomPurify, we should just restrict modal names to (letters, numbers, dashes, and underscores).
• Put that same restriction in the form for creating/editing the block
• Default "new revision" to TRUE when saving a block. Actually, don't let people turn that off.

[akf]

Let's sanitize this modalName here. (I think here is better than within "removeUrlParameter." )