diff --git a/assets/images/icon-pencil.png b/assets/images/icon-pencil.png
new file mode 100644
index 000000000000..22b1dc80d8aa
Binary files /dev/null and b/assets/images/icon-pencil.png differ
diff --git a/src/pages/home/sidebar/ChatLinkRow.js b/src/pages/home/sidebar/ChatLinkRow.js
index 425f0468e917..579e73851e9a 100644
--- a/src/pages/home/sidebar/ChatLinkRow.js
+++ b/src/pages/home/sidebar/ChatLinkRow.js
@@ -11,6 +11,7 @@ import {
import styles, {colors} 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 = {
@@ -87,9 +88,9 @@ const ChatLinkRow = ({
)
}
- {option.text === option.alternateText ? (
+ {(option.text === option.alternateText || option.alternateText.length === 0) ? (
- {option.alternateText}
+ {option.text}
) : (
<>
@@ -122,6 +123,13 @@ const ChatLinkRow = ({
)}
+ {option.hasDraftComment && (
+
+ )}
);
};
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index e78e162d264d..252994adc1fa 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/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, [
@@ -59,9 +65,22 @@ const SidebarLinks = (props) => {
'asc'
]);
- // 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));
+ /**
+ * Check if the report has a draft comment
+ *
+ * @param {number} reportID
+ * @returns {boolean}
+ */
+ 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, 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 +121,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 +143,9 @@ export default compose(
reports: {
key: ONYXKEYS.COLLECTION.REPORT,
},
+ comments: {
+ key: ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT,
+ },
personalDetails: {
key: ONYXKEYS.PERSONAL_DETAILS,
},
diff --git a/src/styles/StyleSheet.js b/src/styles/StyleSheet.js
index 71fcc1c84c7c..50bc7dea6d3b 100644
--- a/src/styles/StyleSheet.js
+++ b/src/styles/StyleSheet.js
@@ -595,6 +595,11 @@ const styles = {
width: 18,
},
+ LHNPencilIcon: {
+ height: 16,
+ width: 16,
+ },
+
attachmentCloseIcon: {
height: 20,
width: 20,