Skip to content

Correct Slack notification URLs and add manual trigger test file#2334

Open
neilv-g wants to merge 1 commit intoslack-webhook-6from
slack-webhook-7
Open

Correct Slack notification URLs and add manual trigger test file#2334
neilv-g wants to merge 1 commit intoslack-webhook-6from
slack-webhook-7

Conversation

@neilv-g
Copy link
Collaborator

@neilv-g neilv-g commented Mar 12, 2026

No description provided.

@neilv-g neilv-g requested a review from jcscottiii March 12, 2026 00:58
@neilv-g neilv-g force-pushed the slack-webhook-7 branch 2 times, most recently from 6a48027 to dabb3ba Compare March 12, 2026 11:51
jcscottiii
jcscottiii approved these changes Mar 12, 2026
View reviewed changes
Copy link
Collaborator

@jcscottiii jcscottiii left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Thanks for catching that!

Added one comment about the next steps to enrich the experience which can happen in a follow up.

workers/webhook/pkg/webhook/slack.go
Comment on lines -60 to +70
// Default search results page
resultsURL := fmt.Sprintf("%s/features?q=%s", s.frontendBaseURL, url.QueryEscape(query))
var resultsURL string
if strings.HasPrefix(query, "id:\"") && strings.HasSuffix(query, "\"") {
featureKey := strings.TrimSuffix(strings.TrimPrefix(query, "id:\""), "\"")
resultsURL = fmt.Sprintf("%s/features/%s", s.frontendBaseURL, featureKey)
} else {
// 2. Default search results page (at the root)
resultsURL = fmt.Sprintf("%s/?q=%s", s.frontendBaseURL, url.QueryEscape(query))
}
Copy link
Collaborator

@jcscottiii jcscottiii Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the purposes of utilizing the text field in the payload, this is good. But long term, we will want to leverage slack's Block kit to provide rich webhooks. They have a previewable editor. And I asked Gemini to convert our email template to block kit format with this prompt:

Prompt I'm thinking of converting this mock email notification into using slack's block text format for webhooks. Can you do that for me so I can paste it into the block kit builder. One thing to note. Change any usage of http://localhost:5555 for images to https://webstatus.dev so that assets are publicly reachable to demo 
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Weekly digest: My CSS Search</title>
</head>
<body style='font-family: SF Pro, system-ui, sans-serif;; line-height: 1.5; color: #333; margin: 0; padding: 0;'>
    <div style='max-width: 600px; margin: 0 auto; padding: 20px;'><div style='width: auto; padding: 16px; background: #F4F4F5; border-radius: 4px; display: block; margin-bottom: 4px;'>
    <h2 style='color: #18181B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; line-height: 21px; word-wrap: break-word;; margin-top: 0; margin-bottom: 0; padding-bottom: 8px; font-weight: 700; font-size: 18px;'>Weekly digest: My CSS Search</h2>
    <div style='color: #18181B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; line-height: 21px; word-wrap: break-word;; margin-top: 0; margin-bottom: 0; align-self: stretch;'>
        Here is your update for the saved search <strong style='font-weight: bold;'>'My CSS Search'</strong>.
        11 features changed.
    </div>
</div><div style='width: 100%; padding-top: 8px; padding-bottom: 8px; display: block;'><div style='width: auto; height: 50px; padding-top: 12px; padding-bottom: 11px; padding-left: 15px; padding-right: 16px; overflow: hidden; border-top-left-radius: 4px; border-top-right-radius: 4px; display: block; margin-bottom: 0;background: #E8F0FE;'>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
        <tr>
            <td width="36" align="left" valign="middle">
                <img src="http://localhost:5555/public/img/email/newly.png" height="28" alt="Newly Available" style='display: block; width: auto;' />
            </td>
            <td align="left" valign="middle">
                <span style='color: #18181B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 700;; word-wrap: break-word;'>Baseline</span>
                <span style='color: #18181B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word;'> Newly available </span>
            </td>
        </tr>
    </table>
</div><div style='width: auto; padding-top: 12px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; overflow: hidden; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid #E4E4E7; border-right: 1px solid #E4E4E7; border-bottom: 1px solid #E4E4E7; display: block; background: #FFFFFF; margin-top: 0;'><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
    <tr>
        <td align="left" valign="top">
            <a href="http://localhost:5555/features/newly-feature" style='color: #18181B;; font-size: 16px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; text-decoration: underline; line-height: 30.40px; word-wrap: break-word;'>Newly Available Feature</a></td><td align="right" valign="top" style="white-space: nowrap; padding-left: 10px;">
            <div style='color: #52525B;; font-size: 12px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word; display: inline-block; margin-left: 10px;'>2025-01-01</div>
        </td></tr>
