Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-09-21 03:08:48 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: display xml examples if present in response examples

Browse Source
This commit is contained in:
Roman Hotsiy 2017-05-12 11:03:14 +03:00
parent d2c790fa14
commit cb106cc668
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
9 changed files with 121 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demo/swagger.yaml
View File

@ -617,6 +617,7 @@ paths:
type: string
examples:
application/json: OK
application/xml: <message> OK </message>
headers:
X-Rate-Limit:
type: integer

2
lib/components/RequestSamples/request-samples.scss
View File

@ -64,7 +64,7 @@ header {
}
:host /deep/ tabs ul {
padding-top: 10px;
padding-top: 10px;
}
.code-sample pre {

4
lib/components/ResponsesSamples/responses-samples.ts
View File

@ -3,7 +3,7 @@
import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { BaseComponent, SpecManager } from '../base';
import JsonPointer from '../../utils/JsonPointer';
import { statusCodeType, getJsonLike } from '../../utils/helpers';
import { statusCodeType, getJsonLikeSample } from '../../utils/helpers';
function isNumeric(n) {
@ -11,7 +11,7 @@ function isNumeric(n) {
}
function hasExample(response) {
return ((response.examples && getJsonLike(response.examples)) ||
return ((response.examples && getJsonLikeSample(response.examples)) ||
response.schema);
}

34
lib/components/SchemaSample/schema-sample.html
View File

@ -1,10 +1,26 @@
<div class="snippet">
<!-- in case sample is not available for some reason -->
<pre *ngIf="sample == undefined"> Sample unavailable </pre>
<div class="action-buttons">
<span copy-button [copyText]="sample" class="hint--top-left hint--inversed"> <a>Copy</a> </span>
<span> <a *ngIf="enableButtons" (click)="expandAll()">Expand all</a> </span>
<span> <a *ngIf="enableButtons" (click)="collapseAll()">Collapse all</a> </span>
<ng-template #jsonSnippet>
<div class="snippet">
<!-- in case sample is not available for some reason -->
<pre *ngIf="sample == undefined"> Sample unavailable </pre>
<div class="action-buttons">
<span copy-button [copyText]="sample" class="hint--top-left hint--inversed"> <a>Copy</a> </span>
<span> <a *ngIf="enableButtons" (click)="expandAll()">Expand all</a> </span>
<span> <a *ngIf="enableButtons" (click)="collapseAll()">Collapse all</a> </span>
</div>
<pre [innerHtml]="sample | jsonFormatter"></pre>
</div>
<pre [innerHtml]="sample | jsonFormatter"></pre>
</div>
</ng-template>
<tabs *ngIf="xmlSample; else jsonSnippet">
<tab tabTitle="JSON">
<ng-container *ngTemplateOutlet="jsonSnippet"></ng-container>
</tab>
<tab tabTitle="XML" *ngIf="xmlSample">
<div class="snippet">
<div class="action-buttons">
<span copy-button [copyText]="xmlSample" class="hint--top-left hint--inversed"> <a>Copy</a> </span>
</div>
<pre class="xml-sample" [innerHtml]="xmlSample | prism:'xml'"></pre>
</div>
</tab>
</tabs>

30
lib/components/SchemaSample/schema-sample.scss
View File

@ -4,6 +4,34 @@
display: block;
}
/* tabs */
:host /deep/ tabs {
margin-top: 1em;
> ul {
margin: 0;
padding: 0;
> li {
padding: 2px 10px;
display: inline-block;
background: #131a1d;
border-bottom: 1px solid trasparent;
color: $sample-panel-headers-color;
&.active {
color: white;
border-bottom: 1px solid $sample-panel-headers-color;
}
}
}
.action-buttons {
margin-top: -2em;
}
}
pre {
background-color: transparent;
padding: 0;
@ -99,7 +127,7 @@ pre {
padding-left: 6px;
}
.redoc-json {
.redoc-json, .xml-sample {
overflow-x: auto;
padding: 20px;
border-radius: $border-radius*2;

12
lib/components/SchemaSample/schema-sample.ts
View File

@ -6,7 +6,7 @@ import * as OpenAPISampler from 'openapi-sampler';
import JsonPointer from '../../utils/JsonPointer';
import { BaseComponent, SpecManager } from '../base';
import { SchemaNormalizer } from '../../services/schema-normalizer.service';
import { getJsonLike } from '../../utils/helpers';
import { getJsonLikeSample, getXmlLikeSample} from '../../utils/helpers';
@Component({
selector: 'schema-sample',
@ -20,6 +20,7 @@ export class SchemaSample extends BaseComponent implements OnInit {
element: any;
sample: any;
xmlSample: string;
enableButtons: boolean = false;
private _normalizer:SchemaNormalizer;
@ -34,7 +35,7 @@ export class SchemaSample extends BaseComponent implements OnInit {
this.bindEvents();
let base:any = this.componentSchema;
let sample;
let sample, xmlSample;
// got pointer not directly to the schema but e.g. to the response obj
if (this.componentSchema.schema) {
@ -50,7 +51,12 @@ export class SchemaSample extends BaseComponent implements OnInit {
base.examples = requestExamples;
}
let jsonLikeSample = base.examples && getJsonLike(base.examples);
let xmlLikeSample = base.examples && getXmlLikeSample(base.examples);
if (xmlLikeSample) {
this.xmlSample = xmlLikeSample;
}
let jsonLikeSample = base.examples && getJsonLikeSample(base.examples);
if (jsonLikeSample) {
sample = jsonLikeSample;
} else {

20
lib/utils/helpers.ts
View File

@ -123,12 +123,26 @@ export function isJsonLike(contentType: string): boolean {
return contentType.search(/json/i) !== -1;
}
export function getJsonLike(object: Object) {
const jsonLikeKeys = Object.keys(object).filter(isJsonLike);
export function isXmlLike(contentType: string): boolean {
return contentType.search(/xml/i) !== -1;
}
export function getJsonLikeSample(samples: Object) {
const jsonLikeKeys = Object.keys(samples).filter(isJsonLike);
if (!jsonLikeKeys.length) {
return false;
}
return object[jsonLikeKeys.shift()];
return samples[jsonLikeKeys[0]];
}
export function getXmlLikeSample(samples: Object) {
const xmlLikeKeys = Object.keys(samples).filter(isXmlLike);
if (!xmlLikeKeys.length) {
return false;
}
return samples[xmlLikeKeys[0]];
}

1
lib/vendor.ts
View File

@ -18,6 +18,7 @@ import 'prismjs/components/prism-bash.js';
import 'prismjs/components/prism-swift.js';
import 'prismjs/components/prism-objectivec.js';
import 'prismjs/components/prism-scala.js';
import 'prismjs/components/prism-markup.js'; // xml
import 'dropkickjs/build/css/dropkick.css';
import 'prismjs/themes/prism-dark.css';

45
tests/unit/helpers.spec.ts
View File

@ -1,6 +1,12 @@
'use strict';
import {statusCodeType, isJsonLike, getJsonLike } from '../../lib/utils/helpers';
import {
statusCodeType,
isJsonLike,
getJsonLikeSample,
isXmlLike,
getXmlLikeSample
} from '../../lib/utils/helpers';
describe('Utils', () => {
describe('statusCodeType', () => {
@ -41,24 +47,45 @@ describe('Utils', () => {
});
});
describe('getJsonLike', () => {
describe('getJsonLikeSample', () => {
it('Should return a value when a JSON-like key exists', () => {
const examples = {
"application/vnd.api+json": {
"message": "Hello World"
'application/vnd.api+json': {
'message': 'Hello World'
},
"application/xml": "<message>Hello World</message>"
'application/xml': '<message>Hello World</message>'
};
(getJsonLike(examples).message).should.be.equal("Hello World");
(getJsonLikeSample(examples).message).should.be.equal('Hello World');
});
it('Should return undefined when no JSON-like key exists', () => {
const examples = {
"application/xml": "<message>Hello World</message>"
'application/xml': '<message>Hello World</message>'
};
getJsonLike(examples).should.be.equal(false);
getJsonLikeSample(examples).should.be.equal(false);
});
})
});
describe('getXmlLikeSample', () => {
it('Should return a value when a XML-like key exists', () => {
const examples = {
'application/vnd.api+json': {
'message': 'Hello World'
},
'application/vnd.api+xml': '<message>Hello World</message>'
};
(getXmlLikeSample(examples)).should.be.equal('<message>Hello World</message>');
});
it('Should return undefined when no XML-like key exists', () => {
const examples = {
'application/json': '<message>Hello World</message>'
};
getXmlLikeSample(examples).should.be.equal(false);
});
});
});