chore: Deprecation warning for comments (#15363)
Adds deprecation warning for comments Resolves #15364
This commit is contained in:
Hetu Nandu
GitHub
parent
58c7f3d805
commit
a1e5b511eb
|
|
@ -14,7 +14,9 @@
|
|||
"json": false
|
||||
},
|
||||
"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,
|
||||
"viewportHeight": 1100,
|
||||
|
|
@ -23,4 +25,4 @@
|
|||
"runMode": 1,
|
||||
"openMode": 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@ import { useSelector } from "react-redux";
|
|||
import { commentModeSelector } from "selectors/commentsSelectors";
|
||||
import AppCommentsHeader from "./AppCommentsHeader";
|
||||
import AppCommentThreads from "./AppCommentThreads";
|
||||
import { Colors } from "constants/Colors";
|
||||
import { IconSize } from "components/ads";
|
||||
import { BannerMessage } from "components/ads/BannerMessage";
|
||||
|
||||
function AppComments() {
|
||||
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}`}
|
||||
>
|
||||
<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 />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ import {
|
|||
|
||||
import { ReactComponent as EmptyState } from "assets/icons/comments/notifications-empty-state.svg";
|
||||
import { Colors } from "constants/Colors";
|
||||
import { BannerMessage } from "components/ads/BannerMessage";
|
||||
|
||||
const Container = styled.div`
|
||||
width: 326px;
|
||||
|
|
@ -111,6 +112,20 @@ function NotificationsList() {
|
|||
return (
|
||||
<Container>
|
||||
<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 ? (
|
||||
<Virtuoso
|
||||
components={{
|
||||
|
|
|
|||
|
|
@ -9,9 +9,8 @@ import CommentIcon from "remixicon-react/MessageLineIcon";
|
|||
import { Indices } from "constants/Layers";
|
||||
|
||||
import {
|
||||
setCommentMode as setCommentModeAction,
|
||||
fetchApplicationCommentsRequest,
|
||||
showCommentsIntroCarousel,
|
||||
setCommentMode as setCommentModeAction,
|
||||
} from "actions/commentActions";
|
||||
import {
|
||||
commentModeSelector,
|
||||
|
|
@ -40,7 +39,7 @@ import {
|
|||
commentsTourStepsPublishedModeTypes,
|
||||
} from "comments/tour/commentsTourSteps";
|
||||
import AnalyticsUtil from "utils/AnalyticsUtil";
|
||||
import { getAppMode } from "../../selectors/applicationSelectors";
|
||||
import { getAppMode } from "selectors/applicationSelectors";
|
||||
import { setPreviewModeAction } from "actions/editorActions";
|
||||
import {
|
||||
getCurrentApplicationId,
|
||||
|
|
@ -51,6 +50,7 @@ import {
|
|||
import { getCurrentGitBranch } from "selectors/gitSyncSelectors";
|
||||
import { isExploringSelector } from "selectors/onboardingSelectors";
|
||||
import { getIsInitialized } from "selectors/appViewSelectors";
|
||||
import { Toaster, Variant } from "components/ads";
|
||||
|
||||
const ModeButton = styled.div<{
|
||||
active: boolean;
|
||||
|
|
@ -142,9 +142,15 @@ const useUpdateCommentMode = async (currentUser?: User) => {
|
|||
}
|
||||
|
||||
if (updatedIsCommentMode && !currentUser?.commentOnboardingState) {
|
||||
AnalyticsUtil.logEvent("COMMENTS_ONBOARDING_MODAL_TRIGGERED");
|
||||
dispatch(showCommentsIntroCarousel());
|
||||
setCommentModeInUrl(false);
|
||||
// Deprecating. Do not onboard more users
|
||||
// TODO Remove after deprecation of comments
|
||||
Toaster.show({
|
||||
text: "Show error here",
|
||||
variant: Variant.warning,
|
||||
});
|
||||
// AnalyticsUtil.logEvent("COMMENTS_ONBOARDING_MODAL_TRIGGERED");
|
||||
// dispatch(showCommentsIntroCarousel());
|
||||
// setCommentModeInUrl(false);
|
||||
} else {
|
||||
setCommentModeInStore(updatedIsCommentMode);
|
||||
}
|
||||
|
|
@ -274,10 +280,14 @@ function CommentModeBtn({
|
|||
>
|
||||
<TooltipComponent
|
||||
content={
|
||||
<>
|
||||
Comment Mode
|
||||
<span style={{ color: "#fff", marginLeft: 20 }}>C</span>
|
||||
</>
|
||||
<div style={{ display: "flex" }}>
|
||||
<span>
|
||||
Comment Mode
|
||||
<br />
|
||||
(Deprecating soon)
|
||||
</span>
|
||||
<span>C</span>
|
||||
</div>
|
||||
}
|
||||
hoverOpenDelay={1000}
|
||||
position="bottom"
|
||||
|
|
|
|||
|
|
@ -16,133 +16,133 @@
|
|||
<![endif]-->
|
||||
<!--[if (gte mso 9)|(IE)]>
|
||||
<style type="text/css">
|
||||
body {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
body {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table, td {
|
||||
mso-table-lspace: 0pt;
|
||||
mso-table-rspace: 0pt;
|
||||
}
|
||||
table, td {
|
||||
mso-table-lspace: 0pt;
|
||||
mso-table-rspace: 0pt;
|
||||
}
|
||||
|
||||
img {
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
</style>
|
||||
img {
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
</style>
|
||||
<![endif]-->
|
||||
<style type="text/css">
|
||||
body, p, div {
|
||||
font-family: arial, helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
body, p, div {
|
||||
font-family: arial, helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #000000;
|
||||
}
|
||||
body {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
body a {
|
||||
color: #1188E6;
|
||||
text-decoration: none;
|
||||
}
|
||||
body a {
|
||||
color: #1188E6;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table.wrapper {
|
||||
width: 100% !important;
|
||||
table-layout: fixed;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-moz-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
table.wrapper {
|
||||
width: 100% !important;
|
||||
table-layout: fixed;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-moz-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
img.max-width {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
img.max-width {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.column.of-2 {
|
||||
width: 50%;
|
||||
}
|
||||
.column.of-2 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.column.of-3 {
|
||||
width: 33.333%;
|
||||
}
|
||||
.column.of-3 {
|
||||
width: 33.333%;
|
||||
}
|
||||
|
||||
.column.of-4 {
|
||||
width: 25%;
|
||||
}
|
||||
.column.of-4 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.preheader .rightColumnContent,
|
||||
.footer .rightColumnContent {
|
||||
text-align: left !important;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
.preheader .rightColumnContent,
|
||||
.footer .rightColumnContent {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.preheader .rightColumnContent div,
|
||||
.preheader .rightColumnContent span,
|
||||
.footer .rightColumnContent div,
|
||||
.footer .rightColumnContent span {
|
||||
text-align: left !important;
|
||||
}
|
||||
.preheader .rightColumnContent div,
|
||||
.preheader .rightColumnContent span,
|
||||
.footer .rightColumnContent div,
|
||||
.footer .rightColumnContent span {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.preheader .rightColumnContent,
|
||||
.preheader .leftColumnContent {
|
||||
font-size: 80% !important;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.preheader .rightColumnContent,
|
||||
.preheader .leftColumnContent {
|
||||
font-size: 80% !important;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
table.wrapper-mobile {
|
||||
width: 100% !important;
|
||||
table-layout: fixed;
|
||||
}
|
||||
table.wrapper-mobile {
|
||||
width: 100% !important;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
img.max-width {
|
||||
height: auto !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
img.max-width {
|
||||
height: auto !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
a.bulletproof-button {
|
||||
display: block !important;
|
||||
width: auto !important;
|
||||
font-size: 80%;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
a.bulletproof-button {
|
||||
display: block !important;
|
||||
width: auto !important;
|
||||
font-size: 80%;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.columns {
|
||||
width: 100% !important;
|
||||
}
|
||||
.columns {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.column {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!--user entered Head Start--><!--End Head user entered-->
|
||||
</head>
|
||||
<body>
|
||||
<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">
|
||||
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#FFFFFF">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td valign="top" bgcolor="#FFFFFF" width="100%">
|
||||
<table width="100%" role="content-container" class="outer" align="center" cellpadding="0"
|
||||
cellspacing="0" border="0">
|
||||
cellspacing="0" border="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td width="100%">
|
||||
|
|
@ -157,16 +157,16 @@
|
|||
<td width="600">
|
||||
<![endif]-->
|
||||
<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>
|
||||
<tr>
|
||||
<td role="modules-container"
|
||||
style="padding:0px 0px 0px 0px; color:#000000; text-align:left;"
|
||||
bgcolor="#ffffff" width="100%" align="left">
|
||||
style="padding:0px 0px 0px 0px; color:#000000; text-align:left;"
|
||||
bgcolor="#ffffff" width="100%" align="left">
|
||||
<table class="module preheader preheader-hide" role="module"
|
||||
data-type="preheader" border="0" cellpadding="0"
|
||||
cellspacing="0" width="100%"
|
||||
style="display: none !important; mso-hide: all; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">
|
||||
data-type="preheader" border="0" cellpadding="0"
|
||||
cellspacing="0" width="100%"
|
||||
style="display: none !important; mso-hide: all; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td role="module-content">
|
||||
|
|
@ -176,12 +176,30 @@
|
|||
</tbody>
|
||||
</table>
|
||||
<table class="wrapper" role="module" data-type="image"
|
||||
border="0" cellpadding="0" cellspacing="0" width="100%"
|
||||
style="table-layout: fixed;">
|
||||
border="0" cellpadding="0" cellspacing="0" width="100%"
|
||||
style="table-layout: fixed;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<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/">
|
||||
<img width="50px" src="https://assets.appsmith.com/email/appsmith_logo_20x20.png" />
|
||||
</a>
|
||||
|
|
@ -190,13 +208,13 @@
|
|||
</tbody>
|
||||
</table>
|
||||
<table class="module" role="module" data-type="text" border="0"
|
||||
cellpadding="0" cellspacing="0" width="100%"
|
||||
style="table-layout: fixed;">
|
||||
cellpadding="0" cellspacing="0" width="100%"
|
||||
style="table-layout: fixed;">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="padding:0px 0px 18px 0px; line-height:22px; text-align:center; background-color:#ffffff;"
|
||||
height="100%" valign="top" bgcolor="#ffffff"
|
||||
role="module-content">
|
||||
height="100%" valign="top" bgcolor="#ffffff"
|
||||
role="module-content">
|
||||
<div style="margin-top:37px;font-size:18px;line-height: 35px;">
|
||||
<b>{{Commenter_Name}}</b>,
|
||||
{{#NewComment}} added {{/NewComment}}
|
||||
|
|
@ -214,10 +232,10 @@
|
|||
{{/Comment_Body}}
|
||||
<div style="margin-top:40px">
|
||||
<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;"
|
||||
target="_blank">VIEW THE COMMENT</a>
|
||||
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>
|
||||
</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;" />
|
||||
<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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user