Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Multiple fixes for type definition rendering. #306

Merged
merged 1 commit into from Nov 12, 2019
Merged

Multiple fixes for type definition rendering. #306

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 0 additions & 3 deletions src/apim.runtime.module.ts
View file
Open in desktop
Expand Up @@ -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";
Expand All @@ -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";
Expand Down Expand Up @@ -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);
Expand Down
42 changes: 0 additions & 42 deletions src/bindingHandlers/schemaobjecttype.ts
View file
Open in desktop

This file was deleted.

8 changes: 4 additions & 4 deletions src/components/operations/operation-details/ko/runtime/operation-details.html
View file
Open in desktop
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
36 changes: 32 additions & 4 deletions src/components/operations/operation-details/ko/runtime/operation-details.ts
View file
Open in desktop
@@ -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" })
Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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 {
Expand Down
33 changes: 0 additions & 33 deletions src/components/operations/operation-details/ko/runtime/schema-details.html
View file
Open in desktop

This file was deleted.

45 changes: 0 additions & 45 deletions src/components/operations/operation-details/ko/runtime/schema-details.ts
View file
Open in desktop

This file was deleted.

65 changes: 34 additions & 31 deletions src/components/operations/operation-details/ko/runtime/type-definition.html
View file
Open in desktop
@@ -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">
Expand All @@ -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>
Expand All @@ -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">
Expand All @@ -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>
Expand Down