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/Client.tsx

@@ -100,6 +100,7 @@ export default class Client extends EventEmitter {
   sdkVersion: number;
   messageIdCounter: number;
   plugins: Plugins;
+  showAllPlugins: boolean;
   connection: RSocketClientSocket<any, any> | null | undefined;
   responder: Partial<Responder<any, any>>;
   store: Store;
@@ -130,6 +131,7 @@ export default class Client extends EventEmitter {
     super();
     this.connected = true;
     this.plugins = plugins ? plugins : [];
+    this.showAllPlugins = false;
     this.connection = conn;
     this.id = id;
     this.query = query;

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);

src/fb-stubs/pluginUsage.tsx

@@ -0,0 +1,42 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ */
+
+// copied from Flipper dashboard
+const pluginRanking = [
+  'DeviceLogs',
+  'Inspector',
+  'Network',
+  'AnalyticsLogging',
+  'GraphQL',
+  'oculus-service-logs',
+  'UIPerf',
+  'CrashReporter',
+  'Msys',
+  'React',
+  'Databases',
+  'notifications',
+  'MobileConfig',
+  'FunnelLogger',
+  'Fresco',
+  'MScreen',
+  'Preferences',
+  'DeviceCPU',
+  'Hermesdebugger',
+  'vros-event-profiler',
+  'Mobileboost',
+  'Sections',
+  'Composer',
+  'Stories',
+  'DesignOverlay',
+];
+
+export function isTopUsedPlugin(pluginName: string, range: number): boolean {
+  const rank = pluginRanking.findIndex((name: string) => {
+    return name === pluginName;
+  });
+  return rank >= 0 && rank < range;
+}

src/reducers/connections.tsx

@@ -92,6 +92,10 @@ export type Action =
   | {
       type: 'CLIENT_SETUP_ERROR';
       payload: {client: UninitializedClient; error: Error};
+    }
+  | {
+      type: 'CLIENT_SHOW_MORE_OR_LESS';
+      payload: string;
     };
 
 const DEFAULT_PLUGIN = 'DeviceLogs';
@@ -336,6 +340,19 @@ const reducer = (state: State = INITAL_STATE, action: Action): State => {
         error: `Client setup error: ${errorMessage}`,
       };
     }
+    case 'CLIENT_SHOW_MORE_OR_LESS': {
+      const {payload} = action;
+
+      return {
+        ...state,
+        clients: state.clients.map((client: Client) => {
+          if (client.id === payload) {
+            client.showAllPlugins = !client.showAllPlugins;
+          }
+          return client;
+        }),
+      };
+    }
     default:
       return state;
   }
@@ -382,6 +399,11 @@ export const selectPlugin = (payload: {
   payload,
 });
 
+export const showMoreOrLessPlugins = (payload: string): Action => ({
+  type: 'CLIENT_SHOW_MORE_OR_LESS',
+  payload,
+});
+
 export const userPreferredPlugin = (payload: string): Action => ({
   type: 'SELECT_USER_PREFERRED_PLUGIN',
   payload,