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

@@ -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
+    <ListItem active={active} onClick={() => setStaticView(NotificationScreen)}>
-      active={active}
-      onClick={() => setStaticView(NotificationScreen)}
-      style={{
-        borderTop: `1px solid ${colors.blackAlpha10}`,
-      }}>
       <PluginIcon
         color={colors.light50}
         name={numNotifications > 0 ? 'bell' : 'bell-null'}

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}>