Don't send messages to disconnected clients. Make exportPersistedState compatible with disconnected devices.

Summary:
This diff addresses two problems:

1. Since clients plugins can be active beyond having a connection, we have to make it possible for plugin authors to check if they are connected before they make a call.
2. if there is a custom `exportPersistedState`, plugins should be able to skip making calls if the device has disconnected.

Introducing this change makes it possible to interact with a reasonable level with disconnected clients, and makes it possible to create Flipper traces for disconnected clients.

Note that both items were already problems before supporting offline clients; as there can be a noticeable delay between disconnecting and Flipper detecting that (i've seen up to 30 secs). What happend previously in those cases is that the export would simply hang, as would other user interactions, as loosing the connection in the middle of a process would cause the promise chains to be neither rejected or resolved, which is pretty iffy.

Before this diff, trying to export a disconnected device would hang forever like:

{F369600601}

Reviewed By: nikoant

Differential Revision: D26250895

fbshipit-source-id: 177624a116883c3cba14390cd0fe164e243bb97c

desktop/plugins/layout/index.tsx

@@ -80,14 +80,16 @@ export default class LayoutPlugin extends FlipperPlugin<
   PersistedState
 > {
   static exportPersistedState = async (
-    callClient: (method: ClientMethodCalls, params?: any) => Promise<any>,
+    callClient:
+      | undefined
+      | ((method: ClientMethodCalls, params?: any) => Promise<any>),
     persistedState: PersistedState | undefined,
     store: ReduxState | undefined,
     _idler?: Idler | undefined,
     statusUpdate?: (msg: string) => void,
     supportsMethod?: (method: ClientMethodCalls) => Promise<boolean>,
   ): Promise<PersistedState | undefined> => {
-    if (!store) {
+    if (!store || !callClient) {
       return persistedState;
     }
     statusUpdate && statusUpdate('Fetching Root Node...');
@@ -211,26 +213,29 @@ export default class LayoutPlugin extends FlipperPlugin<
       // If the selected plugin from the previous session was layout, then while importing the flipper export, the redux store doesn't get updated in the first render, due to which the plugin crashes, as it has no persisted state
       this.props.setPersistedState(this.constructor.defaultPersistedState);
     }
-    // persist searchActive state when moving between plugins to prevent multiple
-    // TouchOverlayViews since we can't edit the view heirarchy in onDisconnect
-    this.client.call('isSearchActive').then(({isSearchActive}) => {
-      this.setState({inTargetMode: isSearchActive});
-    });
 
-    // disable target mode after
-    this.client.subscribe('select', () => {
-      if (this.state.inTargetMode) {
-        this.onToggleTargetMode();
-      }
-    });
+    if (this.client.isConnected) {
+      // persist searchActive state when moving between plugins to prevent multiple
+      // TouchOverlayViews since we can't edit the view heirarchy in onDisconnect
+      this.client.call('isSearchActive').then(({isSearchActive}) => {
+        this.setState({inTargetMode: isSearchActive});
+      });
 
-    this.client.subscribe('resolvePath', (params: ClassFileParams) => {
-      this.resolvePath(params);
-    });
+      // disable target mode after
+      this.client.subscribe('select', () => {
+        if (this.state.inTargetMode) {
+          this.onToggleTargetMode();
+        }
+      });
 
-    this.client.subscribe('openInIDE', (params: OpenFileParams) => {
-      this.openInIDE(params);
-    });
+      this.client.subscribe('resolvePath', (params: ClassFileParams) => {
+        this.resolvePath(params);
+      });
+
+      this.client.subscribe('openInIDE', (params: OpenFileParams) => {
+        this.openInIDE(params);
+      });
+    }
 
     // since the first launch of Myles might produce a lag (Myles daemon needs to start)
     // try to invoke Myles during the first launch of the Layout Plugin
@@ -270,10 +275,12 @@ export default class LayoutPlugin extends FlipperPlugin<
       params.dirRoot,
     );
     const resolvedPath = IDEFileResolver.getBestPath(paths, params.className);
-    this.client.send('setResolvedPath', {
-      className: params.className,
-      resolvedPath: resolvedPath,
-    });
+    if (this.client.isConnected) {
+      this.client.send('setResolvedPath', {
+        className: params.className,
+        resolvedPath: resolvedPath,
+      });
+    }
   };
 
   openInIDE = async (params: OpenFileParams) => {
@@ -294,9 +301,11 @@ export default class LayoutPlugin extends FlipperPlugin<
   };
 
   onToggleTargetMode = () => {
-    const inTargetMode = !this.state.inTargetMode;
-    this.setState({inTargetMode});
-    this.client.send('setSearchActive', {active: inTargetMode});
+    if (this.client.isConnected) {
+      const inTargetMode = !this.state.inTargetMode;
+      this.setState({inTargetMode});
+      this.client.send('setSearchActive', {active: inTargetMode});
+    }
   };
 
   onToggleAXMode = () => {
@@ -311,13 +320,15 @@ export default class LayoutPlugin extends FlipperPlugin<
       : this.client;
   }
   onToggleAlignmentMode = () => {
-    if (this.state.selectedElement) {
-      this.client.send('setHighlighted', {
-        id: this.state.selectedElement,
-        inAlignmentMode: !this.state.inAlignmentMode,
-      });
+    if (this.client.isConnected) {
+      if (this.state.selectedElement) {
+        this.client.send('setHighlighted', {
+          id: this.state.selectedElement,
+          inAlignmentMode: !this.state.inAlignmentMode,
+        });
+        this.setState({inAlignmentMode: !this.state.inAlignmentMode});
+      }
     }
-    this.setState({inAlignmentMode: !this.state.inAlignmentMode});
   };
 
   onToggleVisualizer = () => {