Add Button to Expand or Collapse Left Panel

Summary:
- Add `show more` and `show less` button to expand and collapse
- The element to show depends on its usage rank from Flipper dashboard (manually copied)

Reviewed By: danielbuechele

Differential Revision: D16917952

fbshipit-source-id: fc37d5c640be33794694e302341fa08849b8f97f

src/chrome/MainSidebar.tsx

@@ -13,6 +13,7 @@ import {FlipperBasePlugin} from '../plugin';
 import {PluginNotification} from '../reducers/notifications';
 import {ActiveSheet} from '../reducers/application';
 import {State as Store} from '../reducers';
+import {isTopUsedPlugin} from '../fb-stubs/pluginUsage';
 
 import {
   Sidebar,
@@ -30,7 +31,7 @@ import {
 } from 'flipper';
 import React, {Component, PureComponent} from 'react';
 import NotificationsHub from '../NotificationsHub';
-import {selectPlugin} from '../reducers/connections';
+import {selectPlugin, showMoreOrLessPlugins} from '../reducers/connections';
 import {setActiveSheet} from '../reducers/application';
 import UserAccount from './UserAccount';
 import {connect} from 'react-redux';
@@ -116,6 +117,13 @@ const PluginDebugger = styled(FlexBox)(props => ({
   textOverflow: 'ellipsis',
 }));
 
+const PluginShowMoreOrLess = styled(ListItem)({
+  color: colors.blue,
+  fontSize: 10,
+  lineHeight: '10px',
+  paddingBottom: 5,
+});
+
 function PluginIcon({
   isActive,
   backgroundColor,
@@ -214,6 +222,8 @@ type DispatchFromProps = {
   }) => void;
 
   setActiveSheet: (activeSheet: ActiveSheet) => void;
+
+  showMoreOrLessPlugins: (payload: string) => void;
 };
 
 type Props = OwnProps & StateFromProps & DispatchFromProps;
@@ -310,6 +320,10 @@ class MainSidebar extends PureComponent<Props> {
                     (p: typeof FlipperDevicePlugin) =>
                       client.plugins.indexOf(p.id) > -1,
                   )
+                  .filter(
+                    (p: typeof FlipperDevicePlugin) =>
+                      client.showAllPlugins || isTopUsedPlugin(p.title, 5),
+                  )
                   .sort(byPluginNameOrId)
                   .map((plugin: typeof FlipperDevicePlugin) => (
                     <PluginSidebarListItem
@@ -329,6 +343,10 @@ class MainSidebar extends PureComponent<Props> {
                       app={client.query.app}
                     />
                   ))}
+                <PluginShowMoreOrLess
+                  onClick={() => this.props.showMoreOrLessPlugins(client.id)}>
+                  {client.showAllPlugins ? 'Show less' : 'Show more'}
+                </PluginShowMoreOrLess>
               </React.Fragment>
             ))}
           {uninitializedClients.map(entry => (
@@ -389,5 +407,6 @@ export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
   {
     selectPlugin,
     setActiveSheet,
+    showMoreOrLessPlugins,
   },
 )(MainSidebar);