From 6c534f574976b846a2811998c83e7ad91ef784bf Mon Sep 17 00:00:00 2001
From: bizzguy <jamesharmon@gmail.com>
Date: Wed, 7 Jul 2021 05:03:16 -0700
Subject: [PATCH] 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
---
 .../request-mocking/ManageMockResponsePanel.tsx        | 10 ++++++++++
 .../network/request-mocking/MockResponseDetails.tsx    |  6 ++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/desktop/plugins/public/network/request-mocking/ManageMockResponsePanel.tsx b/desktop/plugins/public/network/request-mocking/ManageMockResponsePanel.tsx
index 5fc0c84ea..1677963b9 100644
--- a/desktop/plugins/public/network/request-mocking/ManageMockResponsePanel.tsx
+++ b/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>
diff --git a/desktop/plugins/public/network/request-mocking/MockResponseDetails.tsx b/desktop/plugins/public/network/request-mocking/MockResponseDetails.tsx
index 23cbf853d..ce4ac301d 100644
--- a/desktop/plugins/public/network/request-mocking/MockResponseDetails.tsx
+++ b/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}
     />
   );