PLT-3366 Holding down the ALT key and clicking on a message adds a new messages indicator (squashed) (#3374)

10 files changed, 209 insertions, 36 deletions

diff --git a/webapp/actions/channel_actions.jsx b/webapp/actions/channel_actions.jsx
index 9e5ecb03b..f8bc61538 100644
--- a/webapp/actions/channel_actions.jsx
+++ b/webapp/actions/channel_actions.jsx
@@ -5,6 +5,8 @@ import {browserHistory} from 'react-router/es6';
 import * as Utils from 'utils/utils.jsx';
 import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
+import ChannelStore from 'stores/channel_store.jsx';
+import * as AsyncClient from 'utils/async_client.jsx';
 import Client from 'utils/web_client.jsx';
 
 export function goToChannel(channel) {
@@ -24,3 +26,13 @@ export function goToChannel(channel) {
 export function executeCommand(channelId, message, suggest, success, error) {
     Client.executeCommand(channelId, message, suggest, success, error);
 }
+
+export function setChannelAsRead(channelIdParam) {
+    const channelId = channelIdParam || ChannelStore.getCurrentId();
+    AsyncClient.updateLastViewedAt();
+    ChannelStore.resetCounts(channelId);
+    ChannelStore.emitChange();
+    if (channelId === ChannelStore.getCurrentId()) {
+        ChannelStore.emitLastViewed(Number.MAX_VALUE, false);
+    }
+}
diff --git a/webapp/actions/post_actions.jsx b/webapp/actions/post_actions.jsx
index 866ae5888..a6b464a24 100644
--- a/webapp/actions/post_actions.jsx
+++ b/webapp/actions/post_actions.jsx
@@ -6,7 +6,9 @@ import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
 import ChannelStore from 'stores/channel_store.jsx';
 import PostStore from 'stores/post_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
+import UserStore from 'stores/user_store.jsx';
 
+import * as PostUtils from 'utils/post_utils.jsx';
 import Constants from 'utils/constants.jsx';
 const ActionTypes = Constants.ActionTypes;
 
@@ -62,3 +64,53 @@ export function handleNewPost(post, msg) {
         websocketMessageProps
     });
 }
+
+export function setUnreadPost(channelId, postId) {
+    let lastViewed = 0;
+    let ownNewMessage = false;
+    const post = PostStore.getPost(channelId, postId);
+    const posts = PostStore.getVisiblePosts(channelId).posts;
+    var currentUsedId = UserStore.getCurrentId();
+    if (currentUsedId === post.user_id || PostUtils.isSystemMessage(post)) {
+        for (const otherPostId in posts) {
+            if (lastViewed < posts[otherPostId].create_at && currentUsedId !== posts[otherPostId].user_id && !PostUtils.isSystemMessage(posts[otherPostId])) {
+                lastViewed = posts[otherPostId].create_at;
+            }
+        }
+        if (lastViewed === 0) {
+            lastViewed = Number.MAX_VALUE;
+        } else if (lastViewed > post.create_at) {
+            lastViewed = post.create_at - 1;
+            ownNewMessage = true;
+        } else {
+            lastViewed -= 1;
+        }
+    } else {
+        lastViewed = post.create_at - 1;
+    }
+
+    if (lastViewed === Number.MAX_VALUE) {
+        AsyncClient.updateLastViewedAt();
+        ChannelStore.resetCounts(ChannelStore.getCurrentId());
+        ChannelStore.emitChange();
+    } else {
+        let unreadPosts = 0;
+        for (const otherPostId in posts) {
+            if (posts[otherPostId].create_at > lastViewed) {
+                unreadPosts += 1;
+            }
+        }
+        const member = ChannelStore.getMember(channelId);
+        const channel = ChannelStore.get(channelId);
+        member.last_viewed_at = lastViewed;
+        member.msg_count = channel.total_msg_count - unreadPosts;
+        member.mention_count = 0;
+        ChannelStore.setChannelMember(member);
+        ChannelStore.setUnreadCount(channelId);
+        AsyncClient.setLastViewedAt(lastViewed, channelId);
+    }
+
+    if (channelId === ChannelStore.getCurrentId()) {
+        ChannelStore.emitLastViewed(lastViewed, ownNewMessage);
+    }
+}
diff --git a/webapp/components/edit_post_modal.jsx b/webapp/components/edit_post_modal.jsx
index 4bd23a26d..1ddaee535 100644
--- a/webapp/components/edit_post_modal.jsx
+++ b/webapp/components/edit_post_modal.jsx
@@ -37,6 +37,11 @@ class EditPostModal extends React.Component {
         this.handleEditPostEvent = this.handleEditPostEvent.bind(this);
         this.handleKeyDown = this.handleKeyDown.bind(this);
         this.onPreferenceChange = this.onPreferenceChange.bind(this);
+        this.onModalHidden = this.onModalHidden.bind(this);
+        this.onModalShow = this.onModalShow.bind(this);
+        this.onModalShown = this.onModalShown.bind(this);
+        this.onModalHide = this.onModalHide.bind(this);
+        this.onModalKeyDown = this.onModalKeyDown.bind(this);
 
         this.state = {editText: '', originalText: '', title: '', post_id: '', channel_id: '', comments: 0, refocusId: '', typing: false};
     }
@@ -116,46 +121,55 @@ class EditPostModal extends React.Component {
             ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter')
         });
     }
