[No QA] Add green dot in LHN when chat is unread with mention

src/components/LHNOptionsList/OptionRowLHN.js

@@ -96,6 +96,7 @@ const OptionRowLHN = (props) => {
     const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
 
     const avatarTooltips = !optionItem.isChatRoom && !optionItem.isArchivedRoom ? _.pluck(optionItem.displayNamesWithTooltips, 'tooltip') : undefined;
+    const shouldShowGreenDotIndicator = optionItem.isUnreadWithMention || (optionItem.hasOutstandingIOU && !optionItem.isIOUReportOwner);
 
     return (
         <OfflineWithFeedback
@@ -224,7 +225,7 @@ const OptionRowLHN = (props) => {
                                     <Icon src={Expensicons.Pencil} height={16} width={16} />
                                 </View>
                             )}
-                            {optionItem.hasOutstandingIOU && !optionItem.isIOUReportOwner && <Icon src={Expensicons.DotIndicator} fill={colors.green} />}
+                            {shouldShowGreenDotIndicator && <Icon src={Expensicons.DotIndicator} fill={themeColors.success} />}
                             {optionItem.isPinned && (
                                 <View
                                     style={styles.ml2}

src/libs/ReportUtils.js

@@ -1358,6 +1358,21 @@ function isUnread(report) {
     return lastReadTime < lastVisibleActionCreated;
 }
 
+/**
+ * @param {Object} report
+ * @returns {Boolean}
+ */
+function isUnreadWithMention(report) {
+    if (!report) {
+        return false;
+    }
+
+    // lastMentionedTime and lastReadTime are both datetime strings and can be compared directly
+    const lastMentionedTime = report.lastMentionedTime || '';
+    const lastReadTime = report.lastReadTime || '';
+    return lastReadTime < lastMentionedTime;
+}
+
 /**
  * Determines if a report has an outstanding IOU that doesn't belong to the currently logged in user
  *
@@ -1780,6 +1795,7 @@ export {
     generateReportID,
     hasReportNameError,
     isUnread,
+    isUnreadWithMention,
     buildOptimisticWorkspaceChats,
     buildOptimisticChatReport,
     buildOptimisticClosedReportAction,

src/libs/SidebarUtils.js

@@ -215,6 +215,7 @@ function getOptionData(reportID) {
         phoneNumber: null,
         payPalMeAddress: null,
         isUnread: null,
+        isUnreadWithMention: null,
         hasDraftComment: false,
         keyForList: null,
         searchText: null,
@@ -242,6 +243,7 @@ function getOptionData(reportID) {
     result.ownerEmail = report.ownerEmail;
     result.reportID = report.reportID;
     result.isUnread = ReportUtils.isUnread(report);
+    result.isUnreadWithMention = ReportUtils.isUnreadWithMention(report);
     result.hasDraftComment = report.hasDraft;
     result.isPinned = report.isPinned;
     result.iouReportID = report.iouReportID;

src/pages/home/sidebar/SidebarLinks.js

@@ -237,6 +237,7 @@ const chatReportSelector = (report) => {
             addWorkspaceRoom: report.errorFields && report.errorFields.addWorkspaceRoom,
         },
         lastReadTime: report.lastReadTime,
+        lastMentionedTime: report.lastMentionedTime,
         lastMessageText: report.lastMessageText,
         lastVisibleActionCreated: report.lastVisibleActionCreated,
         iouReportID: report.iouReportID,

tests/actions/ReportTest.js

@@ -235,7 +235,7 @@ describe('actions/Report', () => {
             })
             .then(() => TestHelper.setPersonalDetails(USER_1_LOGIN, USER_1_ACCOUNT_ID))
             .then(() => {
-                // When a Pusher event is handled for a new report comment
+                // When a Pusher event is handled for a new report comment that includes a mention of the current user
                 reportActionCreatedDate = DateUtils.getDBTime();
                 channel.emit(Pusher.TYPE.ONYX_API_UPDATE, [
                     {
@@ -247,6 +247,7 @@ describe('actions/Report', () => {
                             lastMessageText: 'Comment 1',
                             lastActorEmail: USER_2_LOGIN,
                             lastVisibleActionCreated: reportActionCreatedDate,
+                            lastMentionedTime: reportActionCreatedDate,
                             lastReadTime: DateUtils.subtractMillisecondsFromDateTime(reportActionCreatedDate, 1),
                         },
                     },
@@ -275,6 +276,9 @@ describe('actions/Report', () => {
                 // Then the report will be unread
                 expect(ReportUtils.isUnread(report)).toBe(true);
 
+                // And show a green dot for unread mentions in the LHN
+                expect(ReportUtils.isUnreadWithMention(report)).toBe(true);
+
                 // When the user visits the report
                 jest.advanceTimersByTime(10);
                 currentTime = DateUtils.getDBTime();
@@ -286,14 +290,18 @@ describe('actions/Report', () => {
                 expect(ReportUtils.isUnread(report)).toBe(false);
                 expect(moment.utc(report.lastReadTime).valueOf()).toBeGreaterThanOrEqual(moment.utc(currentTime).valueOf());
 
+                // And no longer show the green dot for unread mentions in the LHN
+                expect(ReportUtils.isUnreadWithMention(report)).toBe(false);
+
                 // When the user manually marks a message as "unread"
                 jest.advanceTimersByTime(10);
                 Report.markCommentAsUnread(REPORT_ID, reportActionCreatedDate);
                 return waitForPromisesToResolve();
             })
             .then(() => {
-                // Then the report will be unread
+                // Then the report will be unread and show the green dot for unread mentions in LHN
                 expect(ReportUtils.isUnread(report)).toBe(true);
+                expect(ReportUtils.isUnreadWithMention(report)).toBe(true);
                 expect(report.lastReadTime).toBe(DateUtils.subtractMillisecondsFromDateTime(reportActionCreatedDate, 1));
 
                 // When a new comment is added by the current user
@@ -303,8 +311,9 @@ describe('actions/Report', () => {
                 return waitForPromisesToResolve();
             })
             .then(() => {
-                // The report will be read and the lastReadTime updated
+                // The report will be read, the green dot for unread mentions will go away, and the lastReadTime updated
                 expect(ReportUtils.isUnread(report)).toBe(false);
+                expect(ReportUtils.isUnreadWithMention(report)).toBe(false);
                 expect(moment.utc(report.lastReadTime).valueOf()).toBeGreaterThanOrEqual(moment.utc(currentTime).valueOf());
                 expect(report.lastMessageText).toBe('Current User Comment 1');