Slack attachment in email notifications (#20946)

* First POC * Added author data and markdown support * WIP * styled fields * WIP * WIP * IMplementation done * Updated template * fixed mjml compilation error * removed card.mjml * Added test * Updated a styling * Updated a styling * CI * Updated generated templates * Explicitelly specified font for message attachments * Lint fix * Removed leftover existances of slack attachment
2022-10-20 11:05:22 +05:30
--- a/templates/partials/card.mjml
+++ b/templates/partials/card.mjml
@@ -1,42 +0,0 @@
-<mj-section css-class="messageCard" padding="0px">
-  <mj-group>
-    <mj-column css-class="messageAvatarCol">
-      <mj-image css-class="messageAvatar" src="cid:{{.SenderPhoto}}" padding="0px" />
-    </mj-column>
-    <mj-column css-class="senderInfoCol" width=90% >
-      <mj-raw>
-        <tr>
-          <td>
-            <div class="postNameAndTime">
-              <div class="senderName">{{.SenderName}}</div>
-              {{if .Time}}
-                <div class="time">{{.Time}}</div>
-              {{end}}
-              {{if .ChannelName}}
-                <div class="channelBg">
-                {{if .ShowChannelIcon}}
-                <div class="channelLogo"><img src="{{$.Props.SiteURL}}/static/images/channel_icon.png" width=10px height=10px></img></div>
-                {{end}}
-                  <div class="channelName">
-                  {{if .OtherChannelMembersCount}}
-                  <span class="gmChannelCount">{{.OtherChannelMembersCount}}</span>
-                  {{end}}
-                  {{.ChannelName}}
-                  </div>
-                </div>
-              {{end}}
-            </div>
-          </td>
-        </tr>
-      </mj-raw>
-      <mj-text css-class="senderMessage" padding="0px">
-        {{.Message}}
-      </mj-text>
-    </mj-column>
-    <mj-column width=100%>
-      <mj-raw>{{if .MessageURL}}</mj-raw>
-        <mj-button href="{{.MessageURL}}" padding="16px 0px 0px 0px" css-class="messageButton">{{$.Props.MessageButton}}</mj-button>
-      <mj-raw>{{end}}</mj-raw>
-    </mj-column>
-  </mj-group>
-</mj-section>
--- a/templates/partials/message_attachment.css
+++ b/templates/partials/message_attachment.css
@@ -0,0 +1,146 @@
+.messageAttachments * {
+    font-family: Open Sans, sans-serif !important;
+}
+
+.messageAttachmentContent {
+    padding: 0px;
+    border: 1px solid rgba(63, 67, 80, 0.16);
+    margin-bottom: 20px;
+    border-radius: 0 4px 4px 0;
+}
+
+.messageAttachmentContent > table, .attachment__body {
+    font-family: Open Sans, sans-serif;
+    text-align: left;
+    font-size: 14px;
+    line-height: 20px;
+    color: #3F4350;
+}
+
+.messageAttachmentContent .attachment__author-icon {
+    width: 14px;
+    height: 14px;
+    margin-right: 5px;
+    border-radius: 50px;
+    vertical-align: middle;
+}
+
+.attachment__author-name {
+    opacity: 0.6;
+}
+
+.messageAttachmentContent p {
+    margin: 0;
+}
+
+.attachment__title {
+    padding: 0;
+    margin: 5px 0;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 18px;
+}
+
+.attachment__image {
+    max-height: 300px;
+    border: 1px solid transparent;
+    margin-bottom: 1em;
+}
+
+
+.attachment__thumb-image {
+    max-width: 100%;
+    max-height: 75px;
+}
+
+.attachment__thumb-container {
+    max-width: 80px;
+    width: max-content;
+}
+
+.attachment__wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    gap: 12px;
+}
+
+.attachment__body {
+    flex: 1;
+}
+
+.messageAttachmentContent > table.attachment__footer-container {
+    color: #a3a3a3;
+    font-size: 12px;
+}
+
+.attachment__footer-icon {
+    width: 16px;
+    height: 16px;
+}
+
+.attachment__footer-container {
+    color: #a3a3a3;
+    font-size: 12px;
+}
+
+.messageAttachment_title {
+    padding-top: 1em;
+    font-weight: 600;
+    margin-bottom: 4px;
+}
+
+.pretext h1 {
+    font-size: 28px;
+    line-height: 32px;
+}
+
+.pretext h2 {
+    font-size: 25px;
+    line-height: 30px;
+}
+
+.pretext h3 {
+    font-size: 22px;
+    line-height: 25px;
+}
+
+.pretext h4 {
+    font-size: 19px;
+    line-height: 24px;
+}
+
+.pretext h5 {
+    font-size: 15px;
+    line-height: 20px;
+}
+
+.pretext h6 {
+    font-size: 1em;
+    line-height: 1.4em;
+}
+
+.pretext > * {
+    margin-bottom: 16px;
+}
+
+.messageAttachments {
+    margin-top: 22px;
+}
+
+.messageAttachments h1, h2, h3, h4, h5, h6 {
+    font-weight: 500;
+}
+
+code {
+    padding: 2px 4px;
+    font-size: 90%;
+    background-color: rgba(63, 67, 80, 0.1);
+    border-radius: 4px;
+}
+
+.messageAttachments a {
+    background-color: unset !important;
+    border: none !important;
+    padding: unset !important;
+}
--- a/templates/partials/message_attachment.html
+++ b/templates/partials/message_attachment.html
@@ -0,0 +1,95 @@
+{{if .MessageAttachments}}
+<div class="messageAttachments">
+    {{range .MessageAttachments}}
+    <div class="messageAttachment" style="vertical-align:top;" width="100%">
+        <div class="pretext" style="font-family: Open Sans, sans-serif; text-align: left; font-size: 14px; line-height: 20px; color: #3F4350; padding: 0px;">
+            {{.Pretext}}
+        </div>
+        <div class="messageAttachmentContent" style="border-left: 4px solid {{.Color}}; padding: 12px;">
+            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top; font-size: 14px" width="100%">
+                <tbody>
+                {{if or .AuthorIcon .AuthorName}}
+                <tr>
+                    <td>
+                        {{if .AuthorLink}}<a href="{{.AuthorLink}}">{{end}}
+                        {{if .AuthorIcon}}<img class="attachment__author-icon" alt="attachment author icon" src="{{.AuthorIcon}}"/>{{end}}
+                        {{if .AuthorName}}<span class="attachment__author-name">{{.AuthorName}}</span>{{end}}
+                        {{if .AuthorLink}}</a>{{end}}
+                    </td>
+                </tr>
+                {{end}}
+                {{if .Title}}
+                <tr>
+                    <td>
+                        <h1 class="attachment__title">
+                            {{if .TitleLink}}<a href="{{.TitleLink}}">{{end}}
+                            {{.Title}}
+                            {{if .Title}}</a>{{end}}
+                        </h1>
+                    </td>
+                </tr>
+                {{end}}
+                </tbody>
+            </table>
+
+            <div class="attachment__wrapper">
+                <div class="attachment__body">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top; font-size: 14px; color: #3F4350;" width="100%">
+                        <tbody>
+                        <tr>
+                            <td vertical-align="middle" class="messageButton">
+                                <div>{{.Text}}</div>
+                            </td>
+                        </tr>
+                        {{if .ImageURL}}
+                        <tr>
+                            <td>
+                                <img class="attachment__image" src="{{.ImageURL}}"/>
+                            </td>
+                        </tr>
+                        {{end}}
+                    </table>
+
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top; font-size: 14px; table-layout: fixed; margin-bottom: 0.7em;" width="100%">
+                        {{range .FieldRows}}
+                        <tr class="messageAttachment_row">
+                            {{ $length := len .Cells }}
+                            {{range .Cells}}
+                            <td
+                                    class="messageAttachment_field"
+                                    {{ if eq $length 1 }}colspan="2"{{end}}
+                            >
+                                <div class="messageAttachment_title">{{.Title}}</div>
+                                <div>{{.Value}}</div>
+                            </td>
+                            {{end}}
+                        </tr>
+                        {{end}}
+                    </table>
+                </div>
+
+                {{if .ThumbURL}}
+                <div class="attachment__thumb-container">
+                    <img class="attachment__thumb-image" src="{{.ThumbURL}}"/>
+                </div>
+                {{end}}
+            </div>
+
+            {{if .Footer}}
+            <table class="attachment__footer-container" border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top; font-size: 14px" width="100%">
+                <tbody>
+                <tr>
+                    <td>
+                        {{if .FooterIcon}}<img class="attachment__footer-icon" src="{{.FooterIcon}}" style="vertical-align: middle;"/>{{end}}
+                        <span style="font-size: 12px;">{{.Footer}}</span>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+            {{end}}
+
+        </div>
+    </div>
+    {{end}}
+</div>
+{{end}}
--- a/templates/partials/message_attachment_styles.mjml
+++ b/templates/partials/message_attachment_styles.mjml
@@ -0,0 +1,5 @@
+<!-- this empty mj attribute tag is required by MJML to compile successfully -->
+<mj-attributes/>
+
+<mj-include type="css" path="message_attachment.css"/>
+<mj-include type="css" css-inline="inline" path="message_attachment.css"/>
--- a/templates/partials/message_avatar_col.mjml
+++ b/templates/partials/message_avatar_col.mjml
@@ -0,0 +1,3 @@
+<mj-column css-class="messageAvatarCol">
+    <mj-image css-class="messageAvatar" src="cid:{{.SenderPhoto}}" padding="0px" />
+</mj-column>
--- a/templates/partials/message_button.mjml
+++ b/templates/partials/message_button.mjml
@@ -0,0 +1,5 @@
+<mj-column width=100%>
+    <mj-raw>{{if .MessageURL}}</mj-raw>
+    <mj-button href="{{.MessageURL}}" padding="16px 0px 0px 0px" css-class="messageButton">{{$.Props.MessageButton}}</mj-button>
+    <mj-raw>{{end}}</mj-raw>
+</mj-column>
--- a/templates/partials/sender_info_col.mjml
+++ b/templates/partials/sender_info_col.mjml
@@ -0,0 +1,30 @@
+<mj-column css-class="senderInfoCol" width=90% >
+    <mj-raw>
+        <tr>
+            <td>
+                <div class="postNameAndTime">
+                    <div class="senderName">{{.SenderName}}</div>
+                    {{if .Time}}
+                    <div class="time">{{.Time}}</div>
+                    {{end}}
+                    {{if .ChannelName}}
+                    <div class="channelBg">
+                        {{if .ShowChannelIcon}}
+                        <div class="channelLogo"><img src="{{$.Props.SiteURL}}/static/images/channel_icon.png" width=10px height=10px></img></div>
+                        {{end}}
+                        <div class="channelName">
+                            {{if .OtherChannelMembersCount}}
+                            <span class="gmChannelCount">{{.OtherChannelMembersCount}}</span>
+                            {{end}}
+                            {{.ChannelName}}
+                        </div>
+                    </div>
+                    {{end}}
+                </div>
+            </td>
+        </tr>
+    </mj-raw>
+    <mj-text css-class="senderMessage" padding="0px">
+        {{.Message}}
+    </mj-text>
+</mj-column>