PLT-6215 Major post list refactor (#6501)

* Major post list refactor

* Fix post and thread deletion

* Fix preferences not selecting correctly

* Fix military time displaying

* Fix UP key for editing posts

* Fix ESLint error

* Various fixes and updates per feedback

* Fix for permalink view

* Revert to old scrolling method and various fixes

* Add floating timestamp, new message indicator, scroll arrows

* Update post loading for focus mode and add visibility limit

* Fix pinning posts and a react warning

* Add loading UI updates from Asaad

* Fix refreshing loop

* Temporarily bump post visibility limit

* Update infinite scrolling

* Remove infinite scrolling

2 files changed, 176 insertions, 0 deletions

diff --git a/webapp/components/post_view/post_header/index.js b/webapp/components/post_view/post_header/index.js
new file mode 100644
index 000000000..d7aaef1d5
--- /dev/null
+++ b/webapp/components/post_view/post_header/index.js
@@ -0,0 +1,18 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+
+import {get} from 'mattermost-redux/selectors/entities/preferences';
+import {Preferences} from 'mattermost-redux/constants';
+
+import PostHeader from './post_header.jsx';
+
+function mapStateToProps(state, ownProps) {
+    return {
+        ...ownProps,
+        displayNameType: get(state, Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false')
+    };
+}
+
+export default connect(mapStateToProps)(PostHeader);
diff --git a/webapp/components/post_view/post_header/post_header.jsx b/webapp/components/post_view/post_header/post_header.jsx
new file mode 100644
index 000000000..562bd2b82
--- /dev/null
+++ b/webapp/components/post_view/post_header/post_header.jsx
@@ -0,0 +1,158 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import UserProfile from 'components/user_profile.jsx';
+import PostInfo from 'components/post_view/post_info';
+import {FormattedMessage} from 'react-intl';
+
+import * as PostUtils from 'utils/post_utils.jsx';
+
+import Constants from 'utils/constants.jsx';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class PostHeader extends React.PureComponent {
+    static propTypes = {
+
+        /*
+         * The post to render the header for
+         */
+        post: PropTypes.object.isRequired,
+
+        /*
+         * The user who created the post
+         */
+        user: PropTypes.object,
+
+        /*
+         * Function called when the comment icon is clicked
+         */
+        handleCommentClick: PropTypes.func.isRequired,
+
+        /*
+         * Function called when the post options dropdown is opened
+         */
+        handleDropdownOpened: PropTypes.func.isRequired,
+
+        /*
+         * Set to render compactly
+         */
+        compactDisplay: PropTypes.bool,
+
+        /*
+         * Set to render the post as if it was part of the previous post
+         */
+        consecutivePostByUser: PropTypes.bool,
+
+        /*
+         * The method for displaying the post creator's name
+         */
+        displayNameType: PropTypes.string,
+
+        /*
+         * The status of the user who created the post
+         */
+        status: PropTypes.string,
+
+        /*
+         * Set if the post creator is currenlty in a WebRTC call
+         */
+        isBusy: PropTypes.bool,
+
+        /*
+         * The number of replies in the same thread as this post
+         */
+        replyCount: PropTypes.number,
+
+        /*
+         * Post identifiers for selenium tests
+         */
+        lastPostCount: PropTypes.number,
+
+        /**
+         * Function to get the post list HTML element
+         */
+        getPostList: PropTypes.func.isRequired
+    }
+
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+
+    render() {
+        const post = this.props.post;
+        const isSystemMessage = PostUtils.isSystemMessage(post);
+
+        let userProfile = (
+            <UserProfile
+                user={this.props.user}
+                displayNameType={this.props.displayNameType}
+                status={this.props.status}
+                isBusy={this.props.isBusy}
+            />
+        );
+        let botIndicator;
+        let colon;
+
+        if (post.props && post.props.from_webhook) {
+            if (post.props.override_username && global.window.mm_config.EnablePostUsernameOverride === 'true') {
+                userProfile = (
+                    <UserProfile
+                        user={this.props.user}
+                        overwriteName={post.props.override_username}
+                        disablePopover={true}
+                    />
+                );
+            } else {
+                userProfile = (
+                    <UserProfile
+                        user={this.props.user}
+                        displayNameType={this.props.displayNameType}
+                        disablePopover={true}
+                    />
+                );
+            }
+
+            botIndicator = <div className='bot-indicator'>{Constants.BOT_NAME}</div>;
+        } else if (isSystemMessage) {
+            userProfile = (
+                <UserProfile
+                    user={{}}
+                    overwriteName={
+                        <FormattedMessage
+                            id='post_info.system'
+                            defaultMessage='System'
+                        />
+                    }
+                    overwriteImage={Constants.SYSTEM_MESSAGE_PROFILE_IMAGE}
+                    disablePopover={true}
+                />
+            );
+        }
+
+        if (this.props.compactDisplay) {
+            colon = (<strong className='colon'>{':'}</strong>);
+        }
+
+        return (
+            <div className='post__header'>
+                <div className='col col__name'>{userProfile}{colon}</div>
+                {botIndicator}
+                <div className='col'>
+                    <PostInfo
+                        post={post}
+                        handleCommentClick={this.props.handleCommentClick}
+                        handleDropdownOpened={this.props.handleDropdownOpened}
+                        compactDisplay={this.props.compactDisplay}
+                        lastPostCount={this.props.lastPostCount}
+                        replyCount={this.props.replyCount}
+                        consecutivePostByUser={this.props.consecutivePostByUser}
+                        getPostList={this.props.getPostList}
+                    />
+                </div>
+            </div>
+        );
+    }
+}