Expand/Collapse Sidebar V0

Summary:
- Show all or show 5 LRU plugins
- Update when close/reopen app, collapse sidebar, or expand sidebar

Reviewed By: danielbuechele

Differential Revision: D16917950

fbshipit-source-id: 1e7edc86945162ea14e1cdaa89aa47d3defa4c7d

src/Client.tsx

@@ -175,6 +175,20 @@ export default class Client extends EventEmitter {
     }
   }
 
+  /// Sort plugins by LRU order stored in lessPlugins; if not, sort by alphabet
+  byClientLRU(a: typeof FlipperPlugin, b: typeof FlipperPlugin): number {
+    const hasA = this.lessPlugins.includes(a.id);
+    const hasB = this.lessPlugins.includes(b.id);
+    if (hasA && hasB) {
+      return this.lessPlugins.indexOf(a.id) > this.lessPlugins.indexOf(b.id)
+        ? 1
+        : -1;
+    } else if (hasA !== hasB) {
+      return hasB ? 1 : -1;
+    }
+    return (a.title || a.id) > (b.title || b.id) ? 1 : -1;
+  }
+
   /* All clients should have a corresponding Device in the store.
      However, clients can connect before a device is registered, so wait a
      while for the device to be registered if it isn't already. */

src/chrome/MainSidebar.tsx

@@ -13,7 +13,6 @@ 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,
@@ -318,13 +317,12 @@ class MainSidebar extends PureComponent<Props> {
                 {Array.from(this.props.clientPlugins.values())
                   .filter(
                     (p: typeof FlipperDevicePlugin) =>
-                      client.plugins.indexOf(p.id) > -1,
+                      (client.showAllPlugins
+                        ? client.plugins
+                        : client.lessPlugins
+                      ).indexOf(p.id) > -1,
                   )
-                  .filter(
-                    (p: typeof FlipperDevicePlugin) =>
-                      client.showAllPlugins || isTopUsedPlugin(p.title, 5),
-                  )
-                  .sort(byPluginNameOrId)
+                  .sort((a, b) => client.byClientLRU(a, b))
                   .map((plugin: typeof FlipperDevicePlugin) => (
                     <PluginSidebarListItem
                       key={plugin.id}

src/fb-stubs/pluginUsage.tsx

@@ -1,42 +0,0 @@
-/**
- * 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

@@ -215,10 +215,11 @@ const reducer = (state: State = INITAL_STATE, action: Action): State => {
         performance.mark(`activePlugin-${selectedPlugin}`);
       }
 
-      const LRUPlugins =
-        state.userLRUPlugins[selectedApp || state.userPreferredApp] || [];
+      const LRUPlugins = (
+        state.userLRUPlugins[selectedApp || state.userPreferredApp] || []
+      ).slice();
       const idxLRU = LRUPlugins.indexOf(selectedPlugin);
-      if (idxLRU > 0) {
+      if (idxLRU >= 0) {
         LRUPlugins.splice(idxLRU, 1);
       }
       LRUPlugins.unshift(selectedPlugin);
@@ -241,13 +242,13 @@ const reducer = (state: State = INITAL_STATE, action: Action): State => {
       const {userPreferredApp, userPreferredPlugin, userLRUPlugins} = state;
       let {selectedApp, selectedPlugin} = state;
 
-      const lessPlugins = userLRUPlugins[payload.id];
+      const lessPlugins = (userLRUPlugins[payload.id] || []).slice();
       if (lessPlugins) {
         payload.lessPlugins = lessPlugins.concat(
           payload.plugins.filter(p => !lessPlugins.includes(p)),
         );
       } else {
-        payload.lessPlugins = payload.plugins;
+        payload.lessPlugins = payload.plugins.slice();
       }
       payload.lessPlugins = payload.lessPlugins.slice(0, MAX_MINIMUM_PLUGINS);