Decapitate "network" plugin

Reviewed By: lawrencelomax

Differential Revision: D39466980

fbshipit-source-id: b880690a2b334fd063f2d06923743d67b79e7b08

desktop/plugins/public/network/RequestDetails.tsx

@@ -9,7 +9,6 @@
 
 import React from 'react';
 import {Component} from 'react';
-import querystring from 'querystring';
 import xmlBeautifier from 'xml-beautifier';
 import {Base64} from 'js-base64';
 
@@ -23,7 +22,13 @@ import {
 } from 'flipper-plugin';
 import {Select, Typography} from 'antd';
 
-import {bodyAsBinary, bodyAsString, formatBytes, getHeaderValue} from './utils';
+import {
+  bodyAsBinary,
+  bodyAsString,
+  formatBytes,
+  getHeaderValue,
+  queryToObj,
+} from './utils';
 import {Request, Header, Insights, RetryInsights} from './types';
 import {BodyOptions} from './index';
 import {ProtobufDefinitionsRepository} from './ProtobufDefinitionsRepository';
@@ -523,7 +528,7 @@ class JSONFormatter {
 class LogEventFormatter {
   formatRequest(request: Request) {
     if (request.url.indexOf('logging_client_event') > 0) {
-      const data = querystring.parse(bodyAsString(request.requestData));
+      const data = queryToObj(bodyAsString(request.requestData));
       if (typeof data.message === 'string') {
         data.message = JSON.parse(data.message);
       }
@@ -535,7 +540,7 @@ class LogEventFormatter {
 class GraphQLBatchFormatter {
   formatRequest(request: Request) {
     if (request.url.indexOf('graphqlbatch') > 0) {
-      const data = querystring.parse(bodyAsString(request.requestData));
+      const data = queryToObj(bodyAsString(request.requestData));
       if (typeof data.queries === 'string') {
         data.queries = JSON.parse(data.queries);
       }
@@ -575,7 +580,7 @@ class GraphQLFormatter {
       if (!decoded) {
         return undefined;
       }
-      const data = querystring.parse(bodyAsString(decoded));
+      const data = queryToObj(bodyAsString(decoded));
       if (typeof data.variables === 'string') {
         data.variables = JSON.parse(data.variables);
       }
@@ -636,10 +641,7 @@ class FormUrlencodedFormatter {
         return undefined;
       }
       return (
-        <DataInspector
+        <DataInspector expandRoot data={queryToObj(bodyAsString(decoded))} />
-          expandRoot
-          data={querystring.parse(bodyAsString(decoded))}
-        />
       );
     }
   };

desktop/plugins/public/network/index.tsx

@@ -57,7 +57,6 @@ import {
   decodeBody,
 } from './utils';
 import RequestDetails from './RequestDetails';
-import {URL} from 'url';
 import {assembleChunksIfResponseIsComplete} from './chunks';
 import {DeleteOutlined} from '@ant-design/icons';
 import {ManageMockResponsePanel} from './request-mocking/ManageMockResponsePanel';

desktop/plugins/public/network/utils.tsx

@@ -170,6 +170,15 @@ export function bodyAsBinary(
   return undefined;
 }
 
+export const queryToObj = (query: string) => {
+  const params = new URLSearchParams(query);
+  const obj: Record<string, any> = {};
+  params.forEach((value, key) => {
+    obj[key] = value;
+  });
+  return obj;
+};
+
 function escapeCharacter(x: string) {
   const code = x.charCodeAt(0);
   return code < 16 ? '\\u0' + code.toString(16) : '\\u' + code.toString(16);