From bce3d48e71056204dd200718c679cd8aee5ab13f Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Thu, 20 Aug 2020 13:31:17 -0700
Subject: [PATCH] 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           | 25 +++++++++++++++++--
 .../src/plugin/PluginRenderer.tsx             |  4 +++
 desktop/static/icons.json                     |  3 +++
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/desktop/app/src/PluginContainer.tsx b/desktop/app/src/PluginContainer.tsx
index a4de12660..47adfd8fb 100644
--- a/desktop/app/src/PluginContainer.tsx
+++ b/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 {
diff --git a/desktop/flipper-plugin/src/plugin/PluginRenderer.tsx b/desktop/flipper-plugin/src/plugin/PluginRenderer.tsx
index 6d4150f56..2f279f1da 100644
--- a/desktop/flipper-plugin/src/plugin/PluginRenderer.tsx
+++ b/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 () => {
diff --git a/desktop/static/icons.json b/desktop/static/icons.json
index 3927c176e..1c30db468 100644
--- a/desktop/static/icons.json
+++ b/desktop/static/icons.json
@@ -440,5 +440,8 @@
   ],
   "wireless": [
     16
+  ],
+  "cup-outline": [
+    24
   ]
 }
\ No newline at end of file