-    componentDidMount() {
-        var self = this;
-
-        $(ReactDOM.findDOMNode(this.refs.modal)).on('hidden.bs.modal', () => {
-            self.setState({editText: '', originalText: '', title: '', channel_id: '', post_id: '', comments: 0, refocusId: '', error: '', typing: false});
+    onModalHidden() {
+        this.setState({editText: '', originalText: '', title: '', channel_id: '', post_id: '', comments: 0, refocusId: '', error: '', typing: false});
+    }
+    onModalShow(e) {
+        var button = e.relatedTarget;
+        if (!button) {
+            return;
+        }
+        this.setState({
+            editText: $(button).attr('data-message'),
+            originalText: $(button).attr('data-message'),
+            title: $(button).attr('data-title'),
+            channel_id: $(button).attr('data-channelid'),
+            post_id: $(button).attr('data-postid'),
+            comments: $(button).attr('data-comments'),
+            refocusId: $(button).attr('data-refocusid'),
+            typing: false
         });
-
-        $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', (e) => {
-            var button = e.relatedTarget;
-            if (!button) {
-                return;
-            }
-            self.setState({
-                editText: $(button).attr('data-message'),
-                originalText: $(button).attr('data-message'),
-                title: $(button).attr('data-title'),
-                channel_id: $(button).attr('data-channelid'),
-                post_id: $(button).attr('data-postid'),
-                comments: $(button).attr('data-comments'),
-                refocusId: $(button).attr('data-refocusid'),
-                typing: false
+    }
+    onModalShown() {
+        this.refs.editbox.focus();
+    }
+    onModalHide() {
+        if (this.state.refocusId !== '') {
+            setTimeout(() => {
+                $(this.state.refocusId).get(0).focus();
             });
-        });
-
-        $(ReactDOM.findDOMNode(this.refs.modal)).on('shown.bs.modal', () => {
-            self.refs.editbox.focus();
-        });
-
-        $(ReactDOM.findDOMNode(this.refs.modal)).on('hide.bs.modal', () => {
-            if (self.state.refocusId !== '') {
-                setTimeout(() => {
-                    $(self.state.refocusId).get(0).focus();
-                });
-            }
-        });
-
+        }
+    }
+    onModalKeyDown(e) {
+        if (e.which === Constants.KeyCodes.ESCAPE) {
+            e.stopPropagation();
+        }
+    }
+    componentDidMount() {
+        $(this.refs.modal).on('hidden.bs.modal', this.onModalHidden);
+        $(this.refs.modal).on('show.bs.modal', this.onModalShow);
+        $(this.refs.modal).on('shown.bs.modal', this.onModalShown);
+        $(this.refs.modal).on('hide.bs.modal', this.onModalHide);
+        $(this.refs.modal).on('keydown', this.onModalKeyDown);
         PostStore.addEditPostListener(this.handleEditPostEvent);
         PreferenceStore.addChangeListener(this.onPreferenceChange);
     }
     componentWillUnmount() {
+        $(this.refs.modal).off('hidden.bs.modal', this.onModalHidden);
+        $(this.refs.modal).off('show.bs.modal', this.onModalShow);
+        $(this.refs.modal).off('shown.bs.modal', this.onModalShown);
+        $(this.refs.modal).off('hide.bs.modal', this.onModalHide);
+        $(this.refs.modal).off('keydown', this.onModalKeyDown);
         PostStore.removeEditPostListner(this.handleEditPostEvent);
         PreferenceStore.removeChangeListener(this.onPreferenceChange);
     }
diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx
index 21d335a51..ff443e355 100644
--- a/webapp/components/post_view/components/post.jsx
+++ b/webapp/components/post_view/components/post.jsx
@@ -10,6 +10,7 @@ const ActionTypes = Constants.ActionTypes;
 import * as Utils from 'utils/utils.jsx';
 import * as PostUtils from 'utils/post_utils.jsx';
 import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
+import * as PostActions from 'actions/post_actions.jsx';
 
 import React from 'react';
 
@@ -20,6 +21,7 @@ export default class Post extends React.Component {
         this.handleCommentClick = this.handleCommentClick.bind(this);
         this.handleDropdownOpened = this.handleDropdownOpened.bind(this);
         this.forceUpdateInfo = this.forceUpdateInfo.bind(this);
+        this.handlePostClick = this.handlePostClick.bind(this);
 
         this.state = {
             dropdownOpened: false
@@ -47,6 +49,12 @@ export default class Post extends React.Component {
         this.refs.info.forceUpdate();
         this.refs.header.forceUpdate();
     }
+    handlePostClick(e) {
+        if (e.altKey) {
+            e.preventDefault();
+            PostActions.setUnreadPost(this.props.post.channel_id, this.props.post.id);
+        }
+    }
     shouldComponentUpdate(nextProps, nextState) {
         if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
             return true;
@@ -213,6 +221,7 @@ export default class Post extends React.Component {
                 <div
                     id={'post_' + post.id}
                     className={'post ' + sameUserClass + ' ' + compactClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss + ' ' + shouldHighlightClass + ' ' + systemMessageClass + ' ' + hideControls + ' ' + dropdownOpenedClass}
+                    onClick={this.handlePostClick}
                 >
                     <div className={'post__content ' + centerClass}>
                         {profilePicContainer}
diff --git a/webapp/components/post_view/components/post_list.jsx b/webapp/components/post_view/components/post_list.jsx
index 690cd96c7..70107c838 100644
--- a/webapp/components/post_view/components/post_list.jsx
+++ b/webapp/components/post_view/components/post_list.jsx
@@ -15,6 +15,8 @@ import * as Utils from 'utils/utils.jsx';
 import * as PostUtils from 'utils/post_utils.jsx';
 import DelayedAction from 'utils/delayed_action.jsx';
 
+import * as ChannelActions from 'actions/channel_actions.jsx';
+
 import Constants from 'utils/constants.jsx';
 const ScrollTypes = Constants.ScrollTypes;
 
@@ -41,6 +43,7 @@ export default class PostList extends React.Component {
         this.handleResize = this.handleResize.bind(this);
         this.scrollToBottom = this.scrollToBottom.bind(this);
         this.scrollToBottomAnimated = this.scrollToBottomAnimated.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
 
         this.jumpToPostNode = null;
         this.wasAtBottom = true;
@@ -61,6 +64,13 @@ export default class PostList extends React.Component {
         }
     }
 
+    handleKeyDown(e) {
+        if (e.which === Constants.KeyCodes.ESCAPE && $('.popover.in,.modal.in').length === 0) {
+            e.preventDefault();
+            ChannelActions.setChannelAsRead();
+        }
+    }
+
     isAtBottom() {
         // consider the view to be at the bottom if it's within this many pixels of the bottom
         const atBottomMargin = 10;
@@ -297,7 +307,7 @@ export default class PostList extends React.Component {
                 );
             }
 
-            if (postUserId !== userId &&
+            if ((postUserId !== userId || this.props.ownNewMessage) &&
                     this.props.lastViewed !== 0 &&
                     post.create_at > this.props.lastViewed &&
                     !renderedLastViewed) {
@@ -417,10 +427,12 @@ export default class PostList extends React.Component {
         }
 
         window.addEventListener('resize', this.handleResize);
+        window.addEventListener('keydown', this.handleKeyDown);
     }
 
     componentWillUnmount() {
         window.removeEventListener('resize', this.handleResize);
+        window.removeEventListener('keydown', this.handleKeyDown);
         this.scrollStopAction.cancel();
     }
 
@@ -515,7 +527,8 @@ export default class PostList extends React.Component {
 }
 
 PostList.defaultProps = {
-    lastViewed: 0
+    lastViewed: 0,
+    ownNewMessage: false
 };
 
 PostList.propTypes = {
@@ -529,6 +542,7 @@ PostList.propTypes = {
     showMoreMessagesTop: React.PropTypes.bool,
     showMoreMessagesBottom: React.PropTypes.bool,
     lastViewed: React.PropTypes.number,
+    ownNewMessage: React.PropTypes.bool,
     postsToHighlight: React.PropTypes.object,
     displayNameType: React.PropTypes.string,
     displayPostsInCenter: React.PropTypes.bool,
diff --git a/webapp/components/post_view/post_view_controller.jsx b/webapp/components/post_view/post_view_controller.jsx
index 17c3e94ae..3aba569fe 100644
--- a/webapp/components/post_view/post_view_controller.jsx
+++ b/webapp/components/post_view/post_view_controller.jsx
@@ -27,6 +27,7 @@ export default class PostViewController extends React.Component {
         this.onPostsChange = this.onPostsChange.bind(this);
         this.onEmojisChange = this.onEmojisChange.bind(this);
         this.onPostsViewJumpRequest = this.onPostsViewJumpRequest.bind(this);
+        this.onSetNewMessageIndicator = this.onSetNewMessageIndicator.bind(this);
         this.onPostListScroll = this.onPostListScroll.bind(this);
         this.onActivate = this.onActivate.bind(this);
         this.onDeactivate = this.onDeactivate.bind(this);
@@ -50,6 +51,7 @@ export default class PostViewController extends React.Component {
             profiles,
             atTop: PostStore.getVisibilityAtTop(channel.id),
             lastViewed,
+            ownNewMessage: false,
             scrollType: ScrollTypes.NEW_MESSAGE,
             displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'),
             displayPostsInCenter: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED,
@@ -117,6 +119,7 @@ export default class PostViewController extends React.Component {
         PostStore.addChangeListener(this.onPostsChange);
         PostStore.addPostsViewJumpListener(this.onPostsViewJumpRequest);
         EmojiStore.addChangeListener(this.onEmojisChange);
+        ChannelStore.addLastViewedListener(this.onSetNewMessageIndicator);
     }
 
     onDeactivate() {
@@ -125,6 +128,7 @@ export default class PostViewController extends React.Component {
         PostStore.removeChangeListener(this.onPostsChange);
         PostStore.removePostsViewJumpListener(this.onPostsViewJumpRequest);
         EmojiStore.removeChangeListener(this.onEmojisChange);
+        ChannelStore.removeLastViewedListener(this.onSetNewMessageIndicator);
     }
 
     componentWillReceiveProps(nextProps) {
@@ -149,6 +153,7 @@ export default class PostViewController extends React.Component {
             this.setState({
                 channel,
                 lastViewed,
+                ownNewMessage: false,
                 profiles: JSON.parse(JSON.stringify(profiles)),
                 postList: JSON.parse(JSON.stringify(PostStore.getVisiblePosts(channel.id))),
                 displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'),
@@ -178,6 +183,10 @@ export default class PostViewController extends React.Component {
         }
     }
 
+    onSetNewMessageIndicator(lastViewed, ownNewMessage) {
+        this.setState({lastViewed, ownNewMessage});
+    }
+
     onPostListScroll(atBottom) {
         if (atBottom) {
             this.setState({scrollType: ScrollTypes.BOTTOM});
@@ -219,6 +228,10 @@ export default class PostViewController extends React.Component {
             return true;
         }
 
+        if (nextState.ownNewMessage !== this.state.ownNewMessage) {
+            return true;
+        }
+
         if (nextState.showMoreMessagesTop !== this.state.showMoreMessagesTop) {
             return true;
         }
@@ -277,6 +290,7 @@ export default class PostViewController extends React.Component {
                     useMilitaryTime={this.state.useMilitaryTime}
                     lastViewed={this.state.lastViewed}
                     emojis={this.state.emojis}
+                    ownNewMessage={this.state.ownNewMessage}
                 />
             );
         }
diff --git a/webapp/components/suggestion/suggestion_box.jsx b/webapp/components/suggestion/suggestion_box.jsx
index 2184b9fab..47426f6db 100644
--- a/webapp/components/suggestion/suggestion_box.jsx
+++ b/webapp/components/suggestion/suggestion_box.jsx
@@ -128,6 +128,7 @@ export default class SuggestionBox extends React.Component {
                 e.preventDefault();
             } else if (e.which === KeyCodes.ESCAPE) {
                 GlobalActions.emitClearSuggestions(this.suggestionId);
+                e.stopPropagation();
             } else if (this.props.onKeyDown) {
                 this.props.onKeyDown(e);
             }
diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss
index d4d01c865..4c718327e 100644
--- a/webapp/sass/layout/_sidebar-left.scss
+++ b/webapp/sass/layout/_sidebar-left.scss
@@ -178,6 +178,10 @@
                     border-radius: 0;
                     font-weight: 400;
                     position: relative;
+
+                    &.unread-title {
+                        font-weight: 600;
+                    }
                 }
             }
         }
diff --git a/webapp/stores/channel_store.jsx b/webapp/stores/channel_store.jsx
index dc2577811..542fbdf6b 100644
--- a/webapp/stores/channel_store.jsx
+++ b/webapp/stores/channel_store.jsx
@@ -13,6 +13,7 @@ const CHANGE_EVENT = 'change';
 const LEAVE_EVENT = 'leave';
 const MORE_CHANGE_EVENT = 'change';
 const EXTRA_INFO_EVENT = 'extra_info';
+const LAST_VIEVED_EVENT = 'last_viewed';
 
 class ChannelStoreClass extends EventEmitter {
     constructor(props) {
@@ -32,6 +33,9 @@ class ChannelStoreClass extends EventEmitter {
         this.emitLeave = this.emitLeave.bind(this);
         this.addLeaveListener = this.addLeaveListener.bind(this);
         this.removeLeaveListener = this.removeLeaveListener.bind(this);
+        this.emitLastViewed = this.emitLastViewed.bind(this);
+        this.addLastViewedListener = this.addLastViewedListener.bind(this);
+        this.removeLastViewedListener = this.removeLastViewedListener.bind(this);
         this.findFirstBy = this.findFirstBy.bind(this);
         this.get = this.get.bind(this);
         this.getMember = this.getMember.bind(this);
@@ -109,6 +113,18 @@ class ChannelStoreClass extends EventEmitter {
         this.removeListener(LEAVE_EVENT, callback);
     }
 
+    emitLastViewed(lastViewed, ownNewMessage) {
+        this.emit(LAST_VIEVED_EVENT, lastViewed, ownNewMessage);
+    }
+
+    addLastViewedListener(callback) {
+        this.on(LAST_VIEVED_EVENT, callback);
+    }
+
+    removeLastViewedListener(callback) {
+        this.removeListener(LAST_VIEVED_EVENT, callback);
+    }
+
     findFirstBy(field, value) {
         return this.doFindFirst(field, value, this.getChannels());
     }
diff --git a/webapp/utils/async_client.jsx b/webapp/utils/async_client.jsx
index e55742140..2e26278b2 100644
--- a/webapp/utils/async_client.jsx
+++ b/webapp/utils/async_client.jsx
@@ -145,6 +145,43 @@ export function updateLastViewedAt(id) {
     );
 }
 
+export function setLastViewedAt(lastViewedAt, id) {
+    let channelId;
+    if (id) {
+        channelId = id;
+    } else {
+        channelId = ChannelStore.getCurrentId();
+    }
+
+    if (channelId == null) {
+        return;
+    }
+
+    if (lastViewedAt == null) {
+        return;
+    }
+
+    if (isCallInProgress(`setLastViewedAt${channelId}${lastViewedAt}`)) {
+        return;
+    }
+
+    callTracker[`setLastViewedAt${channelId}${lastViewedAt}`] = utils.getTimestamp();
+    Client.setLastViewedAt(
+        channelId,
+        lastViewedAt,
+        () => {
+            callTracker.setLastViewedAt = 0;
+            ErrorStore.clearLastError();
+        },
+        (err) => {
+            callTracker.setLastViewedAt = 0;
+            var count = ErrorStore.getConnectionErrorCount();
+            ErrorStore.setConnectionErrorCount(count + 1);
+            dispatchError(err, 'setLastViewedAt');
+        }
+    );
+}
+
 export function getMoreChannels(force) {
     if (isCallInProgress('getMoreChannels')) {
         return;