MM-56630 Scroll Fix of center panel (#30144)

* pageup/pagedown button scroll for center post-list

* revert package.json

* changing id, using ? and returning in keyHandler

* added e2e test for pageup/pagedown scroll

* Fix dynamic-virtualized-list not being in lockfile and update path

Moving the package under the MM namespace wasn't necessary, but it stops
some warnings from NPM.

* Move E2E test from Cypress to Playwright

Cypress's cy.type doesn't seem to properly trigger browser functions
because it doesn't seem to use native keyboard events. A newer version
of Cypress has a new cy.press method which is supposed to use native
keyboard events, but it also only supports the tab key currently, so it
wouldn't be useful here.

* Fix new test on iPad

* Add page up/down support to RHS and Threads view

* Update type definitions for dynamic-virtualized-list

---------

Co-authored-by: Harrison Healey <harrisonmhealey@gmail.com>

webapp/channels/src/components/advanced_text_editor/use_key_handler.tsx

@@ -158,6 +158,16 @@ const useKeyHandler = (
             }
         }
 
+        if ((Keyboard.isKeyPressed(e, KeyCodes.PAGE_UP) || Keyboard.isKeyPressed(e, KeyCodes.PAGE_DOWN))) {
+            // Moving the focus to the post list will cause the post list to scroll as if it already had focus
+            // before the key was pressed
+            if (location === Locations.CENTER) {
+                document.getElementById('postListScrollContainer')?.focus();
+            } else if (location === Locations.RHS_COMMENT) {
+                document.getElementById('threadViewerScrollContainer')?.focus();
+            }
+        }
+
         // listen for line break key combo and insert new line character
         if (Utils.isUnhandledLineBreakKeyCombo(e)) {
             handleDraftChange({

webapp/channels/src/components/post_view/post_list_virtualized/post_list_virtualized.test.tsx

@@ -1,11 +1,12 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import type {DynamicSizeList} from 'dynamic-virtualized-list';
 import {shallow} from 'enzyme';
 import React from 'react';
 import type {ComponentProps} from 'react';
 
+import type {DynamicSizeList} from '@mattermost/dynamic-virtualized-list';
+
 import {DATE_LINE} from 'mattermost-redux/utils/post_list';
 
 import PostListRow from 'components/post_view/post_list_row';

webapp/channels/src/components/post_view/post_list_virtualized/post_list_virtualized.tsx

@@ -3,11 +3,12 @@
 
 /* eslint-disable max-lines */
 
-import {DynamicSizeList} from 'dynamic-virtualized-list';
-import type {OnItemsRenderedArgs} from 'dynamic-virtualized-list';
 import React from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
+import {DynamicSizeList} from '@mattermost/dynamic-virtualized-list';
+import type {OnItemsRenderedArgs} from '@mattermost/dynamic-virtualized-list';
+
 import EventEmitter from 'mattermost-redux/utils/event_emitter';
 import {getNewMessagesIndex, isDateLine, isStartOfNewMessages} from 'mattermost-redux/utils/post_list';
 
@@ -720,6 +721,7 @@ export default class PostList extends React.PureComponent<Props, State> {
                                             ref={this.listRef}
                                             height={height}
                                             width={width}
+                                            id='postListScrollContainer'
                                             className='post-list__dynamic'
                                             itemData={this.state.postListIds}
                                             overscanCountForward={OVERSCAN_COUNT_FORWARD}

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

@@ -1,12 +1,12 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {DynamicSizeList} from 'dynamic-virtualized-list';
-import type {OnScrollArgs, OnItemsRenderedArgs} from 'dynamic-virtualized-list';
 import React, {PureComponent} from 'react';
 import type {RefObject} from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
+import {DynamicSizeList} from '@mattermost/dynamic-virtualized-list';
+import type {OnScrollArgs, OnItemsRenderedArgs} from '@mattermost/dynamic-virtualized-list';
 import type {Post} from '@mattermost/types/posts';
 import type {UserProfile} from '@mattermost/types/users';
 
@@ -440,6 +440,7 @@ class ThreadViewerVirtualized extends PureComponent<Props, State> {
                         {({width, height}) => (
                             <>
                                 <DynamicSizeList
+                                    id='threadViewerScrollContainer'
                                     canLoadMorePosts={this.canLoadMorePosts}
                                     height={height}
                                     initRangeToRender={this.initRangeToRender}

webapp/channels/src/types/external/dynamic-virtualized-list.d.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-declare module 'dynamic-virtualized-list' {
+declare module '@mattermost/dynamic-virtualized-list' {
     export type OnScrollArgs = {
         scrollDirection: 'backward' | 'forward';
         scrollOffset: number;
@@ -34,6 +34,7 @@ declare module 'dynamic-virtualized-list' {
         style: CSSProperties;
         width: number;
 
+        id?: string;
         className?: string;
         correctScrollToBottom?: boolean;
         innerListStyle?: CSSProperties;