add IDs for reply arrows at center and RHS (#6311)

3 files changed, 69 insertions, 33 deletions

diff --git a/webapp/components/common/comment_icon.jsx b/webapp/components/common/comment_icon.jsx
new file mode 100644
index 000000000..e8be773e5
--- /dev/null
+++ b/webapp/components/common/comment_icon.jsx
@@ -0,0 +1,55 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import Constants from 'utils/constants.jsx';
+import * as Utils from 'utils/utils.jsx';
+
+export default function CommentIcon(props) {
+    let commentCountSpan = '';
+    let iconStyle = 'comment-icon__container';
+    if (props.commentCount > 0) {
+        iconStyle += ' icon--show';
+        commentCountSpan = (
+            <span className='comment-count'>
+                {props.commentCount}
+            </span>
+        );
+    } else if (props.searchStyle !== '') {
+        iconStyle = iconStyle + ' ' + props.searchStyle;
+    }
+
+    let commentIconId = props.idPrefix;
+    if (props.idCount > -1) {
+        commentIconId += props.idCount;
+    }
+
+    return (
+        <a
+            id={Utils.createSafeId(commentIconId)}
+            href='#'
+            className={iconStyle}
+            onClick={props.handleCommentClick}
+        >
+            <span
+                className='comment-icon'
+                dangerouslySetInnerHTML={{__html: Constants.REPLY_ICON}}
+            />
+            {commentCountSpan}
+        </a>
+    );
+}
+
+CommentIcon.propTypes = {
+    idPrefix: React.PropTypes.string.isRequired,
+    idCount: React.PropTypes.number,
+    handleCommentClick: React.PropTypes.func.isRequired,
+    searchStyle: React.PropTypes.string,
+    commentCount: React.PropTypes.number
+};
+
+CommentIcon.defaultProps = {
+    idCount: -1,
+    searchStyle: '',
+    commentCount: 0
+};
\ No newline at end of file
diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx
index 1496429b3..3833f5058 100644
--- a/webapp/components/post_view/components/post_info.jsx
+++ b/webapp/components/post_view/components/post_info.jsx
@@ -9,6 +9,7 @@ import PostFlagIcon from 'components/common/post_flag_icon.jsx';
 
 import * as GlobalActions from 'actions/global_actions.jsx';
 import * as PostActions from 'actions/post_actions.jsx';
+import CommentIcon from 'components/common/comment_icon.jsx';
 
 import * as Utils from 'utils/utils.jsx';
 import * as PostUtils from 'utils/post_utils.jsx';
@@ -342,30 +343,13 @@ export default class PostInfo extends React.Component {
         let comments = null;
         let react = null;
         if (!isEphemeral && !isPending && !isSystemMessage) {
-            let showCommentClass;
-            let commentCountText;
-            if (this.props.commentCount >= 1) {
-                showCommentClass = ' icon--show';
-                commentCountText = this.props.commentCount;
-            } else {
-                showCommentClass = '';
-                commentCountText = '';
-            }
-
             comments = (
-                <a
-                    href='#'
-                    className={'comment-icon__container' + showCommentClass}
-                    onClick={this.props.handleCommentClick}
-                >
-                    <span
-                        className='comment-icon'
-                        dangerouslySetInnerHTML={{__html: Constants.REPLY_ICON}}
-                    />
-                    <span className='comment-count'>
-                        {commentCountText}
-                    </span>
-                </a>
+                <CommentIcon
+                    idPrefix={'commentIcon'}
+                    idCount={idCount}
+                    handleCommentClick={this.props.handleCommentClick}
+                    commentCount={this.props.commentCount}
+                />
             );
 
             if (Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) {
diff --git a/webapp/components/search_results_item.jsx b/webapp/components/search_results_item.jsx
index 9e0eb51b0..d3b7cfe00 100644
--- a/webapp/components/search_results_item.jsx
+++ b/webapp/components/search_results_item.jsx
@@ -6,6 +6,7 @@ import PostMessageContainer from 'components/post_view/components/post_message_c
 import UserProfile from './user_profile.jsx';
 import FileAttachmentListContainer from './file_attachment_list_container.jsx';
 import ProfilePicture from './profile_picture.jsx';
+import CommentIcon from 'components/common/comment_icon.jsx';
 
 import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
@@ -200,16 +201,12 @@ export default class SearchResultsItem extends React.Component {
 
             rhsControls = (
                 <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>
+                    <CommentIcon
+                        idPrefix={'searchCommentIcon'}
+                        idCount={idCount}
+                        handleCommentClick={this.handleFocusRHSClick}
+                        searchStyle={'search-item__comment'}
+                    />
                     <a
                         onClick={
                             () => {