Multiple fixes for type definition rendering. (Azure#306)

src/apim.runtime.module.ts

@@ -2,7 +2,6 @@ import "./polyfills";
 import "./bindingHandlers/scrollintoview";
 import "./bindingHandlers/copyToClipboard";
 import "./bindingHandlers/syntaxHighlight";
-import "./bindingHandlers/schemaobjecttype";
 import "./bindingHandlers/markdown";
 import "./bindingHandlers/barChart";
 import "./bindingHandlers/mapChart";
@@ -28,7 +27,6 @@ import { ApiDetails } from "./components/apis/details-of-api/ko/runtime/api-deta
 import { ApiHistory } from "./components/apis/history-of-api/ko/runtime/api-history";
 import { OperationDetails } from "./components/operations/operation-details/ko/runtime/operation-details";
 import { OperationConsole } from "./components/operations/operation-details/ko/runtime/operation-console";
-import { SchemaDetails } from "./components/operations/operation-details/ko/runtime/schema-details";
 import { ProductService } from "./services/productService";
 import { FileInput } from "./components/file-input/file-input";
 import { MapiClient } from "./services/mapiClient";
@@ -82,7 +80,6 @@ export class ApimRuntimeModule implements IInjectorModule {
         injector.bind("apiHistory", ApiHistory);
         injector.bind("operationDetails", OperationDetails);
         injector.bind("operationConsole", OperationConsole);
-        injector.bind("schemaDetails", SchemaDetails);
         injector.bind("typeDefinition", TypeDefinitionViewModel);
         injector.bind("fileInput", FileInput);
         injector.bind("apiService", ApiService);

src/components/operations/operation-details/ko/runtime/operation-details.html

@@ -97,7 +97,7 @@ <h4>Request body</h4>
 
                 <div class="tab-content">
                     <!-- ko if: representation.typeName -->
-                    <type-definition params="{ representation: representation, apiName: $component.api().name, operationName: $component.operation().name, definition: $component.getDefinitionByTypeName(representation.typeName) }">
+                    <type-definition params="{ apiName: $component.api().name, operationName: $component.operation().name, definition: $component.getDefinitionForRepresentation(representation) }">
                     </type-definition>
                     <!-- /ko -->
                 </div>
@@ -113,15 +113,15 @@ <h3>Response: <span data-bind="text: response.statusCode"></span></h3>
             <!-- ko if: response.representations.length > 0 -->
             <div class="tabs" data-bind="foreach: { data: representations, as: 'representation' }">
                 <input class="tab-radio" type="radio"
-                    data-bind="attr : { id: response.identifier + representation.contentType, name: response.identifier, checked: $index() === 0 }">
+                    data-bind="attr: { id: response.identifier + representation.contentType, name: response.identifier, checked: $index() === 0 }">
 
                 <label class="tab-label"
-                    data-bind="attr : { for: response.identifier + representation.contentType }, text: representation.contentType"></label>
+                    data-bind="attr: { for: response.identifier + representation.contentType }, text: representation.contentType"></label>
 
                 <div class="tab-content">
                     <!-- ko if: representation.typeName -->
                     <type-definition
-                        params="{ representation: representation, apiName: $component.api().name, operationName: $component.operation().name, definition: $component.getDefinitionByTypeName(representation.typeName) }">
+                        params="{ apiName: $component.api().name, operationName: $component.operation().name, definition: $component.getDefinitionForRepresentation(representation) }">
                     </type-definition>
                     <!-- /ko -->
                 </div>

src/components/operations/operation-details/ko/runtime/operation-details.ts

@@ -1,14 +1,16 @@
+import { Representation } from "./../../../../../models/representation";
 import * as ko from "knockout";
 import template from "./operation-details.html";
 import { Router } from "@paperbits/common/routing";
 import { Component, RuntimeComponent, OnMounted, OnDestroyed } from "@paperbits/common/ko/decorators";
 import { Api } from "../../../../../models/api";
 import { Operation } from "../../../../../models/operation";
 import { ApiService } from "../../../../../services/apiService";
-import { TypeDefinition } from "./../../../../../models/schema";
+import { TypeDefinition } from "../../../../../models/typeDefinition";
 import { RouteHelper } from "../../../../../routing/routeHelper";
 import { TenantService } from "../../../../../services/tenantService";
 import { SwaggerObject } from "./../../../../../contracts/swaggerObject";
+import { Utils } from "../../../../../utils";
 
 
 @RuntimeComponent({ selector: "operation-details" })
@@ -131,7 +133,8 @@ export class OperationDetails {
         const schemaIds = [];
         const apiId = `apis/${this.selectedApiName()}/schemas`;
 
-        const prepresentations = operation.responses.map(response => response.representations)
+        const prepresentations = operation.responses
+            .map(response => response.representations)
             .concat(operation.request.representations)
             .flat();
 
@@ -181,8 +184,33 @@ export class OperationDetails {
         this.consoleIsOpen(false);
     }
 
-    public getDefinitionByTypeName(typeName: string): TypeDefinition {
-        return this.definitions().find(x => x.name === typeName);
+    public getDefinitionForRepresentation(representation: Representation): TypeDefinition {
+        const definition = this.definitions().find(x => x.name === representation.typeName);
+
+        if (!definition) {
+            // Fallback for the case when type is referenced, but not defined in schema.
+            return new TypeDefinition(representation.typeName, {});
+        }
+
+        if (!definition.name) {
+            definition.name = representation.typeName;
+        }
+
+        if (representation.sample) {
+            definition.example = representation.sample;
+
+            if (representation.contentType.contains("/xml")) {
+                definition.example = Utils.formatXml(representation.sample);
+                definition.exampleFormat = "xml";
+            }
+
+            if (representation.contentType.contains("/json")) {
+                definition.example = Utils.formatJson(representation.sample);
+                definition.exampleFormat = "json";
+            }
+        }
+
+        return definition;
     }
 
     public getDefinitionReferenceUrl(definition: TypeDefinition): string {

src/components/operations/operation-details/ko/runtime/type-definition.html

@@ -1,32 +1,33 @@
 <!-- ko if: $component.anchor -->
-<h4 class="text-word-break" data-bind="text: definition.name, attr: { id: $component.getReferenceId(definition) }">
+<h4 class="text-word-break" data-bind="text: $component.name, attr: { id: $component.getReferenceId(definition) }">
 </h4>
 <!-- /ko -->
 
 <!-- ko ifnot: $component.anchor -->
-<h4 class="text-word-break" data-bind="text: definition.name"></h4>
+<h4 class="text-word-break" data-bind="text: $component.name"></h4>
 <!-- /ko -->
 
-<!-- ko if: definition.description -->
-<p data-bind="markdown: definition.description"></p>
+<!-- ko if: $component.description -->
+<p data-bind="markdown: $component.description"></p>
 <!-- /ko -->
 
-<!-- ko if: definition.uiType === 'object' -->
+<!-- ko if: $component.kind() === 'object' -->
 <!-- ko template: { name: 'typeDefinitionObject', data: $component } -->
 <!-- /ko -->
 <!-- /ko -->
 
-<!-- ko if: definition.uiType === 'enum' -->
+<!-- ko if: $component.kind() === 'enum' -->
 <!-- ko template: { name: 'typeDefinitionEnum', data: $component } -->
 <!-- /ko -->
 <!-- /ko -->
 
-<!-- ko if: definition.uiType === 'array' -->
-<!-- ko template: { name: 'typeDefinitionArray', data: $component } -->
+<!-- ko if: $component.kind() === 'indexer' -->
+<!-- ko template: { name: 'typeDefinitionIndexer', data: $component } -->
 <!-- /ko -->
 <!-- /ko -->
 
 <template id="typeDefinitionObject">
+    <!-- ko if: definition.properties && definition.properties.length > 0 -->
     <div class="table">
         <div class="table-head">
             <div class="table-row">
@@ -38,23 +39,26 @@ <h4 class="text-word-break" data-bind="text: definition.name"></h4>
         </div>
         <div class="table-body" data-bind="foreach: { data: definition.properties, as: 'property' }">
             <div class="table-row">
-                <div class="col-3">
+                <div class="col-3 text-truncate">
                     <code data-bind="text: property.name"></code>
                 </div>
                 <div class="col-1" data-bind="text: property.required"></div>
-                <div class="col-1">
-                    <!-- ko if: property.referencedTypeName -->
-                    <a
-                        data-bind="text: property.referencedTypeName, attr: { href: $component.getReferenceUrl(property) }"></a>
+                <div class="col-1 text-truncate">
+                    <!-- ko if: property.type.isReference -->
+                    <a data-bind="text: property.type.name, attr: { href: $component.getReferenceUrl(property.type.name) }"></a>
                     <!-- /ko -->
-                    <!-- ko ifnot: property.referencedTypeName -->
-                    <code data-bind="text: property.type"></code>
+                    <!-- ko ifnot: property.type.isReference -->
+                    <code data-bind="text: property.type.name"></code>
+                    <!-- /ko -->
+                    <!-- ko if: property.type.isArray -->
+                    []
                     <!-- /ko -->
                 </div>
                 <div class="col-6" data-bind="markdown: property.description"></div>
             </div>
         </div>
     </div>
+    <!-- /ko -->
 
     <!-- ko if: $component.example -->
     <h5>Example</h5>
@@ -80,20 +84,20 @@ <h5>Example</h5>
                 <div class="col-11">Values</div>
             </div>
         </div>
-    </div>
-    <div class="table-body">
-        <div class="table-row">
-            <div class="col-1" data-bind="markdown: definition.type"></div>
-            <div class="col-11">
-                <!-- ko foreach: { data: definition.enum, as: 'value' } -->
-                <!-- ko if: $index() > 0 -->,
-                <!-- /ko --><code data-bind="text: value"></code><!-- /ko -->
+        <div class="table-body">
+            <div class="table-row">
+                <div class="col-1 text-truncate" data-bind="markdown: definition.type.name"></div>
+                <div class="col-11">
+                    <!-- ko foreach: { data: definition.enum, as: 'value' } -->
+                    <!-- ko if: $index() > 0 -->,
+                    <!-- /ko --><code data-bind="text: value"></code><!-- /ko -->
+                </div>
             </div>
         </div>
     </div>
 </template>
 
-<template id="typeDefinitionArray">
+<template id="typeDefinitionIndexer">
     <div class="table">
         <div class="table-head">
             <div class="table-row">
@@ -104,16 +108,15 @@ <h5>Example</h5>
         </div>
         <div class="table-body" data-bind="foreach: { data: definition.properties, as: 'property' }">
             <div class="table-row">
-                <div class="col-3">
+                <div class="col-3 text-truncate">
                     <code data-bind="text: property.name"></code>
                 </div>
-                <div class="col-1">
-                    <!-- ko if: property.referencedTypeName -->
-                    <a
-                        data-bind="text: property.referencedTypeName, attr: { href: $component.getReferenceUrl(property) }"></a>
+                <div class="col-1 text-truncate">
+                    <!-- ko if: property.type.name -->
+                    <a data-bind="text: property.type.name, attr: { href: $component.getReferenceUrl(property) }"></a>
                     <!-- /ko -->
-                    <!-- ko ifnot: property.referencedTypeName -->
-                    <code data-bind="text: property.type"></code>
+                    <!-- ko ifnot: property.type.name -->
+                    <code data-bind="text: property.type.name"></code>
                     <!-- /ko -->
                 </div>
                 <div class="col-8" data-bind="markdown: property.description"></div>