Style more Markdown in email notifications
What does this MR do and why?
Currently, email notifications have minimal styling. The lack of styling makes it difficult to follow conversations where there is quoted text (Markdown >) or inline code (Markdown backtick), and makes it difficult to understand tables (which currently have no borders and minimal padding).
This MR applies part of the main GitLab UI framework to email notifications, making Markdown in email notifications look much more like it does in the GitLab web UI.
Screenshots or screen recordings
|
|
|
|
|---|---|---|
 |
 |
 |
How to set up and validate locally
- Open branch in a development environment
- Create a new issue, or a new comment on an issue, with this Markdown text: test.md
- View the email notification in
/rails/letter_opener/and/rails/mailers/notify/…
Caveats/concerns
-
I haven't tested all types of email notifications, but for those that I have tested (new issue, comment on issue, reassign, change milestone, comment on merge request) I haven't seen any problems. It doesn't affect some emails (e.g. "Reset password instructions" and "sign-in from new location"), which is good since those already have their own styling.— Update: I think I've pretty thoroughly tested many types of email notifications, but I still may have missed some - I've tested the emails in macOS Mail.app, iPhone Mail, Gmail, Yahoo webmail, and Microsoft Outlook/365 webmail. There's a minor problem with label rendering in Gmail and Yahoo webmail, which I'm unsure how to resolve.
- This increases the number of CSS rules evaluated and bundled in emails.
ForUpdate: After some changes suggested by @pslaughter, styled emails are about 2x the size of unstyled emails (instead of the previous 4x).test.md, the email size increases from about 5 KB to about 20 KB (before.html, after.html).
MR acceptance checklist
-
I have evaluated the MR acceptance checklist for this MR.
Closes #335713 (closed)
Related: #215652
/cc @pslaughter @hollyreynolds
Edited by Steve Mokris