Better handle no (valid) plugin selection

Summary: Little ux tweak, there are some rare scenarios where you can end up in an empty plugin screen, made a small message.

Reviewed By: jknoxville

Differential Revision: D22846396

fbshipit-source-id: 0ad19f1c252112d78a5587e6633fee2d9542d5e1

desktop/app/src/PluginContainer.tsx

@@ -325,6 +325,26 @@ class PluginContainer extends PureComponent<Props, State> {
     );
   }
 
+  renderNoPluginActive() {
+    return (
+      <View grow>
+        <Waiting>
+          <VBox>
+            <Glyph
+              name="cup"
+              variant="outline"
+              size={24}
+              color={colors.light30}
+            />
+          </VBox>
+          <VBox>
+            <Label>No plugin selected</Label>
+          </VBox>
+        </Waiting>
+      </View>
+    );
+  }
+
   renderPlugin() {
     const {
       pluginState,
@@ -338,14 +358,15 @@ class PluginContainer extends PureComponent<Props, State> {
     } = this.props;
     if (!activePlugin || !target || !pluginKey) {
       console.warn(`No selected plugin. Rendering empty!`);
-      return null;
+      return this.renderNoPluginActive();
     }
     let pluginElement: null | React.ReactElement<any>;
     if (isSandyPlugin(activePlugin)) {
       // Make sure we throw away the container for different pluginKey!
       const instance = target.sandyPluginStates.get(activePlugin.id);
       if (!instance) {
-        return null;
+        // happens if we selected a plugin that is not enabled on a specific app or not supported on a specific device.
+        return this.renderNoPluginActive();
       }
       pluginElement = <SandyPluginRenderer key={pluginKey} plugin={instance} />;
     } else {

desktop/flipper-plugin/src/plugin/PluginRenderer.tsx

@@ -11,6 +11,7 @@ import React, {memo, useEffect, createElement} from 'react';
 import {SandyPluginContext} from './PluginContext';
 import {SandyPluginInstance} from './Plugin';
 import {SandyDevicePluginInstance} from './DevicePlugin';
+import {BasePluginInstance} from './PluginBase';
 
 type Props = {
   plugin: SandyPluginInstance | SandyDevicePluginInstance;
@@ -20,6 +21,9 @@ type Props = {
  * Component to render a Sandy plugin container
  */
 export const SandyPluginRenderer = memo(({plugin}: Props) => {
+  if (!plugin || !(plugin instanceof BasePluginInstance)) {
+    throw new Error('Expected plugin, got ' + plugin);
+  }
   useEffect(() => {
     plugin.activate();
     return () => {

desktop/static/icons.json

@@ -440,5 +440,8 @@
   ],
   "wireless": [
     16
+  ],
+  "cup-outline": [
+    24
   ]
 }