From dba2318c40e859e34d4a4e216416ebc4d845d93f Mon Sep 17 00:00:00 2001
From: Alban Mouton <alban.mouton@gmail.com>
Date: Fri, 12 May 2017 22:19:32 +0200
Subject: [PATCH] feat: display schema in a tree

---
 package.json            |  4 +++-
 src/OpenApi.vue         | 36 +++++++++++++++++++++++++++++++-----
 src/ParametersTable.vue |  4 ++--
 src/ResponsesTable.vue  |  4 ++--
 src/SchemaView.vue      | 24 ++++++++++++++++++++++++
 src/request.js          | 19 +++----------------
 src/tags.js             | 39 +++++++++++++--------------------------
 test/index.html         |  1 -
 test/petstore.json      |  4 ++++
 yarn.lock               | 27 +++++++++++++++++++++++----
 10 files changed, 105 insertions(+), 57 deletions(-)
 create mode 100644 src/SchemaView.vue

diff --git a/package.json b/package.json
index d8f0bce..b1fe8be 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,9 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "lodash.get": "^4.4.2",
+    "json-formatter-js": "^2.2.0",
+    "json-schema-deref-local": "^0.2.1",
+    "json-schema-view-js": "^1.0.0",
     "marked": "^0.3.6",
     "vue-material": "^0.7.1",
     "vue-resource": "^1.0.3"
diff --git a/src/OpenApi.vue b/src/OpenApi.vue
index 3e8ea13..c587aa7 100644
--- a/src/OpenApi.vue
+++ b/src/OpenApi.vue
@@ -70,8 +70,26 @@
     </md-layout>
   </md-layout>
 
-  <md-dialog-alert :md-content-html="currentSchema" md-title="Schema" ref="schemaDialog"></md-dialog-alert>
-  <md-dialog-alert :md-content-html="currentExamples" md-title="Examples" ref="examplesDialog"></md-dialog-alert>
+  <md-dialog ref="schemaDialog" class="schema-dialog">
+    <md-dialog-title>Schema</md-dialog-title>
+
+    <md-dialog-content>
+      <md-tabs>
+        <md-tab id="tree" md-label="Tree">
+          <schema-view :schema="currentSchema"></schema-view>
+        </md-tab>
+        <md-tab id="raw" md-label="Raw">
+<pre>{{ JSON.stringify(currentSchema, null, 2)}}</pre>
+        </md-tab>
+      </md-tabs>
+    </md-dialog-content>
+
+    <md-dialog-actions>
+      <md-button @click.native="$refs.schemaDialog.close()">ok</md-button>
+    </md-dialog-actions>
+  </md-dialog>
+
+  <md-dialog-alert :md-content-html="currentExamples.map(example => `<pre>${JSON.stringify(example, null, 2)}</pre>`).join('<br>') + ' '" md-title="Examples" ref="examplesDialog"></md-dialog-alert>
 
   <md-sidenav class="md-right" ref="sidenav">
     <md-toolbar>
@@ -118,6 +136,10 @@
 .openapi .md-table .md-table-cell.md-has-action .md-table-cell-container {
   display: inherit;
 }
+
+.schema-dialog .md-dialog {
+  min-width: 800px;
+}
 </style>
 
 <script>
@@ -125,18 +147,22 @@ import marked from 'marked'
 import RequestForm from './RequestForm.vue'
 import ResponsesTable from './ResponsesTable.vue'
 import ParametersTable from './ParametersTable.vue'