</table></div></div><div style='width: 100%; padding-top: 8px; padding-bottom: 8px; display: block;'><div style='width: auto; height: 50px; padding-top: 12px; padding-bottom: 11px; padding-left: 15px; padding-right: 16px; overflow: hidden; border-top-left-radius: 4px; border-top-right-radius: 4px; display: block; margin-bottom: 0;background: #E6F4EA;'>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
        <tr>
            <td width="36" align="left" valign="middle">
                <img src="http://localhost:5555/public/img/email/widely.png" height="28" alt="Widely Available" style='display: block; width: auto;' />
            </td>
            <td align="left" valign="middle">
                <span style='color: #18181B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 700;; word-wrap: break-word;'>Baseline</span>
                <span style='color: #18181B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word;'> Widely available </span>
            </td>
        </tr>
    </table>
</div><div style='width: auto; padding-top: 12px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; overflow: hidden; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid #E4E4E7; border-right: 1px solid #E4E4E7; border-bottom: 1px solid #E4E4E7; display: block; background: #FFFFFF; margin-top: 0;'><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
    <tr>
        <td align="left" valign="top">
            <a href="http://localhost:5555/features/container-queries" style='color: #18181B;; font-size: 16px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; text-decoration: underline; line-height: 30.40px; word-wrap: break-word;'>Container queries</a><span style='color: #52525B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; line-height: 26.60px;'> (</span><a href="https://developer.mozilla.org/docs/Web/CSS/CSS_Container_Queries" style='color: #52525B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; text-decoration: underline; line-height: 26.60px;'>MDN</a>, <a href="https://developer.mozilla.org/docs/Web/CSS/container-queries" style='color: #52525B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; text-decoration: underline; line-height: 26.60px;'>MDN</a><span style='color: #52525B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; line-height: 26.60px;'>)</span></td><td align="right" valign="top" style="white-space: nowrap; padding-left: 10px;">
            <div style='color: #52525B;; font-size: 12px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word; display: inline-block; margin-left: 10px;'>2025-12-27</div>
        </td></tr>
</table></div></div><div style='width: 100%; padding-top: 8px; padding-bottom: 8px; display: block;'><div style='width: auto; height: 50px; padding-top: 12px; padding-bottom: 11px; padding-left: 15px; padding-right: 16px; overflow: hidden; border-top-left-radius: 4px; border-top-right-radius: 4px; display: block; margin-bottom: 0;background: #E4E4E7;'>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
        <tr>
            <td width="36" align="left" valign="middle">
                <img src="http://localhost:5555/public/img/email/limited.png" height="28" alt="Regressed" style='display: block; width: auto;' />
            </td>
            <td align="left" valign="middle">
                <span style='color: #18181B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 700;; word-wrap: break-word;'>Regressed</span>
                <span style='color: #18181B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word;'> to limited availability</span>
            </td>
        </tr>
    </table>
</div><div style='width: auto; padding-top: 12px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; overflow: hidden; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid #E4E4E7; border-right: 1px solid #E4E4E7; border-bottom: 1px solid #E4E4E7; display: block; background: #FFFFFF; margin-top: 0;'><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
    <tr>
        <td align="left" valign="top">
            <a href="http://localhost:5555/features/regressed-feature" style='color: #18181B;; font-size: 16px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; text-decoration: underline; line-height: 30.40px; word-wrap: break-word;'>Regressed Feature</a></td></tr>
</table><div style='width: 100%; display: block; margin-top: 4px;'>
                        <div style='display: block;'>
                            <span style='color: #52525B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; line-height: 26.60px; word-wrap: break-word;'>From Widely</span>
                        </div>
                    </div></div><div style='width: auto; padding-top: 12px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; overflow: hidden; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid #E4E4E7; border-right: 1px solid #E4E4E7; border-bottom: 1px solid #E4E4E7; display: block; background: #FFFFFF; margin-top: 0;'><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
    <tr>
        <td align="left" valign="top">
            <a href="http://localhost:5555/features/removed-details" style='color: #18181B;; font-size: 16px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; text-decoration: underline; line-height: 30.40px; word-wrap: break-word;'>Removed With Details</a></td></tr>
