diff --git a/src/components/PayloadSamples/Example.tsx b/src/components/PayloadSamples/Example.tsx index 392e2138..07fb50b7 100644 --- a/src/components/PayloadSamples/Example.tsx +++ b/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 ; } 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 ; } } diff --git a/src/components/PayloadSamples/ExampleValue.tsx b/src/components/PayloadSamples/ExampleValue.tsx index fa35e842..0aec9206 100644 --- a/src/components/PayloadSamples/ExampleValue.tsx +++ b/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 ; } 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 ; } } diff --git a/src/utils/__tests__/jsonToTextPlain.test.ts b/src/utils/__tests__/jsonToTextPlain.test.ts new file mode 100644 index 00000000..99b6ad02 --- /dev/null +++ b/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"
' + '"anotherKey": "anotherValue"'; + expect(actual).toEqual(expected); + }); +}); diff --git a/src/utils/highlight.ts b/src/utils/highlight.ts index 07606d82..4a668243 100644 --- a/src/utils/highlight.ts +++ b/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(); diff --git a/src/utils/jsonToTextPlain.ts b/src/utils/jsonToTextPlain.ts new file mode 100644 index 00000000..ced8e724 --- /dev/null +++ b/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; +} diff --git a/src/utils/openapi.ts b/src/utils/openapi.ts index a9bd35e2..86b8a944 100644 --- a/src/utils/openapi.ts +++ b/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'; }