Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: Deprecation warning for comments (#15363)

Browse Source 
Adds deprecation warning for comments

Resolves #15364
This commit is contained in:
Hetu Nandu 2022-07-26 18:04:54 +05:30 committed by GitHub
parent 58c7f3d805
commit a1e5b511eb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 186 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/client/cypress.json
View File

@ -14,7 +14,9 @@
"json": false "json": false
}, },
"ignoreTestFiles": [ "ignoreTestFiles": [
"**/Smoke_TestSuite/Application/PgAdmin_spec*.js" "**/Smoke_TestSuite/Application/PgAdmin_spec*.js",
"**/Smoke_TestSuite/ClientSideTests/Git/GitSync/Comments_spec*.js",
"**/Smoke_TestSuite/ClientSideTests/OtherUIFeatures/AddComments_spec*.js"
], ],
"chromeWebSecurity": false, "chromeWebSecurity": false,
"viewportHeight": 1100, "viewportHeight": 1100,

17
app/client/src/comments/AppComments/AppComments.tsx
View File

@ -4,6 +4,9 @@ import { useSelector } from "react-redux";
import { commentModeSelector } from "selectors/commentsSelectors"; import { commentModeSelector } from "selectors/commentsSelectors";
import AppCommentsHeader from "./AppCommentsHeader"; import AppCommentsHeader from "./AppCommentsHeader";
import AppCommentThreads from "./AppCommentThreads"; import AppCommentThreads from "./AppCommentThreads";
import { Colors } from "constants/Colors";
import { IconSize } from "components/ads";
import { BannerMessage } from "components/ads/BannerMessage";
function AppComments() { function AppComments() {
const isCommentMode = useSelector(commentModeSelector); const isCommentMode = useSelector(commentModeSelector);
@ -15,6 +18,20 @@ function AppComments() {
className={`absolute top-0 left-0 flex flex-col w-full h-full bg-white ${tailwindLayers.appComments}`} className={`absolute top-0 left-0 flex flex-col w-full h-full bg-white ${tailwindLayers.appComments}`}
> >
<AppCommentsHeader /> <AppCommentsHeader />
<BannerMessage
backgroundColor={Colors.WARNING_ORANGE}
className="t--deprecation-warning"
ctaText={"Read more about it here"}
ctaURL={
"https://appsmith.notion.site/Deprecating-real-time-commenting-60a307d2c5e1485b85ff95afebb616eb"
}
icon="warning-line"
iconColor={Colors.WARNING_SOLID}
iconSize={IconSize.XXXXL}
message={"We are removing comments from Appsmith in v1.7.11"}
messageHeader={"Comments are being deprecated"}
textColor={Colors.BROWN}
/>
<AppCommentThreads /> <AppCommentThreads />
</div> </div>
); );

15
app/client/src/notifications/NotificationsList.tsx
View File

@ -33,6 +33,7 @@ import {
import { ReactComponent as EmptyState } from "assets/icons/comments/notifications-empty-state.svg"; import { ReactComponent as EmptyState } from "assets/icons/comments/notifications-empty-state.svg";
import { Colors } from "constants/Colors"; import { Colors } from "constants/Colors";
import { BannerMessage } from "components/ads/BannerMessage";
const Container = styled.div` const Container = styled.div`
width: 326px; width: 326px;
@ -111,6 +112,20 @@ function NotificationsList() {
return ( return (
<Container> <Container>
<NotificationsListHeader markAllAsReadDisabled={!notifications.length} /> <NotificationsListHeader markAllAsReadDisabled={!notifications.length} />
<BannerMessage
backgroundColor={Colors.WARNING_ORANGE}
className="t--deprecation-warning"
ctaText={"Read more about it here"}
ctaURL={
"https://appsmith.notion.site/Deprecating-real-time-commenting-60a307d2c5e1485b85ff95afebb616eb"
}
icon="warning-line"
iconColor={Colors.WARNING_SOLID}
iconSize={IconSize.XXXXL}
message={"We are removing comments from Appsmith in v1.7.11"}
messageHeader={"Comments are being deprecated"}
textColor={Colors.BROWN}
/>
{notifications.length > 0 ? ( {notifications.length > 0 ? (
<Virtuoso <Virtuoso
components={{ components={{

30
app/client/src/pages/Editor/ToggleModeButton.tsx
View File

@ -9,9 +9,8 @@ import CommentIcon from "remixicon-react/MessageLineIcon";
import { Indices } from "constants/Layers"; import { Indices } from "constants/Layers";
import { import {
setCommentMode as setCommentModeAction,
fetchApplicationCommentsRequest, fetchApplicationCommentsRequest,
showCommentsIntroCarousel, setCommentMode as setCommentModeAction,
} from "actions/commentActions"; } from "actions/commentActions";
import { import {
commentModeSelector, commentModeSelector,
@ -40,7 +39,7 @@ import {
commentsTourStepsPublishedModeTypes, commentsTourStepsPublishedModeTypes,
} from "comments/tour/commentsTourSteps"; } from "comments/tour/commentsTourSteps";
import AnalyticsUtil from "utils/AnalyticsUtil"; import AnalyticsUtil from "utils/AnalyticsUtil";
import { getAppMode } from "../../selectors/applicationSelectors"; import { getAppMode } from "selectors/applicationSelectors";
import { setPreviewModeAction } from "actions/editorActions"; import { setPreviewModeAction } from "actions/editorActions";
import { import {
getCurrentApplicationId, getCurrentApplicationId,
@ -51,6 +50,7 @@ import {
import { getCurrentGitBranch } from "selectors/gitSyncSelectors"; import { getCurrentGitBranch } from "selectors/gitSyncSelectors";
import { isExploringSelector } from "selectors/onboardingSelectors"; import { isExploringSelector } from "selectors/onboardingSelectors";
import { getIsInitialized } from "selectors/appViewSelectors"; import { getIsInitialized } from "selectors/appViewSelectors";
import { Toaster, Variant } from "components/ads";
const ModeButton = styled.div<{ const ModeButton = styled.div<{
active: boolean; active: boolean;
@ -142,9 +142,15 @@ const useUpdateCommentMode = async (currentUser?: User) => {
} }
if (updatedIsCommentMode && !currentUser?.commentOnboardingState) { if (updatedIsCommentMode && !currentUser?.commentOnboardingState) {
AnalyticsUtil.logEvent("COMMENTS_ONBOARDING_MODAL_TRIGGERED"); // Deprecating. Do not onboard more users
dispatch(showCommentsIntroCarousel()); // TODO Remove after deprecation of comments
setCommentModeInUrl(false); Toaster.show({
text: "Show error here",
variant: Variant.warning,
});
// AnalyticsUtil.logEvent("COMMENTS_ONBOARDING_MODAL_TRIGGERED");
// dispatch(showCommentsIntroCarousel());
// setCommentModeInUrl(false);
} else { } else {
setCommentModeInStore(updatedIsCommentMode); setCommentModeInStore(updatedIsCommentMode);
} }
@ -274,10 +280,14 @@ function CommentModeBtn({
> >
<TooltipComponent <TooltipComponent
content={ content={
<> <div style={{ display: "flex" }}>
Comment Mode <span>
<span style={{ color: "#fff", marginLeft: 20 }}>C</span> Comment Mode
</> <br />
(Deprecating soon)
</span>
<span>C</span>
</div>
} }
hoverOpenDelay={1000} hoverOpenDelay={1000}
position="bottom" position="bottom"

242
app/server/appsmith-server/src/main/resources/email/commentAddedTemplate.html
View File

@ -16,133 +16,133 @@
<![endif]--> <![endif]-->
<!--[if (gte mso 9)|(IE)]> <!--[if (gte mso 9)|(IE)]>
<style type="text/css"> <style type="text/css">
body { body {
width: 600px; width: 600px;
margin: 0 auto; margin: 0 auto;
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
} }
table, td { table, td {
mso-table-lspace: 0pt; mso-table-lspace: 0pt;
mso-table-rspace: 0pt; mso-table-rspace: 0pt;
} }
img { img {
-ms-interpolation-mode: bicubic; -ms-interpolation-mode: bicubic;
} }
</style> </style>
<![endif]--> <![endif]-->
<style type="text/css"> <style type="text/css">
body, p, div { body, p, div {
font-family: arial, helvetica, sans-serif; font-family: arial, helvetica, sans-serif;
font-size: 14px; font-size: 14px;
} }
body { body {
color: #000000; color: #000000;
} }
body a { body a {
color: #1188E6; color: #1188E6;
text-decoration: none; text-decoration: none;
} }
p { p {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
table.wrapper { table.wrapper {
width: 100% !important; width: 100% !important;
table-layout: fixed; table-layout: fixed;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%; -moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
} }
img.max-width { img.max-width {
max-width: 100% !important; max-width: 100% !important;
} }
.column.of-2 { .column.of-2 {
width: 50%; width: 50%;
} }
.column.of-3 { .column.of-3 {
width: 33.333%; width: 33.333%;
} }
.column.of-4 { .column.of-4 {
width: 25%; width: 25%;
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
.preheader .rightColumnContent, .preheader .rightColumnContent,
.footer .rightColumnContent { .footer .rightColumnContent {
text-align: left !important; text-align: left !important;
} }
.preheader .rightColumnContent div, .preheader .rightColumnContent div,
.preheader .rightColumnContent span, .preheader .rightColumnContent span,
.footer .rightColumnContent div, .footer .rightColumnContent div,
.footer .rightColumnContent span { .footer .rightColumnContent span {
text-align: left !important; text-align: left !important;
} }
.preheader .rightColumnContent, .preheader .rightColumnContent,
.preheader .leftColumnContent { .preheader .leftColumnContent {
font-size: 80% !important; font-size: 80% !important;
padding: 5px 0; padding: 5px 0;
} }
table.wrapper-mobile { table.wrapper-mobile {
width: 100% !important; width: 100% !important;
table-layout: fixed; table-layout: fixed;
} }
img.max-width { img.max-width {
height: auto !important; height: auto !important;
max-width: 100% !important; max-width: 100% !important;
} }
a.bulletproof-button { a.bulletproof-button {
display: block !important; display: block !important;
width: auto !important; width: auto !important;
font-size: 80%; font-size: 80%;
padding-left: 0 !important; padding-left: 0 !important;
padding-right: 0 !important; padding-right: 0 !important;
} }
.columns { .columns {
width: 100% !important; width: 100% !important;
} }
.column { .column {
display: block !important; display: block !important;
width: 100% !important; width: 100% !important;
padding-left: 0 !important; padding-left: 0 !important;
padding-right: 0 !important; padding-right: 0 !important;
margin-left: 0 !important; margin-left: 0 !important;
margin-right: 0 !important; margin-right: 0 !important;
} }
} }
</style> </style>
<!--user entered Head Start--><!--End Head user entered--> <!--user entered Head Start--><!--End Head user entered-->
</head> </head>
<body> <body>
<center class="wrapper" data-link-color="#1188E6" <center class="wrapper" data-link-color="#1188E6"
data-body-style="font-size:14px; font-family:arial,helvetica,sans-serif; color:#000000; background-color:#FFFFFF;"> data-body-style="font-size:14px; font-family:arial,helvetica,sans-serif; color:#000000; background-color:#FFFFFF;">
<div class="webkit"> <div class="webkit">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#FFFFFF"> <table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#FFFFFF">
<tbody> <tbody>
<tr> <tr>
<td valign="top" bgcolor="#FFFFFF" width="100%"> <td valign="top" bgcolor="#FFFFFF" width="100%">
<table width="100%" role="content-container" class="outer" align="center" cellpadding="0" <table width="100%" role="content-container" class="outer" align="center" cellpadding="0"
cellspacing="0" border="0"> cellspacing="0" border="0">
<tbody> <tbody>
<tr> <tr>
<td width="100%"> <td width="100%">
@ -157,16 +157,16 @@
<td width="600"> <td width="600">
<![endif]--> <![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" <table width="100%" cellpadding="0" cellspacing="0" border="0"
style="width:100%; max-width:600px;" align="center"> style="width:100%; max-width:600px;" align="center">
<tbody> <tbody>
<tr> <tr>
<td role="modules-container" <td role="modules-container"
style="padding:0px 0px 0px 0px; color:#000000; text-align:left;" style="padding:0px 0px 0px 0px; color:#000000; text-align:left;"
bgcolor="#ffffff" width="100%" align="left"> bgcolor="#ffffff" width="100%" align="left">
<table class="module preheader preheader-hide" role="module" <table class="module preheader preheader-hide" role="module"
data-type="preheader" border="0" cellpadding="0" data-type="preheader" border="0" cellpadding="0"
cellspacing="0" width="100%" cellspacing="0" width="100%"
style="display: none !important; mso-hide: all; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;"> style="display: none !important; mso-hide: all; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">
<tbody> <tbody>
<tr> <tr>
<td role="module-content"> <td role="module-content">
@ -176,12 +176,30 @@
</tbody> </tbody>
</table> </table>
<table class="wrapper" role="module" data-type="image" <table class="wrapper" role="module" data-type="image"
border="0" cellpadding="0" cellspacing="0" width="100%" border="0" cellpadding="0" cellspacing="0" width="100%"
style="table-layout: fixed;"> style="table-layout: fixed;">
<tbody> <tbody>
<tr> <tr>
<td style="font-size:6px; line-height:10px; padding-top:36px;" <td style="font-size:6px; line-height:10px; padding-top:36px;"
valign="top" align="center"> valign="top" align="center">
<div style="display:block;padding:02px;background-color:#FEB811">
</div>
<div style="display:block;padding:10px;margin-bottom: 40px; color: #393939;background-color:#FFF8E2">
<svg width="50" height="50" style="fill:#FEB811"clip-rule="evenodd" fill-rule="evenodd" color="yellow" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.095 19.886 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm9.907-6.881c-.414 0-.75.336-.75.75v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.5c0-.414-.336-.75-.75-.75zm-.002-3c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z" fill-rule="nonzero"/></svg>
<div style="margin:8px 16px 16px 16px;font-size:18px;line-height: 35px;">
<i class="fa-solid fa-triangle-exclamation"></i>
<b>Commenting is deprecated</b><br>
We will be removing comments from Appsmith in v1.7.11<br>
<a href="https://appsmith.notion.site/Deprecating-real-time-commenting-60a307d2c5e1485b85ff95afebb616eb" target ="_blank" style="text-decoration: underline;font-size:16px;color:#393939;">Learn More</a>
</div>
</div>
</td>
</tr>
<tr>
<td style="font-size:6px; line-height:10px; padding-top:px;"
valign="top" align="center">
<a href="https://www.appsmith.com/"> <a href="https://www.appsmith.com/">
<img width="50px" src="https://assets.appsmith.com/email/appsmith_logo_20x20.png" /> <img width="50px" src="https://assets.appsmith.com/email/appsmith_logo_20x20.png" />
</a> </a>
@ -190,13 +208,13 @@
</tbody> </tbody>
</table> </table>
<table class="module" role="module" data-type="text" border="0" <table class="module" role="module" data-type="text" border="0"
cellpadding="0" cellspacing="0" width="100%" cellpadding="0" cellspacing="0" width="100%"
style="table-layout: fixed;"> style="table-layout: fixed;">
<tbody> <tbody>
<tr> <tr>
<td style="padding:0px 0px 18px 0px; line-height:22px; text-align:center; background-color:#ffffff;" <td style="padding:0px 0px 18px 0px; line-height:22px; text-align:center; background-color:#ffffff;"
height="100%" valign="top" bgcolor="#ffffff" height="100%" valign="top" bgcolor="#ffffff"
role="module-content"> role="module-content">
<div style="margin-top:37px;font-size:18px;line-height: 35px;"> <div style="margin-top:37px;font-size:18px;line-height: 35px;">
<b>{{Commenter_Name}}</b>, <b>{{Commenter_Name}}</b>,
{{#NewComment}} added {{/NewComment}} {{#NewComment}} added {{/NewComment}}
@ -214,10 +232,10 @@
{{/Comment_Body}} {{/Comment_Body}}
<div style="margin-top:40px"> <div style="margin-top:40px">
<a href="{{commentUrl}}" <a href="{{commentUrl}}"
style="background-color:#ff6d2d; border:1px solid #ff6d2d; border-color:#ff6d2d; border-width:1px; color:#ffffff; display:inline-block; font-weight:400; letter-spacing:0px; line-height:6px; padding:12px 18px 12px 18px; text-align:center; text-decoration:none; border-style:solid; font-family:tahoma,geneva,sans-serif; font-size:16px;" style="background-color:#ff6d2d; border:1px solid #ff6d2d; border-color:#ff6d2d; border-width:1px; color:#ffffff; display:inline-block; font-weight:400; letter-spacing:0px; line-height:6px; padding:12px 18px 12px 18px; text-align:center; text-decoration:none; border-style:solid; font-family:tahoma,geneva,sans-serif; font-size:16px;"
target="_blank">VIEW THE COMMENT</a> target="_blank">VIEW THE COMMENT</a>
</div> </div>
<!-- <div style="margin-top:23px">You can answer by replying to this email.</div>--> <!-- <div style="margin-top:23px">You can answer by replying to this email.</div>-->
<hr style="margin-top:40px;margin-bottom:40px;height:0px;border:0; border-top: 1px solid #E0DEDE;" /> <hr style="margin-top:40px;margin-bottom:40px;height:0px;border:0; border-top: 1px solid #E0DEDE;" />
<div><a href="{{UnsubscribeLink}}" style="text-decoration:underline">Turn off comment notifications for this thread</a></div> <div><a href="{{UnsubscribeLink}}" style="text-decoration:underline">Turn off comment notifications for this thread</a></div>
<div style="font-size:12px;line-height:19px;color:#A9A7A7;margin-top:17px"> <div style="font-size:12px;line-height:19px;color:#A9A7A7;margin-top:17px">