[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, 19 insertions, 61 deletions

diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index fb0972804..88e8c1ca6 100644
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -8,6 +8,7 @@ import PostMessageContainer from 'components/post_view/components/post_message_c
 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 * as GlobalActions from 'actions/global_actions.jsx';
 import {flagPost, unflagPost, pinPost, unpinPost, addReaction} from 'actions/post_actions.jsx';
@@ -19,7 +20,7 @@ import * as PostUtils from 'utils/post_utils.jsx';
 
 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';
 
@@ -128,6 +129,10 @@ export default class RhsComment extends React.Component {
             return true;
         }
 
+        if (nextProps.lastPostCount !== this.props.lastPostCount) {
+            return true;
+        }
+
         return false;
     }
 
@@ -384,9 +389,13 @@ export default class RhsComment extends React.Component {
 
     render() {
         const post = this.props.post;
-        const flagIcon = Constants.FLAG_ICON_SVG;
         const mattermostLogo = Constants.MATTERMOST_ICON_SVG;
 
+        let idCount = -1;
+        if (this.props.lastPostCount >= 0 && this.props.lastPostCount < Constants.TEST_ID_COUNT) {
+            idCount = this.props.lastPostCount;
+        }
+
         const isEphemeral = Utils.isPostEphemeral(post);
         const isPending = post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING;
         const isSystemMessage = PostUtils.isSystemMessage(post);
@@ -523,64 +532,6 @@ 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;
-        }
-
-        let flagTrigger;
-        if (!isEphemeral) {
-            flagTrigger = (
-                <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>
-            );
-        }
-
         let react;
         let reactOverlay;
 
@@ -668,7 +619,13 @@ export default class RhsComment extends React.Component {
                             <li className='col'>
                                 {this.renderTimeTag(post, timeOptions)}
                                 {pinnedBadge}
-                                {flagTrigger}
+                                <PostFlagIcon
+                                    idPrefix={'rhsCommentFlag'}
+                                    idCount={idCount}
+                                    postId={post.id}
+                                    isFlagged={this.props.isFlagged}
+                                    isEphemeral={isEphemeral}
+                                />
                             </li>
                             {options}
                         </ul>
@@ -689,6 +646,7 @@ export default class RhsComment extends React.Component {
 
 RhsComment.propTypes = {
     post: React.PropTypes.object,
+    lastPostCount: React.PropTypes.number,
     user: React.PropTypes.object.isRequired,
     currentUser: React.PropTypes.object.isRequired,
     compactDisplay: React.PropTypes.bool,