From e37bccaf04b1f254d2ee9fe883b18e7ad7cf16e6 Mon Sep 17 00:00:00 2001
From: Chaiwat Ekkaewnumchai <cekkaewnumchai@fb.com>
Date: Fri, 3 Apr 2020 03:01:25 -0700
Subject: [PATCH] Scroll to Inspected Element

Summary:
changelog: Add scroll to inspected element in layout plugin

Before this diff, when one inspected an element, one needed to scroll down to see highlighted line for that element. This diff added automatic scroll to inspected element. It will scroll so that the line is in middle of the app.

Also, fix direct state mutation and this error:
```
Public property 'onKeyDown' of exported class has or is using private name 'Element'.
```

Reviewed By: passy, mweststrate

Differential Revision: D20798587

fbshipit-source-id: 763eb63cd51abd73940e301e36e89232033722c3
---
 .../elements-inspector/elements.tsx           | 44 ++++++++++++++++++-
 .../src/ui/components/table/ManagedTable.tsx  |  6 +--
 desktop/plugins/layout/Search.tsx             |  2 +-
 3 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/desktop/app/src/ui/components/elements-inspector/elements.tsx b/desktop/app/src/ui/components/elements-inspector/elements.tsx
index 11d5b6bbb..0c9a3f1dd 100644
--- a/desktop/app/src/ui/components/elements-inspector/elements.tsx
+++ b/desktop/app/src/ui/components/elements-inspector/elements.tsx
@@ -223,6 +223,7 @@ type ElementsRowProps = {
   style?: Object;
   contextMenuExtensions: Array<ContextMenuExtension>;
   decorateRow?: DecorateRow;
+  forwardedRef: React.Ref<HTMLDivElement> | null;
 };
 
 type ElementsRowState = {
@@ -324,6 +325,7 @@ class ElementsRow extends PureComponent<ElementsRowProps, ElementsRowState> {
       even,
       matchingSearchQuery,
       decorateRow,
+      forwardedRef,
     } = this.props;
     const hasChildren = element.children && element.children.length > 0;
 
@@ -378,6 +380,7 @@ class ElementsRow extends PureComponent<ElementsRowProps, ElementsRowState> {
 
     return (
       <ElementsRowContainer
+        ref={forwardedRef}
         buildItems={this.getContextMenu}
         key={id}
         level={level}
@@ -465,6 +468,7 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
   static defaultProps = {
     alternateRowColor: true,
   };
+  _outerRef = React.createRef<HTMLDivElement>();
   constructor(props: ElementsProps, context: Object) {
     super(props, context);
     this.state = {
@@ -514,6 +518,22 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
     return {flatElements, flatKeys, maxDepth};
   }
 
+  _calculateScrollTop(
+    parentHeight: number,
+    parentOffsetTop: number,
+    childHeight: number,
+    childOffsetTop: number,
+  ): number {
+    const childOffsetMid = childOffsetTop + childHeight / 2;
+    if (
+      parentOffsetTop < childOffsetMid &&
+      childOffsetMid < parentOffsetTop + parentHeight
+    ) {
+      return parentOffsetTop;
+    }
+    return childOffsetMid - parentHeight / 2;
+  }
+
   selectElement = (key: ElementID) => {
     this.props.onElementSelected(key);
   };
@@ -651,6 +671,25 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
         childrenCount={childrenCount}
         contextMenuExtensions={contextMenuExtensions || []}
         decorateRow={decorateRow}
+        forwardedRef={
+          selected == row.key
+            ? (selectedRow) => {
+                if (!selectedRow || !this._outerRef.current) {
+                  return;
+                }
+                const outer = this._outerRef.current;
+                outer.scrollTo(
+                  0,
+                  this._calculateScrollTop(
+                    outer.offsetHeight,
+                    outer.scrollTop,
+                    selectedRow.offsetHeight,
+                    selectedRow.offsetTop,
+                  ),
+                );
+              }
+            : null
+        }
       />
     );
   };
@@ -658,7 +697,10 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
   render() {
     return (
       <ElementsBox>
-        <ElementsContainer onKeyDown={this.onKeyDown} tabIndex={0}>
+        <ElementsContainer
+          onKeyDown={this.onKeyDown}
+          tabIndex={0}
+          ref={this._outerRef}>
           {this.state.flatElements.map(this.buildRow)}
         </ElementsContainer>
       </ElementsBox>
diff --git a/desktop/app/src/ui/components/table/ManagedTable.tsx b/desktop/app/src/ui/components/table/ManagedTable.tsx
index 11971de0e..57d745396 100644
--- a/desktop/app/src/ui/components/table/ManagedTable.tsx
+++ b/desktop/app/src/ui/components/table/ManagedTable.tsx
@@ -431,15 +431,15 @@ export class ManagedTable extends React.Component<
       highlightedRows.add(row.key);
     } else if (e.shiftKey && this.props.multiHighlight) {
       // range select
-      const lastItemKey = Array.from(this.state.highlightedRows).pop()!;
+      const lastItemKey = Array.from(highlightedRows).pop()!;
       highlightedRows = new Set([
         ...highlightedRows,
         ...this.selectInRange(lastItemKey, row.key),
       ]);
     } else {
       // single select
-      this.state.highlightedRows.clear();
-      this.state.highlightedRows.add(row.key);
+      highlightedRows.clear();
+      highlightedRows.add(row.key);
     }
 
     this.onRowHighlighted(highlightedRows);
diff --git a/desktop/plugins/layout/Search.tsx b/desktop/plugins/layout/Search.tsx
index 6a833a3ec..b1ed9d502 100644
--- a/desktop/plugins/layout/Search.tsx
+++ b/desktop/plugins/layout/Search.tsx
@@ -68,7 +68,7 @@ export default class Search extends Component<Props, State> {
     this.timer = setTimeout(() => this.performSearch(value), 200);
   };
 
-  onKeyDown = (e: React.KeyboardEvent) => {
+  onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       this.performSearch(this.state.value);
     }