feat(email-templates): update release note template for Worklenz 2.1.0
- Added a title and meta subject for the release note template. - Enhanced styling for better readability and user experience, including background color, font adjustments, and button styles. - Introduced new sections for features, including a new tasks list, kanban board, group view, language support, and bug fixes. - Improved responsiveness and dark mode support for the email template.
This commit is contained in:
chamikaJ
@@ -2,31 +2,35 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title></title>
|
||||
<title>Worklenz 2.1.0 Release</title>
|
||||
<meta name="subject" content="Worklenz 2.1.0 Release" />
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<meta content="width=device-width,initial-scale=1" name="viewport">
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0
|
||||
padding: 0;
|
||||
background: #f6f8fa;
|
||||
font-family: 'Mada', 'Segoe UI', Arial, sans-serif;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
a[x-apple-data-detectors] {
|
||||
color: inherit !important;
|
||||
text-decoration: inherit !important
|
||||
text-decoration: inherit !important;
|
||||
}
|
||||
|
||||
#MessageViewBody a {
|
||||
color: inherit;
|
||||
text-decoration: none
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: inherit
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.padding-30 {
|
||||
@@ -37,272 +41,201 @@
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
.desktop_hide,
|
||||
.desktop_hide table {
|
||||
mso-hide: all;
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 12px rgba(24, 144, 255, 0.08);
|
||||
margin-bottom: 32px;
|
||||
padding: 32px 32px 24px 32px;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
color: #1890ff;
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.card img {
|
||||
border-radius: 10px;
|
||||
margin: 18px 0 0 0;
|
||||
box-shadow: 0 1px 8px rgba(24, 144, 255, 0.07);
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
padding-left: 18px;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.feature-list li {
|
||||
margin-bottom: 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.lang-badge {
|
||||
display: inline-block;
|
||||
background: #e6f7ff;
|
||||
color: #1890ff;
|
||||
border-radius: 8px;
|
||||
padding: 3px 10px;
|
||||
font-size: 14px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
background: #1890ff;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 14px 28px;
|
||||
font-size: 18px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
border-radius: 23px;
|
||||
margin: 32px auto 0 auto;
|
||||
font-family: 'Mada', sans-serif;
|
||||
display: inline-block;
|
||||
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.13);
|
||||
transition: background 0.2s, color 0.2s, border 0.2s;
|
||||
border: 2px solid #1890ff;
|
||||
}
|
||||
|
||||
.main-btn:hover {
|
||||
background: #40a9ff;
|
||||
color: #fff;
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.card {
|
||||
padding: 18px 8px 16px 8px;
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
width: 90%;
|
||||
font-size: 16px;
|
||||
padding: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background: #181a1b;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #23272a;
|
||||
box-shadow: 0 2px 12px rgba(24, 144, 255, 0.13);
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
background: #1890ff;
|
||||
color: #fff;
|
||||
border: 2px solid #1890ff;
|
||||
}
|
||||
|
||||
.main-btn:hover {
|
||||
background: #40a9ff;
|
||||
color: #fff;
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.logo-dark {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-light {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo-dark {
|
||||
display: none;
|
||||
max-height: 0;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
@media (max-width: 525px) {
|
||||
.desktop_hide table.icons-inner {
|
||||
display: inline-block !important
|
||||
}
|
||||
|
||||
.icons-inner {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.icons-inner td {
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.row-content {
|
||||
width: 95% !important
|
||||
}
|
||||
|
||||
.mobile_hide {
|
||||
display: none
|
||||
}
|
||||
|
||||
.stack .column {
|
||||
width: 100%;
|
||||
display: block
|
||||
}
|
||||
|
||||
.mobile_hide {
|
||||
min-height: 0;
|
||||
max-height: 0;
|
||||
max-width: 0;
|
||||
overflow: hidden;
|
||||
font-size: 0
|
||||
}
|
||||
|
||||
.desktop_hide,
|
||||
.desktop_hide table {
|
||||
display: table !important;
|
||||
max-height: none !important
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="background-color:#fff;margin:0;padding:0;-webkit-text-size-adjust:none;text-size-adjust:none">
|
||||
<table border="0" cellpadding="0" cellspacing="0" class="nl-container" role="presentation"
|
||||
style="mso-table-lspace:0;mso-table-rspace:0;background-image:none;background-position:top left;background-size:auto;background-repeat:no-repeat"
|
||||
width="100%">
|
||||
<tbody>
|
||||
<body>
|
||||
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background: #f6f8fa;">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<table border="0" cellpadding="0" cellspacing="0" width="720" style="max-width: 98vw;">
|
||||
<tr>
|
||||
<td align="center" style="padding: 32px 0 18px 0;">
|
||||
<a href="https://worklenz.com" target="_blank" style="display: inline-block;">
|
||||
<img class="logo-light"
|
||||
src="https://s3.us-west-2.amazonaws.com/worklenz.com/assets/worklenz-light-mode.png"
|
||||
alt="Worklenz Light Logo" style="width: 170px; margin-bottom: 0; display: block;" />
|
||||
<img class="logo-dark"
|
||||
src="https://s3.us-west-2.amazonaws.com/worklenz.com/assets/worklenz-dark-mode.png"
|
||||
alt="Worklenz Dark Logo" style="width: 170px; margin-bottom: 0; display: none;" />
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-1" role="presentation"
|
||||
style="mso-table-lspace:0;mso-table-rspace:0" width="100%">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
<table border="0" cellpadding="0" cellspacing="0" class="image_block block-1 padding-20"
|
||||
role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;margin-left: auto;margin-right: auto;padding-top: 20px;
|
||||
padding-bottom: 20px;" width="300">
|
||||
<tr>
|
||||
<td class="pad" style="width:100%;padding-right:0;padding-left:0">
|
||||
<div align="left" class="alignment" style="line-height:10px">
|
||||
<a href="https://worklenz.com" style="outline:none;width: 170px;" tabindex="-1"
|
||||
target="_blank"><img
|
||||
src="https://worklenz.s3.amazonaws.com/email-templates-assets/email-logo.png"
|
||||
style="display:block;max-width: 300px;height:auto;border:0;max-width:100%;margin-top: 10px;margin-bottom: 0px;"></a>
|
||||
<div class="card">
|
||||
<h3>🚀 New Tasks List & Kanban Board</h3>
|
||||
<ul class="feature-list">
|
||||
<li>Performance optimized for faster loading</li>
|
||||
<li>Redesigned UI for clarity and speed</li>
|
||||
<li>Advanced filters for easier task management</li>
|
||||
</ul>
|
||||
<img src="https://s3.us-west-2.amazonaws.com/worklenz.com/gifs/WL20250708/task-list-v2.gif"
|
||||
alt="New Task List">
|
||||
<img src="https://s3.us-west-2.amazonaws.com/worklenz.com/gifs/WL20250708/kanban-v2.gif"
|
||||
alt="New Kanban Board">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack"
|
||||
role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:720px;"
|
||||
width="475">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="column column-1"
|
||||
style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;padding-top:5px;padding-bottom:5px;border-top:0;border-right:0;border-bottom:0;border-left:0"
|
||||
width="100%">
|
||||
|
||||
<table border="0" cellpadding="0" cellspacing="0" class="image_block block-3"
|
||||
role="presentation" style="mso-table-lspace:0;mso-table-rspace:0" width="100%">
|
||||
|
||||
<tr>
|
||||
<td class="pad" style="width:100%;padding-right:0;padding-left:0">
|
||||
<div align="center" class="alignment" style="line-height:10px"><img
|
||||
src="https://worklenz.s3.amazonaws.com/email-templates-assets/under-maintenance.png"
|
||||
style="display:block;height:auto;border:0;width:180px;max-width:100%;/* margin-top: 30px; */margin-bottom: 10px;"
|
||||
width="180">
|
||||
<div class="card">
|
||||
<h3>📁 Group View in Projects List</h3>
|
||||
<ul class="feature-list">
|
||||
<li>Toggle between list and group view</li>
|
||||
<li>Group projects by client or category</li>
|
||||
<li>Improved navigation and organization</li>
|
||||
</ul>
|
||||
<img src="https://s3.us-west-2.amazonaws.com/worklenz.com/gifs/WL20250708/project-list-group-view.gif"
|
||||
alt="Project List Group View">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table border="0" cellpadding="8" cellspacing="0" class="paragraph_block block-5 padding-30"
|
||||
role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word"
|
||||
width="100%">
|
||||
<tr>
|
||||
<td class="pad">
|
||||
<div
|
||||
style="color:#505771;font-size:16px;font-family: 'Mada', sans-serif;font-weight:400;line-height:135%;direction:ltr;letter-spacing:0;border-radius: 12px;margin-bottom: 12px;">
|
||||
<h3 style="margin-bottom: 0;">Project Roadmap Redesign</h3>
|
||||
<p>
|
||||
|
||||
Experience a comprehensive visual representation of task progression within your projects.
|
||||
The sequential arrangement unfolds seamlessly in a user-friendly timeline format, allowing
|
||||
for effortless understanding and efficient project management.
|
||||
</p>
|
||||
<img src="https://worklenz.s3.amazonaws.com/gifs/WL20231114/roadmap.gif"
|
||||
style="width: 100%;margin: auto;" alt="Revamped Reporting">
|
||||
<div class="card">
|
||||
<h3>🌐 New Language Support</h3>
|
||||
<span class="lang-badge">Deutsch (DE)</span>
|
||||
<span class="lang-badge">Shqip (ALB)</span>
|
||||
<p style="margin-top: 10px;">Worklenz is now available in German and Albanian!</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table border="0" cellpadding="8" cellspacing="0" class="paragraph_block block-5 padding-30"
|
||||
role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word"
|
||||
width="100%">
|
||||
<tr>
|
||||
<td class="pad">
|
||||
<div
|
||||
style="color:#505771;font-size:16px;font-family: 'Mada', sans-serif;font-weight:400;line-height:135%;direction:ltr;letter-spacing:0;border-radius: 12px;margin-bottom: 12px;">
|
||||
<h3 style="margin-bottom: 0;">Project Workload Redesign</h3>
|
||||
<p>
|
||||
Gain insights into the optimized allocation and utilization of resources within your project.
|
||||
</p>
|
||||
<img src="https://worklenz.s3.amazonaws.com/gifs/WL20231114/workload-1.gif"
|
||||
style="width: 100%;margin: auto;" alt="Revamped Reporting">
|
||||
<div class="card">
|
||||
<h3>🛠️ Bug Fixes & UI Improvements</h3>
|
||||
<ul class="feature-list">
|
||||
<li>General bug fixes</li>
|
||||
<li>UI/UX enhancements for a smoother experience</li>
|
||||
<li>Performance improvements across the platform</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table border="0" cellpadding="8" cellspacing="0" class="paragraph_block block-5 padding-30"
|
||||
role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word"
|
||||
width="100%">
|
||||
<tr>
|
||||
<td class="pad">
|
||||
<div
|
||||
style="color:#505771;font-size:16px;font-family: 'Mada', sans-serif;font-weight:400;line-height:135%;direction:ltr;letter-spacing:0;border-radius: 12px;margin-bottom: 12px;">
|
||||
<h3 style="margin-bottom: 0;">Create new tasks from the roadmap itself</h3>
|
||||
<p>
|
||||
Effortlessly generate and modify tasks directly from the roadmap interface with a simple
|
||||
click-and-drag functionality.
|
||||
<br>Seamlessly adjust the task's date range according to your
|
||||
preferences, providing a user-friendly and intuitive experience for efficient task management.
|
||||
</p>
|
||||
<img src="https://worklenz.s3.amazonaws.com/gifs/WL20231114/roadmap-2.gif"
|
||||
style="width: 100%;margin: auto;" alt="Revamped Reporting">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table border="0" cellpadding="8" cellspacing="0" class="paragraph_block block-5 padding-30"
|
||||
role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word"
|
||||
width="100%">
|
||||
<tr>
|
||||
<td class="pad">
|
||||
<div
|
||||
style="color:#505771;font-size:16px;font-family: 'Mada', sans-serif;font-weight:400;line-height:135%;direction:ltr;letter-spacing:0;border-radius: 12px;margin-bottom: 12px;">
|
||||
<h3 style="margin-bottom: 0;">Deactivate Team Members</h3>
|
||||
<p>
|
||||
Effortlessly manage your team by deactivating members without losing their valuable work.
|
||||
<br>
|
||||
<br>
|
||||
Navigate to the "Settings" section and access "Team Members" to conveniently deactivate
|
||||
team members while preserving the work they have contributed.
|
||||
</p>
|
||||
<img src="https://worklenz.s3.amazonaws.com/gifs/WL20231114/workload-1.gif"
|
||||
style="width: 100%;margin: auto;" alt="Revamped Reporting">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table border="0" cellpadding="8" cellspacing="0" class="paragraph_block block-5 padding-30"
|
||||
role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word"
|
||||
width="100%">
|
||||
<tr>
|
||||
<td class="pad">
|
||||
<div
|
||||
style="color:#505771;font-size:16px;font-family: 'Mada', sans-serif;font-weight:400;line-height:135%;direction:ltr;letter-spacing:0;border-radius: 12px;margin-bottom: 12px;">
|
||||
<h3 style="margin-bottom: 0;">Reporting Enhancements</h3>
|
||||
<p>
|
||||
This release also includes several other miscellaneous bug fixes and performance
|
||||
enhancements to further improve your experience.
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div style="text-align: center;">
|
||||
<a href="https://worklenz.com/worklenz" target="_blank"
|
||||
style="background: #1890ff;border: none;outline: none;padding: 12px 16px;font-size: 18px;text-decoration: none;color: white;border-radius: 23px;margin: auto;font-family: 'Mada', sans-serif;">See
|
||||
what's new</a>
|
||||
<a href="https://app.worklenz.com/auth" target="_blank" class="main-btn">See what's new</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-2" role="presentation"
|
||||
style="mso-table-lspace:0;mso-table-rspace:0" width="100%">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack"
|
||||
role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:475px"
|
||||
width="505">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="column column-1"
|
||||
style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;padding-top:5px;padding-bottom:5px;border-top:0;border-right:0;border-bottom:0;border-left:0"
|
||||
width="100%">
|
||||
<table border="0" cellpadding="0" cellspacing="0" class="icons_block block-1"
|
||||
role="presentation" style="mso-table-lspace:0;mso-table-rspace:0" width="100%">
|
||||
<tr>
|
||||
<td class="pad"
|
||||
style="vertical-align:middle;color:#9d9d9d;font-family:inherit;font-size:15px;padding-bottom:5px;padding-top:5px;text-align:center">
|
||||
<table cellpadding="0" cellspacing="0" role="presentation"
|
||||
style="mso-table-lspace:0;mso-table-rspace:0" width="100%">
|
||||
<tr>
|
||||
<td class="alignment" style="vertical-align:middle;text-align:center">
|
||||
<!--[if vml]>
|
||||
<table align="left" cellpadding="0" cellspacing="0" role="presentation"
|
||||
style="display:inline-block;padding-left:0px;padding-right:0px;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
|
||||
<![endif]-->
|
||||
<!--[if !vml]><!-->
|
||||
<table cellpadding="0" cellspacing="0" class="icons-inner" role="presentation"
|
||||
style="mso-table-lspace:0;mso-table-rspace:0;display:inline-block;margin-right:-4px;padding-left:0;padding-right:0">
|
||||
</table>
|
||||
<td style="padding: 32px 0 0 0;">
|
||||
<hr style="border: none; border-top: 1px solid #e6e6e6; margin: 32px 0 16px 0;">
|
||||
<p style="font-family:sans-serif;text-decoration:none; text-align: center; color: #888; font-size: 15px;">
|
||||
Click <a href="{{unsubscribe}}" target="_blank" style="color: #1890ff;">here</a> to unsubscribe and
|
||||
manage your email preferences.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><!-- End -->
|
||||
<hr>
|
||||
<p style="font-family:sans-serif;text-decoration:none; text-align: center;">
|
||||
Click <a href="{{{unsubscribe}}}" target="_blank">here</a> to unsubscribe and manage your email preferences.
|
||||
</p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -45,7 +45,7 @@
|
||||
// Determine which tracking ID to use based on the environment
|
||||
const isProduction = window.location.hostname === 'app.worklenz.com';
|
||||
|
||||
const trackingId = isProduction ? 'G-XXXXXXXXXX' : 'G-3LM2HGWEXG'; // Open source tracking ID
|
||||
const trackingId = isProduction ? 'G-7KSRKQ1397' : 'G-3LM2HGWEXG'; // Open source tracking ID
|
||||
|
||||
// Load the Google Analytics script
|
||||
const script = document.createElement('script');
|
||||
|
||||
@@ -26,7 +26,7 @@ const TASK_LIST_MIN_WIDTH = 500;
|
||||
const SIDEBAR_MAX_WIDTH = 400;
|
||||
|
||||
// Lazy load heavy components
|
||||
const TaskDrawer = React.lazy(() => import('@components/task-drawer/task-drawer'));
|
||||
const TaskDrawer = React.lazy(() => import('@/components/task-drawer/task-drawer'));
|
||||
|
||||
const HomePage = memo(() => {
|
||||
const dispatch = useAppDispatch();
|
||||
@@ -35,6 +35,19 @@ const HomePage = memo(() => {
|
||||
|
||||
useDocumentTitle('Home');
|
||||
|
||||
// Preload TaskDrawer component to prevent dynamic import failures
|
||||
useEffect(() => {
|
||||
const preloadTaskDrawer = async () => {
|
||||
try {
|
||||
await import('@/components/task-drawer/task-drawer');
|
||||
} catch (error) {
|
||||
console.warn('Failed to preload TaskDrawer:', error);
|
||||
}
|
||||
};
|
||||
|
||||
preloadTaskDrawer();
|
||||
}, []);
|
||||
|
||||
// Memoize fetch function to prevent recreation on every render
|
||||
const fetchLookups = useCallback(async () => {
|
||||
const fetchPromises = [
|
||||
@@ -113,9 +126,15 @@ const HomePage = memo(() => {
|
||||
|
||||
{MainContent}
|
||||
|
||||
{/* Use Suspense for lazy-loaded components */}
|
||||
<Suspense fallback={null}>
|
||||
{createPortal(<TaskDrawer />, document.body, 'home-task-drawer')}
|
||||
{/* Use Suspense for lazy-loaded components with error boundary */}
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
{createPortal(
|
||||
<React.Suspense fallback={null}>
|
||||
<TaskDrawer />
|
||||
</React.Suspense>,
|
||||
document.body,
|
||||
'home-task-drawer'
|
||||
)}
|
||||
</Suspense>
|
||||
|
||||
{createPortal(
|
||||
|
||||
@@ -379,6 +379,51 @@ const ProjectList: React.FC = () => {
|
||||
}
|
||||
}, [projectsError]);
|
||||
|
||||
// Optimized refresh handler with better error handling
|
||||
const handleRefresh = useCallback(async () => {
|
||||
try {
|
||||
trackMixpanelEvent(evt_projects_refresh_click);
|
||||
setIsLoading(true);
|
||||
setErrorMessage(null);
|
||||
|
||||
if (viewMode === ProjectViewType.LIST) {
|
||||
await refetchProjects();
|
||||
} else if (viewMode === ProjectViewType.GROUP && groupBy) {
|
||||
await dispatch(fetchGroupedProjects(groupedRequestParams)).unwrap();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error refreshing projects:', error);
|
||||
setErrorMessage('Failed to refresh projects. Please try again.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [trackMixpanelEvent, refetchProjects, viewMode, groupBy, dispatch, groupedRequestParams]);
|
||||
|
||||
// Enhanced empty text with error handling
|
||||
const emptyContent = useMemo(() => {
|
||||
if (errorMessage) {
|
||||
return (
|
||||
<Empty
|
||||
description={
|
||||
<div>
|
||||
<p>{errorMessage}</p>
|
||||
<Button type="primary" onClick={handleRefresh} loading={isLoading}>
|
||||
Retry
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return <Empty description={t('noProjects')} />;
|
||||
}, [errorMessage, handleRefresh, isLoading, t]);
|
||||
|
||||
// Memoize the pagination show total function
|
||||
const paginationShowTotal = useMemo(
|
||||
() => (total: number, range: [number, number]) => `${range[0]}-${range[1]} of ${total} groups`,
|
||||
[]
|
||||
);
|
||||
|
||||
const handleTableChange = useCallback(
|
||||
(
|
||||
newPagination: TablePaginationConfig,
|
||||
|
||||
Reference in New Issue
Block a user