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

1 files changed, 88 insertions, 0 deletions

diff --git a/webapp/components/post_view/post_flag_icon.jsx b/webapp/components/post_view/post_flag_icon.jsx
new file mode 100644
index 000000000..295bdd116
--- /dev/null
+++ b/webapp/components/post_view/post_flag_icon.jsx
@@ -0,0 +1,88 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import PropTypes from 'prop-types';
+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 null;
+}
+
+PostFlagIcon.propTypes = {
+    idPrefix: PropTypes.string.isRequired,
+    idCount: PropTypes.number,
+    postId: PropTypes.string.isRequired,
+    isFlagged: PropTypes.bool.isRequired,
+    isEphemeral: PropTypes.bool
+};
+
+PostFlagIcon.defaultProps = {
+    idCount: -1,
+    postId: '',
+    isFlagged: false,
+    isEphemeral: false
+};