</table><div style='width: 100%; display: block; margin-top: 4px;'>
                        <div style='display: block;'>
                            <span style='color: #52525B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; line-height: 26.60px; word-wrap: break-word;'>From Newly</span>
                        </div>
                    </div><div style='color: #52525B;; font-size: 12px;font-family: SF Pro, system-ui, sans-serif;; font-style: italic; margin-top: 4px; display: block;'>⚠️ This feature no longer matches your saved search. Please update your saved search if you wish to continue tracking it.</div></div></div><div style='width: 100%; padding-top: 8px; padding-bottom: 8px; display: block;'><div style='width: auto; height: 50px; padding-top: 12px; padding-bottom: 11px; padding-left: 15px; padding-right: 16px; overflow: hidden; border-top-left-radius: 4px; border-top-right-radius: 4px; display: block; margin-bottom: 0;background: #E4E4E7;'>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
        <tr>
            <td width="28" align="left" valign="middle">
                 <img src="http://localhost:5555/public/img/email/chrome.png" height="20" style='display: block; width: auto;' />
            </td>
            <td width="28" align="left" valign="middle">
                 <img src="http://localhost:5555/public/img/email/edge.png" height="20" style='display: block; width: auto;' />
            </td>
            <td width="28" align="left" valign="middle">
                 <img src="http://localhost:5555/public/img/email/firefox.png" height="20" style='display: block; width: auto;' />
            </td>
            <td width="28" align="left" valign="middle">
                 <img src="http://localhost:5555/public/img/email/safari.png" height="20" style='display: block; width: auto;' />
            </td>
            <td align="left" valign="middle" style="padding-left: 8px;">
                 <span style='color: #18181B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word;'>Browser support changed</span>
            </td>
        </tr>
    </table>
