Add HTML formatter to Network plugin

Summary:
Currently HTML renders as a blank response panel which is not helpful for seeing erros.
Adding a formatter for `text/html` so we can see error responses, or other HTML responses, correctly.

Note, this adds the xml beautifier package from npm.

Reviewed By: danielbuechele

Differential Revision: D12883274

fbshipit-source-id: c49b60984f10bba471b5bbb8aabcb385a171d0d6

src/plugins/network/RequestDetails.js

@@ -23,6 +23,8 @@ import {
 import {getHeaderValue} from './index.js';
 
 import querystring from 'querystring';
+// $FlowFixMe
+import xmlBeautifier from 'xml-beautifier';
 
 const WrappingText = styled(Text)({
   wordWrap: 'break-word',
@@ -487,6 +489,22 @@ class JSONText extends Component<{children: any}> {
   }
 }
 
+class XMLText extends Component<{body: any}> {
+  static NoScrollbarText = styled(Text)({
+    overflowY: 'hidden',
+  });
+
+  render() {
+    const xmlPretty = xmlBeautifier(this.props.body);
+    return (
+      <XMLText.NoScrollbarText code whiteSpace="pre" selectable>
+        {xmlPretty}
+        {'\n'}
+      </XMLText.NoScrollbarText>
+    );
+  }
+}
+
 class JSONTextFormatter {
   formatRequest = (request: Request) => {
     return this.format(
@@ -522,6 +540,28 @@ class JSONTextFormatter {
   };
 }
 
+class XMLTextFormatter {
+  formatRequest = (request: Request) => {
+    return this.format(
+      decodeBody(request),
+      getHeaderValue(request.headers, 'content-type'),
+    );
+  };
+
+  formatResponse = (request: Request, response: Response) => {
+    return this.format(
+      decodeBody(response),
+      getHeaderValue(response.headers, 'content-type'),
+    );
+  };
+
+  format = (body: string, contentType: string) => {
+    if (contentType.startsWith('text/html')) {
+      return <XMLText body={body} />;
+    }
+  };
+}
+
 class JSONFormatter {
   formatRequest = (request: Request) => {
     return this.format(
@@ -665,6 +705,7 @@ const BodyFormatters: Array<BodyFormatter> = [
   new GraphQLFormatter(),
   new JSONFormatter(),
   new FormUrlencodedFormatter(),
+  new XMLTextFormatter(),
 ];
 
 const TextBodyFormatters: Array<BodyFormatter> = [new JSONTextFormatter()];

src/plugins/network/package.json

@@ -4,6 +4,7 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "pako": "^1.0.6"
+    "pako": "^1.0.6",
+    "xml-beautifier": "^0.4.0"
   }
 }

src/plugins/network/yarn.lock

@@ -5,3 +5,15 @@
 pako@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
+
+repeat-string@1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+  integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
+
+xml-beautifier@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/xml-beautifier/-/xml-beautifier-0.4.0.tgz#8ead9e48aa4ffc9c702eca82d53130f0f3aa3c48"
+  integrity sha512-aIoZ2Dx0VkYuvP35WAdMDi7voG1Kn36vi7jKkHuLx5K5fqJeynNqKulSvyFpNu2+VNtDfbggd+GbDdGIF/ZJSw==
+  dependencies:
+    repeat-string "1.6.1"