+import SchemaView from './SchemaView.vue'
 import tags from './tags.js'
 import request from './request.js'
 
 export default {
   name: 'open-api',
-  components: { RequestForm, ResponsesTable, ParametersTable },
+  components: { RequestForm, ResponsesTable, ParametersTable, SchemaView },
   props: ['api'],
   data: () => ({
     selectedEntry: null,
     currentSchema: ' ',
-    currentExamples: ' ',
-    currentRequest: {},
+    currentExamples: [],
+    currentRequest: {
+      contentType: '',
+      body: ''
+    },
     currentResponse: ''
   }),
   mounted: function() {
diff --git a/src/ParametersTable.vue b/src/ParametersTable.vue
index 7f891c2..532513f 100644
--- a/src/ParametersTable.vue
+++ b/src/ParametersTable.vue
@@ -10,7 +10,7 @@
         <md-table-head>Required</md-table-head>
       </md-table-row>
     </md-table-header>
-    
+
     <md-table-body>
       <md-table-row v-if="selectedEntry.requestBody">
         <md-table-cell>Payload</md-table-cell>
@@ -23,7 +23,7 @@
         </md-table-cell>
         <md-table-cell v-if="!selectedEntry.requestBody.content || !selectedEntry.requestBody.content[selectedEntry.requestBody.selectedType].schema"></md-table-cell>
         <md-table-cell v-if="selectedEntry.requestBody.content && selectedEntry.requestBody.content[selectedEntry.requestBody.selectedType].schema" style="align-items: left;">
-          <md-icon class="md-accent" @click.native="openSchemaDialog(selectedEntry.requestBody.content[selectedEntry.requestBody.selectedType].schemaHTML)" style="cursor:pointer" title="View schema">open_in_new</md-icon>
+          <md-icon class="md-accent" @click.native="openSchemaDialog(selectedEntry.requestBody.content[selectedEntry.requestBody.selectedType].schema)" style="cursor:pointer" title="View schema">open_in_new</md-icon>
         </md-table-cell>
         <md-table-cell>body</md-table-cell>
         <md-table-cell>
diff --git a/src/ResponsesTable.vue b/src/ResponsesTable.vue
index 657943e..c3d2c45 100644
--- a/src/ResponsesTable.vue
+++ b/src/ResponsesTable.vue
@@ -22,11 +22,11 @@
         </md-table-cell>
         <md-table-cell v-if="!response.content || !response.content[response.selectedType].schema"></md-table-cell>
         <md-table-cell v-if="response.content && response.content[response.selectedType].schema">
-          <md-icon class="md-accent" @click.native="openSchemaDialog(response.content[response.selectedType].schemaHTML)" style="cursor:pointer">open_in_new</md-icon>
+          <md-icon class="md-accent" @click.native="openSchemaDialog(response.content[response.selectedType].schema)" style="cursor:pointer">open_in_new</md-icon>
         </md-table-cell>
         <md-table-cell v-if="!response.content || !response.content[response.selectedType].examples"></md-table-cell>
         <md-table-cell v-if="response.content && response.content[response.selectedType].examples">
-          <md-icon class="md-accent" @click.native="openExamplesDialog(response.content[response.selectedType].examples.join('<hr>'))" style="cursor:pointer">open_in_new</md-icon>
+          <md-icon class="md-accent" @click.native="openExamplesDialog(response.content[response.selectedType].examples)" style="cursor:pointer">open_in_new</md-icon>
         </md-table-cell>
       </md-table-row>
     </md-table-body>
diff --git a/src/SchemaView.vue b/src/SchemaView.vue
new file mode 100644
index 0000000..5fdc996
--- /dev/null
+++ b/src/SchemaView.vue
@@ -0,0 +1,24 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+import JSONFormatter from 'json-formatter-js'
+global.JSONFormatter = JSONFormatter
+import JSONSchemaView from 'json-schema-view-js/dist/bundle.js'
+require('json-schema-view-js/dist/style.css')
+
+export default {
+  props: ['schema'],
+  watch: {
+    schema() {
+      while (this.$el.firstChild) {
+        this.$el.removeChild(this.$el.firstChild);
+      }
+
+      const view = new JSONSchemaView(this.schema, 2)
+      this.$el.appendChild(view.render())
+    }
+  }
+}
+</script>
diff --git a/src/request.js b/src/request.js
index af64a98..7140721 100644
--- a/src/request.js
+++ b/src/request.js
@@ -5,22 +5,9 @@ exports.reset = (request, entry) => {
     [p.name]: p.schema.enum ? p.schema.enum[0] : (p.schema.type === 'array' ? [] : null)
   })))
   if (entry.requestBody) {
-    request.contentType = Object.keys(entry.requestBody.content)[0]
-    let requestBody = ''
-    const contentType = entry.requestBody.content[request.contentType]
-    if (contentType.schema && contentType.schema.examples) {
-      requestBody = contentType.schema.examples[Object.keys(contentType.schema.examples)[0]]
-    }
-    if (contentType.schema.example && contentType.schema.example) {
-      requestBody = contentType.schema.example
-    }
-    if (contentType.examples) {
-      requestBody = contentType.examples[Object.keys(contentType.examples)[0]]
-    }
-    if (contentType.example) {
-      requestBody = contentType.example
-    }
-    request.body = typeof requestBody === 'string' ? requestBody : JSON.stringify(requestBody, null, 2)
+    request.contentType = entry.requestBody.selectedType
+    const example = entry.requestBody.content[request.contentType].example
+    request.body = typeof example === 'string' ? example : JSON.stringify(example, null, 2)
   }
 }
 