</div><div style='width: auto; padding-top: 12px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; overflow: hidden; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid #E4E4E7; border-right: 1px solid #E4E4E7; border-bottom: 1px solid #E4E4E7; display: block; background: #FFFFFF; margin-top: 0;'><div style='width: 100%; display: block;'>
        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            <tr>
                <td align="left" valign="middle" style="padding-right: 10px; width: 20px;">
                    <img src="http://localhost:5555/public/img/email/chrome.png" height="20" alt="Chrome" style='display: block; width: auto;' />
                </td>
                <td align="left" valign="middle">
                    <div style='color: #18181B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word; display: inline-block; vertical-align: middle;'>
                        Chrome: Available<span style='color: #52525B;'> in 120</span> &rarr; Unavailable</div>
                </td></tr>
        </table>
    </div><div style='width: 100%; display: block; margin-top: 8px;'>
            <div style='display: inline-block; vertical-align: middle;'>
                <a href="http://localhost:5555/features/regressed-feature" style='color: #18181B;; font-size: 16px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; text-decoration: underline; line-height: 30.40px; word-wrap: break-word;'>Regressed Feature</a>
            </div>
        </div></div><div style='width: auto; padding-top: 12px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; overflow: hidden; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid #E4E4E7; border-right: 1px solid #E4E4E7; border-bottom: 1px solid #E4E4E7; display: block; background: #FFFFFF; margin-top: 0;'><div style='width: 100%; display: block;'>
        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            <tr>
                <td align="left" valign="middle" style="padding-right: 10px; width: 20px;">
                    <img src="http://localhost:5555/public/img/email/safari.png" height="20" alt="Safari iOS" style='display: block; width: auto;' />
                </td>
                <td align="left" valign="middle">
                    <div style='color: #18181B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word; display: inline-block; vertical-align: middle;'>
                        Safari iOS: <span style='color: #52525B;'>Became available in 17.2</span></div>
                </td></tr>
        </table>
    </div><div style='width: 100%; display: block; margin-top: 8px;'>
            <div style='display: inline-block; vertical-align: middle;'>
                <a href="http://localhost:5555/features/content-visibility" style='color: #18181B;; font-size: 16px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; text-decoration: underline; line-height: 30.40px; word-wrap: break-word;'>content-visibility</a>
            </div>
        </div></div><div style='width: auto; padding-top: 12px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; overflow: hidden; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid #E4E4E7; border-right: 1px solid #E4E4E7; border-bottom: 1px solid #E4E4E7; display: block; background: #FFFFFF; margin-top: 0;'><div style='width: 100%; display: block;'>
        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            <tr>
                <td align="left" valign="middle" style="padding-right: 10px; width: 20px;">
                    <img src="http://localhost:5555/public/img/email/chrome.png" height="20" alt="Chrome" style='display: block; width: auto;' />
                </td>
                <td align="left" valign="middle">
                    <div style='color: #18181B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word; display: inline-block; vertical-align: middle;'>
                        Chrome: <span style='color: #52525B;'>Became available</span></div>
                </td><td align="right" valign="middle" style="white-space: nowrap; padding-left: 10px;">
                    <div style='color: #52525B;; font-size: 12px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word; display: inline-block; margin-left: 10px;'>2025-01-01</div>
                </td></tr>
        </table>
    </div><div style='width: 100%; display: block; margin-top: 8px;'>
            <div style='display: inline-block; vertical-align: middle;'>
                <a href="http://localhost:5555/features/another-feature" style='color: #18181B;; font-size: 16px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; text-decoration: underline; line-height: 30.40px; word-wrap: break-word;'>another-feature</a>
            </div>
        </div></div><div style='width: auto; padding-top: 12px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; overflow: hidden; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid #E4E4E7; border-right: 1px solid #E4E4E7; border-bottom: 1px solid #E4E4E7; display: block; background: #FFFFFF; margin-top: 0;'><div style='width: 100%; display: block;'>
        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            <tr>
                <td align="left" valign="middle" style="padding-right: 10px; width: 20px;">
                    <img src="http://localhost:5555/public/img/email/firefox.png" height="20" alt="Firefox" style='display: block; width: auto;' />
                </td>
                <td align="left" valign="middle">
                    <div style='color: #18181B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word; display: inline-block; vertical-align: middle;'>
                        Firefox: <span style='color: #52525B;'>Became available in 123</span></div>
                </td><td align="right" valign="middle" style="white-space: nowrap; padding-left: 10px;">
                    <div style='color: #52525B;; font-size: 12px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word; display: inline-block; margin-left: 10px;'>2025-01-01</div>
                </td></tr>
        </table>
    </div><div style='width: 100%; display: block; margin-top: 8px;'>
            <div style='display: inline-block; vertical-align: middle;'>
                <a href="http://localhost:5555/features/new-browser-feature" style='color: #18181B;; font-size: 16px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; text-decoration: underline; line-height: 30.40px; word-wrap: break-word;'>new-browser-feature</a>
            </div>
        </div></div><div style='width: auto; padding-top: 12px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; overflow: hidden; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid #E4E4E7; border-right: 1px solid #E4E4E7; border-bottom: 1px solid #E4E4E7; display: block; background: #FFFFFF; margin-top: 0;'><div style='width: 100%; display: block;'>
        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            <tr>
                <td align="left" valign="middle" style="padding-right: 10px; width: 20px;">
                    <img src="http://localhost:5555/public/img/email/chrome.png" height="20" alt="Chrome" style='display: block; width: auto;' />
                </td>
                <td align="left" valign="middle">
                    <div style='color: #18181B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word; display: inline-block; vertical-align: middle;'>
                        Chrome: Available<span style='color: #52525B;'> in 110</span> &rarr; Unavailable</div>
                </td></tr>
        </table>
    </div><div style='width: 100%; display: block; margin-top: 8px;'>
            <div style='display: inline-block; vertical-align: middle;'>
                <a href="http://localhost:5555/features/removed-details" style='color: #18181B;; font-size: 16px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; text-decoration: underline; line-height: 30.40px; word-wrap: break-word;'>Removed With Details</a>
            </div>
        </div><div style='color: #52525B;; font-size: 12px;font-family: SF Pro, system-ui, sans-serif;; font-style: italic; margin-top: 4px; display: block;'>⚠️ This feature no longer matches your saved search. Please update your saved search if you wish to continue tracking it.</div></div><div style='width: auto; padding-top: 12px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; overflow: hidden; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid #E4E4E7; border-right: 1px solid #E4E4E7; border-bottom: 1px solid #E4E4E7; display: block; background: #FFFFFF; margin-top: 0;'><div style='width: 100%; display: block;'>
        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            <tr>
                <td align="left" valign="middle" style="padding-right: 10px; width: 20px;">
                    <img src="http://localhost:5555/public/img/email/chrome.png" height="20" alt="Chrome Desktop &amp; Android" style='display: block; width: auto;' />
                </td>
                <td align="left" valign="middle">
                    <div style='color: #18181B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word; display: inline-block; vertical-align: middle;'>
                        Chrome Desktop &amp; Android: <span style='color: #52525B;'>Became available in 148</span></div>
                </td><td align="right" valign="middle" style="white-space: nowrap; padding-left: 10px;">
                    <div style='color: #52525B;; font-size: 12px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word; display: inline-block; margin-left: 10px;'>2025-01-01</div>
                </td></tr>
        </table>
    </div><div style='width: 100%; display: block; margin-top: 8px;'>
            <div style='display: inline-block; vertical-align: middle;'>
                <a href="http://localhost:5555/features/grouped-browser-feature" style='color: #18181B;; font-size: 16px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; text-decoration: underline; line-height: 30.40px; word-wrap: break-word;'>grouped-browser-feature</a>
            </div>
        </div></div><div style='width: auto; padding-top: 12px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; overflow: hidden; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid #E4E4E7; border-right: 1px solid #E4E4E7; border-bottom: 1px solid #E4E4E7; display: block; background: #FFFFFF; margin-top: 0;'><div style='width: 100%; display: block;'>
        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            <tr>
                <td align="left" valign="middle" style="padding-right: 10px; width: 20px;">
                    <img src="http://localhost:5555/public/img/email/safari.png" height="20" alt="Safari" style='display: block; width: auto;' />
                </td>
                <td align="left" valign="middle">
                    <div style='color: #18181B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word; display: inline-block; vertical-align: middle;'>
                        Safari: <span style='color: #52525B;'>Became available in 17.0</span></div>
                </td><td align="right" valign="middle" style="white-space: nowrap; padding-left: 10px;">
                    <div style='color: #52525B;; font-size: 12px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word; display: inline-block; margin-left: 10px;'>2025-01-01</div>
                </td></tr>
        </table>
    </div><div style='width: 100%; display: block; margin-top: 8px;'>
            <div style='display: inline-block; vertical-align: middle;'>
                <a href="http://localhost:5555/features/ungrouped-browser-feature" style='color: #18181B;; font-size: 16px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; text-decoration: underline; line-height: 30.40px; word-wrap: break-word;'>ungrouped-browser-feature</a>
            </div>
        </div></div><div style='width: auto; padding-top: 12px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; overflow: hidden; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid #E4E4E7; border-right: 1px solid #E4E4E7; border-bottom: 1px solid #E4E4E7; display: block; background: #FFFFFF; margin-top: 0;'><div style='width: 100%; display: block;'>
        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
            <tr>
                <td align="left" valign="middle" style="padding-right: 10px; width: 20px;">
                    <img src="http://localhost:5555/public/img/email/safari.png" height="20" alt="Safari iOS" style='display: block; width: auto;' />
                </td>
                <td align="left" valign="middle">
                    <div style='color: #18181B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word; display: inline-block; vertical-align: middle;'>
                        Safari iOS: <span style='color: #52525B;'>Became available in 17.2</span></div>
                </td><td align="right" valign="middle" style="white-space: nowrap; padding-left: 10px;">
                    <div style='color: #52525B;; font-size: 12px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word; display: inline-block; margin-left: 10px;'>2025-01-01</div>
                </td></tr>
        </table>
    </div><div style='width: 100%; display: block; margin-top: 8px;'>
            <div style='display: inline-block; vertical-align: middle;'>
                <a href="http://localhost:5555/features/ungrouped-browser-feature" style='color: #18181B;; font-size: 16px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; text-decoration: underline; line-height: 30.40px; word-wrap: break-word;'>ungrouped-browser-feature</a>
            </div>
        </div></div></div><div style='width: 100%; padding-top: 8px; padding-bottom: 8px; display: block;'><div style='width: auto; padding-top: 12px; padding-bottom: 11px; padding-left: 15px; padding-right: 16px; overflow: hidden; border-top-left-radius: 4px; border-top-right-radius: 4px; display: block; margin-bottom: 0;; background:#E6F4EA;'>
    <div style='display: block;'>
        <div style='color: #18181B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 700;; word-wrap: break-word;'>Added</div><div style='color: #52525B;; font-size: 12px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word;'>These features now match your search criteria.</div></div>
