From a9baf67fff5de611db254a367508b9e7b2a5d8ea Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Thu, 30 Jan 2020 09:16:51 -0800
Subject: [PATCH] Make sure the sidebar selection scrolls into the current view

Summary: Fixes issue where the user would loose context if having a lot of apps open, and then opening a bug report

Reviewed By: priteshrnandgaonkar

Differential Revision: D19640759

fbshipit-source-id: cc3aa617d99aae1904999da98d12b8a3595f6fbe
---
 src/chrome/mainsidebar/MainSidebarUtilsSection.tsx | 12 +++---------
 src/chrome/mainsidebar/sidebarUtils.tsx            | 14 +++++++++++++-
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/chrome/mainsidebar/MainSidebarUtilsSection.tsx b/src/chrome/mainsidebar/MainSidebarUtilsSection.tsx
index 52c180c9e..15b72abb9 100644
--- a/src/chrome/mainsidebar/MainSidebarUtilsSection.tsx
+++ b/src/chrome/mainsidebar/MainSidebarUtilsSection.tsx
@@ -59,8 +59,7 @@ function MainSidebarUtilsSection({
   }
 
   return (
-    <>
-      {' '}
+    <div style={{flexShrink: 0, borderTop: `1px solid ${colors.blackAlpha10}`}}>
       {showWatchDebugRoot &&
         (function() {
           const active = isStaticViewActive(staticView, WatchTools);
@@ -108,7 +107,7 @@ function MainSidebarUtilsSection({
         Manage Plugins
       </ListItem>
       {config.showLogin && <UserAccount />}
-    </>
+    </div>
   );
 }
 
@@ -162,12 +161,7 @@ const RenderNotificationsEntry = connect<
 
   const active = isStaticViewActive(staticView, NotificationScreen);
   return (
-    <ListItem
-      active={active}
-      onClick={() => setStaticView(NotificationScreen)}
-      style={{
-        borderTop: `1px solid ${colors.blackAlpha10}`,
-      }}>
+    <ListItem active={active} onClick={() => setStaticView(NotificationScreen)}>
       <PluginIcon
         color={colors.light50}
         name={numNotifications > 0 ? 'bell' : 'bell-null'}
diff --git a/src/chrome/mainsidebar/sidebarUtils.tsx b/src/chrome/mainsidebar/sidebarUtils.tsx
index 524fac66b..007ace157 100644
--- a/src/chrome/mainsidebar/sidebarUtils.tsx
+++ b/src/chrome/mainsidebar/sidebarUtils.tsx
@@ -7,7 +7,7 @@
  * @format
  */
 
-import React from 'react';
+import React, {useRef, useEffect} from 'react';
 import {
   FlexBox,
   colors,
@@ -156,9 +156,21 @@ export const PluginSidebarListItem: React.FC<{
 }> = function(props) {
   const {isActive, plugin, onFavorite, starred} = props;
   const iconColor = getColorByApp(props.app);
+  const domRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const node = domRef.current;
+    if (isActive && node) {
+      const rect = node.getBoundingClientRect();
+      if (rect.top < 0 || rect.bottom > document.documentElement.clientHeight) {
+        node.scrollIntoView();
+      }
+    }
+  }, [isActive]);
 
   return (
     <ListItem
+      ref={domRef}
       active={isActive}
       onClick={props.onClick}
       disabled={starred === false}>