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

@@ -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(

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();
 

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} />;
   }
 }
 

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 {