Plugin folders re-structuring

Summary:
Here I'm changing plugin repository structure to allow re-using of shared packages between both public and fb-internal plugins, and to ensure that public plugins has their own yarn.lock as this will be required to implement reproducible jobs checking plugin compatibility with released flipper versions.

Please note that there are a lot of moved files in this diff, make sure to click "Expand all" to see all that actually changed (there are not much of them actually).

New proposed structure for plugin packages:
```
- root
- node_modules - modules included into Flipper: flipper, flipper-plugin, react, antd, emotion
-- plugins
 --- node_modules - modules used by both public and fb-internal plugins (shared libs will be linked here, see D27034936)
 --- public
---- node_modules - modules used by public plugins
---- pluginA
----- node_modules - modules used by plugin A exclusively
---- pluginB
----- node_modules - modules used by plugin B exclusively
 --- fb
---- node_modules - modules used by fb-internal plugins
---- pluginC
----- node_modules - modules used by plugin C exclusively
---- pluginD
----- node_modules - modules used by plugin D exclusively
```
I've moved all public plugins under dir "plugins/public" and excluded them from root yarn workspaces. Instead, they will have their own yarn workspaces config and yarn.lock and they will use flipper modules as peer dependencies.

Reviewed By: mweststrate

Differential Revision: D27034108

fbshipit-source-id: c2310e3c5bfe7526033f51b46c0ae40199fd7586

desktop/plugins/public/shared_preferences/package.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://fbflipper.com/schemas/plugin-package/v2.json",
+  "name": "flipper-plugin-preferences",
+  "id": "Preferences",
+  "version": "0.0.0",
+  "main": "dist/bundle.js",
+  "flipperBundlerEntry": "src/index.tsx",
+  "license": "MIT",
+  "keywords": [
+    "flipper-plugin"
+  ],
+  "dependencies": {
+    "lodash": "^4.17.21"
+  },
+  "peerDependencies": {
+    "flipper-plugin": "*"
+  },
+  "title": "Shared Preferences Viewer",
+  "bugs": {
+    "email": "halsibai@fb.com"
+  }
+}

desktop/plugins/public/shared_preferences/src/__test__/shared_preferences.spec.tsx

@@ -0,0 +1,156 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {TestUtils} from 'flipper-plugin';
+import * as plugin from '..';
+
+async function sleep(ms: number) {
+  return new Promise<void>((resolve) => setTimeout(() => resolve(), ms));
+}
+
+// this testing is inspired by Flipper sample app
+test('general plugin logic testing', async () => {
+  const {instance, onSend, connect, sendEvent} = TestUtils.startPlugin(plugin, {
+    startUnactivated: true,
+  });
+  onSend.mockImplementation(async (method, params) => {
+    switch (method) {
+      case 'getAllSharedPreferences':
+        return {
+          sample: {Hello: 'world'},
+          other_sample: {SomeKey: 1337},
+        };
+      case 'setSharedPreference': {
+        const p = params as plugin.SetSharedPreferenceParams;
+        return {[p.preferenceName]: p.preferenceValue};
+      }
+      case 'deleteSharedPreference': {
+        return {};
+      }
+    }
+  });
+
+  // Retrieve some data when connect
+  connect();
+  await sleep(1000);
+  expect(onSend).toBeCalledWith('getAllSharedPreferences', {});
+  expect(instance.sharedPreferences.get()).toMatchInlineSnapshot(`
+    Object {
+      "other_sample": Object {
+        "changesList": Array [],
+        "preferences": Object {
+          "SomeKey": 1337,
+        },
+      },
+      "sample": Object {
+        "changesList": Array [],
+        "preferences": Object {
+          "Hello": "world",
+        },
+      },
+    }
+  `);
+  expect(instance.selectedPreferences.get()).toEqual('sample');
+
+  instance.setSelectedPreferences('other_sample');
+  expect(instance.selectedPreferences.get()).toEqual('other_sample');
+
+  // test changing preference
+  const changedPref = {
+    sharedPreferencesName: 'other_sample',
+    preferenceName: 'SomeKey',
+    preferenceValue: 5555,
+  };
+  await instance.setSharedPreference(changedPref);
+  // this is sent from client after successful update
+  sendEvent('sharedPreferencesChange', {
+    deleted: false,
+    name: 'SomeKey',
+    preferences: 'sample',
+    time: 1,
+    value: 5555,
+  });
+  expect(onSend).toBeCalledWith('setSharedPreference', changedPref);
+  expect(instance.sharedPreferences.get().sample.preferences.SomeKey).toEqual(
+    5555,
+  );
+  expect(instance.sharedPreferences.get()).toMatchInlineSnapshot(`
+    Object {
+      "other_sample": Object {
+        "changesList": Array [],
+        "preferences": Object {
+          "SomeKey": 5555,
+        },
+      },
+      "sample": Object {
+        "changesList": Array [
+          Object {
+            "deleted": false,
+            "name": "SomeKey",
+            "preferences": "sample",
+            "time": 1,
+            "value": 5555,
+          },
+        ],
+        "preferences": Object {
+          "Hello": "world",
+          "SomeKey": 5555,
+        },
+      },
+    }
+  `);
+
+  // test deleting preference
+  const deletedPref = {
+    sharedPreferencesName: 'other_sample',
+    preferenceName: 'SomeKey',
+  };
+  await instance.deleteSharedPreference(deletedPref);
+  // this is sent from client after successful update
+  sendEvent('sharedPreferencesChange', {
+    deleted: true,
+    name: 'SomeKey',
+    preferences: 'sample',
+    time: 2,
+  });
+  expect(onSend).toBeCalledWith('deleteSharedPreference', deletedPref);
+  expect(
+    instance.sharedPreferences.get().sample.preferences.SomeKey,
+  ).toBeUndefined();
+  expect(instance.sharedPreferences.get()).toMatchInlineSnapshot(`
+    Object {
+      "other_sample": Object {
+        "changesList": Array [],
+        "preferences": Object {},
+      },
+      "sample": Object {
+        "changesList": Array [
+          Object {
+            "deleted": true,
+            "name": "SomeKey",
+            "preferences": "sample",
+            "time": 2,
+          },
+          Object {
+            "deleted": false,
+            "name": "SomeKey",
+            "preferences": "sample",
+            "time": 1,
+            "value": 5555,
+          },
+        ],
+        "preferences": Object {
+          "Hello": "world",
+        },
+      },
+    }
+  `);
+});
+
+// TODO: Add unit test for UI

