From 6daff06e19afecff1834ca0ca7991b4fffdd6f43 Mon Sep 17 00:00:00 2001
From: Chaiwat Ekkaewnumchai <cekkaewnumchai@fb.com>
Date: Thu, 7 May 2020 03:37:49 -0700
Subject: [PATCH] (server) Click to Expand in Multiple Selector

Summary:
per title

Changelog: Add multiple selector to layout inspector to allow user to select components at a position

Reviewed By: mweststrate

Differential Revision: D21214898

fbshipit-source-id: 7b52d9d3c93e7ec0d28124a3a675ccfdd014c54d
---
 desktop/plugins/layout/Inspector.tsx | 35 +++++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/desktop/plugins/layout/Inspector.tsx b/desktop/plugins/layout/Inspector.tsx
index f2a52a1f3..d528cd551 100644
--- a/desktop/plugins/layout/Inspector.tsx
+++ b/desktop/plugins/layout/Inspector.tsx
@@ -331,7 +331,7 @@ export default class Inspector extends Component<Props, State> {
 
   async getAndExpandPath(path: Array<ElementID>) {
     await Promise.all(path.map((id) => this.getChildren(id, {})));
-    this.onElementSelected(path[path.length - 1]);
+    this.onElementSelected()(path[path.length - 1]);
   }
 
   getElementLeaves(tree: ElementSelectorNode): Array<ElementID> {
@@ -376,9 +376,32 @@ export default class Inspector extends Component<Props, State> {
     this.getAndExpandPath(this.getPathForNode(tree, null) ?? []);
   }
 
-  onElementSelected = debounce((selectedKey: ElementID) => {
-    this.onElementHovered(selectedKey);
-    this.props.onSelect(selectedKey);
+  onElementSelected = (option?: {
+    cancelSelector?: boolean;
+    expandPathToElement?: boolean;
+  }) =>
+    debounce(async (selectedKey: ElementID) => {
+      if (option?.cancelSelector) {
+        this.setState({elementSelector: null, axElementSelector: null});
+      }
+      if (option?.expandPathToElement) {
+        const data = this.props.ax
+          ? this.state.axElementSelector
+          : this.state.elementSelector;
+        await this.getAndExpandPath(
+          this.getPathForNode(data?.tree ?? {}, selectedKey) ?? [],
+        );
+      }
+      this.onElementHovered(selectedKey);
+      this.props.onSelect(selectedKey);
+    });
+
+  onElementSelectedAtMainSection = this.onElementSelected({
+    cancelSelector: true,
+  });
+
+  onElementSelectedAndExpanded = this.onElementSelected({
+    expandPathToElement: true,
   });
 
   onElementHovered = debounce((key: ElementID | null | undefined) => {
@@ -417,7 +440,7 @@ export default class Inspector extends Component<Props, State> {
     return this.root() ? (
       <ElementsInspectorContainer>
         <ElementsInspector
-          onElementSelected={this.onElementSelected}
+          onElementSelected={this.onElementSelectedAtMainSection}
           onElementHovered={this.onElementHovered}
           onElementExpanded={this.onElementExpanded}
           onValueChanged={this.props.onDataValueChanged}
@@ -432,7 +455,7 @@ export default class Inspector extends Component<Props, State> {
           <MultipleSelectorSection
             initialSelectedElement={this.selected()}
             elements={selectorData.elements}
-            onElementSelected={this.onElementSelected}
+            onElementSelected={this.onElementSelectedAndExpanded}
             onElementHovered={this.onElementHovered}
           />
         ) : null}