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,