MM-57411: Change RHS scroll direction and fix advanced text editor to the bottom (#27162)

Automatic Merge

webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss

@@ -27,7 +27,7 @@
     }
 
     .ThreadViewer & {
-        padding-top: 12px;
+        padding-top: 0px;
 
         .AutoHeight {
             position: absolute;

webapp/channels/src/components/threading/thread_viewer/thread_viewer.scss

@@ -9,6 +9,7 @@
     }
 
     .post-list__dynamic--RHS {
+        padding-bottom: 8px;
         scrollbar-color: var(--center-channel-color-32) #fff0;
         scrollbar-width: thin;
     }

webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.scss

@@ -0,0 +1,7 @@
+.virtual-list{
+    &__ctr{
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+    }
+}

webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.tsx

@@ -26,6 +26,7 @@ import type {FakePost} from 'types/store/rhs';
 
 import CreateComment from './create_comment';
 import Row from './thread_viewer_row';
+import './virtualized_thread_viewer.scss';
 
 type Props = {
     currentUserId: string;
@@ -45,7 +46,6 @@ type Props = {
 }
 
 type State = {
-    createCommentHeight: number;
     isScrolling: boolean;
     topRhsPostId?: string;
     userScrolledToBottom: boolean;
@@ -58,9 +58,11 @@ type State = {
 
 const virtListStyles = {
     position: 'absolute',
-    top: '0',
-    height: '100%',
-    willChange: 'auto',
+    willChange: 'transform',
+    overflowY: 'auto',
+    overflowAnchor: 'none',
+    bottom: '0px',
+    maxHeight: '100%',
 };
 
 const innerStyles = {
@@ -81,6 +83,11 @@ const THREADING_TIME: typeof BASE_THREADING_TIME = {
 };
 
 const OFFSET_TO_SHOW_TOAST = -50;
+
+// To handle issue caused by slight difference in scrollHeight and scrollOffset + clientHeight of virtaulized list
+// we add a buffer to the scrollOffset
+const SCROLL_OFFSET_BUFFER = 5;
+
 const OVERSCAN_COUNT_FORWARD = 80;
 const OVERSCAN_COUNT_BACKWARD = 80;
 
@@ -88,7 +95,6 @@ class ThreadViewerVirtualized extends PureComponent<Props, State> {
     private mounted = false;
     private scrollStopAction: DelayedAction;
     private scrollShortCircuit = 0;
-    postCreateContainerRef: RefObject<HTMLDivElement>;
     listRef: RefObject<DynamicSizeList>;
     innerRef: RefObject<HTMLDivElement>;
     initRangeToRender: number[];
@@ -105,11 +111,9 @@ class ThreadViewerVirtualized extends PureComponent<Props, State> {
 
         this.listRef = React.createRef();
         this.innerRef = React.createRef();
-        this.postCreateContainerRef = React.createRef();
         this.scrollStopAction = new DelayedAction(this.handleScrollStop);
 
         this.state = {
-            createCommentHeight: 0,
             isScrolling: false,
             userScrolledToBottom: false,
             topRhsPostId: undefined,
@@ -184,11 +188,10 @@ class ThreadViewerVirtualized extends PureComponent<Props, State> {
         if (scrollHeight <= 0) {
             return;
         }
-        const {createCommentHeight} = this.state;
 
         const updatedState: Partial<State> = {};
 
-        const userScrolledToBottom = scrollHeight - scrollOffset - createCommentHeight <= clientHeight;
+        const userScrolledToBottom = scrollHeight - scrollOffset - SCROLL_OFFSET_BUFFER <= clientHeight;
 
         if (!scrollUpdateWasRequested) {
             this.scrollShortCircuit = 0;
@@ -350,18 +353,6 @@ class ThreadViewerVirtualized extends PureComponent<Props, State> {
             a11yIndex++;
         }
 
-        if (isCreateComment(itemId)) {
-            return (
-                <CreateComment
-                    placeholder={this.props.inputPlaceholder}
-                    isThreadView={this.props.isThreadView}
-                    ref={this.postCreateContainerRef}
-                    teammate={this.props.directTeammate}
-                    threadId={this.props.selected.id}
-                />
-            );
-        }
-
         return (
             <div
                 style={style}
@@ -423,7 +414,7 @@ class ThreadViewerVirtualized extends PureComponent<Props, State> {
         const {topRhsPostId} = this.state;
 
         return (
-            <>
+            <div className='virtual-list__ctr'>
                 {this.props.isMobileView && topRhsPostId && !this.props.useRelativeTimestamp && (
                     <FloatingTimestamp
                         isRhsPost={true}
@@ -468,7 +459,13 @@ class ThreadViewerVirtualized extends PureComponent<Props, State> {
                         )}
                     </AutoSizer>
                 </div>
-            </>
+                <CreateComment
+                    placeholder={this.props.inputPlaceholder}
+                    isThreadView={this.props.isThreadView}
+                    teammate={this.props.directTeammate}
+                    threadId={this.props.selected.id}
+                />
+            </div>
         );
     }
 }

webapp/channels/src/selectors/views/threads.ts

@@ -13,7 +13,7 @@ import {makeGetPostsForIds} from 'mattermost-redux/selectors/entities/posts';
 import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
 import {getThreads} from 'mattermost-redux/selectors/entities/threads';
 import {createIdsSelector} from 'mattermost-redux/utils/helpers';
-import {DATE_LINE, makeCombineUserActivityPosts, START_OF_NEW_MESSAGES, CREATE_COMMENT} from 'mattermost-redux/utils/post_list';
+import {DATE_LINE, makeCombineUserActivityPosts, START_OF_NEW_MESSAGES} from 'mattermost-redux/utils/post_list';
 import {getUserCurrentTimezone} from 'mattermost-redux/utils/timezone_utils';
 
 import {getIsRhsOpen, getSelectedPostId} from 'selectors/rhs';
@@ -149,8 +149,6 @@ export function makeFilterRepliesAndAddSeparators() {
                 out.push(post.id);
             }
 
-            out.push(CREATE_COMMENT);
-
             // Flip it back to newest to oldest
             return out.reverse();
         },