Template formatting: Jinja2 integration revision

[kalbfled]

User Story - Business Need

This ticket builds on #198, #199, #213, #234, #236, and #237. At the start of work for this ticket, a parallel implementation for markdown conversion should exist in notifications_utils/template2.py, formatters2.py, and other files, but this newer implementation does not apply any CSS or use Jinja2, which does more than just add CSS. For example, the VA banner image that appears in an e-mail notification is part of a Jinja2 template.

The implementation currently in production for markdown conversion applies inline CSS with Mistune (example) and also using Jinja2 templates (example). Moving all CSS styling to Jinja2 is a more simple, easier to maintain, and less error prone implementation.

Template Formatting Roadmap

• Ticket is understood, and QA has been contacted (if the ticket has a QA label).

User Story(ies)

As a Notify stakeholder,
I want all notifications to have appropriate CSS styling and branding elements
So that we provide a good experience to veterans who receive our notifications.

Additional Info and Resources

The new Jinja2 template should include CSS styling functionally equivalent to the CSS currently used in the Jinja2 template in addition to the custom styling added by the Mistune renders in notifications_utils/formatters.py.

• Jinja2
• ARIA roles

Acceptance Criteria

• All unit tests pass
• The output of notifications_utils/template2.py::render_html_email is functionally equivalent to the encoded HTML and plain text body of an e-mail sent via Portal (Note: More thorough testing of this will be part of Template formatting: migration to new implementation for e-mail #218.)
• The "action_link" CSS class applied to action links via formatters2.py::insert_action_links is defined.
  • The styling matches the legacy inline styling
  • The action link image should use margin-right to insert space between the image and the following text. (The legacy implementation uses a space after the image rather than CSS.)
• This work is added to the sprint review slide deck (key win bullet point and demo slide)

QA Considerations

• QA has reviewed new test cases and concurs that they provide adequate coverage

UPDATE: As discussed with QA, there are no new unit tests for this ticket.

[npmartin-oddball]

@kalbfled Good day! Checking on a few tickets with "Changes Requested" labels and curious if this ticket is in a position to be updated/modified or if we still need to hold.

[kalbfled]

Moved into current sprint by direction of @kbelikova-oddball.

[kalbfled]

For manually testing, this is my HTML content to plug into a Jinja2 template:

<h1>Header 1</h1><p>test test test</p><h2>Header 2</h2><p><a href=""><img class="action_link" src="https://dev-va-gov-assets.s3-us-gov-west-1.amazonaws.com/img/vanotify-action-link.png"/>link text</a></p><h3>Header 3</h3><p><ul><li>A</li><li>B</li></ul></p><h4>Header 4</h4><p><ol><li>C</li><li>D</li></ol></p><h5>Header 5</h5><blockquote><p>test test test</p><ol><li>E</li><li>F</li></ol></blockquote>