[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, 8 insertions, 54 deletions

diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx
index 65bc52f73..bf9748636 100644
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -8,6 +8,7 @@ import FileAttachmentListContainer from './file_attachment_list_container.jsx';
 import ProfilePicture from 'components/profile_picture.jsx';
 import ReactionListContainer from 'components/post_view/components/reaction_list_container.jsx';
 import RhsDropdown from 'components/rhs_dropdown.jsx';
+import PostFlagIcon from 'components/common/post_flag_icon.jsx';
 
 import ChannelStore from 'stores/channel_store.jsx';
 import UserStore from 'stores/user_store.jsx';
@@ -24,7 +25,7 @@ import ReactDOM from 'react-dom';
 
 import Constants from 'utils/constants.jsx';
 import DelayedAction from 'utils/delayed_action.jsx';
-import {Tooltip, OverlayTrigger, Overlay} from 'react-bootstrap';
+import {Overlay} from 'react-bootstrap';
 
 import {FormattedMessage} from 'react-intl';
 
@@ -203,7 +204,6 @@ export default class RhsRootPost extends React.Component {
         const mattermostLogo = Constants.MATTERMOST_ICON_SVG;
         var timestamp = user ? user.last_picture_update : 0;
         var channel = ChannelStore.get(post.channel_id);
-        const flagIcon = Constants.FLAG_ICON_SVG;
 
         this.canDelete = PostUtils.canDeletePost(post);
         this.canEdit = PostUtils.canEditPost(post, this.editDisableAction);
@@ -530,44 +530,6 @@ export default class RhsRootPost extends React.Component {
 
         const profilePicContainer = (<div className='post__img'>{profilePic}</div>);
 
-        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;
-        }
-
         let pinnedBadge;
         if (post.is_pinned) {
             pinnedBadge = (
@@ -601,20 +563,11 @@ export default class RhsRootPost extends React.Component {
                             <li className='col'>
                                 {this.renderTimeTag(post, timeOptions)}
                                 {pinnedBadge}
-                                <OverlayTrigger
-                                    key={'rootpostflagtooltipkey' + flagVisible}
-                                    delayShow={Constants.OVERLAY_TIME_DELAY}
-                                    placement='top'
-                                    overlay={flagTooltip}
-                                >
-                                    <a
-                                        href='#'
-                                        className={'flag-icon__container ' + flagVisible}
-                                        onClick={flagFunc}
-                                    >
-                                        {flag}
-                                    </a>
-                                </OverlayTrigger>
+                                <PostFlagIcon
+                                    idPrefix={'rhsRootPostFlag'}
+                                    postId={post.id}
+                                    isFlagged={this.props.isFlagged}
+                                />
                             </li>
                             <li className='col col__reply'>
                                 {reactOverlay}
@@ -645,6 +598,7 @@ RhsRootPost.defaultProps = {
 };
 RhsRootPost.propTypes = {
     post: React.PropTypes.object.isRequired,
+    lastPostCount: React.PropTypes.number,
     user: React.PropTypes.object.isRequired,
     currentUser: React.PropTypes.object.isRequired,
     commentCount: React.PropTypes.number,