feat: display xml examples if present in response examples

Author: RomanHotsiy

demo/swagger.yaml

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

lib/components/RequestSamples/request-samples.scss

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

lib/components/ResponsesSamples/responses-samples.ts

@@ -3,15 +3,15 @@
 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) {
   return (!isNaN(parseFloat(n)) && isFinite(n));
 }
 
 function hasExample(response) {
-  return ((response.examples && getJsonLike(response.examples)) ||
+  return ((response.examples && getJsonLikeSample(response.examples)) ||
     response.schema);
 }
 

lib/components/SchemaSample/schema-sample.html

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

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;

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 {

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

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';

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": "<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);
+    });
+  });
 });