desktop/plugins/public/shared_preferences/src/index.tsx

@@ -0,0 +1,235 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {
+  ManagedTable,
+  Text,
+  Heading,
+  FlexColumn,
+  colors,
+  FlexRow,
+  ManagedDataInspector,
+  styled,
+  Select,
+} from 'flipper';
+import {PluginClient, createState, usePlugin, useValue} from 'flipper-plugin';
+import {clone} from 'lodash';
+
+import React from 'react';
+
+type SharedPreferencesChangeEvent = {
+  preferences: string;
+  name: string;
+  time: number;
+  deleted: boolean;
+  value?: any;
+};
+type SharedPreferences = Record<string, any>;
+type SharedPreferencesEntry = {
+  preferences: SharedPreferences;
+  changesList: Array<SharedPreferencesChangeEvent>;
+};
+
+export type SetSharedPreferenceParams = {
+  sharedPreferencesName: string;
+  preferenceName: string;
+  preferenceValue: any;
+};
+type DeleteSharedPreferenceParams = {
+  sharedPreferencesName: string;
+  preferenceName: string;
+};
+
+type Events = {sharedPreferencesChange: SharedPreferencesChangeEvent};
+type Methods = {
+  getAllSharedPreferences: (params: {}) => Promise<
+    Record<string, SharedPreferences>
+  >;
+  setSharedPreference: (
+    params: SetSharedPreferenceParams,
+  ) => Promise<SharedPreferences>;
+  deleteSharedPreference: (
+    params: DeleteSharedPreferenceParams,
+  ) => Promise<SharedPreferences>;
+};
+
+export function plugin(client: PluginClient<Events, Methods>) {
+  const selectedPreferences = createState<string | null>(null, {
+    persist: 'selectedPreferences',
+  });
+  const setSelectedPreferences = (value: string) =>
+    selectedPreferences.set(value);
+  const sharedPreferences = createState<Record<string, SharedPreferencesEntry>>(
+    {},
+    {persist: 'sharedPreferences'},
+  );
+
+  function updateSharedPreferences(update: {name: string; preferences: any}) {
+    if (selectedPreferences.get() == null) {
+      selectedPreferences.set(update.name);
+    }
+    sharedPreferences.update((draft) => {
+      const entry = draft[update.name] || {changesList: []};
+      entry.preferences = update.preferences;
+      draft[update.name] = entry;
+    });
+  }
+
+  async function setSharedPreference(params: SetSharedPreferenceParams) {
+    const results = await client.send('setSharedPreference', params);
+    updateSharedPreferences({
+      name: params.sharedPreferencesName,
+      preferences: results,
+    });
+  }
+  async function deleteSharedPreference(params: DeleteSharedPreferenceParams) {
+    const results = await client.send('deleteSharedPreference', params);
+    updateSharedPreferences({
+      name: params.sharedPreferencesName,
+      preferences: results,
+    });
+  }
+
+  client.onMessage('sharedPreferencesChange', (change) =>
+    sharedPreferences.update((draft) => {
+      const entry = draft[change.preferences];
+      if (entry == null) {
+        return;
+      }
+      if (change.deleted) {
+        delete entry.preferences[change.name];
+      } else {
+        entry.preferences[change.name] = change.value;
+      }
+      entry.changesList.unshift(change);
+      draft[change.preferences] = entry;
+    }),
+  );
+  client.onConnect(async () => {
+    const results = await client.send('getAllSharedPreferences', {});
+    Object.entries(results).forEach(([name, prefs]) =>
+      updateSharedPreferences({name: name, preferences: prefs}),
+    );
+  });
+
+  return {
+    selectedPreferences,
+    sharedPreferences,
+    setSelectedPreferences,
+    setSharedPreference,
+    deleteSharedPreference,
+  };
+}
+
+const CHANGELOG_COLUMNS = {
+  event: {value: 'Event'},
+  name: {value: 'Name'},
+  value: {value: 'Value'},
+};
+const CHANGELOG_COLUMN_SIZES = {
+  event: '30%',
+  name: '30%',
+  value: '30%',
+};
+
+const UPDATED_LABEL = <Text color={colors.lime}>Updated</Text>;
+const DELETED_LABEL = <Text color={colors.cherry}>Deleted</Text>;
+
+const InspectorColumn = styled(FlexColumn)({flexGrow: 0.2});
+const ChangelogColumn = styled(FlexColumn)({
+  flexGrow: 0.8,
+  paddingLeft: '16px',
+});
+const RootColumn = styled(FlexColumn)({
+  paddingLeft: '16px',
+  paddingRight: '16px',
+  paddingTop: '16px',
+});
+
+export function Component() {
+  const instance = usePlugin(plugin);
+  const selectedPreferences = useValue(instance.selectedPreferences);
+  const sharedPreferences = useValue(instance.sharedPreferences);
+
+  if (selectedPreferences == null) {
+    return null;
+  }
+  const entry = sharedPreferences[selectedPreferences];
+  if (entry == null) {
+    return null;
+  }
+
+  return (
+    <RootColumn grow={true}>
+      <Heading>
+        <span style={{marginRight: '16px'}}>Preference File</span>
+        <Select
+          options={Object.keys(sharedPreferences)
+            .sort((a, b) => (a.toLowerCase() > b.toLowerCase() ? 1 : -1))
+            .reduce((obj, item) => {
+              obj[item] = item;
+              return obj;
+            }, {} as Record<string, string>)}
+          selected={selectedPreferences}
+          onChange={instance.setSelectedPreferences}
+        />
+      </Heading>
+      <FlexRow grow={true} scrollable={true}>
+        <InspectorColumn>
+          <Heading>Inspector</Heading>
+          <ManagedDataInspector
+            data={entry.preferences}
+            setValue={async (path: Array<string>, value: any) => {
+              if (entry == null) {
+                return;
+              }
+              const values = entry.preferences;
+              let newValue = value;
+              if (path.length === 2 && values) {
+                newValue = clone(values[path[0]]);
+                newValue[path[1]] = value;
+              }
+              await instance.setSharedPreference({
+                sharedPreferencesName: selectedPreferences,
+                preferenceName: path[0],
+                preferenceValue: newValue,
+              });
+            }}
+            onDelete={async (path: Array<string>) =>
+              await instance.deleteSharedPreference({
+                sharedPreferencesName: selectedPreferences,
+                preferenceName: path[0],
+              })
+            }
+          />
+        </InspectorColumn>
+        <ChangelogColumn>
+          <Heading>Changelog</Heading>
+          <ManagedTable
+            columnSizes={CHANGELOG_COLUMN_SIZES}
+            columns={CHANGELOG_COLUMNS}
+            rowLineHeight={26}
+            rows={entry.changesList.map((element, index) => {
+              return {
+                columns: {
+                  event: {
+                    value: element.deleted ? DELETED_LABEL : UPDATED_LABEL,
+                  },
+                  name: {value: element.name},
+                  value: {value: String(element.value)},
+                },
+                key: String(index),
+              };
+            })}
+          />
+        </ChangelogColumn>
+      </FlexRow>
+    </RootColumn>
+  );
+}