1 files changed, 195 insertions, 0 deletions
diff --git a/webapp/components/post_view/post_body/post_body.jsx b/webapp/components/post_view/post_body/post_body.jsx
new file mode 100644
index 000000000..a60d25760
--- /dev/null
+++ b/webapp/components/post_view/post_body/post_body.jsx
@@ -0,0 +1,195 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import * as Utils from 'utils/utils.jsx';
+import * as PostUtils from 'utils/post_utils.jsx';
+import {Posts} from 'mattermost-redux/constants';
+
+import CommentedOnFilesMessage from 'components/post_view/commented_on_files_message';
+import FileAttachmentListContainer from 'components/file_attachment_list';
+import PostBodyAdditionalContent from 'components/post_view/post_body_additional_content.jsx';
+import PostMessageContainer from 'components/post_view/post_message_view';
+import ReactionListContainer from 'components/post_view/reaction_list';
+import FailedPostOptions from 'components/post_view/failed_post_options';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'react-intl';
+
+export default class PostBody extends React.PureComponent {
+    static propTypes = {
+
+        /**
+         * The post to render the body of
+         */
+        post: PropTypes.object.isRequired,
+
+        /**
+         * The parent post of the thread this post is in
+         */
+        parentPost: PropTypes.object,
+
+        /**
+         * The poster of the parent post, if exists
+         */
+        parentPostUser: PropTypes.object,
+
+        /**
+         * The function called when the comment icon is clicked
+         */
+        handleCommentClick: PropTypes.func.isRequired,
+
+        /**
+         * Set to render post body compactly
+         */
+        compactDisplay: PropTypes.bool,
+
+        /**
+         * Set to highlight comment as a mention
+         */
+        isCommentMention: PropTypes.bool,
+
+        /**
+         * Set to collapse image and video previews
+         */
+        previewCollapsed: PropTypes.string,
+
+        /**
+         * Post identifiers for selenium tests
+         */
+        lastPostCount: PropTypes.number
+    }
+
+    render() {
+        const post = this.props.post;
+        const parentPost = this.props.parentPost;
+
+        let comment = '';
+        let postClass = '';
+
+        if (parentPost && this.props.parentPostUser) {
+            const profile = this.props.parentPostUser;
+
+            let apostrophe = '';
+            let name = '...';
+            if (profile != null) {
+                let username = profile.username;
+                if (parentPost.props &&
+                        parentPost.props.from_webhook &&
+                        parentPost.props.override_username &&
+                        global.window.mm_config.EnablePostUsernameOverride === 'true') {
+                    username = parentPost.props.override_username;
+                }
+
+                if (username.slice(-1) === 's') {
+                    apostrophe = '\'';
+                } else {
+                    apostrophe = '\'s';
+                }
+                name = (
+                    <a
+                        className='theme'
+                        onClick={Utils.searchForTerm.bind(null, username)}
+                    >
+                        {username}
+                    </a>
+                );
+            }
+
+            let message = '';
+            if (parentPost.message) {
+                message = Utils.replaceHtmlEntities(parentPost.message);
+            } else if (parentPost.file_ids && parentPost.file_ids.length > 0) {
+                message = (
+                    <CommentedOnFilesMessage
+                        parentPostId={parentPost.id}
+                    />
+                );
+            }
+
+            comment = (
+                <div className='post__link'>
+                    <span>
+                        <FormattedMessage
+                            id='post_body.commentedOn'
+                            defaultMessage='Commented on {name}{apostrophe} message: '
+                            values={{
+                                name,
+                                apostrophe
+                            }}
+                        />
+                        <a
+                            className='theme'
+                            onClick={this.props.handleCommentClick}
+                        >
+                            {message}
+                        </a>
+                    </span>
+                </div>
+            );
+        }
+
+        let failedOptions;
+        if (this.props.post.failed) {
+            postClass += ' post--fail';
+            failedOptions = <FailedPostOptions post={this.props.post}/>;
+        }
+
+        if (PostUtils.isEdited(this.props.post)) {
+            postClass += ' post--edited';
+        }
+
+        let fileAttachmentHolder = null;
+        if (((post.file_ids && post.file_ids.length > 0) || (post.filenames && post.filenames.length > 0)) && this.props.post.state !== Posts.POST_DELETED) {
+            fileAttachmentHolder = (
+                <FileAttachmentListContainer
+                    post={post}
+                    compactDisplay={this.props.compactDisplay}
+                />
+            );
+        }
+
+        const messageWrapper = (
+            <div
+                key={`${post.id}_message`}
+                id={`${post.id}_message`}
+                className={postClass}
+            >
+                {failedOptions}
+                <PostMessageContainer
+                    lastPostCount={this.props.lastPostCount}
+                    post={this.props.post}
+                />
+            </div>
+        );
+
+        let messageWithAdditionalContent;
+        if (this.props.post.state === Posts.POST_DELETED) {
+            messageWithAdditionalContent = messageWrapper;
+        } else {
+            messageWithAdditionalContent = (
+                <PostBodyAdditionalContent
+                    post={this.props.post}
+                    message={messageWrapper}
+                    previewCollapsed={this.props.previewCollapsed}
+                />
+            );
+        }
+
+        let mentionHighlightClass = '';
+        if (this.props.isCommentMention) {
+            mentionHighlightClass = 'mention-comment';
+        }
+
+        return (
+            <div>
+                {comment}
+                <div className={'post__body ' + mentionHighlightClass}>
+                    {messageWithAdditionalContent}
+                    {fileAttachmentHolder}
+                    <ReactionListContainer post={post}/>
+                </div>
+            </div>
+        );
+    }
+}