Fixed issue where plugins weren't reset properly when reconnecting a device

Summary: If a device disconnects and reconnects while keeping the plugin open, a new pluginInstance is available, but the React component would not be remounted since both the old and new pluginInstance have the same identifier (device/client/plugin). This change makes sure that if a different pluginInstance arrives, the rendering will be reinitialised as well.

Reviewed By: lblasa

Differential Revision: D31018845

fbshipit-source-id: ac09e7ac519c7aebfb4f8dc0cc7c6cda6fbbf633

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

@@ -147,6 +147,8 @@ export function registerStorageAtom(
   }
 }
 
+let staticInstanceId = 1;
+
 export abstract class BasePluginInstance {
   /** generally available Flipper APIs */
   readonly flipperLib: FlipperLib;
@@ -179,6 +181,8 @@ export abstract class BasePluginInstance {
   menuEntries: NormalizedMenuEntry[] = [];
   logListeners: Symbol[] = [];
 
+  readonly instanceId = ++staticInstanceId;
+
   constructor(
     flipperLib: FlipperLib,
     definition: SandyPluginDefinition,

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

@@ -35,7 +35,9 @@ export const SandyPluginRenderer = memo(({plugin}: Props) => {
   return (
     <TrackingScope scope={'plugin:' + plugin.definition.id}>
       <SandyPluginContext.Provider value={plugin}>
-        {createElement(plugin.definition.module.Component)}
+        {createElement(plugin.definition.module.Component, {
+          key: plugin.instanceId,
+        })}
       </SandyPluginContext.Provider>
     </TrackingScope>
   );