PLT-3506 Added flagged posts functionality (#3679)

* Added flagged posts functionality

* UI Improvements to flags (#3697)

* Added flag functionality for mobile

* Updating flagged text (#3699)

* Add back button to RHS thread when coming from flagged posts

* Updating position of flags (#3708)

* Plt 3506 - Reverting flag position (#3724)

* Revert "Updating position of flags (#3708)"

This reverts commit aaa05632c5d9eda35a048300a5bd7e99584c5b58.

* Fixing the icon in search

* Help text and white space improvements (#3730)

* Updatng help text and some white spacing.

* Updating help text

1 files changed, 115 insertions, 1 deletions

diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index ed1f71b1e..a90380510 100644
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -9,12 +9,14 @@ import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 
 import * as GlobalActions from 'actions/global_actions.jsx';
+import {flagPost, unflagPost} from 'actions/post_actions.jsx';
 
 import * as TextFormatting from 'utils/text_formatting.jsx';
 import * as Utils from 'utils/utils.jsx';
 import Client from 'client/web_client.jsx';
 
 import Constants from 'utils/constants.jsx';
+import {Tooltip, OverlayTrigger} from 'react-bootstrap';
 
 import {FormattedMessage, FormattedDate} from 'react-intl';
 
@@ -27,13 +29,17 @@ export default class RhsComment extends React.Component {
         super(props);
 
         this.handlePermalink = this.handlePermalink.bind(this);
+        this.flagPost = this.flagPost.bind(this);
+        this.unflagPost = this.unflagPost.bind(this);
 
         this.state = {};
     }
+
     handlePermalink(e) {
         e.preventDefault();
         GlobalActions.showGetPostLinkModal(this.props.post);
     }
+
     shouldComponentUpdate(nextProps) {
         if (nextProps.compactDisplay !== this.props.compactDisplay) {
             return true;
@@ -43,6 +49,10 @@ export default class RhsComment extends React.Component {
             return true;
         }
 
+        if (nextProps.isFlagged !== this.props.isFlagged) {
+            return true;
+        }
+
         if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
             return true;
         }
@@ -53,6 +63,17 @@ export default class RhsComment extends React.Component {
 
         return false;
     }
+
+    flagPost(e) {
+        e.preventDefault();
+        flagPost(this.props.post.id);
+    }
+
+    unflagPost(e) {
+        e.preventDefault();
+        unflagPost(this.props.post.id);
+    }
+
     createDropdown() {
         var post = this.props.post;
 
@@ -66,6 +87,44 @@ export default class RhsComment extends React.Component {
 
         var dropdownContents = [];
 
+        if (Utils.isMobile()) {
+            if (this.props.isFlagged) {
+                dropdownContents.push(
+                    <li
+                        key='mobileFlag'
+                        role='presentation'
+                    >
+                        <a
+                            href='#'
+                            onClick={this.unflagPost}
+                        >
+                            <FormattedMessage
+                                id='rhs_root.mobile.unflag'
+                                defaultMessage='Unflag'
+                            />
+                        </a>
+                    </li>
+                );
+            } else {
+                dropdownContents.push(
+                    <li
+                        key='mobileFlag'
+                        role='presentation'
+                    >
+                        <a
+                            href='#'
+                            onClick={this.flagPost}
+                        >
+                            <FormattedMessage
+                                id='rhs_root.mobile.flag'
+                                defaultMessage='Flag'
+                            />
+                        </a>
+                    </li>
+                );
+            }
+        }
+
         dropdownContents.push(
             <li
                 key='rhs-root-permalink'
@@ -151,8 +210,10 @@ export default class RhsComment extends React.Component {
             </div>
             );
     }
+
     render() {
         var post = this.props.post;
+        const flagIcon = Constants.FLAG_ICON_SVG;
 
         var currentUserCss = '';
         if (this.props.currentUser === post.user_id) {
@@ -225,6 +286,44 @@ export default class RhsComment extends React.Component {
             );
         }
 
+        let flag;
+        let flagFunc;
+        let flagVisible = '';
+        let flagTooltip = (
+            <Tooltip id='flagTooltip'>
+                <FormattedMessage
+                    id='flag_post.flag'
+                    defaultMessage='Flag for follow up'
+                />
+            </Tooltip>
+        );
+        if (this.props.isFlagged) {
+            flagVisible = 'visible';
+            flag = (
+                <span
+                    className='icon'
+                    dangerouslySetInnerHTML={{__html: flagIcon}}
+                />
+            );
+            flagFunc = this.unflagPost;
+            flagTooltip = (
+                <Tooltip id='flagTooltip'>
+                    <FormattedMessage
+                        id='flag_post.unflag'
+                        defaultMessage='Unflag'
+                    />
+                </Tooltip>
+            );
+        } else {
+            flag = (
+                <span
+                    className='icon'
+                    dangerouslySetInnerHTML={{__html: flagIcon}}
+                />
+            );
+            flagFunc = this.flagPost;
+        }
+
         return (
             <div className={'post post--thread ' + currentUserCss + ' ' + compactClass}>
                 <div className='post__content'>
@@ -247,6 +346,20 @@ export default class RhsComment extends React.Component {
                                         minute='2-digit'
                                     />
                                 </time>
+                                <OverlayTrigger
+                                    key={'commentflagtooltipkey' + flagVisible}
+                                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                                    placement='top'
+                                    overlay={flagTooltip}
+                                >
+                                    <a
+                                        href='#'
+                                        className={'flag-icon__container ' + flagVisible}
+                                        onClick={flagFunc}
+                                    >
+                                        {flag}
+                                    </a>
+                                </OverlayTrigger>
                             </li>
                             <li className='col col__reply'>
                                 {dropdown}
@@ -271,5 +384,6 @@ RhsComment.propTypes = {
     user: React.PropTypes.object.isRequired,
     currentUser: React.PropTypes.object.isRequired,
     compactDisplay: React.PropTypes.bool,
-    useMilitaryTime: React.PropTypes.bool.isRequired
+    useMilitaryTime: React.PropTypes.bool.isRequired,
+    isFlagged: React.PropTypes.bool
 };