Show PluginInfo for unavailable and not installed plugins

Summary: Updated PluginInfo component to show info about uninstalled and unavailable plugins in addition to enabled/disabled. Now any selected plugin will be shown there. For uninstalled plugins we will show "Install" action button. For unavailable plugins we wiil show an alert describing why plugin is unavailable.

Reviewed By: mweststrate

Differential Revision: D29254970

fbshipit-source-id: 0de32da5b5550ff6b7d452abf6ff7259677aebc5

desktop/app/src/PluginContainer.tsx

@@ -54,7 +54,7 @@ import semver from 'semver';
 import {loadPlugin} from './reducers/pluginManager';
 import {produce} from 'immer';
 import {reportUsage} from './utils/metrics';
-import PluginInfo from './chrome/fb-stubs/PluginInfo';
+import {PluginInfo} from './chrome/fb-stubs/PluginInfo';
 import {getActiveClient, getActivePlugin} from './selectors/connections';
 
 const {Text, Link} = Typography;

desktop/app/src/chrome/fb-stubs/PluginInfo.tsx

@@ -26,7 +26,7 @@ const Waiting = styled(Layout.Container)({
   textAlign: 'center',
 });
 
-export default function PluginInfo() {
+export function PluginInfo() {
   const pluginId = useStore((state) => state.connections.selectedPlugin);
   const enabledPlugins = useStore((state) => state.connections.enabledPlugins);
   const enabledDevicePlugins = useStore(

desktop/app/src/selectors/connections.tsx

@@ -24,6 +24,7 @@ const getUserPreferredDevice = (state: State) =>
   state.connections.userPreferredDevice;
 const getClients = (state: State) => state.connections.clients;
 const getDevices = (state: State) => state.connections.devices;
+const getPluginDownloads = (state: State) => state.pluginDownloads;
 
 export const getActiveClient = createSelector(
   getSelectedApp,
@@ -133,3 +134,13 @@ export const getActivePlugin = createSelector(
     return pluginList[pluginId] ?? null;
   },
 );
+
+export const getPluginDownloadStatusMap = createSelector(
+  getPluginDownloads,
+  (downloads) => {
+    const downloadMap = new Map(
+      Object.values(downloads).map((x) => [x.plugin.id, x]),
+    );
+    return downloadMap;
+  },
+);