Keep chats with draft comments in the LHN

src/pages/home/sidebar/ChatLinkRow.js

@@ -10,6 +10,7 @@ import {
 import styles from '../../../styles/StyleSheet';
 import ChatSwitcherOptionPropTypes from './ChatSwitcherOptionPropTypes';
 import ROUTES from '../../../ROUTES';
+import pencilIcon from '../../../../assets/images/icon-pencil.png';
 import PressableLink from '../../../components/PressableLink';
 
 const propTypes = {
@@ -124,6 +125,13 @@ const ChatLinkRow = ({
                     </TouchableOpacity>
                 </View>
             )}
+            {option.hasDraftComment && (
+                <Image
+                    style={[styles.LHNPencilIcon]}
+                    resizeMode="contain"
+                    source={pencilIcon}
+                />
+            )}
         </View>
     );
 };

src/pages/home/sidebar/SidebarLinks.js

@@ -34,6 +34,9 @@ const propTypes = {
         unreadActionCount: PropTypes.number,
     })),
 
+    // List of draft comments. We don't know the shape, since the keys include the report numbers
+    comments: PropTypes.objectOf(PropTypes.string),
+
     isChatSwitcherActive: PropTypes.bool,
 
     // List of users' personal details
@@ -43,12 +46,15 @@ const propTypes = {
         displayName: PropTypes.string.isRequired,
     })),
 };
+
 const defaultProps = {
     reports: {},
     isChatSwitcherActive: false,
+    comments: {},
     personalDetails: {},
 };
 
+
 const SidebarLinks = (props) => {
     const reportIDInUrl = parseInt(props.match.params.reportID, 10);
     const sortedReports = lodashOrderby(props.reports, [
@@ -58,10 +64,16 @@ const SidebarLinks = (props) => {
         'desc',
         'asc'
     ]);
+    function hasComment(reportID) {
+        const allComments = get(props.comments, `${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`, '');
+        return allComments.length > 0;
+    }
 
-    // Filter the reports so that the only reports shown are pinned, unread, and the one matching the URL
-    // eslint-disable-next-line max-len
-    const reportsToDisplay = _.filter(sortedReports, report => (report.isPinned || (report.unreadActionCount > 0) || report.reportID === reportIDInUrl));
+    // Filter the reports so that the only reports shown are pinned, unread, have draft
+    // comments (but are not the open one), and the one matching the URL
+    const reportsToDisplay = _.filter(sortedReports, report => (report.isPinned || (report.unreadActionCount > 0)
+            || report.reportID === reportIDInUrl
+            || (report.reportID !== reportIDInUrl && hasComment(report.reportID))));
 
     // Update styles to hide the report links if they should not be visible
     const sidebarLinksStyle = !props.isChatSwitcherActive
@@ -102,6 +114,7 @@ const SidebarLinks = (props) => {
                                 login: participantDetails ? participantDetails.login : '',
                                 reportID: report.reportID,
                                 isUnread: report.unreadActionCount > 0,
+                                hasDraftComment: report.reportID !== reportIDInUrl && hasComment(report.reportID)
                             }}
                             onSelectRow={props.onLinkClick}
                             optionIsFocused={report.reportID === reportIDInUrl}
@@ -123,6 +136,9 @@ export default compose(
         reports: {
             key: ONYXKEYS.COLLECTION.REPORT,
         },
+        comments: {
+            key: ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT,
+        },
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS,
         },

src/styles/StyleSheet.js

@@ -595,6 +595,11 @@ const styles = {
         width: 18,
     },
 
+    LHNPencilIcon: {
+        height: 16,
+        width: 16,
+    },
+
     attachmentCloseIcon: {
         height: 20,
         width: 20,