diff --git a/src/tags.js b/src/tags.js
index 07233e8..1f42f71 100644
--- a/src/tags.js
+++ b/src/tags.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import _get from 'lodash.get'
+import deref from 'json-schema-deref-local'
 
 const defaultStyle = {
   query: 'form',
@@ -9,34 +9,24 @@ const defaultStyle = {
 }
 
 function processContent(contentType, api) {
-  // Spec allow an item or an array, we always fall back on an array of examples
-  if (contentType.example) {
-    contentType.examples = contentType.examples || []
-    contentType.examples.push(contentType.example)
-  }
-  if (contentType.examples) {
-    if (!contentType.example && contentType.examples.length) {
-      contentType.example = contentType.examples[0]
-    }
-    contentType.examples = contentType.examples.map(e => '<pre>' + JSON.stringify(e, null, 2) + '</pre>')
-  }
+  // Spec allow examples as an item or an array. In the API or in the schema
+  // we always fall back on an array
   if (contentType.schema) {
-    if (contentType.schema.$ref) {
-      contentType.schema = _get(api, contentType.schema.$ref.split('#/').pop().replace(/\//g, '.'))
-    } else if (contentType.schema.items && contentType.schema.items.$ref) {
-      contentType.schema.items = _get(api, contentType.schema.items.$ref.split('#/').pop().replace(/\//g, '.'))
-    }
-    if (typeof contentType.schema !== 'string') {
-      contentType.schemaHTML = '<pre>' + JSON.stringify(contentType.schema, null, 2) + '</pre>'
-    }
+    contentType.examples = contentType.examples || contentType.schema.examples
+    contentType.example = contentType.example || contentType.schema.example
+  }
+
+  if (contentType.example) {
+    contentType.examples = [contentType.example]
   }
 }
 
 exports.get = api => {
+  const derefAPI = deref(api)
   var tags = {}
-  Object.keys(api.paths).forEach(function(path) {
-    Object.keys(api.paths[path]).forEach(function(method) {
-      let entry = api.paths[path][method]
+  Object.keys(derefAPI.paths).forEach(function(path) {
+    Object.keys(derefAPI.paths[path]).forEach(function(method) {
+      let entry = derefAPI.paths[path][method]
       entry.method = method
       entry.path = path
         // Filling tags entries
@@ -58,9 +48,6 @@ exports.get = api => {
         })
       }
       if (entry.requestBody) {
-        if (entry.requestBody.$ref) {
-          entry.requestBody = _get(api, entry.requestBody.$ref.split('#/').pop().replace(/\//g, '.'))
-        }
         if (entry.requestBody.content) {
           Vue.set(entry.requestBody, 'selectedType', Object.keys(entry.requestBody.content)[0])
           entry.requestBody.required = true
diff --git a/test/index.html b/test/index.html
index af0cb6e..4b8a11b 100644
--- a/test/index.html
+++ b/test/index.html
@@ -8,7 +8,6 @@
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-  <!-- Use webpack css loader or we don't care ? -->
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 
diff --git a/test/petstore.json b/test/petstore.json
index cac32c0..be93fe2 100644
--- a/test/petstore.json
+++ b/test/petstore.json
@@ -174,6 +174,10 @@
                   "type": "array",
                   "items": {
                     "$ref": "#/components/schemas/Pet"
+                  },
+                  "example": {
+                    "name": "rex",
+                    "photoUrls": []
                   }
                 }
               },
diff --git a/yarn.lock b/yarn.lock
index 07b6bc5..ad50ece 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2498,10 +2498,25 @@ jsesc@~0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
 
+json-formatter-js@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/json-formatter-js/-/json-formatter-js-2.2.0.tgz#1ed987223ef2f1d945304597faae78b580a8212b"
+
 json-loader@^0.5.4:
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.4.tgz#8baa1365a632f58a3c46d20175fc6002c96e37de"
 
+json-schema-deref-local@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/json-schema-deref-local/-/json-schema-deref-local-0.2.1.tgz#e8765a720ae712e3295ad2bbf3a824a37ec46325"
+  dependencies:
+    mpath "~0.2.1"
+    traverse "~0.6.6"
+
+json-schema-view-js@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/json-schema-view-js/-/json-schema-view-js-1.0.0.tgz#28e9f0bb67ab6d26e40ab2f20853c261029cfd8d"
+
 json-schema@0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
@@ -2620,10 +2635,6 @@ lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
 
-lodash.get@^4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
-
 lodash.isfinite@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz#fb89b65a9a80281833f0b7478b3a5104f898ebb3"
@@ -2764,6 +2775,10 @@ mkdirp@0.3.0:
   dependencies:
     minimist "0.0.8"
 
+mpath@~0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/mpath/-/mpath-0.2.1.tgz#3a4e829359801de96309c27a6b2e102e89f9e96e"
+
 ms@0.7.1:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
@@ -4092,6 +4107,10 @@ tough-cookie@~2.3.0:
   dependencies:
     punycode "^1.4.1"
 
+traverse@~0.6.6:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137"
+
 trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"