</div><div style='width: auto; padding-top: 12px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; overflow: hidden; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid #E4E4E7; border-right: 1px solid #E4E4E7; border-bottom: 1px solid #E4E4E7; display: block; background: #FFFFFF; margin-top: 0;'><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
    <tr>
        <td align="left" valign="top">
            <a href="http://localhost:5555/features/new-feature" style='color: #18181B;; font-size: 16px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; text-decoration: underline; line-height: 30.40px; word-wrap: break-word;'>New Feature</a></td></tr>
</table></div><div style='width: auto; padding-top: 12px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; overflow: hidden; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid #E4E4E7; border-right: 1px solid #E4E4E7; border-bottom: 1px solid #E4E4E7; display: block; background: #FFFFFF; margin-top: 0;'><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
    <tr>
        <td align="left" valign="top">
            <a href="http://localhost:5555/features/another-new-feature" style='color: #18181B;; font-size: 16px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; text-decoration: underline; line-height: 30.40px; word-wrap: break-word;'>Another New Feature</a></td></tr>
</table></div></div><div style='width: 100%; padding-top: 8px; padding-bottom: 8px; display: block;'><div style='width: auto; padding-top: 12px; padding-bottom: 11px; padding-left: 15px; padding-right: 16px; overflow: hidden; border-top-left-radius: 4px; border-top-right-radius: 4px; display: block; margin-bottom: 0;; background:#E4E4E7;'>
    <div style='display: block;'>
        <div style='color: #18181B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 700;; word-wrap: break-word;'>Removed</div><div style='color: #52525B;; font-size: 12px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word;'>These features no longer match your search criteria.</div></div>
