Search with both name and id of the component in layout inspector and handle deeplinkpayload

Summary:
deepLinkPayload is passed as initialQuery to Search component and in componentDidMount we perform search if initially query is defined.

This does not handle the case if node is not present in the layout inspector tree.

Reviewed By: danielbuechele

Differential Revision: D15874343

fbshipit-source-id: c604baea16838f07e8f8bfc0f1e67c5e830dfe97

android/src/main/java/com/facebook/flipper/plugins/litho/DebugComponentDescriptor.java

@@ -396,7 +396,7 @@ public class DebugComponentDescriptor extends NodeDescriptor<DebugComponent> {
   @Override
   public boolean matches(String query, DebugComponent node) throws Exception {
     NodeDescriptor descriptor = descriptorForClass(Object.class);
-    return descriptor.matches(query, node);
+    return descriptor.matches(query, node) || getId(node).equals(query);
   }
 
   private static void applyLayoutOverride(

src/plugins/layout/Search.js

@@ -33,6 +33,7 @@ type Props = {
   onSearchResults: (searchResults: ElementSearchResultSet) => void,
   setPersistedState: (state: $Shape<PersistedState>) => void,
   persistedState: PersistedState,
+  initialQuery: ?string,
 };
 
 type State = {
@@ -67,6 +68,16 @@ export default class Search extends Component<Props, State> {
     }
   };
 
+  componentDidMount() {
+    if (this.props.initialQuery) {
+      const queryString = this.props.initialQuery
+        ? this.props.initialQuery
+        : '';
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => this.performSearch(queryString), 200);
+    }
+  }
+
   performSearch(query: string) {
     this.setState({
       outstandingSearchQuery: query,

src/plugins/layout/index.js

@@ -94,7 +94,12 @@ export default class Layout extends FlipperPlugin<State, void, PersistedState> {
       }
     });
 
-    this.setState({init: true});
+    this.setState({
+      init: true,
+      selectedElement: this.props.deepLinkPayload
+        ? this.props.deepLinkPayload
+        : null,
+    });
   }
 
   onToggleTargetMode = () => {
@@ -201,6 +206,7 @@ export default class Layout extends FlipperPlugin<State, void, PersistedState> {
                   this.setState({searchResults})
                 }
                 inAXMode={this.state.inAXMode}
+                initialQuery={this.props.deepLinkPayload}
               />
             </Toolbar>