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
This commit is contained in:
Anton Nikolaev
2021-06-29 13:00:18 -07:00
committed by Facebook GitHub Bot
parent e36eec82b2
commit 116f6eb5ba
3 changed files with 13 additions and 2 deletions

View File

@@ -54,7 +54,7 @@ import semver from 'semver';
import {loadPlugin} from './reducers/pluginManager'; import {loadPlugin} from './reducers/pluginManager';
import {produce} from 'immer'; import {produce} from 'immer';
import {reportUsage} from './utils/metrics'; 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'; import {getActiveClient, getActivePlugin} from './selectors/connections';
const {Text, Link} = Typography; const {Text, Link} = Typography;

View File

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

View File

@@ -24,6 +24,7 @@ const getUserPreferredDevice = (state: State) =>
state.connections.userPreferredDevice; state.connections.userPreferredDevice;
const getClients = (state: State) => state.connections.clients; const getClients = (state: State) => state.connections.clients;
const getDevices = (state: State) => state.connections.devices; const getDevices = (state: State) => state.connections.devices;
const getPluginDownloads = (state: State) => state.pluginDownloads;
export const getActiveClient = createSelector( export const getActiveClient = createSelector(
getSelectedApp, getSelectedApp,
@@ -133,3 +134,13 @@ export const getActivePlugin = createSelector(
return pluginList[pluginId] ?? null; 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;
},
);