[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, 87 insertions, 0 deletions

diff --git a/webapp/components/common/post_flag_icon.jsx b/webapp/components/common/post_flag_icon.jsx
new file mode 100644
index 000000000..5f714f76b
--- /dev/null
+++ b/webapp/components/common/post_flag_icon.jsx
@@ -0,0 +1,87 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+import {Tooltip, OverlayTrigger} from 'react-bootstrap';
+
+import {flagPost, unflagPost} from 'actions/post_actions.jsx';
+import Constants from 'utils/constants.jsx';
+import * as Utils from 'utils/utils.jsx';
+
+function flagToolTip(isFlagged) {
+    return (
+        <Tooltip id='flagTooltip'>
+            <FormattedMessage
+                id={isFlagged ? 'flag_post.unflag' : 'flag_post.flag'}
+                defaultMessage={isFlagged ? 'Unflag' : 'Flag for follow up'}
+            />
+        </Tooltip>
+    );
+}
+
+function flagIcon() {
+    return (
+        <span
+            className='icon'
+            dangerouslySetInnerHTML={{__html: Constants.FLAG_ICON_SVG}}
+        />
+    );
+}
+
+export default function PostFlagIcon(props) {
+    function onFlagPost(e) {
+        e.preventDefault();
+        flagPost(props.postId);
+    }
+
+    function onUnflagPost(e) {
+        e.preventDefault();
+        unflagPost(props.postId);
+    }
+
+    const flagFunc = props.isFlagged ? onUnflagPost : onFlagPost;
+    const flagVisible = props.isFlagged ? 'visible' : '';
+
+    let flagIconId = null;
+    if (props.idCount > -1) {
+        flagIconId = Utils.createSafeId(props.idPrefix + props.idCount);
+    }
+
+    if (!props.isEphemeral) {
+        return (
+            <OverlayTrigger
+                key={'flagtooltipkey' + flagVisible}
+                delayShow={Constants.OVERLAY_TIME_DELAY}
+                placement='top'
+                overlay={flagToolTip(props.isFlagged)}
+            >
+                <a
+                    id={flagIconId}
+                    href='#'
+                    className={'flag-icon__container ' + flagVisible}
+                    onClick={flagFunc}
+                >
+                    {flagIcon()}
+                </a>
+            </OverlayTrigger>
+        );
+    }
+
+    return '';
+}
+
+PostFlagIcon.propTypes = {
+    idPrefix: React.PropTypes.string.isRequired,
+    idCount: React.PropTypes.number,
+    postId: React.PropTypes.string.isRequired,
+    isFlagged: React.PropTypes.bool.isRequired,
+    isEphemeral: React.PropTypes.bool
+};
+
+PostFlagIcon.defaultProps = {
+    idCount: -1,
+    postId: '',
+    isFlagged: false,
+    isEphemeral: false
+};