Add more fields on the Tree nodes

Summary:
Add fields for colouring the changeset operation that was performed on a node in the tree.
Changesets are not ordered by type of operation, they need to be displayed in order

Reviewed By: danielbuechele

Differential Revision: D16121158

fbshipit-source-id: 411557170b16ada9d1d72fb617b1aaf583e0f0e7

src/plugins/sections/Models.js

@@ -26,12 +26,16 @@ export type UpdateTreeGenerationHierarchyGenerationPayload = {|
   id: string,
   reason: string,
   tree?: Array<{
-    didTriggerStateUpdate: boolean,
+    didTriggerStateUpdate?: boolean,
     identifier: string,
-    isDirty: boolean,
-    isReused: boolean,
+    isDirty?: boolean,
+    isReused?: boolean,
     name: string,
-    parent: string | 0,
+    parent: string | '',
+    inserted?: boolean,
+    removed?: boolean,
+    updated?: boolean,
+    unchanged?: boolean,
   }>,
 |};
 
@@ -40,15 +44,18 @@ export type UpdateTreeGenerationChangesetGenerationPayload = {|
   tree_generation_id: string,
   identifier: string,
   type: string,
-  changeset: {
-    inserted_items: {},
-    inserted_sections: {},
-    moved_items: {},
-    removed_sections: [],
-    updated_items: {
-      [key: string]: {
-        context: string,
-        model: string,
+  changesets: {
+    section_key: {
+      changesets: {
+        id: {
+          count: number,
+          index: number,
+          toIndex?: number,
+          type: string,
+          render_infos?: Array<String>,
+          prev_data?: Array<String>,
+          next_data?: Array<String>,
+        },
       },
     },
   },
@@ -56,14 +63,17 @@ export type UpdateTreeGenerationChangesetGenerationPayload = {|
 
 export type UpdateTreeGenerationChangesetApplicationPayload = {|
   changeset: {
-    inserted_items: {},
-    inserted_sections: {},
-    moved_items: {},
-    removed_sections: [],
-    updated_items: {
-      [key: string]: {
-        context: string,
-        model: string,
+    section_key: {
+      changesets: {
+        id: {
+          count: number,
+          index: number,
+          toIndex?: number,
+          type: string,
+          render_infos?: Array<String>,
+          prev_data?: Array<String>,
+          next_data?: Array<String>,
+        },
       },
     },
   },

src/plugins/sections/Tree.js

@@ -54,10 +54,14 @@ const Container = styled('div')({
 type TreeData = Array<{
   identifier: string,
   name: string,
-  parent: string | 0,
-  didTriggerStateUpdate: boolean,
-  isReused: boolean,
-  isDirty: boolean,
+  parent: string | '',
+  didTriggerStateUpdate?: boolean,
+  isReused?: boolean,
+  isDirty?: boolean,
+  inserted?: boolean,
+  removed?: boolean,
+  updated?: boolean,
+  unchanged?: boolean,
 }>;
 
 type Props = {
@@ -94,6 +98,16 @@ export default class extends PureComponent<Props, State> {
         fill = colors.grape;
       }
 
+      if (n.removed) {
+        fill = colors.light20;
+      } else if (n.inserted) {
+        fill = colors.pinkDark1;
+      } else if (n.updated) {
+        fill = colors.orangeTint15;
+      } else if (n.unchanged) {
+        fill = colors.teal;
+      }
+
       return {
         name: n.name,
         children: [],
@@ -226,9 +240,12 @@ export default class extends PureComponent<Props, State> {
             step="0.01"
           />
           <Spacer />
-          <Legend color={colors.lemon}>triggered state update</Legend>
-          <Legend color={colors.teal}>is reused</Legend>
-          <Legend color={colors.grape}>is dirty</Legend>
+          <Legend color={colors.light20}>Item removed</Legend>
+          <Legend color={colors.pinkDark1}>Item inserted</Legend>
+          <Legend color={colors.orangeTint15}>Item updated</Legend>
+          <Legend color={colors.teal}>Item/Section Reused</Legend>
+          <Legend color={colors.lemon}>Section triggered state update</Legend>
+          <Legend color={colors.grape}>Section is dirty</Legend>
         </Toolbar>
       </Fragment>
     );