From a1e5b511ebb98165770db33cbe65158dafb9ffac Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetu@appsmith.com>
Date: Tue, 26 Jul 2022 18:04:54 +0530
Subject: [PATCH] chore: Deprecation warning for comments (#15363)

Adds deprecation warning for comments

Resolves #15364
---
 app/client/cypress.json                       |   6 +-
 .../src/comments/AppComments/AppComments.tsx  |  17 ++
 .../src/notifications/NotificationsList.tsx   |  15 ++
 .../src/pages/Editor/ToggleModeButton.tsx     |  30 ++-
 .../resources/email/commentAddedTemplate.html | 242 ++++++++++--------
 5 files changed, 186 insertions(+), 124 deletions(-)

diff --git a/app/client/cypress.json b/app/client/cypress.json
index a8d3c6ae99..45c66447fb 100644
--- a/app/client/cypress.json
+++ b/app/client/cypress.json
@@ -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
 	}
-}
\ No newline at end of file
+}
diff --git a/app/client/src/comments/AppComments/AppComments.tsx b/app/client/src/comments/AppComments/AppComments.tsx
index cfb37cda93..26a82dafaf 100644
--- a/app/client/src/comments/AppComments/AppComments.tsx
+++ b/app/client/src/comments/AppComments/AppComments.tsx
@@ -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>
   );
diff --git a/app/client/src/notifications/NotificationsList.tsx b/app/client/src/notifications/NotificationsList.tsx
index 620a04a807..b2d0958d25 100644
--- a/app/client/src/notifications/NotificationsList.tsx
+++ b/app/client/src/notifications/NotificationsList.tsx
@@ -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={{
diff --git a/app/client/src/pages/Editor/ToggleModeButton.tsx b/app/client/src/pages/Editor/ToggleModeButton.tsx
index 69491cfb7e..9de9a192a7 100644
--- a/app/client/src/pages/Editor/ToggleModeButton.tsx
+++ b/app/client/src/pages/Editor/ToggleModeButton.tsx
@@ -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"
diff --git a/app/server/appsmith-server/src/main/resources/email/commentAddedTemplate.html b/app/server/appsmith-server/src/main/resources/email/commentAddedTemplate.html
index 9b4882f153..d616b278f6 100644
--- a/app/server/appsmith-server/src/main/resources/email/commentAddedTemplate.html
+++ b/app/server/appsmith-server/src/main/resources/email/commentAddedTemplate.html
@@ -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">