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, 69 insertions, 17 deletions

diff --git a/webapp/components/search_results_item.jsx b/webapp/components/search_results_item.jsx
index fb8b23a7f..db64463a9 100644
--- a/webapp/components/search_results_item.jsx
+++ b/webapp/components/search_results_item.jsx
@@ -7,16 +7,20 @@ import UserProfile from './user_profile.jsx';
 import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 
-import * as GlobalActions from 'actions/global_actions.jsx';
 import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
+import * as GlobalActions from 'actions/global_actions.jsx';
+import {unflagPost, getFlaggedPosts} from 'actions/post_actions.jsx';
+
 import * as TextFormatting from 'utils/text_formatting.jsx';
 import * as Utils from 'utils/utils.jsx';
 import * as PostUtils from 'utils/post_utils.jsx';
+
 import Constants from 'utils/constants.jsx';
+import {Tooltip, OverlayTrigger} from 'react-bootstrap';
 const ActionTypes = Constants.ActionTypes;
 
-import {FormattedMessage, FormattedDate} from 'react-intl';
 import React from 'react';
+import {FormattedMessage, FormattedDate} from 'react-intl';
 import {browserHistory} from 'react-router/es6';
 
 export default class SearchResultsItem extends React.Component {
@@ -25,6 +29,7 @@ export default class SearchResultsItem extends React.Component {
 
         this.handleFocusRHSClick = this.handleFocusRHSClick.bind(this);
         this.shrinkSidebar = this.shrinkSidebar.bind(this);
+        this.unflagPost = this.unflagPost.bind(this);
     }
 
     hideSidebar() {
@@ -42,12 +47,20 @@ export default class SearchResultsItem extends React.Component {
         GlobalActions.emitPostFocusRightHandSideFromSearch(this.props.post, this.props.isMentionSearch);
     }
 
+    unflagPost(e) {
+        e.preventDefault();
+        unflagPost(this.props.post.id,
+            () => getFlaggedPosts()
+        );
+    }
+
     render() {
         let channelName = null;
         const channel = this.props.channel;
         const timestamp = UserStore.getCurrentUser().update_at;
         const user = this.props.user || {};
         const post = this.props.post;
+        const flagIcon = Constants.FLAG_ICON_SVG;
 
         if (channel) {
             channelName = channel.display_name;
@@ -77,11 +90,50 @@ export default class SearchResultsItem extends React.Component {
         }
 
         let botIndicator;
-
         if (post.props && post.props.from_webhook) {
             botIndicator = <li className='bot-indicator'>{Constants.BOT_NAME}</li>;
         }
 
+        let flag;
+        let flagVisible = '';
+        let flagTooltip = (
+            <Tooltip id='flagTooltip'>
+                <FormattedMessage
+                    id='flag_post.flag'
+                    defaultMessage='Flag for follow up'
+                />
+            </Tooltip>
+        );
+        if (this.props.isFlagged) {
+            flagVisible = 'visible';
+            flagTooltip = (
+                <Tooltip id='flagTooltip'>
+                    <FormattedMessage
+                        id='flag_post.unflag'
+                        defaultMessage='Unflag'
+                    />
+                </Tooltip>
+            );
+            flag = (
+                <OverlayTrigger
+                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                    placement='top'
+                    overlay={flagTooltip}
+                >
+                    <a
+                        href='#'
+                        className={'flag-icon__container ' + flagVisible}
+                        onClick={this.unflagPost}
+                    >
+                        <span
+                            className='icon'
+                            dangerouslySetInnerHTML={{__html: flagIcon}}
+                        />
+                    </a>
+                </OverlayTrigger>
+            );
+        }
+
         return (
             <div className='search-item__container'>
                 <div className='date-separator'>
@@ -126,8 +178,19 @@ export default class SearchResultsItem extends React.Component {
                                             minute='2-digit'
                                         />
                                     </time>
+                                    {flag}
                                 </li>
-                                <li>
+                                <li className='col__controls'>
+                                    <a
+                                        href='#'
+                                        className='comment-icon__container search-item__comment'
+                                        onClick={this.handleFocusRHSClick}
+                                    >
+                                        <span
+                                            className='comment-icon'
+                                            dangerouslySetInnerHTML={{__html: Constants.REPLY_ICON}}
+                                        />
+                                    </a>
                                     <a
                                         onClick={
                                             () => {
@@ -163,18 +226,6 @@ export default class SearchResultsItem extends React.Component {
                                         />
                                     </a>
                                 </li>
-                                <li>
-                                    <a
-                                        href='#'
-                                        className='comment-icon__container search-item__comment'
-                                        onClick={this.handleFocusRHSClick}
-                                    >
-                                        <span
-                                            className='comment-icon'
-                                            dangerouslySetInnerHTML={{__html: Constants.REPLY_ICON}}
-                                        />
-                                    </a>
-                                </li>
                             </ul>
                             <div className='search-item-snippet'>
                                 <span
@@ -197,5 +248,6 @@ SearchResultsItem.propTypes = {
     isMentionSearch: React.PropTypes.bool,
     term: React.PropTypes.string,
     useMilitaryTime: React.PropTypes.bool.isRequired,
-    shrink: React.PropTypes.function
+    shrink: React.PropTypes.function,
+    isFlagged: React.PropTypes.bool
 };