Favorite plugins are now stored per app rather than globally

Summary:
This diff is a refinement of D18780965, which fixed plugin preferences to be stored per device. Instead of storing plugin preferences globally, we now store them per app, so that every app can have their own favorites, which are shared regardless the device

Note that the current favorite selection will be lost.

Reviewed By: nikoant

Differential Revision: D19018169

fbshipit-source-id: acfa05ece8516840bb91aee4059886365b346582

src/chrome/MainSidebar.tsx

@@ -228,7 +228,7 @@ type StateFromProps = {
   staticView: StaticView;
   selectedPlugin: string | null | undefined;
   selectedApp: string | null | undefined;
-  starredPlugins: Store['connections']['starredPlugins'];
+  userStarredPlugins: Store['connections']['userStarredPlugins'];
   clients: Array<Client>;
   uninitializedClients: Array<{
     client: UninitializedClient;
@@ -480,7 +480,7 @@ class MainSidebar extends PureComponent<Props, State> {
     }
     const onFavorite = (plugin: string) => {
       this.props.starPlugin({
-        selectedApp: client.id,
+        selectedApp: client.query.app,
         selectedPlugin: plugin,
       });
     };
@@ -489,7 +489,7 @@ class MainSidebar extends PureComponent<Props, State> {
     );
     const favoritePlugins: FlipperPlugins = getFavoritePlugins(
       allPlugins,
-      this.props.starredPlugins,
+      this.props.userStarredPlugins[client.query.app],
       true,
     );
     const showAllPlugins =
@@ -547,7 +547,7 @@ class MainSidebar extends PureComponent<Props, State> {
                 client,
                 getFavoritePlugins(
                   allPlugins,
-                  this.props.starredPlugins,
+                  this.props.userStarredPlugins[client.query.app],
                   false,
                 ),
                 false,
@@ -597,9 +597,12 @@ function isStaticViewActive(
 
 function getFavoritePlugins(
   allPlugins: FlipperPlugins,
-  starredPlugins: Props['starredPlugins'],
+  starredPlugins: undefined | string[],
   favorite: boolean,
 ): FlipperPlugins {
+  if (!starredPlugins || !starredPlugins.length) {
+    return favorite ? [] : allPlugins;
+  }
   return allPlugins.filter(plugin => {
     const idx = starredPlugins.indexOf(plugin.id);
     return idx === -1 ? !favorite : favorite;
@@ -630,7 +633,7 @@ export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
       selectedDevice,
       selectedPlugin,
       selectedApp,
-      starredPlugins,
+      userStarredPlugins,
       clients,
       uninitializedClients,
       staticView,
@@ -649,7 +652,7 @@ export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
     staticView,
     selectedPlugin,
     selectedApp,
-    starredPlugins,
+    userStarredPlugins,
     clients,
     uninitializedClients,
     devicePlugins,

src/reducers/connections.tsx

@@ -23,6 +23,7 @@ import NotificationScreen from '../chrome/NotificationScreen';
 import SupportRequestForm from '../fb-stubs/SupportRequestFormManager';
 import SupportRequestFormV2 from '../fb-stubs/SupportRequestFormV2';
 import SupportRequestDetails from '../fb-stubs/SupportRequestDetails';
+import {produce} from 'immer';
 
 export type StaticView =
   | null
@@ -48,7 +49,7 @@ export type State = {
   userPreferredDevice: null | string;
   userPreferredPlugin: null | string;
   userPreferredApp: null | string;
-  starredPlugins: string[];
+  userStarredPlugins: {[client: string]: string[]};
   errors: FlipperError[];
   clients: Array<Client>;
   uninitializedClients: Array<{
@@ -152,7 +153,7 @@ const INITAL_STATE: State = {
   userPreferredDevice: null,
   userPreferredPlugin: null,
   userPreferredApp: null,
-  starredPlugins: [],
+  userStarredPlugins: {},
   errors: [],
   clients: [],
   uninitializedClients: [],
@@ -238,18 +239,20 @@ const reducer = (state: State = INITAL_STATE, action: Actions): State => {
     }
 
     case 'STAR_PLUGIN': {
-      const {selectedPlugin} = action.payload;
-      const starredPlugins = state.starredPlugins.slice();
-      const idx = starredPlugins.indexOf(selectedPlugin);
-      if (idx === -1) {
-        starredPlugins.push(selectedPlugin);
-      } else {
-        starredPlugins.splice(idx, 1);
-      }
-      return {
-        ...state,
-        starredPlugins: starredPlugins,
-      };
+      const {selectedPlugin, selectedApp} = action.payload;
+      return produce(state, draft => {
+        if (!draft.userStarredPlugins[selectedApp]) {
+          draft.userStarredPlugins[selectedApp] = [selectedPlugin];
+        } else {
+          const plugins = draft.userStarredPlugins[selectedApp];
+          const idx = plugins.indexOf(selectedPlugin);
+          if (idx === -1) {
+            plugins.push(selectedPlugin);
+          } else {
+            plugins.splice(idx, 1);
+          }
+        }
+      });
     }
 
     case 'SELECT_USER_PREFERRED_PLUGIN': {

src/reducers/index.tsx

@@ -102,7 +102,7 @@ export default combineReducers<State, Actions>({
         'userPreferredDevice',
         'userPreferredPlugin',
         'userPreferredApp',
-        'starredPlugins',
+        'userStarredPlugins',
       ],
     },
     connections,