(Server) Fix Unresponsive Header Input

Summary:
Before this diff, the input bar is unresponsive to the user input; when one typed fast enough the input doesn't reflect that as shown in the before video (the console printed the log directly when `onChange` was fired).

This diff tried to store value locally and use that to render. When the component is closed, the state update will take place. This tried to solve too many state update.

Reviewed By: mweststrate

Differential Revision: D20489142

fbshipit-source-id: c118adc61d9234daec17782e4bbf8e4ea3dd369f

desktop/plugins/network/MockResponseDetails.tsx

@@ -78,7 +78,7 @@ const StyledInput = styled(Input)({
   flexGrow: 5,
 });
 
-const HeaderInput = styled(Input)({
+const HeaderStyledInput = styled(Input)({
   width: '100%',
   height: 20,
   marginTop: 6,
@@ -139,14 +139,32 @@ const HeadersColumns = {
   },
 };
 
+const selectedHighlight = {backgroundColor: colors.highlight};
+
+function HeaderInput(props: {
+  initialValue: string;
+  isSelected: boolean;
+  onUpdate: (newValue: string) => void;
+}) {
+  const [value, setValue] = useState(props.initialValue);
+  return (
+    <HeaderStyledInput
+      type="text"
+      placeholder="Name"
+      value={value}
+      style={props.isSelected ? selectedHighlight : undefined}
+      onChange={event => setValue(event.target.value)}
+      onBlur={() => props.onUpdate(value)}
+    />
+  );
+}
+
 function _buildMockResponseHeaderRows(
   routeId: string,
   route: Route,
   selectedHeaderId: string | null,
   networkRouteManager: NetworkRouteManager,
 ) {
-  const selectedHighlight = {backgroundColor: colors.highlight};
-
   return Object.entries(route.responseHeaders).map(([id, header]) => {
     const selected = selectedHeaderId === id;
     return {
@@ -154,18 +172,13 @@ function _buildMockResponseHeaderRows(
         name: {
           value: (
             <HeaderInput
-              type="text"
+              initialValue={header.key}
-              placeholder="Name"
+              isSelected={selected}
-              value={header.key}
+              onUpdate={(newValue: string) => {
-              style={selected ? selectedHighlight : {}}
-              onChange={event => {
-                if (!selected) {
-                  return;
-                }
                 const newHeaders = produce(
                   route.responseHeaders,
                   draftHeaders => {
-                    draftHeaders[id].key = event.target.value;
+                    draftHeaders[id].key = newValue;
                   },
                 );
                 networkRouteManager.modifyRoute(routeId, {
@@ -178,18 +191,13 @@ function _buildMockResponseHeaderRows(
         value: {
           value: (
             <HeaderInput
-              type="text"
+              initialValue={header.value}
-              placeholder="Value"
+              isSelected={selected}
-              value={header.value}
+              onUpdate={(newValue: string) => {
-              style={selected ? selectedHighlight : {}}
-              onChange={event => {
-                if (!selected) {
-                  return;
-                }
                 const newHeaders = produce(
                   route.responseHeaders,
                   draftHeaders => {
-                    draftHeaders[id].value = event.target.value;
+                    draftHeaders[id].value = newValue;
                   },
                 );
                 networkRouteManager.modifyRoute(routeId, {