Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-19 01:17:18 +02:00
Code Issues Projects Releases Wiki Activity

Updated scheduled-change-conflict (#5908)

Browse Source 
Updating the UI of the email template

Closes #
[1-1940](https://linear.app/unleash/issue/1-1940/improve-scheduled-change-conflict-template)

Before

![image](https://github.com/Unleash/unleash/assets/103567375/bf6804dc-b4cc-4187-8a8f-c97dd9245faf)


After:

![image](https://github.com/Unleash/unleash/assets/103567375/de9eb257-d747-47c3-996d-e58a7a3aa84f)

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
Co-authored-by: andreas-unleash <andreas@getunleash.ai>
This commit is contained in:
Nicolae Socaciu 2024-01-16 16:12:25 +02:00 committed by GitHub
parent f6c0624869
commit 9f72030578
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 83 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/services/email-service.ts
View File

@ -146,6 +146,7 @@ export class EmailService {
async sendScheduledChangeConflictEmail( async sendScheduledChangeConflictEmail(
recipient: string, recipient: string,
conflictScope: 'flag' | 'strategy', conflictScope: 'flag' | 'strategy',
conflictingChangeRequestId: number,
changeRequests: { changeRequests: {
id: number; id: number;
scheduledAt: string; scheduledAt: string;
@ -172,6 +173,8 @@ export class EmailService {
? `${this.config.server.unleashUrl}/projects/${project}/archive?sort=archivedAt&search=${flagName}` ? `${this.config.server.unleashUrl}/projects/${project}/archive?sort=archivedAt&search=${flagName}`
: false; : false;
const conflictingChangeRequestLink = `${this.config.server.unleashUrl}/projects/${project}/change-requests/${conflictingChangeRequestId}`;
const bodyHtml = await this.compileTemplate( const bodyHtml = await this.compileTemplate(
'scheduled-change-conflict', 'scheduled-change-conflict',
TemplateFormat.HTML, TemplateFormat.HTML,
@ -180,6 +183,7 @@ export class EmailService {
conflictScope, conflictScope,
conflictResolution, conflictResolution,
conflictResolutionLink, conflictResolutionLink,
conflictingChangeRequestLink,
changeRequests, changeRequests,
year, year,
}, },

201
src/mailtemplates/scheduled-change-conflict/scheduled-change-conflict.html.mustache
View File

@ -15,7 +15,6 @@
/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */ /* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
body{margin:0; padding:0;} body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;} img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;} body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
/* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */ /* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
@ -32,7 +31,7 @@
* @theme page * @theme page
*/ */
body, #bodyTable{ body, #bodyTable{
/*@editable*/ background-color:#DEE0E2; /*@editable*/ background-color:#F7F7FA;
} }
/** /**
@ -42,7 +41,6 @@
* @theme page * @theme page
*/ */
#bodyCell{ #bodyCell{
/*@editable*/ border-top:4px solid #BBBBBB;
} }
/** /**
@ -51,7 +49,11 @@
* @tip Set the border for your email. * @tip Set the border for your email.
*/ */
#templateContainer{ #templateContainer{
/*@editable*/ border:1px solid #BBBBBB; /*@editable*/ border:1px solid #817AFE;
border-radius: 12px;
overflow: hidden;
padding: 48px;
background-color: #FFF;
} }
/** /**
@ -61,19 +63,18 @@
* @style heading 1 * @style heading 1
*/ */
h1{ h1{
/*@editable*/ color:#202020 !important; /*@editable*/ color:#202021 !important;
display:block; display:block;
/*@editable*/ font-family:Helvetica; /*@editable*/ font-family:Helvetica;
/*@editable*/ font-size:26px; /*@editable*/ font-size:24px;
/*@editable*/ font-style:normal; /*@editable*/ font-style:normal;
/*@editable*/ font-weight:bold; /*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%; /*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal; /*@editable*/ letter-spacing:normal;
margin-top:0; margin-top:0;
margin-right:0; margin-right:0;
margin-bottom:10px; margin-bottom:32px;
margin-left:0; margin-left:0;
/*@editable*/ text-align:left;
} }
/** /**
@ -83,7 +84,7 @@
* @style heading 2 * @style heading 2
*/ */
h2{ h2{
/*@editable*/ color:#404040 !important; /*@editable*/ color:#202021 !important;
display:block; display:block;
/*@editable*/ font-family:Helvetica; /*@editable*/ font-family:Helvetica;
/*@editable*/ font-size:20px; /*@editable*/ font-size:20px;
@ -93,7 +94,7 @@
/*@editable*/ letter-spacing:normal; /*@editable*/ letter-spacing:normal;
margin-top:0; margin-top:0;
margin-right:0; margin-right:0;
margin-bottom:10px; margin-bottom:24px;
margin-left:0; margin-left:0;
/*@editable*/ text-align:left; /*@editable*/ text-align:left;
} }
@ -105,17 +106,17 @@
* @style heading 3 * @style heading 3
*/ */
h3{ h3{
/*@editable*/ color:#606060 !important; /*@editable*/ color:#202021 !important;
display:block; display:block;
/*@editable*/ font-family:Helvetica; /*@editable*/ font-family:Helvetica;
/*@editable*/ font-size:16px; /*@editable*/ font-size:16px;
/*@editable*/ font-style:italic; /*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal; /*@editable*/ font-weight:bold;
/*@editable*/ line-height:100%; /*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal; /*@editable*/ letter-spacing:normal;
margin-top:0; margin-top:0;
margin-right:0; margin-right:0;
margin-bottom:10px; margin-bottom:16px;
margin-left:0; margin-left:0;
/*@editable*/ text-align:left; /*@editable*/ text-align:left;
} }
@ -127,58 +128,23 @@
* @style heading 4 * @style heading 4
*/ */
h4{ h4{
/*@editable*/ color:#808080 !important; /*@editable*/ color:#202021 !important;
display:block; display:block;
/*@editable*/ font-family:Helvetica; /*@editable*/ font-family:Helvetica;
/*@editable*/ font-size:14px; /*@editable*/ font-size:14px;
/*@editable*/ font-style:italic; /*@editable*/ font-style:normal;
/*@editable*/ font-weight:normal; /*@editable*/ font-weight:normal;
/*@editable*/ line-height:100%; /*@editable*/ line-height:100%;
/*@editable*/ letter-spacing:normal; /*@editable*/ letter-spacing:normal;
margin-top:0; margin-top:0;
margin-right:0; margin-right:0;
margin-bottom:10px; margin-bottom:16px;
margin-left:0; margin-left:0;
/*@editable*/ text-align:left; /*@editable*/ text-align:left;
} }
/* ========== Header Styles ========== */ /* ========== Header Styles ========== */
/**
* @tab Header
* @section preheader style
* @tip Set the background color and bottom border for your email's preheader area.
* @theme header
*/
#templatePreheader{
/*@editable*/ background-color:#fff;
/*@editable*/ border-bottom:1px solid #CCCCCC;
}
/**
* @tab Header
* @section preheader text
* @tip Set the styling for your email's preheader text. Choose a size and color that is easy to read.
*/
.preheaderContent{
/*@editable*/ color:#808080;
/*@editable*/ font-family:Helvetica;
/*@editable*/ font-size:10px;
/*@editable*/ line-height:125%;
/*@editable*/ text-align:left;
}
/**
* @tab Header
* @section preheader link
* @tip Set the styling for your email's preheader links. Choose a color that helps them stand out from your text.
*/
.preheaderContent a:link, .preheaderContent a:visited, /* Yahoo! Mail Override */ .preheaderContent a .yshortcuts /* Yahoo! Mail Override */{
/*@editable*/ color:#fff;
/*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline;
}
/** /**
* @tab Header * @tab Header
* @section header style * @section header style
@ -186,9 +152,7 @@
* @theme header * @theme header
*/ */
#templateHeader{ #templateHeader{
/*@editable*/ background-color:#fff; /*@editable*/ color:#6E6E70;
/*@editable*/ border-top:1px solid #FFFFFF;
/*@editable*/ border-bottom:1px solid #CCCCCC;
} }
/** /**
@ -197,7 +161,7 @@
* @tip Set the styling for your email's header text. Choose a size and color that is easy to read. * @tip Set the styling for your email's header text. Choose a size and color that is easy to read.
*/ */
.headerContent{ .headerContent{
/*@editable*/ color:#505050; /*@editable*/ color:#6E6E70;
/*@editable*/ font-family:Helvetica; /*@editable*/ font-family:Helvetica;
/*@editable*/ font-size:20px; /*@editable*/ font-size:20px;
/*@editable*/ font-weight:bold; /*@editable*/ font-weight:bold;
@ -222,8 +186,6 @@
} }
#headerImage{ #headerImage{
height:auto;
max-width:600px;
} }
/* ========== Body Styles ========== */ /* ========== Body Styles ========== */
@ -234,7 +196,10 @@
* @tip Set the background color and borders for your email's body area. * @tip Set the background color and borders for your email's body area.
*/ */
#templateBody{ #templateBody{
/*@editable*/ background-color:#fff; margin: 48px 0;
padding: 48px 0;
border-top: 1px solid #E1E1E3;
border-bottom: 1px solid #E1E1E3;
} }
/** /**
@ -244,15 +209,10 @@
* @theme main * @theme main
*/ */
.bodyContent{ .bodyContent{
/*@editable*/ color:#505050; /*@editable*/ color:#202021;
/*@editable*/ font-family:Helvetica; /*@editable*/ font-family:Helvetica;
/*@editable*/ font-size:14px; /*@editable*/ font-size:16px;
/*@editable*/ line-height:150%; /*@editable*/ line-height:150%;
/*@editable*/ border-bottom: 1px solid #CCCCCC;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
/*@editable*/ text-align:left; /*@editable*/ text-align:left;
} }
@ -262,13 +222,25 @@
max-width:560px; max-width:560px;
} }
.changeRequestLink { .bodyContent a {
color: #615BC2;
text-decoration: none; text-decoration: none;
text-align: center;
} }
.changeRequestLink:hover { .bodyContent a:hover {
text-decoration: none; text-decoration: underline;
}
.bodyContent .buttonStyle {
margin-top: 32px;
display: inline-block;
padding: 8px 16px;
color: #fff;
background: #6C65E5;
border-radius: 4px;
font-size: 15px;
font-weight: bold;
text-decoration: none !important;
} }
/* ========== Footer Styles ========== */ /* ========== Footer Styles ========== */
@ -280,8 +252,6 @@
* @theme footer * @theme footer
*/ */
#templateFooter{ #templateFooter{
/*@editable*/ background-color:#fff;
/*@editable*/ border-top:1px solid #FFFFFF;
} }
/** /**
@ -291,24 +261,40 @@
* @theme footer * @theme footer
*/ */
.footerContent{ .footerContent{
/*@editable*/ color:#808080; /*@editable*/ color:#6E6E70;
/*@editable*/ font-family:Helvetica; /*@editable*/ font-family:Helvetica;
/*@editable*/ font-size:10px; /*@editable*/ font-size:14px;
/*@editable*/ line-height:150%; /*@editable*/ line-height:150%;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
/*@editable*/ text-align:left; /*@editable*/ text-align:left;
} }
.footerContent a {
padding: 0 12px;
border-right: 1px solid #E1E1E3;
}
.footerContent a:first-child {
padding-left: 0;
}
.footerContent a:last-child {
padding-right: 0;
border-right: 0;
}
.footerContent em {
display: block;
margin-top: 24px;
}
/** /**
* @tab Footer * @tab Footer
* @section footer link * @section footer link
* @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text. * @tip Set the styling for your email's footer links. Choose a color that helps them stand out from your text.
*/ */
.footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */ .footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */{ .footerContent a:link, .footerContent a:visited, /* Yahoo! Mail Override */ .footerContent a .yshortcuts, .footerContent a span /* Yahoo! Mail Override */{
/*@editable*/ color:#606060; /*@editable*/ color:#615BC2;
/*@editable*/ font-weight:normal; /*@editable*/ font-weight:normal;
/*@editable*/ text-decoration:underline; /*@editable*/ text-decoration:underline;
} }
@ -387,9 +373,6 @@
* @tip Make the main header image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead. * @tip Make the main header image fluid for portrait or landscape view adaptability, and set the image's original width as the max-width. If a fluid setting doesn't work, set the image width to half its original size instead.
*/ */
#headerImage{ #headerImage{
height:auto !important;
/*@editable*/ max-width:600px !important;
/*@editable*/ width:100% !important;
} }
/** /**
@ -398,8 +381,6 @@
* @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px. * @tip Make the header content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/ */
.headerContent{ .headerContent{
/*@editable*/ font-size:20px !important;
/*@editable*/ line-height:125% !important;
} }
/* ======== Body Styles ======== */ /* ======== Body Styles ======== */
@ -410,8 +391,6 @@
* @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px. * @tip Make the body content text larger in size for better readability on small screens. We recommend a font size of at least 16px.
*/ */
.bodyContent{ .bodyContent{
/*@editable*/ font-size:18px !important;
/*@editable*/ line-height:125% !important;
} }
/* ======== Footer Styles ======== */ /* ======== Footer Styles ======== */
@ -422,8 +401,6 @@
* @tip Make the body content text larger in size for better readability on small screens. * @tip Make the body content text larger in size for better readability on small screens.
*/ */
.footerContent{ .footerContent{
/*@editable*/ font-size:14px !important;
/*@editable*/ line-height:115% !important;
} }
.footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */ .footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */
@ -437,31 +414,13 @@
<td align="center" valign="top" id="bodyCell"> <td align="center" valign="top" id="bodyCell">
<!-- BEGIN TEMPLATE // --> <!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer"> <table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
<tr>
<td align="center" valign="top">
<!-- BEGIN PREHEADER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templatePreheader">
<tr>
<td valign="top" class="preheaderContent" style="padding-top:10px; padding-right:20px; padding-bottom:10px; padding-left:20px;" mc:edit="preheader_content00">
Scheduled changes can no longer be applied
</td>
<!-- *|IFNOT:ARCHIVE_PAGE|* -->
<td valign="top" width="180" class="preheaderContent" style="padding-top:10px; padding-right:20px; padding-bottom:10px; padding-left:0;" mc:edit="preheader_content01">
Email not displaying correctly?<br /><a href="*|ARCHIVE|*" target="_blank">View it in your browser</a>.
</td>
<!-- *|END:IF|* -->
</tr>
</table>
<!-- // END PREHEADER -->
</td>
</tr>
<tr> <tr>
<td align="center" valign="top"> <td align="center" valign="top">
<!-- BEGIN HEADER // --> <!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateHeader"> <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateHeader">
<tr> <tr>
<td valign="top" class="headerContent"> <td valign="top" class="headerContent">
<img src="https://cdn.getunleash.io/unleash_logo_600.png" style="max-width:600px;padding:1rem;" id="headerImage" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext /> <img src="https://cdn.getunleash.io/unleash_logo_600.png" style="max-width:140px;" id="headerImage" mc:label="header_image" mc:edit="header_image" mc:allowdesigner mc:allowtext />
</td> </td>
</tr> </tr>
</table> </table>
@ -475,17 +434,15 @@
<tr> <tr>
<td valign="top" class="bodyContent" mc:edit="body_content"> <td valign="top" class="bodyContent" mc:edit="body_content">
<h1>Conflict detected in a scheduled change</h1> <h1>Conflict detected in a scheduled change</h1>
<h3>{{ conflict }}.</h3>
<br /> <p>Scheduled change requests that use this {{ conflictScope }} can no longer be applied and their scheduled applications will fail{{#conflictResolution}}<a class="changeRequestLink" href="{{{ conflictResolutionLink }}}" target="_blank" rel="noopener noreferrer">{{.}}</a>{{/conflictResolution}}{{^conflictResolution}}.{{/conflictResolution}}</p>
{{ conflict }}. Scheduled change requests that use this {{ conflictScope }} can no longer be applied and their scheduled applications will fail{{#conflictResolution}}<span><a class="changeRequestLink" href="{{{ conflictResolutionLink }}}" target="_blank" rel="noopener noreferrer">{{.}}</a></span>{{/conflictResolution}}{{^conflictResolution}}.{{/conflictResolution}} <p>For you, this concerns change requests:</p>
<br />
For you, this concerns change requests:
<br />
{{#changeRequests}} {{#changeRequests}}
<ul> <ul style="margin-bottom:0;">
<li><span><a class="changeRequestLink" href="{{{ link }}}" target="_blank" rel="noopener noreferrer">#{{id}} {{#title}}- {{.}}{{/title}} (scheduled for {{scheduledAt}})</a></span></li> <li><a class="changeRequestLink" href="{{{ link }}}" target="_blank" rel="noopener noreferrer">#{{id}} {{#title}}- {{.}}{{/title}} (scheduled for {{scheduledAt}})</a></li>
</ul> </ul>
{{/changeRequests}} {{/changeRequests}}
<a class="buttonStyle" href="{{{ conflictingChangeRequestLink }}} target="_blank" rel="noopener noreferrer">Open change request</a>
</td> </td>
</tr> </tr>
</table> </table>
@ -498,21 +455,17 @@
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter"> <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateFooter">
<tr> <tr>
<td valign="top" class="footerContent" mc:edit="footer_content00"> <td valign="top" class="footerContent" mc:edit="footer_content00">
<a href="https://github.com/Unleash/unleash">Follow us on Github</a> <a href="https://www.getunleash.io/blog">Unleash blog</a>
<a href="https://github.com/Unleash/unleash">Github</a>
<a href="https://slack.unleash.run">Slack community</a>
<a href="https://www.getunleash.io/support">Help center</a>
</td> </td>
</tr> </tr>
<tr> <tr>
<td valign="top" class="footerContent" style="padding-top:0;" mc:edit="footer_content01"> <td valign="top" class="footerContent" mc:edit="footer_content01">
<em>Copyright &copy; {{ year }} | Bricks Software | All rights reserved.</em> <em>Copyright &copy; {{ year }} | Bricks Software | All rights reserved.</em>
<br />
<br />
<strong>Our mailing address is: team@getunleash.io</strong>
<br />
</td> </td>
</tr> </tr>
</table> </table>
<!-- // END FOOTER --> <!-- // END FOOTER -->
</td> </td>

2
src/mailtemplates/scheduled-change-conflict/scheduled-change-conflict.plain.mustache
View File

@ -7,3 +7,5 @@ For you, this concerns change requests:
{{#changeRequests}} {{#changeRequests}}
- # {{id}} - {{#title}}- {{.}}{{/title}} (scheduled for {{scheduledAt}}) ({{link}}) - # {{id}} - {{#title}}- {{.}}{{/title}} (scheduled for {{scheduledAt}}) ({{link}})
{{/changeRequests}} {{/changeRequests}}
Open Change request: {{conflictingChangeRequestLink}}