MM-58351 Fix showing LHS scrollbar when moving mouse over on chrome and safari (#27160)

* fixing scrollbar not showing when moving mouse over sidebar

* making scrollbar hidden by default and keep shown when hover over channel list

* updating sidebar_list snapshot

webapp/channels/src/components/sidebar/sidebar_list/__snapshots__/sidebar_list.test.tsx.snap

@@ -37,50 +37,55 @@ exports[`SidebarList should match snapshot 1`] = `
       onClick={[Function]}
       show={false}
     />
-    <Scrollbars
+    <div
-      autoHeight={false}
+      onPointerLeave={[Function]}
-      autoHeightMax={200}
+      onPointerOver={[Function]}
-      autoHeightMin={0}
-      autoHide={true}
-      autoHideDuration={500}
-      autoHideTimeout={500}
-      hideTracksWhenNotNeeded={false}
-      onScroll={[Function]}
-      renderThumbHorizontal={[Function]}
-      renderThumbVertical={[Function]}
-      renderTrackHorizontal={[Function]}
-      renderTrackVertical={[Function]}
-      renderView={[Function]}
-      style={
-        Object {
-          "position": "absolute",
-        }
-      }
-      tagName="div"
-      thumbMinSize={30}
-      universal={false}
     >
-      <DragDropContext
+      <Scrollbars
-        onBeforeCapture={[Function]}
+        autoHeight={false}
-        onBeforeDragStart={[Function]}
+        autoHeightMax={200}
-        onDragEnd={[Function]}
+        autoHeightMin={0}
-        onDragStart={[Function]}
+        autoHide={true}
+        autoHideDuration={200}
+        autoHideTimeout={1000}
+        hideTracksWhenNotNeeded={false}
+        onScroll={[Function]}
+        renderThumbHorizontal={[Function]}
+        renderThumbVertical={[Function]}
+        renderTrackHorizontal={[Function]}
+        renderTrackVertical={[Function]}
+        renderView={[Function]}
+        style={
+          Object {
+            "position": "absolute",
+          }
+        }
+        tagName="div"
+        thumbMinSize={30}
+        universal={false}
       >
-        <Connect(Droppable)
+        <DragDropContext
-          direction="vertical"
+          onBeforeCapture={[Function]}
-          droppableId="droppable-categories"
+          onBeforeDragStart={[Function]}
-          getContainerForClone={[Function]}
+          onDragEnd={[Function]}
-          ignoreContainerClipping={false}
+          onDragStart={[Function]}
-          isCombineEnabled={false}
-          isDropDisabled={false}
-          mode="standard"
-          renderClone={null}
-          type="SIDEBAR_CATEGORY"
         >
-          <Component />
+          <Connect(Droppable)
-        </Connect(Droppable)>
+            direction="vertical"
-      </DragDropContext>
+            droppableId="droppable-categories"
-    </Scrollbars>
+            getContainerForClone={[Function]}
+            ignoreContainerClipping={false}
+            isCombineEnabled={false}
+            isDropDisabled={false}
+            mode="standard"
+            renderClone={null}
+            type="SIDEBAR_CATEGORY"
+          >
+            <Component />
+          </Connect(Droppable)>
+        </DragDropContext>
+      </Scrollbars>
+    </div>
   </div>
 </Fragment>
 `;

webapp/channels/src/components/sidebar/sidebar_list/sidebar_list.tsx

@@ -108,6 +108,7 @@ type Props = {
 type State = {
     showTopUnread: boolean;
     showBottomUnread: boolean;
+    autoHide: boolean;
 };
 
 // scrollMargin is the margin at the edge of the channel list that we leave when scrolling to a channel.
@@ -125,6 +126,7 @@ export default class SidebarList extends React.PureComponent<Props, State> {
     scrollbar: React.RefObject<Scrollbars>;
     animate: SpringSystem;
     scrollAnimation: Spring;
+    channelsListScrollTimeout: NodeJS.Timeout | null = null;
 
     constructor(props: Props) {
         super(props);
@@ -133,6 +135,7 @@ export default class SidebarList extends React.PureComponent<Props, State> {
         this.state = {
             showTopUnread: false,
             showBottomUnread: false,
+            autoHide: true,
         };
         this.scrollbar = React.createRef();
 
@@ -462,6 +465,20 @@ export default class SidebarList extends React.PureComponent<Props, State> {
         this.props.actions.stopDragging();
     };
 
+    showChannelListScrollbar = () => {
+        if (this.channelsListScrollTimeout !== null) {
+            clearTimeout(this.channelsListScrollTimeout);
+        }
+
+        this.setState({autoHide: false});
+    };
+
+    hideChannelListScrollbar = () => {
+        this.channelsListScrollTimeout = setTimeout(() => {
+            this.setState({autoHide: true});
+        }, 300);
+    };
+
     render() {
         const {categories} = this.props;
 
@@ -562,20 +579,23 @@ export default class SidebarList extends React.PureComponent<Props, State> {
                         extraClass='nav-pills__unread-indicator-bottom'
                         content={below}
                     />
-                    <Scrollbars
+                    <div
-                        ref={this.scrollbar}
+                        onPointerLeave={this.hideChannelListScrollbar}
-                        autoHide={true}
+                        onPointerOver={this.showChannelListScrollbar}
-                        autoHideTimeout={500}
-                        autoHideDuration={500}
-                        renderThumbHorizontal={renderThumbHorizontal}
-                        renderThumbVertical={renderThumbVertical}
-                        renderTrackVertical={renderTrackVertical}
-                        renderView={renderView}
-                        onScroll={this.onScroll}
-                        style={scrollbarStyles}
                     >
-                        {channelList}
+                        <Scrollbars
-                    </Scrollbars>
+                            ref={this.scrollbar}
+                            autoHide={this.state.autoHide}
+                            renderThumbHorizontal={renderThumbHorizontal}
+                            renderThumbVertical={renderThumbVertical}
+                            renderTrackVertical={renderTrackVertical}
+                            renderView={renderView}
+                            onScroll={this.onScroll}
+                            style={scrollbarStyles}
+                        >
+                            {channelList}
+                        </Scrollbars>
+                    </div>
                 </div>
             </>
         );