Fix error with multipart/form-data

src/components/PayloadSamples/Example.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 
 import { StyledPre } from '../../common-elements/samples';
 import { ExampleModel } from '../../services/models';
-import { isJsonLike, langFromMime } from '../../utils';
+import { isJsonLike, isTextPlainLike, langFromMime } from '../../utils';
+import { jsonToTextPlain } from '../../utils/jsonToTextPlain';
 import { JsonViewer } from '../JsonViewer/JsonViewer';
 import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
 import { ExampleValue } from './ExampleValue';
@@ -43,10 +44,13 @@ export function ExternalExample({ example, mimeType }: ExampleProps) {
   if (isJsonLike(mimeType)) {
     return <JsonViewer data={value} />;
   } else {
-    if (typeof value === 'object') {
+    if (isTextPlainLike(mimeType)) {
+      value = jsonToTextPlain(value);
+    } else if (typeof value === 'object') {
       // just in case example was cached as json but used as non-json
       value = JSON.stringify(value, null, 2);
     }
+
     return <SourceCodeWithCopy lang={langFromMime(mimeType)} source={value} />;
   }
 }

src/components/PayloadSamples/ExampleValue.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 
-import { isJsonLike, langFromMime } from '../../utils/openapi';
+import { isJsonLike, isTextPlainLike, langFromMime } from '../../utils/openapi';
 import { JsonViewer } from '../JsonViewer/JsonViewer';
 import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
+import { jsonToTextPlain } from '../../utils/jsonToTextPlain';
 
 export interface ExampleValueProps {
   value: any;
@@ -13,6 +14,13 @@ export function ExampleValue({ value, mimeType }: ExampleValueProps) {
   if (isJsonLike(mimeType)) {
     return <JsonViewer data={value} />;
   } else {
+    if (isTextPlainLike(mimeType)) {
+      value = jsonToTextPlain(value);
+    } else if (typeof value === 'object') {
+      // just in case example was cached as json but used as non-json
+      value = JSON.stringify(value, null, 2);
+    }
+
     return <SourceCodeWithCopy lang={langFromMime(mimeType)} source={value} />;
   }
 }

src/utils/__tests__/jsonToTextPlain.test.ts

@@ -0,0 +1,14 @@
+import { jsonToTextPlain } from '../jsonToTextPlain';
+
+describe('Utils', () => {
+  test('jsonToTextPlain', () => {
+    const json = {
+      key: 'value',
+      anotherKey: 'anotherValue',
+    };
+
+    const actual = jsonToTextPlain(json);
+    const expected = '"key": "value"<br>' + '"anotherKey": "anotherValue"';
+    expect(actual).toEqual(expected);
+  });
+});

src/utils/highlight.ts

@@ -65,7 +65,7 @@ export function mapLang(lang: string): string {
  * Highlight source code string using Prism.js
  * @param source source code to highlight
  * @param lang highlight language
- * @return highlighted souce code as **html string**
+ * @return highlighted source code as **html string**
  */
 export function highlight(source: string, lang: string = DEFAULT_LANG): string {
   lang = lang.toLowerCase();

src/utils/jsonToTextPlain.ts

@@ -0,0 +1,16 @@
+/**
+ * Convert simple JSON to plain text.
+ * @param {object} json
+ * @return string
+ */
+export function jsonToTextPlain(json: object): string {
+  let result: string = '';
+
+  for (const key in json) {
+    if (json.hasOwnProperty(key)) {
+      result += `"${key}": "${json[key]}"\n`;
+    }
+  }
+
+  return result;
+}

src/utils/openapi.ts

@@ -130,10 +130,17 @@ export function isJsonLike(contentType: string): boolean {
   return contentType.search(/json/i) !== -1;
 }
 
+export function isTextPlainLike(contentType: string): boolean {
+  return contentType.search(/form-data/i) !== -1;
+}
+
 export function langFromMime(contentType: string): string {
   if (contentType.search(/xml/i) !== -1) {
     return 'xml';
+  } else if (isTextPlainLike(contentType)) {
+    return 'markup';
   }
+
   return 'clike';
 }