Fix deferred loaded plugins not showing up

Summary:
See previous diff, plugins that are not available during the initial client connection setup didn't show up in the UI, until selecting another device first. This diff fixes that by listening to the `plugins-change` event of the client.

Changelog: Fix issue where React Native plugins didn't show up in the Sandy layout

Reviewed By: passy

Differential Revision: D25755812

fbshipit-source-id: d865d912ecca85d868831c4da7c56b5f0be6c3bf

desktop/app/src/sandy-chrome/appinspect/PluginList.tsx

@@ -36,7 +36,7 @@ import {
   startPluginDownload,
 } from '../../reducers/pluginDownloads';
 import {activatePlugin, uninstallPlugin} from '../../reducers/pluginManager';
-import {BundledPluginDetails} from 'plugin-lib/lib';
+import {BundledPluginDetails} from 'plugin-lib';
 import {filterNewestVersionOfEachPlugin} from '../../dispatcher/plugins';
 import {reportUsage} from '../../utils/metrics';
 
@@ -57,6 +57,19 @@ export const PluginList = memo(function PluginList({
   const plugins = useStore((state) => state.plugins);
   const downloads = useStore((state) => state.pluginDownloads);
 
+  // client is a mutable structure, so we need the event emitter to detect the addition of plugins....
+  const [pluginsChanged, setPluginsChanged] = useState(0);
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+    const listener = () => setPluginsChanged((v) => v + 1);
+    client.on('plugins-change', listener);
+    return () => {
+      client.off('plugins-change', listener);
+    };
+  }, [client]);
+
   const {
     devicePlugins,
     metroPlugins,
@@ -70,6 +83,7 @@ export const PluginList = memo(function PluginList({
     client,
     plugins,
     connections.userStarredPlugins,
+    pluginsChanged,
   ]);
   const isArchived = !!activeDevice?.isArchived;
 
@@ -460,6 +474,7 @@ export function computePluginLists(
   client: Client | undefined,
   plugins: State['plugins'],
   userStarredPlugins: State['connections']['userStarredPlugins'],
+  _pluginsChanged?: number, // this argument is purely used to invalidate the memoization cache
 ) {
   const devicePlugins: DevicePluginDefinition[] =
     device?.devicePlugins.map((name) => plugins.devicePlugins.get(name)!) ?? [];