Show all plugins in the list even if there is no selected device / app

Summary: Just a small fix to ensure all plugins are shown in the list even if no device / app is connected to Flipper. We show them under "Unavailable plugins" with  explanation why they not available. This allows user to check plugin documentation even without connecting anything to Flipper.

Reviewed By: passy

Differential Revision: D31532732

fbshipit-source-id: 4e481b3d6923bb073a1478b2bd283db25a374c72

desktop/app/src/PluginContainer.tsx

@@ -26,7 +26,7 @@ import {
 import {StaticView, setStaticView} from './reducers/connections';
 import {switchPlugin} from './reducers/pluginManager';
 import React, {PureComponent} from 'react';
-import {connect, ReactReduxContext} from 'react-redux';
+import {connect, ReactReduxContext, ReactReduxContextValue} from 'react-redux';
 import {selectPlugin} from './reducers/connections';
 import {State as Store, MiddlewareAPI} from './reducers/index';
 import {activateMenuItems} from './MenuBar';
@@ -50,6 +50,7 @@ import {reportUsage} from './utils/metrics';
 import {PluginInfo} from './chrome/fb-stubs/PluginInfo';
 import {getActiveClient, getActivePlugin} from './selectors/connections';
 import {isTest} from './utils/isProduction';
+import {AnyAction} from 'redux';
 
 const {Text, Link} = Typography;
 
@@ -116,7 +117,8 @@ type State = {
 };
 
 class PluginContainer extends PureComponent<Props, State> {
-  static contextType = ReactReduxContext;
+  static contextType: React.Context<ReactReduxContextValue<any, AnyAction>> =
+    ReactReduxContext;
 
   constructor(props: Props) {
     super(props);
@@ -249,8 +251,8 @@ class PluginContainer extends PureComponent<Props, State> {
   }
 
   render() {
-    const {activePlugin, pluginKey, target, pendingMessages} = this.props;
-    if (!activePlugin || !target || !pluginKey) {
+    const {activePlugin, pendingMessages} = this.props;
+    if (!activePlugin) {
       return this.renderNoPluginActive();
     }
     if (activePlugin.status !== 'enabled') {

desktop/app/src/utils/pluginUtils.tsx

@@ -229,6 +229,15 @@ export function computePluginLists(
         downloadablePlugins.push(plugin);
       }
     }
+  } else {
+    for (const p of plugins.devicePlugins.values()) {
+      unavailablePlugins.push([
+        p.details,
+        `Device plugin '${getPluginTitle(
+          p.details,
+        )}' is not available because no device is currently selected`,
+      ]);
+    }
   }
 
   // process problematic plugins
@@ -251,11 +260,12 @@ export function computePluginLists(
     ]);
   });
 
+  const clientPlugins = Array.from(plugins.clientPlugins.values()).sort(
+    sortPluginsByName,
+  );
+
   // process all client plugins
   if (device && client) {
-    const clientPlugins = Array.from(plugins.clientPlugins.values()).sort(
-      sortPluginsByName,
-    );
     const favoritePlugins = getFavoritePlugins(
       device,
       client,
@@ -284,6 +294,15 @@ export function computePluginLists(
         downloadablePlugins.push(plugin);
       }
     });
+  } else {
+    clientPlugins.forEach((plugin) => {
+      unavailablePlugins.push([
+        plugin.details,
+        `Plugin '${getPluginTitle(
+          plugin.details,
+        )}' is not available because no application is currently selected`,
+      ]);
+    });
   }
   const downloadablePluginSet = new Set<string>(
     downloadablePlugins.map((p) => p.id),