(flux stores) 5. make "logs" tab look nicer

Summary:
This diff implement few things:
* Logs tab for plugin
* Sending new state for each action is expensive, that is why flipper side receive only diffs and uses `getStateFromLogItem` to calculate new state
* fixed `keys` in `DataInspector.tsx` which caused `DataInspector` become unresponsive

{F340648998}

Differential Revision: D23021619

fbshipit-source-id: 17490c25f7b86faf9e574a612996563aac18525e

desktop/app/src/ui/components/data-inspector/DataInspector.tsx

@@ -487,7 +487,8 @@ const DataInspector: React.FC<DataInspectorProps> = memo(
 
       for (const key of keys) {
         const diffMetadataArr = diffMetadataExtractor(value, key, diffValue);
-        for (const metadata of diffMetadataArr) {
+        for (const [index, metadata] of diffMetadataArr.entries()) {
+          const metaKey = key + index;
           const dataInspectorNode = (
             <DataInspector
               parentAncestry={ancestry}
@@ -501,7 +502,7 @@ const DataInspector: React.FC<DataInspectorProps> = memo(
               onRenderDescription={onRenderDescription}
               parentPath={path}
               depth={depth + 1}
-              key={key}
+              key={metaKey}
               name={key}
               data={metadata.data}
               diff={metadata.diff}
@@ -511,11 +512,13 @@ const DataInspector: React.FC<DataInspectorProps> = memo(
 
           switch (metadata.status) {
             case 'added':
-              propertyNodes.push(<Added key={key}>{dataInspectorNode}</Added>);
+              propertyNodes.push(
+                <Added key={metaKey}>{dataInspectorNode}</Added>,
+              );
               break;
             case 'removed':
               propertyNodes.push(
-                <Removed key={key}>{dataInspectorNode}</Removed>,
+                <Removed key={metaKey}>{dataInspectorNode}</Removed>,
               );
               break;
             default: