Expand deepLinkPayload format for Network tab

Summary: In order to select IDs in a different manner, I am introducing functionality to the Network plugin to allow it to accept more than just IDs that it has assigned, and add the ability to select this plugin with a default search term. I hope to use this to allow for selecting rows by request name.

Reviewed By: mweststrate

Differential Revision: D19702494

fbshipit-source-id: 58ea397fa30eb7d80e9640a4c92905de22bb27d4

src/plugins/network/index.tsx

@@ -39,6 +39,7 @@ type PersistedState = {
 
 type State = {
   selectedIds: Array<RequestId>;
+  searchTerm: string;
 };
 
 const COLUMN_SIZE = {
@@ -166,10 +167,27 @@ export default class extends FlipperPlugin<State, any, PersistedState> {
     }
   };
 
-  state = {
-    selectedIds: this.props.deepLinkPayload ? [this.props.deepLinkPayload] : [],
+  parseDeepLinkPayload = (deepLinkPayload: string | null) => {
+    const searchTermDelim = 'searchTerm=';
+    if (deepLinkPayload === null) {
+      return {
+        selectedIds: [],
+        searchTerm: '',
+      };
+    } else if (deepLinkPayload.startsWith(searchTermDelim)) {
+      return {
+        selectedIds: [],
+        searchTerm: deepLinkPayload.slice(searchTermDelim.length),
+      };
+    }
+    return {
+      selectedIds: [deepLinkPayload],
+      searchTerm: '',
+    };
   };
 
+  state = this.parseDeepLinkPayload(this.props.deepLinkPayload);
+
   onRowHighlighted = (selectedIds: Array<RequestId>) =>
     this.setState({selectedIds});
 
@@ -229,6 +247,7 @@ export default class extends FlipperPlugin<State, any, PersistedState> {
           highlightedRows={
             this.state.selectedIds ? new Set(this.state.selectedIds) : null
           }
+          searchTerm={this.state.searchTerm}
         />
         <DetailSidebar width={500}>{this.renderSidebar()}</DetailSidebar>
       </FlexColumn>
@@ -243,6 +262,7 @@ type NetworkTableProps = {
   copyRequestCurlCommand: () => void;
   onRowHighlighted: (keys: TableHighlightedRows) => void;
   highlightedRows: Set<string> | null | undefined;
+  searchTerm: string;
 };
 
 type NetworkTableState = {
@@ -481,6 +501,7 @@ class NetworkTable extends PureComponent<NetworkTableProps, NetworkTableState> {
           allowBodySearch={true}
           zebra={false}
           actions={<Button onClick={this.props.clear}>Clear Table</Button>}
+          defaultSearchTerm={this.props.searchTerm}
         />
       </NetworkTable.ContextMenu>
     );