From 64ce2e6f69888b576b1b88949ebd68a3cc22faf6 Mon Sep 17 00:00:00 2001
From: Anton Nikolaev <nikoant@fb.com>
Date: Tue, 12 Oct 2021 07:18:08 -0700
Subject: [PATCH] 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   | 10 ++++++----
 desktop/app/src/utils/pluginUtils.tsx | 25 ++++++++++++++++++++++---
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/desktop/app/src/PluginContainer.tsx b/desktop/app/src/PluginContainer.tsx
index 29804037f..296456b10 100644
--- a/desktop/app/src/PluginContainer.tsx
+++ b/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') {
diff --git a/desktop/app/src/utils/pluginUtils.tsx b/desktop/app/src/utils/pluginUtils.tsx
index 4d6212147..7346eb8e6 100644
--- a/desktop/app/src/utils/pluginUtils.tsx
+++ b/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),