(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

@@ -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,11 +376,34 @@ export default class Inspector extends Component<Props, State> {
     this.getAndExpandPath(this.getPathForNode(tree, null) ?? []);
   }
 
-  onElementSelected = debounce((selectedKey: ElementID) => {
+  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) => {
     this.props.client.call(this.call().SET_HIGHLIGHTED, {
       id: key,
@@ -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}