[PLT-6363-1] Create PostFlagIcon component and add flag IDs to posts (#6271)

* [UI-AUTO] add IDs to last 10 posts' text

* create FlagPost component and add flag IDs for posts at center, RHS and
 search results

1 files changed, 13 insertions, 54 deletions

diff --git a/webapp/components/search_results_item.jsx b/webapp/components/search_results_item.jsx
index 09ea8c427..9e0eb51b0 100644
--- a/webapp/components/search_results_item.jsx
+++ b/webapp/components/search_results_item.jsx
@@ -13,12 +13,12 @@ import UserStore from 'stores/user_store.jsx';
 import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
 import {flagPost, unflagPost} from 'actions/post_actions.jsx';
+import PostFlagIcon from 'components/common/post_flag_icon.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 React from 'react';
@@ -114,7 +114,11 @@ export default class SearchResultsItem extends React.Component {
         const timestamp = UserStore.getCurrentUser().last_picture_update;
         const user = this.props.user || {};
         const post = this.props.post;
-        const flagIcon = Constants.FLAG_ICON_SVG;
+
+        let idCount = -1;
+        if (this.props.lastPostCount >= 0 && this.props.lastPostCount < Constants.TEST_ID_COUNT) {
+            idCount = this.props.lastPostCount;
+        }
 
         if (channel) {
             channelName = channel.display_name;
@@ -185,59 +189,13 @@ export default class SearchResultsItem extends React.Component {
                 </p>
             );
         } else {
-            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';
-                flagTooltip = (
-                    <Tooltip id='flagTooltip'>
-                        <FormattedMessage
-                            id='flag_post.unflag'
-                            defaultMessage='Unflag'
-                        />
-                    </Tooltip>
-                );
-                flagFunc = this.unflagPost;
-                flag = (
-                    <span
-                        className='icon'
-                        dangerouslySetInnerHTML={{__html: flagIcon}}
-                    />
-                );
-            } else {
-                flag = (
-                    <span
-                        className='icon'
-                        dangerouslySetInnerHTML={{__html: flagIcon}}
-                    />
-                );
-                flagFunc = this.flagPost;
-            }
-
             flagContent = (
-                <OverlayTrigger
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
-                    placement='top'
-                    overlay={flagTooltip}
-                >
-                    <a
-                        href='#'
-                        className={'flag-icon__container ' + flagVisible}
-                        onClick={flagFunc}
-                    >
-                        {flag}
-                    </a>
-                </OverlayTrigger>
+                <PostFlagIcon
+                    idPrefix={'searchPostFlag'}
+                    idCount={idCount}
+                    postId={post.id}
+                    isFlagged={this.props.isFlagged}
+                />
             );
 
             rhsControls = (
@@ -364,6 +322,7 @@ export default class SearchResultsItem extends React.Component {
 
 SearchResultsItem.propTypes = {
     post: React.PropTypes.object,
+    lastPostCount: React.PropTypes.number,
     user: React.PropTypes.object,
     channel: React.PropTypes.object,
     compactDisplay: React.PropTypes.bool,