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 {