Convert Section Plugin to Use Sandy

Summary:
Convert section plugin to Sandy API.

TODO
- Fix layout issues
  - scrollbar occurs in small component (bottom layout)
  - scrollbar in wrong place (top layout)
  - text shrunk in bottom part of tree component
- (?) move away from d3
- better typing for payload
- move components to functional one
- unit test

Reviewed By: mweststrate

Differential Revision: D22385993

fbshipit-source-id: 862d4b775caf2d9a7bcb37446299251965a5d6db

desktop/plugins/sections/src/DetailsPanel.tsx

@@ -0,0 +1,120 @@
+/**
+ * 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 type {UpdateTreeGenerationChangesetApplicationPayload} from './Models';
+
+import React from 'react';
+import {
+  MarkerTimeline,
+  Component,
+  styled,
+  FlexBox,
+  ManagedDataInspector,
+  Panel,
+  colors,
+} from 'flipper';
+
+const NoContent = styled(FlexBox)({
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexGrow: 1,
+  fontWeight: 500,
+  color: colors.light30,
+});
+
+type Props = {
+  changeSets:
+    | Array<UpdateTreeGenerationChangesetApplicationPayload>
+    | null
+    | undefined;
+  eventUserInfo: any;
+  focusedChangeSet:
+    | UpdateTreeGenerationChangesetApplicationPayload
+    | null
+    | undefined;
+  onFocusChangeSet: (
+    focusedChangeSet:
+      | UpdateTreeGenerationChangesetApplicationPayload
+      | null
+      | undefined,
+  ) => void;
+  selectedNodeInfo: any;
+};
+
+export default class DetailsPanel extends Component<Props> {
+  render() {
+    const {changeSets, eventUserInfo} = this.props;
+    const firstChangeSet =
+      (changeSets || []).reduce(
+        (min, cs) => Math.min(min, cs.timestamp),
+        Infinity,
+      ) || 0;
+    return (
+      <React.Fragment>
+        {eventUserInfo && (
+          <Panel
+            key="eventUserInfo"
+            collapsable={false}
+            floating={false}
+            heading={'Event User Info'}>
+            <ManagedDataInspector data={eventUserInfo} expandRoot={true} />
+          </Panel>
+        )}
+        {changeSets && changeSets.length > 0 ? (
+          <Panel
+            key="Changesets"
+            collapsable={false}
+            floating={false}
+            heading={'Changesets'}>
+            <MarkerTimeline
+              points={changeSets.map((p) => ({
+                label:
+                  p.type === 'CHANGESET_GENERATED' ? 'Generated' : 'Rendered',
+                time: Math.round((p.timestamp || 0) - firstChangeSet),
+                color:
+                  p.type === 'CHANGESET_GENERATED' ? colors.lemon : colors.teal,
+                key: p.identifier,
+              }))}
+              onClick={(ids) =>
+                this.props.onFocusChangeSet(
+                  changeSets.find((c) => c.identifier === ids[0]),
+                )
+              }
+              selected={this.props.focusedChangeSet?.identifier}
+            />
+          </Panel>
+        ) : (
+          <NoContent>No changes sets available</NoContent>
+        )}
+        {this.props.focusedChangeSet && (
+          <Panel
+            key="Changeset Details"
+            floating={false}
+            heading="Changeset Details">
+            <ManagedDataInspector
+              data={this.props.focusedChangeSet.changeset}
+              expandRoot={true}
+            />
+          </Panel>
+        )}
+        {this.props.selectedNodeInfo && (
+          <Panel
+            key="Selected Node Info"
+            floating={false}
+            heading="Selected Node Info">
+            <ManagedDataInspector
+              data={this.props.selectedNodeInfo}
+              expandRoot={true}
+            />
+          </Panel>
+        )}
+      </React.Fragment>
+    );
+  }
+}