make body option persisted across request selection (#1448)

Summary:
This PR make the formatter body option persisted across request selection as mentioned in [here](https://github.com/facebook/flipper/issues/432)

Close https://github.com/facebook/flipper/issues/432

## Changelog

Make request body option persisted across request selection

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

Test Plan:
1. Select the first request and change the body option from `parsed` to `formatted`

<img width="1432" alt="Screen Shot 2020-08-10 at 19 00 07" src="https://user-images.githubusercontent.com/1691440/89780560-de753c80-db3b-11ea-87d7-92831e16b961.png">

2. Move to second request, still in `formatted`

<img width="1431" alt="Screen Shot 2020-08-10 at 19 00 18" src="https://user-images.githubusercontent.com/1691440/89780573-e9c86800-db3b-11ea-900e-e6d02054e9ba.png">

Reviewed By: cekkaewnumchai

Differential Revision: D23264774

Pulled By: mweststrate

fbshipit-source-id: aed97642d030fa8e01e63d115e79ffb7a702c5e6

desktop/plugins/network/RequestDetails.tsx

@@ -22,7 +22,7 @@ import {
   SmallText,
 } from 'flipper';
 import {decodeBody, getHeaderValue} from './utils';
-import {formatBytes} from './index';
+import {formatBytes, BodyOptions} from './index';
 import React from 'react';
 
 import querystring from 'querystring';
@@ -54,26 +54,14 @@ const KeyValueColumns = {
 type RequestDetailsProps = {
   request: Request;
   response: Response | null | undefined;
-};
-
-type RequestDetailsState = {
   bodyFormat: string;
+  onSelectFormat: (bodyFormat: string) => void;
 };
-
-export default class RequestDetails extends Component<
-  RequestDetailsProps,
-  RequestDetailsState
-> {
+export default class RequestDetails extends Component<RequestDetailsProps> {
   static Container = styled(FlexColumn)({
     height: '100%',
     overflow: 'auto',
   });
-  static BodyOptions = {
-    formatted: 'formatted',
-    parsed: 'parsed',
-  };
-
-  state: RequestDetailsState = {bodyFormat: RequestDetails.BodyOptions.parsed};
 
   urlColumns = (url: URL) => {
     return [
@@ -120,16 +108,11 @@ export default class RequestDetails extends Component<
     ];
   };
 
-  onSelectFormat = (bodyFormat: string) => {
-    this.setState(() => ({bodyFormat}));
-  };
-
   render() {
-    const {request, response} = this.props;
+    const {request, response, bodyFormat, onSelectFormat} = this.props;
     const url = new URL(request.url);
 
-    const {bodyFormat} = this.state;
-    const formattedText = bodyFormat == RequestDetails.BodyOptions.formatted;
+    const formattedText = bodyFormat == BodyOptions.formatted;
 
     return (
       <RequestDetails.Container>
@@ -215,8 +198,8 @@ export default class RequestDetails extends Component<
             grow
             label="Body"
             selected={bodyFormat}
-            onChange={this.onSelectFormat}
-            options={RequestDetails.BodyOptions}
+            onChange={onSelectFormat}
+            options={BodyOptions}
           />
         </Panel>
         {response && response.insights ? (

desktop/plugins/network/index.tsx

@@ -48,6 +48,11 @@ import {combineBase64Chunks} from './chunks';
 
 const LOCALSTORAGE_MOCK_ROUTE_LIST_KEY = '__NETWORK_CACHED_MOCK_ROUTE_LIST';
 
+export const BodyOptions = {
+  formatted: 'formatted',
+  parsed: 'parsed',
+};
+
 type State = {
   selectedIds: Array<RequestId>;
   searchTerm: string;
@@ -55,6 +60,7 @@ type State = {
   nextRouteId: number;
   isMockResponseSupported: boolean;
   showMockResponseDialog: boolean;
+  detailBodyFormat: string;
 };
 
 const COLUMN_SIZE = {
@@ -321,6 +327,7 @@ export default class extends FlipperPlugin<State, any, PersistedState> {
       nextRouteId: 0,
       isMockResponseSupported: false,
       showMockResponseDialog: false,
+      detailBodyFormat: BodyOptions.parsed,
     };
   }
 
@@ -486,9 +493,13 @@ export default class extends FlipperPlugin<State, any, PersistedState> {
     this.setState({showMockResponseDialog: false});
   };
 
+  onSelectFormat = (bodyFormat: string) => {
+    this.setState({detailBodyFormat: bodyFormat});
+  };
+
   renderSidebar = () => {
     const {requests, responses} = this.props.persistedState;
-    const {selectedIds} = this.state;
+    const {selectedIds, detailBodyFormat} = this.state;
     const selectedId = selectedIds.length === 1 ? selectedIds[0] : null;
 
     if (!selectedId) {
@@ -503,6 +514,8 @@ export default class extends FlipperPlugin<State, any, PersistedState> {
         key={selectedId}
         request={requestWithId}
         response={responses[selectedId]}
+        bodyFormat={detailBodyFormat}
+        onSelectFormat={this.onSelectFormat}
       />
     );
   };