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() {