adding tree structure to layout inspector for NT subsection

Summary: Added JSON parsing to make tree structure for NT subsection in layout inspector

Reviewed By: danielbuechele

Differential Revision: D12938117

fbshipit-source-id: 43967d2e970ff2ce7e9b2e05a99d58a95a71b650

src/ui/components/elements-inspector/sidebar.js

@@ -131,15 +131,39 @@ export class InspectorSidebar extends Component<Props, State> {
       [];
 
     for (const key in element.data) {
-      sections.push(
-        <InspectorSidebarSection
-          tooltips={this.props.tooltips}
-          key={key}
-          id={key}
-          data={element.data[key]}
-          onValueChanged={this.props.onValueChanged}
-        />,
-      );
+      if (key === 'Extra Sections') {
+        for (const extraSection in element.data[key]) {
+          let data = element.data[key][extraSection];
+
+          // data might be sent as stringified JSON, we want to parse it for a nicer persentation.
+          if (typeof data === 'string') {
+            try {
+              data = JSON.parse(data);
+            } catch (e) {
+              // data was not a valid JSON, using string instead
+            }
+          }
+          sections.push(
+            <InspectorSidebarSection
+              tooltips={this.props.tooltips}
+              key={extraSection}
+              id={extraSection}
+              data={data}
+              onValueChanged={this.props.onValueChanged}
+            />,
+          );
+        }
+      } else {
+        sections.push(
+          <InspectorSidebarSection
+            tooltips={this.props.tooltips}
+            key={key}
+            id={key}
+            data={element.data[key]}
+            onValueChanged={this.props.onValueChanged}
+          />,
+        );
+      }
     }
 
     if (GK.get('sonar_show_console_plugin') && this.state.isConsoleEnabled) {