</div><div style='width: auto; padding-top: 12px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; overflow: hidden; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid #E4E4E7; border-right: 1px solid #E4E4E7; border-bottom: 1px solid #E4E4E7; display: block; background: #FFFFFF; margin-top: 0;'><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
    <tr>
        <td align="left" valign="top">
            <a href="http://localhost:5555/features/removed-feature" style='color: #18181B;; font-size: 16px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; text-decoration: underline; line-height: 30.40px; word-wrap: break-word;'>Removed Feature</a></td></tr>
</table></div></div><div style='width: 100%; padding-top: 8px; padding-bottom: 8px; display: block;'><div style='width: auto; padding-top: 12px; padding-bottom: 11px; padding-left: 15px; padding-right: 16px; overflow: hidden; border-top-left-radius: 4px; border-top-right-radius: 4px; display: block; margin-bottom: 0;; background:#FCE8E6;'>
    <div style='display: block;'>
        <div style='color: #18181B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 700;; word-wrap: break-word;'>Deleted</div><div style='color: #52525B;; font-size: 12px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word;'>These features have been removed from the web platform.</div></div>
</div><div style='width: auto; padding-top: 12px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; overflow: hidden; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid #E4E4E7; border-right: 1px solid #E4E4E7; border-bottom: 1px solid #E4E4E7; display: block; background: #FFFFFF; margin-top: 0;'><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
    <tr>
        <td align="left" valign="top">
            <a href="http://localhost:5555/features/deleted-feature" style='color: #18181B;; font-size: 16px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; text-decoration: underline; line-height: 30.40px; word-wrap: break-word;'>Deleted Feature</a></td></tr>
</table></div></div><div style='width: 100%; padding-top: 8px; padding-bottom: 8px; display: block;'><div style='width: auto; padding-top: 12px; padding-bottom: 11px; padding-left: 15px; padding-right: 16px; overflow: hidden; border-top-left-radius: 4px; border-top-right-radius: 4px; display: block; margin-bottom: 0;; background:#E8F0FE;'>
    <div style='display: block;'>
        <div style='color: #18181B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 700;; word-wrap: break-word;'>Moved</div><div style='color: #52525B;; font-size: 12px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word;'>These features have been renamed or merged with another feature.</div></div>
</div><div style='width: auto; padding-top: 12px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; overflow: hidden; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid #E4E4E7; border-right: 1px solid #E4E4E7; border-bottom: 1px solid #E4E4E7; display: block; background: #FFFFFF; margin-top: 0;'><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
    <tr>
        <td align="left" valign="top">
            <a href="http://localhost:5555/features/new-cool-name" style='color: #18181B;; font-size: 16px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; text-decoration: underline; line-height: 30.40px; word-wrap: break-word;'>New Cool Name</a></td></tr>
