PluginInfo component

Summary: Moved PluginEnabler component from PluginContainer into a separate file PluginInfo and also refactored it to not use deprecated components. In following diffs I will be extending PluginInfo to show not only enabler, but also additional information about the currently selected plugin.

Reviewed By: priteshrnandgaonkar

Differential Revision: D29186007

fbshipit-source-id: 4c8af9dcc4dc53476b9c50305f2221aeb009553e

desktop/app/src/PluginContainer.tsx

@@ -44,7 +44,7 @@ import {activateMenuItems} from './MenuBar';
 import {Message} from './reducers/pluginMessageQueue';
 import {IdlerImpl} from './utils/Idler';
 import {processMessageQueue} from './utils/messageQueue';
-import {ToggleButton, SmallText, Layout} from './ui';
+import {Layout} from './ui';
 import {theme, TrackingScope, _SandyPluginRenderer} from 'flipper-plugin';
 import {isDevicePluginDefinition, isSandyPlugin} from './utils/pluginUtils';
 import {ContentContainer} from './sandy-chrome/ContentContainer';
@@ -54,6 +54,7 @@ import semver from 'semver';
 import {loadPlugin} from './reducers/pluginManager';
 import {produce} from 'immer';
 import {reportUsage} from './utils/metrics';
+import PluginInfo from './chrome/PluginInfo';
 
 const {Text, Link} = Typography;
 
@@ -275,7 +276,7 @@ class PluginContainer extends PureComponent<Props, State> {
     }
 
     if (!pluginIsEnabled) {
-      return this.renderPluginEnabler();
+      return this.renderPluginInfo();
     }
     if (!pendingMessages || pendingMessages.length === 0) {
       return this.renderPlugin();
@@ -283,41 +284,8 @@ class PluginContainer extends PureComponent<Props, State> {
     return this.renderPluginLoader();
   }
 
-  renderPluginEnabler() {
-    const activePlugin = this.props.activePlugin!;
-    return (
-      <View grow>
-        <Waiting>
-          <VBox>
-            <FlexRow>
-              <Label
-                style={{
-                  fontSize: '16px',
-                  color: colors.light30,
-                  textTransform: 'uppercase',
-                }}>
-                {activePlugin.title}
-              </Label>
-            </FlexRow>
-          </VBox>
-          <VBox>
-            <ToggleButton
-              toggled={false}
-              onClick={() => {
-                this.props.enablePlugin({
-                  plugin: activePlugin,
-                  selectedApp: (this.props.target as Client)?.query?.app,
-                });
-              }}
-              large
-            />
-          </VBox>
-          <VBox>
-            <SmallText>Click to enable this plugin</SmallText>
-          </VBox>
-        </Waiting>
-      </View>
-    );
+  renderPluginInfo() {
+    return <PluginInfo />;
   }
 
   renderPluginLoader() {

desktop/app/src/chrome/PluginInfo.tsx

@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React, {useCallback, useMemo} from 'react';
+import {Label, ToggleButton, SmallText, styled, Layout} from '../ui';
+import {useDispatch, useStore} from '../utils/useStore';
+import {switchPlugin} from '../reducers/pluginManager';
+import {isPluginEnabled} from '../reducers/connections';
+import {theme} from 'flipper-plugin';
+import {PluginDefinition} from '../plugin';
+
+const Waiting = styled(Layout.Container)({
+  width: '100%',
+  height: '100%',
+  flexGrow: 1,
+  alignItems: 'center',
+  justifyContent: 'center',
+  textAlign: 'center',
+});
+
+export default function PluginInfo() {
+  const pluginId = useStore((state) => state.connections.selectedPlugin);
+  const enabledPlugins = useStore((state) => state.connections.enabledPlugins);
+  const enabledDevicePlugins = useStore(
+    (state) => state.connections.enabledDevicePlugins,
+  );
+  const activeClient = useStore((state) => state.connections.activeClient);
+  const clientPlugins = useStore((state) => state.plugins.clientPlugins);
+  const devicePlugins = useStore((state) => state.plugins.devicePlugins);
+  const selectedClientId = activeClient?.id ?? null;
+  const selectedApp = activeClient?.query.app ?? null;
+  const disabledPlugin = useMemo(
+    () =>
+      pluginId &&
+      !isPluginEnabled(
+        enabledPlugins,
+        enabledDevicePlugins,
+        selectedClientId,
+        pluginId,
+      )
+        ? clientPlugins.get(pluginId) ?? devicePlugins.get(pluginId)
+        : undefined,
+    [
+      pluginId,
+      enabledPlugins,
+      enabledDevicePlugins,
+      selectedClientId,
+      clientPlugins,
+      devicePlugins,
+    ],
+  );
+  return disabledPlugin ? (
+    <PluginEnabler plugin={disabledPlugin} selectedApp={selectedApp} />
+  ) : null;
+}
+
+function PluginEnabler({
+  plugin,
+  selectedApp,
+}: {
+  plugin: PluginDefinition;
+  selectedApp: string | null;
+}) {
+  const dispatch = useDispatch();
+  const enablePlugin = useCallback(() => {
+    dispatch(switchPlugin({plugin, selectedApp: selectedApp ?? undefined}));
+  }, [dispatch, plugin, selectedApp]);
+  return (
+    <Layout.Container grow>
+      <Waiting>
+        <Layout.Container>
+          <Layout.Horizontal>
+            <Label
+              style={{
+                fontSize: '16px',
+                color: theme.textColorSecondary,
+                textTransform: 'uppercase',
+              }}>
+              {plugin.title}
+            </Label>
+          </Layout.Horizontal>
+        </Layout.Container>
+        <Layout.Container>
+          <ToggleButton toggled={false} onClick={enablePlugin} large />
+        </Layout.Container>
+        <Layout.Container>
+          <SmallText>Click to enable this plugin</SmallText>
+        </Layout.Container>
+      </Waiting>
+    </Layout.Container>
+  );
+}