Fix selection on mock list (#2574)

Summary:
Fix selection problem on ManageMockResponsePanel.  Currently, when the user adds new routes, the detail section continues to show the detail for the first route.  Select different routes in the list does not change the detail panel.  The screen is currently not doing anything on selection.

Also fixed a problem with updating on mock header names and values.  Updates were not persisting if user did not exist input fields before leaving header input panel.

## Changelog

Network Plugin - Fix selection problem on ManageMockResponsePanel

Pull Request resolved: https://github.com/facebook/flipper/pull/2574

Test Plan:
Add multiple mock routes
Select various routes
Verify that detail panel shows the selected route

![2021-07-06_21-43-56](https://user-images.githubusercontent.com/337874/124692775-cc169680-dea3-11eb-8a70-14457c5f6304.jpg)

Reviewed By: passy

Differential Revision: D29582286

Pulled By: mweststrate

fbshipit-source-id: 6690e2262a033cdfa5afa6e6fdfacc9694244590

desktop/plugins/public/network/request-mocking/ManageMockResponsePanel.tsx

@@ -132,6 +132,15 @@ export function ManageMockResponsePanel(props: Props) {
     [handleDelete, handleToggle],
   );
 
+  const handleSelect = useCallback(
+    (id: string) => {
+      if (id) {
+        selectedIdAtom.set(id);
+      }
+    },
+    [selectedIdAtom],
+  );
+
   return (
     <Layout.Left resizable style={{minHeight: 400}}>
       <Layout.Top>
@@ -161,6 +170,7 @@ export function ManageMockResponsePanel(props: Props) {
           items={items}
           selection={selectedId}
           onRenderItem={handleRender}
+          onSelect={handleSelect}
           scrollable
         />
       </Layout.Top>

desktop/plugins/public/network/request-mocking/MockResponseDetails.tsx

@@ -35,8 +35,10 @@ function HeaderInput(props: {
       type="text"
       placeholder="Name"
       value={value}
-      onChange={(event) => setValue(event.target.value)}
-      onBlur={() => props.onUpdate(value)}
+      onChange={(event) => {
+        setValue(event.target.value);
+        props.onUpdate(event.target.value);
+      }}
       style={props.style}
     />
   );