serialize Sandy plugins with serialization utils to support Date/Set/Map

Summary:
Unlike non-sandy plugins, non-sandy plugins weren't serialized using our serialization utility yet. This diff addresses that, meaning that users don't have to bother about how to serialize maps, sets and dates.

Unlike the old fashioned plugins, the `makeObjectSerialize` utility is used, rather than `serialize`. This normalizes the objects, but doesn't serialize them, which is done at the end of the export data process anyway for the whole tree. This avoids creating a double JSON serialization which is fully of ugly escape characters.

This makes the onImport / onExport definition of the logs plugin nicer.

Also improved the docs.

Reviewed By: nikoant

Differential Revision: D26146421

fbshipit-source-id: 6abfb6ee2e3312e2a13a11832ff103dc62fd844c

desktop/app/src/utils/__tests__/exportData.node.tsx

@@ -1501,3 +1501,133 @@ test('Sandy device plugin with custom import', async () => {
       ?.instanceApi.counter.get(),
   ).toBe(2);
 });
+
+test('Sandy plugins with complex data are imported  / exported correctly', async () => {
+  const deviceplugin = new _SandyPluginDefinition(
+    TestUtils.createMockPluginDetails(),
+    {
+      plugin() {
+        const m = createState(new Map([['a', 1]]), {persist: 'map'});
+        const s = createState(new Set([{x: 2}]), {persist: 'set'});
+        const d = createState(new Date(1611913002865), {persist: 'date'});
+        return {
+          m,
+          s,
+          d,
+        };
+      },
+      Component() {
+        return null;
+      },
+    },
+  );
+
+  const {store} = await renderMockFlipperWithPlugin(deviceplugin);
+
+  const data = await exportStore(store);
+  expect(Object.values(data.exportStoreData.pluginStates2)).toMatchObject([
+    {
+      TestPlugin: {
+        date: {
+          __flipper_object_type__: 'Date',
+          // no data asserted, since that is TZ sensitve
+        },
+        map: {
+          __flipper_object_type__: 'Map',
+          data: [['a', 1]],
+        },
+        set: {
+          __flipper_object_type__: 'Set',
+          data: [
+            {
+              x: 2,
+            },
+          ],
+        },
+      },
+    },
+  ]);
+
+  await importDataToStore('unittest.json', data.serializedString, store);
+  const api = store
+    .getState()
+    .connections.clients[1].sandyPluginStates.get(deviceplugin.id)?.instanceApi;
+  expect(api.m.get()).toMatchInlineSnapshot(`
+    Map {
+      "a" => 1,
+    }
+  `);
+  expect(api.s.get()).toMatchInlineSnapshot(`
+    Set {
+      Object {
+        "x": 2,
+      },
+    }
+  `);
+  expect(api.d.get()).toEqual(new Date(1611913002865));
+});
+
+test('Sandy device plugins with complex data are imported  / exported correctly', async () => {
+  const deviceplugin = new _SandyPluginDefinition(
+    TestUtils.createMockPluginDetails({id: 'deviceplugin'}),
+    {
+      supportsDevice() {
+        return true;
+      },
+      devicePlugin() {
+        const m = createState(new Map([['a', 1]]), {persist: 'map'});
+        const s = createState(new Set([{x: 2}]), {persist: 'set'});
+        const d = createState(new Date(1611913002865), {persist: 'date'});
+        return {
+          m,
+          s,
+          d,
+        };
+      },
+      Component() {
+        return null;
+      },
+    },
+  );
+
+  const {store} = await renderMockFlipperWithPlugin(deviceplugin);
+
+  const data = await exportStore(store);
+  expect(data.exportStoreData.device?.pluginStates).toMatchObject({
+    deviceplugin: {
+      date: {
+        __flipper_object_type__: 'Date',
+        // no data asserted, since that is TZ sensitve
+      },
+      map: {
+        __flipper_object_type__: 'Map',
+        data: [['a', 1]],
+      },
+      set: {
+        __flipper_object_type__: 'Set',
+        data: [
+          {
+            x: 2,
+          },
+        ],
+      },
+    },
+  });
+  await importDataToStore('unittest.json', data.serializedString, store);
+  const api = store
+    .getState()
+    .connections.devices[1].sandyPluginStates.get(deviceplugin.id)?.instanceApi;
+  expect(api.m.get()).toMatchInlineSnapshot(`
+    Map {
+      "a" => 1,
+    }
+  `);
+  expect(api.s.get()).toMatchInlineSnapshot(`
+    Set {
+      Object {
+        "x": 2,
+      },
+    }
+  `);
+  expect(api.d.get()).toEqual(new Date(1611913002865));
+});

desktop/app/src/utils/exportData.tsx

@@ -49,6 +49,7 @@ import {getPluginTitle} from './pluginUtils';
 import {capture} from './screenshot';
 import {uploadFlipperMedia} from '../fb-stubs/user';
 import {Idler} from 'flipper-plugin';
+import {deserializeObject, makeObjectSerializable} from './serialization';
 
 export const IMPORT_FLIPPER_TRACE_EVENT = 'import-flipper-trace';
 export const EXPORT_FLIPPER_TRACE_EVENT = 'export-flipper-trace';
@@ -266,9 +267,14 @@ async function exportSandyPluginStates(
       if (!res[client.id]) {
         res[client.id] = {};
       }
-      res[client.id][pluginId] = await client.sandyPluginStates
-        .get(pluginId)!
-        .exportState(idler, statusUpdate);
+      res[client.id][pluginId] = await makeObjectSerializable(
+        await client.sandyPluginStates
+          .get(pluginId)!
+          .exportState(idler, statusUpdate),
+        idler,
+        statusUpdate,
+        'Serializing plugin: ' + pluginId,
+      );
     }
   }
   return res;
@@ -453,7 +459,12 @@ export async function processStore(
       idler,
     );
 
-    const devicePluginStates = await device.exportState(idler, statusUpdate);
+    const devicePluginStates = await makeObjectSerializable(
+      await device.exportState(idler, statusUpdate),
+      idler,
+      statusUpdate,
+      'Serializing device plugins',
+    );
 
     statusUpdate('Uploading screenshot...');
     const deviceScreenshotLink =
@@ -781,20 +792,9 @@ export function importDataToStore(source: string, data: string, store: Store) {
     source,
     supportRequestDetails,
   });
-  const devices = store.getState().connections.devices;
-  const matchedDevices = devices.filter(
-    (availableDevice) => availableDevice.serial === serial,
-  );
-  if (matchedDevices.length > 0) {
-    store.dispatch({
-      type: 'SELECT_DEVICE',
-      payload: matchedDevices[0],
-    });
-    return;
-  }
   archivedDevice.loadDevicePlugins(
     store.getState().plugins.devicePlugins,
-    device.pluginStates,
+    deserializeObject(device.pluginStates),
   );
   store.dispatch({
     type: 'REGISTER_DEVICE',
@@ -823,7 +823,9 @@ export function importDataToStore(source: string, data: string, store: Store) {
   });
 
   clients.forEach((client: {id: string; query: ClientQuery}) => {
-    const sandyPluginStates = json.pluginStates2[client.id] || {};
+    const sandyPluginStates = deserializeObject(
+      json.pluginStates2[client.id] || {},
+    );
     const clientPlugins: Array<string> = [
       ...keys
         .filter((key) => {