Show the plugins from the redux store only belonging to the selected app

Summary: It fixes the bug, where currently we show all active persistent plugins for the export functionality irrespective of the fact that the plugin is active for the selected client. With this diff we will only show active persistent plugins for the selected client.

Reviewed By: mweststrate

Differential Revision: D18890247

fbshipit-source-id: e567da0ccf04e051ca0eabb497a6bd72cc8a0d76

src/chrome/ExportDataPluginSheet.tsx

@@ -25,6 +25,8 @@ import ListView from './ListView';
 import {Dispatch, Action} from 'redux';
 import {unsetShare} from '../reducers/application';
 import {FlexColumn, styled} from 'flipper';
+import Client from '../Client';
+
 type OwnProps = {
   onHide: () => void;
 };
@@ -33,6 +35,7 @@ type StateFromProps = {
   share: ShareType | null;
   plugins: PluginState;
   pluginStates: PluginStatesState;
+  selectedClient: Client | undefined;
 };
 
 type DispatchFromProps = {
@@ -54,11 +57,16 @@ const Container = styled(FlexColumn)({
 
 class ExportDataPluginSheet extends Component<Props> {
   render() {
-    const {plugins, pluginStates, onHide} = this.props;
+    const {plugins, pluginStates, onHide, selectedClient} = this.props;
     const onHideWithUnsettingShare = () => {
       this.props.unsetShare();
       onHide();
     };
+    const pluginsToExport = getActivePersistentPlugins(
+      pluginStates,
+      plugins,
+      selectedClient,
+    );
     return (
       <Container>
         <ListView
@@ -90,11 +98,8 @@ class ExportDataPluginSheet extends Component<Props> {
               }
             }
           }}
-          elements={getActivePersistentPlugins(pluginStates, plugins)}
+          elements={pluginsToExport}
-          selectedElements={getActivePersistentPlugins(
+          selectedElements={pluginsToExport.reduce((acc, plugin) => {
-            pluginStates,
-            plugins,
-          ).reduce((acc, plugin) => {
             if (
               plugins.selectedPlugins.length <= 0 ||
               plugins.selectedPlugins.includes(plugin)
@@ -112,11 +117,22 @@ class ExportDataPluginSheet extends Component<Props> {
 }
 
 export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
-  ({application: {share}, plugins, pluginStates}) => ({
+  ({
-    share,
+    application: {share},
     plugins,
     pluginStates,
-  }),
+    connections: {selectedApp, clients},
+  }) => {
+    const selectedClient = clients.find(o => {
+      return o.id === selectedApp;
+    });
+    return {
+      share,
+      plugins,
+      pluginStates,
+      selectedClient,
+    };
+  },
   (dispatch: Dispatch<Action<any>>) => ({
     selectedPlugins: (plugins: Array<string>) => {
       dispatch(actionForSelectedPlugins(plugins));

src/reducers/plugins.tsx

@@ -73,7 +73,6 @@ export default function reducer(
         clientPlugins.set(p.id, p);
       }
     });
-
     return {
       ...state,
       devicePlugins,

src/utils/pluginUtils.tsx

@@ -14,6 +14,7 @@ import {pluginsClassMap} from './exportData';
 import {State as PluginsState} from '../reducers/plugins';
 import {PluginDefinition} from '../dispatcher/plugins';
 import {deconstructPluginKey} from './clientUtils';
+import Client from '../Client';
 
 export function getPluginKey(
   selectedApp: string | null,
@@ -46,24 +47,44 @@ export function getPersistedState<PersistedState>(
   return persistedState;
 }
 
+/**
+ *
+ * @param pluginsState  PluginsState of the Redux Store.
+ * @param plugins  Plugins from the state which has the mapping to Plugin's Class.
+ * @param selectedClient Optional paramater indicating the selected client.
+ * Returns active persistent plugin, which means plugins which has the data in redux store or has the `exportPersistedState` function defined which can return the plugin's data when called.
+ * If the selectedClient is defined then the active persistent plugins only for the selectedClient will be returned, otherwise it will return all active persistent plugins.
+ */
 export function getActivePersistentPlugins(
   pluginsState: PluginStatesState,
   plugins: PluginsState,
+  selectedClient?: Client,
 ): Array<string> {
   const pluginsMap: Map<
     string,
     typeof FlipperDevicePlugin | typeof FlipperPlugin
   > = pluginsClassMap(plugins);
-  return getPersistentPlugins(plugins).filter(pluginName => {
+  return getPersistentPlugins(plugins).filter(plugin => {
-    const pluginClass = pluginsMap.get(pluginName);
+    const pluginClass = pluginsMap.get(plugin);
-    const pluginNames = Object.keys(pluginsState).map(
+    const keys = Object.keys(pluginsState)
-      pluginKey => deconstructPluginKey(pluginKey).pluginName,
+      .filter(k => !selectedClient || k.includes(selectedClient.id))
-    );
+      .map(key => deconstructPluginKey(key).pluginName);
-    return (
+    let result = plugin == 'DeviceLogs';
-      (pluginClass && pluginClass.exportPersistedState != undefined) ||
+    const pluginsWithExportPersistedState =
-      pluginName == 'DeviceLogs' ||
+      pluginClass && pluginClass.exportPersistedState != undefined;
-      pluginNames.includes(pluginName)
+    const pluginsWithReduxData = keys.includes(plugin);
-    );
+    if (!result && selectedClient) {
+      // If there is a selected client, active persistent plugin is the plugin which is active for selectedClient and also persistent.
+      result =
+        selectedClient.plugins.includes(plugin) &&
+        (pluginsWithExportPersistedState || pluginsWithReduxData);
+    } else if (!result && !selectedClient) {
+      // If there is no selected client, active persistent plugin is the plugin which is just persistent.
+      result =
+        (pluginClass && pluginClass.exportPersistedState != undefined) ||
+        keys.includes(plugin);
+    }
+    return result;
   });
 }