From ccd8702a4948ae523cf647838e35bf4775c0e5fe Mon Sep 17 00:00:00 2001
From: Charles Wahome <thewahome.cw@gmail.com>
Date: Wed, 3 Feb 2021 04:31:49 -0800
Subject: [PATCH] Fix: support different content types (#814)

* add html and octet stream content types to enum

* add html to available languages in the plugin

* fallback to showing text

* explicitly set the response for each response type

* make editor readonly
---
 config/webpack.config.js                            |  2 +-
 .../services/actions/query-action-creator-util.ts   | 13 ++++++-------
 src/app/views/query-response/response/Response.tsx  |  9 ++++++---
 src/types/enums.ts                                  |  4 +++-
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/config/webpack.config.js b/config/webpack.config.js
index 397ba771f..3e9adadcc 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -397,7 +397,7 @@ module.exports = function (webpackEnv) {
         maxChunks: 1,
       }),
       new MonacoWebpackPlugin({
-        languages: ['json', 'javascript', 'java', 'objective-c', 'csharp']
+        languages: ['json', 'javascript', 'java', 'objective-c', 'csharp', 'html']
       }),
       // Generates an `index.html` file with the <script> injected.
       new HtmlWebpackPlugin(
diff --git a/src/app/services/actions/query-action-creator-util.ts b/src/app/services/actions/query-action-creator-util.ts
index 01e24cc96..39a34672d 100644
--- a/src/app/services/actions/query-action-creator-util.ts
+++ b/src/app/services/actions/query-action-creator-util.ts
@@ -58,13 +58,13 @@ export function isImageResponse(contentType: string | undefined) {
 }
 
 export function getContentType(headers: Headers) {
-  const full = headers.get('content-type');
-  if (full) {
-    const delimiterPos = full.indexOf(';');
+  const contentType = headers.get('content-type');
+  if (contentType) {
+    const delimiterPos = contentType.indexOf(';');
     if (delimiterPos !== -1) {
-      return full.substr(0, delimiterPos);
+      return contentType.substr(0, delimiterPos);
     } else {
-      return full;
+      return contentType;
     }
   }
 }
@@ -81,8 +81,7 @@ export function parseResponse(response: any, respHeaders: any): Promise<any> {
         return response.json();
 
       case ContentType.XML:
-        return response.text();
-
+      case ContentType.HTML:
       case ContentType.TextPlain:
         return response.text();
 
diff --git a/src/app/views/query-response/response/Response.tsx b/src/app/views/query-response/response/Response.tsx
index b6654f413..b20b0a1cb 100644
--- a/src/app/views/query-response/response/Response.tsx
+++ b/src/app/views/query-response/response/Response.tsx
@@ -40,7 +40,7 @@ function getContentType(headers: any) {
     */
     const splitContentTypes = contentTypes.split(';');
     if (splitContentTypes.length > 0) {
-      contentType = splitContentTypes[0];
+      contentType = splitContentTypes[0].toLowerCase();
     }
   }
   return contentType;
@@ -51,7 +51,10 @@ function displayComponent(properties: any) {
 
   switch (contentType) {
     case ContentType.XML:
-      return <Monaco body={formatXml(body)} language='xml' height={height} />;
+      return <Monaco body={formatXml(body)} language='xml' readOnly={true} height={height} />;
+
+    case ContentType.HTML:
+      return <Monaco body={body} language='html' readOnly={true} height={height} />;
 
     default:
       if (isImageResponse(contentType)) {
@@ -61,7 +64,7 @@ function displayComponent(properties: any) {
           alt='profile image'
         />;
       }
-      return <Monaco body={body} language={language} height={height} />;
+      return <Monaco body={body} readOnly={true} language={language} height={height} />;
   }
 }
 
diff --git a/src/types/enums.ts b/src/types/enums.ts
index fed270468..0c3da176b 100644
--- a/src/types/enums.ts
+++ b/src/types/enums.ts
@@ -12,7 +12,9 @@ export enum ContentType {
   XML = 'application/xml',
   Json = 'application/json',
   Image = 'image/jpeg',
-  TextPlain = 'text/plain'
+  TextPlain = 'text/plain',
+  HTML = 'text/html',
+  BinaryResponse = 'application/octet-stream',
 }
 
 export enum AppTheme {