</table><div style='width: 100%; display: block; margin-top: 4px;'>
    <div style='display: block;'>
        <span style='color: #18181B;; font-size: 16px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; line-height: 30.40px; word-wrap: break-word;'>Moved from</span>
        <span style='color: #52525B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; line-height: 26.60px; word-wrap: break-word;'> (Old Name &rarr; New Cool Name)</span>
    </div>
</div><div style='color: #52525B;; font-size: 12px;font-family: SF Pro, system-ui, sans-serif;; font-style: italic; margin-top: 4px; display: block;'>⚠️ This feature no longer matches your saved search. Please update your saved search if you wish to continue tracking it.</div></div></div><div style='width: 100%; padding-top: 8px; padding-bottom: 8px; display: block;'><div style='width: auto; padding-top: 12px; padding-bottom: 11px; padding-left: 15px; padding-right: 16px; overflow: hidden; border-top-left-radius: 4px; border-top-right-radius: 4px; display: block; margin-bottom: 0;; background:#E8F0FE;'>
    <div style='display: block;'>
        <div style='color: #18181B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 700;; word-wrap: break-word;'>Split</div><div style='color: #52525B;; font-size: 12px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; word-wrap: break-word;'>This feature has been split into multiple, more granular features.</div></div>
</div><div style='width: auto; padding-top: 12px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; overflow: hidden; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; border-left: 1px solid #E4E4E7; border-right: 1px solid #E4E4E7; border-bottom: 1px solid #E4E4E7; display: block; background: #FFFFFF; margin-top: 0;'><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
    <tr>
        <td align="left" valign="top">
            <a href="http://localhost:5555/features/feature-to-split" style='color: #18181B;; font-size: 16px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; text-decoration: underline; line-height: 30.40px; word-wrap: break-word;'>Feature To Split</a></td></tr>
</table><div style='width: 100%; display: block; margin-top: 4px;'>
                        <div style='display: block;'>
                            <span style='color: #18181B;; font-size: 16px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; line-height: 30.40px; word-wrap: break-word;'>Split into:</span>
                            <ul style="margin: 4px 0; padding-left: 20px;">
                            <li style="margin-bottom: 4px;">
                                    <a href="http://localhost:5555/features/sub-feature-1" style='color: #52525B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; text-decoration: underline; line-height: 26.60px;'>Sub Feature 1</a></li><li style="margin-bottom: 4px;">
                                    <a href="http://localhost:5555/features/sub-feature-2" style='color: #52525B;; font-size: 14px;font-family: SF Pro, system-ui, sans-serif;;font-weight: 400;; text-decoration: underline; line-height: 26.60px;'>Sub Feature 2</a><span style='color: #52525B;; font-size: 12px;font-family: SF Pro, system-ui, sans-serif;; font-style: italic;'> ⚠️ (No longer matches)</span></li></ul>
                        </div>
                    </div>
                </div></div><div style='width: 100%; padding-top: 16px; display: block;font-family: SF Pro, system-ui, sans-serif;;'>
    <div style='width: 100%; height: 1px; background: #E4E4E7; margin-bottom: 12px;'></div>
    <div style='display: block;'>
        <span style='color: #52525B;; font-size: 11px;font-weight: 400;; word-wrap: break-word;'>You can </span>
        <a href="http://localhost:5555/settings/subscriptions?unsubscribe=sub-123" style='color: #52525B;; font-size: 11px;font-weight: 400;; text-decoration: underline; word-wrap: break-word;'>unsubscribe</a>
        <span style='color: #52525B;; font-size: 11px;font-weight: 400;; word-wrap: break-word;'> or change any of your alerts on </span>
        <a href="http://localhost:5555/settings/subscriptions" style='color: #52525B;; font-size: 11px;font-weight: 400;; text-decoration: underline; word-wrap: break-word;'>webstatus.dev</a>
    </div>
</div></div>
</body>
</html>

And here's the preview link to see the results.

Copy link
Collaborator

@jcscottiii jcscottiii Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You may want to store this as a golden file like we do for the email and put a flag in the test to allow the regeneration of the golden.

@neilv-g neilv-g changed the base branch from slack-webhook-6 to main March 12, 2026 16:47
@neilv-g neilv-g changed the base branch from main to slack-webhook-6 March 12, 2026 16:56
@neilv-g neilv-g force-pushed the slack-webhook-7 branch 2 times, most recently from 8fc051c to 718033b Compare March 17, 2026 22:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jcscottiii jcscottiii jcscottiii approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@neilv-g @jcscottiii