diff --git a/demo/swagger.yaml b/demo/swagger.yaml
index f21ecef5a8..63a0bcbb1d 100644
--- a/demo/swagger.yaml
+++ b/demo/swagger.yaml
@@ -617,6 +617,7 @@ paths:
type: string
examples:
application/json: OK
+ application/xml: OK
headers:
X-Rate-Limit:
type: integer
diff --git a/lib/components/RequestSamples/request-samples.scss b/lib/components/RequestSamples/request-samples.scss
index 24f4201858..cc06902c45 100644
--- a/lib/components/RequestSamples/request-samples.scss
+++ b/lib/components/RequestSamples/request-samples.scss
@@ -64,7 +64,7 @@ header {
}
:host /deep/ tabs ul {
- padding-top: 10px;
+ padding-top: 10px;
}
.code-sample pre {
diff --git a/lib/components/ResponsesSamples/responses-samples.ts b/lib/components/ResponsesSamples/responses-samples.ts
index 6e076adb3f..e977b27551 100644
--- a/lib/components/ResponsesSamples/responses-samples.ts
+++ b/lib/components/ResponsesSamples/responses-samples.ts
@@ -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);
}
diff --git a/lib/components/SchemaSample/schema-sample.html b/lib/components/SchemaSample/schema-sample.html
index a1a3ec8af3..b779152562 100644
--- a/lib/components/SchemaSample/schema-sample.html
+++ b/lib/components/SchemaSample/schema-sample.html
@@ -1,10 +1,26 @@
-
-
-
Sample unavailable
-
+
+
+
+
+
+
+
+
+
+
diff --git a/lib/components/SchemaSample/schema-sample.scss b/lib/components/SchemaSample/schema-sample.scss
index 45fdf16157..b85f561c10 100644
--- a/lib/components/SchemaSample/schema-sample.scss
+++ b/lib/components/SchemaSample/schema-sample.scss
@@ -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;
diff --git a/lib/components/SchemaSample/schema-sample.ts b/lib/components/SchemaSample/schema-sample.ts
index a774bd911f..00fa955839 100644
--- a/lib/components/SchemaSample/schema-sample.ts
+++ b/lib/components/SchemaSample/schema-sample.ts
@@ -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 {
diff --git a/lib/utils/helpers.ts b/lib/utils/helpers.ts
index da30e1fc01..1f7cc1b0bc 100644
--- a/lib/utils/helpers.ts
+++ b/lib/utils/helpers.ts
@@ -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]];
}
diff --git a/lib/vendor.ts b/lib/vendor.ts
index e6d13941f3..edbd866949 100644
--- a/lib/vendor.ts
+++ b/lib/vendor.ts
@@ -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';
diff --git a/tests/unit/helpers.spec.ts b/tests/unit/helpers.spec.ts
index 3cba82246d..d6dbcdbdf7 100644
--- a/tests/unit/helpers.spec.ts
+++ b/tests/unit/helpers.spec.ts
@@ -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": "
Hello World"
+ 'application/xml': '
Hello World'
};
- (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": "
Hello World"
+ 'application/xml': '
Hello World'
};
- 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': '
Hello World'
+ };
+
+ (getXmlLikeSample(examples)).should.be.equal('
Hello World');
+ });
+
+ it('Should return undefined when no XML-like key exists', () => {
+ const examples = {
+ 'application/json': '
Hello World'
+ };
+
+ getXmlLikeSample(examples).should.be.equal(false);
+ });
+ });
});