addition of a properties table for the reference data-types to be able to understand more clearly the data-type.

front-end/studio/src/app/editor.module.ts

@@ -167,6 +167,7 @@ import {ExtensionRowComponent} from "./pages/apis/{apiId}/editor/_components/for
 import {JsonSummaryComponent} from "./components/common/json-summary.component";
 import {InlineJsonEditorComponent} from "./pages/apis/{apiId}/editor/_components/common/inline-json-editor.component";
 import {AddExtensionDialogComponent} from "./pages/apis/{apiId}/editor/_components/dialogs/add-extension.component";
+import {ReferencePropertiesSectionComponent} from "./pages/apis/{apiId}/editor/_components/forms/definition/reference-properties-section.component";
 
 @NgModule({
     imports: [
@@ -194,7 +195,7 @@ import {AddExtensionDialogComponent} from "./pages/apis/{apiId}/editor/_componen
         SecuritySchemesSectionComponent, AaiSecuritySchemesSectionComponent, PathParamsSectionComponent, QueryParamsSectionComponent, PathParamRowComponent,
         PfInlineTextEditorComponent, TagRowComponent, AaiServerEditorComponent, ServerEditorComponent, AaiServerRowComponent, ServerRowComponent, EntityEditorComponent,
         InlineArrayEditorComponent, SecuritySchemeRowComponent, SecuritySchemeEditorComponent, DataTypeEditorComponent,
-        DefinitionInfoSectionComponent, RenamePathDialogComponent, CounterComponent, ResponsesSectionComponent,
+        DefinitionInfoSectionComponent, RenamePathDialogComponent, CounterComponent, ResponsesSectionComponent, ReferencePropertiesSectionComponent,
         InlineExampleEditorComponent, DefinitionExampleSectionComponent, PropertyEditorComponent, HeaderParamRowComponent,
         HeaderParamsSectionComponent, OperationsSectionComponent, ChannelOperationsSectionComponent, MediaTypeRowComponent,
         HeaderRowComponent, CollaboratorAggregateComponent, CollaboratorOverlayComponent, CookieParamsSectionComponent, CookieParamRowComponent,

front-end/studio/src/app/pages/apis/{apiId}/editor/_components/forms/definition-form.component.html

@@ -136,13 +136,24 @@
                         <em><a [href]="refLink()" target="_blank"><span class="fa fa-fw fa-external-link"></span>{{ definition.$ref }}</a></em>
                     </div>
                 </section>
+
+
+
+                 <!-- Object Type : Properties -->
+                 <reference-properties-section [definition]="extractPropertiesDefinition()" *ngIf="isObject()"></reference-properties-section>
+
+
                 <!-- Reference Details -->
-                <section type="dtReferenceDetails" label="REFERENCE DETAILS"
+                 <section type="dtReferenceDetails" label="REFERENCE DETAILS"
                          contextHelp="This section shows details about the externally referenced Data Type.">
                     <div body>
                         <pre>{{ referenceContent() }}</pre>
                     </div>
                 </section>
+
+
+
+
             </div>
         </div>
     </div>

front-end/studio/src/app/pages/apis/{apiId}/editor/_components/forms/definition-form.component.ts

@@ -37,6 +37,10 @@ import {
     SimplifiedType,
     TraverserDirection,
     VisitorUtil,
+    Node,
+    Oas30Schema,
+    Schema,
+    SimplifiedPropertyType,
 } from "@apicurio/data-models";
 
 import {SourceFormComponent} from "./source-form.base";
@@ -71,6 +75,8 @@ export class DefinitionFormComponent extends SourceFormComponent<OasSchema> {
 
     private _stype: SimplifiedType = null;
 
+    private currentPart : string = "payload";
+
     private _definition: Oas20SchemaDefinition | Oas30SchemaDefinition;
     @Input()
     set definition(definition: Oas20SchemaDefinition | Oas30SchemaDefinition) {
@@ -251,13 +257,39 @@ export class DefinitionFormComponent extends SourceFormComponent<OasSchema> {
                 let fragment: string = this.definition.$ref.substring(hashIdx+1);
                 content = ReferenceUtil.resolveFragmentFromJS(content, fragment);
                 if (content) {
-                    return JSON.stringify(content, null, 3);
+                   return JSON.stringify(content, null, 3);
                 }
             }
         }
         return "Content not available.";
     }
 
+    extractPropertiesDefinition(): Oas30Schema {
+
+        let ret: Oas30Schema;
+        let newJsObject: any;
+
+        if(this.referenceContent()=="Content not available."){
+            ret = null;
+            return ret;
+        }else{
+            newJsObject = JSON.parse(this.referenceContent()); 
+            let node: Node = this.createEmptyNodeForSource();
+            Library.readNode(newJsObject, node);
+            let temp: any = node;
+            ret = temp;
+            return ret;
+        }
+    }
+
+    isRefProperties() : boolean{
+        let  object : boolean = this.definition.type == "object" || this.definition.type == null || this.definition.type == undefined;
+        let property : boolean = this.extractPropertiesDefinition()!=null;
+        return object && property;
+
+    }
+
+
     refLink(): string {
         if (this.definition.$ref && this.definition.$ref.startsWith("apicurio:")) {
             let currentUrl: string = window.location.href;
@@ -277,4 +309,12 @@ export class DefinitionFormComponent extends SourceFormComponent<OasSchema> {
         return this.definition.$ref.substring(colonIdx + 1, hashIdx);
     }
 
+
+    public isPartActive(part: string): boolean {
+        return this.currentPart === part;
+    }
+
+    public setActivePart(part: string): void {
+        this.currentPart = part;
+    }
 }

front-end/studio/src/app/pages/apis/{apiId}/editor/_components/forms/definition/reference-properties-section.component.html

@@ -0,0 +1,39 @@
+<section type="properties" label="VIEW"
+         contextHelp="Use this section to define the properties that make up this data type."
+         [counterItems]="properties()"
+         [collaborationNodePath]="propertiesNodePath()"
+         [validationModels]="properties()">
+
+    <div body *ngIf="hasProperties()">
+
+
+
+        <table class="table table-striped table-bordered table-examples">
+            <thead>
+            <tr>
+                <th>Name</th>
+                <th class="pre-actions">Type</th>
+                <th class="pre-actions">Example</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr *ngFor="let property of properties()">
+                <td class="name">
+                    <span>{{ property._propertyName}}</span>
+                </td>
+                <td class="payloadValue pre-actions">
+                    <span *ngIf="!property.enum_ && property.type!='array'">{{ property.type }}</span>
+                    <span *ngIf="property.enum_ && property.enum_.length">enum of {{ property.type }}</span>
+                    <span *ngIf="property.$ref">{{ property.$ref }}</span>
+                    <span *ngIf="property.type=='array' &&property.items.$ref">array of {{ property.items.$ref }}</span>
+                    <span *ngIf="property.type=='array' &&property.items.type">array of {{ property.items.type }}</span>
+                </td>
+                <td class="payloadHeaders pre-actions">
+                    <span>{{ property.example }}</span>
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+</section>
+

front-end/studio/src/app/pages/apis/{apiId}/editor/_components/forms/definition/reference-properties-section.component.ts

@@ -0,0 +1,129 @@
+/**
+ * @license
+ * Copyright 2019 JBoss Inc
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    Input,
+    ViewChild,
+    ViewEncapsulation
+} from "@angular/core";
+import {Oas20Schema, Oas30Schema,
+    OasSchema,
+    Schema
+} from "@apicurio/data-models";
+import {CommandService} from "../../../_services/command.service";
+import {AbstractBaseComponent} from "../../common/base-component";
+import {DocumentService} from "../../../_services/document.service";
+import {SelectionService} from "../../../_services/selection.service";
+import {ModelUtils} from "../../../_util/model.util";
+import {EditorsService} from "../../../_services/editors.service";
+import {RenameEntityDialogComponent} from "../../dialogs/rename-entity.component";
+import Oas20PropertySchema = Oas20Schema.Oas20PropertySchema;
+import Oas30PropertySchema = Oas30Schema.Oas30PropertySchema;
+
+
+@Component({
+    selector: "reference-properties-section",
+    templateUrl: "reference-properties-section.component.html",
+    styleUrls: [ "properties-section.component.css" ],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ReferencePropertiesSectionComponent extends AbstractBaseComponent {
+
+    @Input() definition: Oas20Schema | Oas30Schema;
+
+    @ViewChild("renamePropertyDialog", { static: true }) renamePropertyDialog: RenameEntityDialogComponent;
+
+    _pconfigOpen: boolean = false;
+
+    _sorted: boolean = true;
+
+    /**
+     * C'tor.
+     * @param changeDetectorRef
+     * @param documentService
+     * @param commandService
+     * @param selectionService
+     * @param editors
+     */
+    constructor(private changeDetectorRef: ChangeDetectorRef, private documentService: DocumentService,
+                private commandService: CommandService, private selectionService: SelectionService,
+                private editors: EditorsService) {
+        super(changeDetectorRef, documentService, selectionService);
+    }
+
+    public hasProperties(): boolean {
+        return this.properties().length > 0;
+    }
+
+    public properties(): Schema[] {
+        let rval: Schema[] = [];
+
+        let sourceSchema: OasSchema = this.getPropertySourceSchema();
+        // let propertyNames: String[] = sourceSchema.getPropertyNames();
+        if(sourceSchema!= null){
+            if (this._sorted) {
+                sourceSchema.getPropertyNames().sort((left, right) => {
+                    return left.localeCompare(right)
+                }).forEach(name => rval.push(sourceSchema.getProperty(name)));
+            } else {
+                sourceSchema.getPropertyNames().forEach(name => rval.push(sourceSchema.getProperty(name)));
+            }
+        }
+
+        return rval;
+    }
+
+    public getPropertySourceSchema(): OasSchema {
+        let pschema: OasSchema = this.definition;
+
+        if (pschema != null && this.inheritanceType() != "none") {
+            let schemas: OasSchema[] = this.definition[this.inheritanceType()];
+            if (schemas) {
+                schemas.forEach(schema => {
+                    if (schema.type == "object") {
+                        pschema = schema;
+                    }
+                });
+            }
+        }
+
+        return pschema;
+    }
+
+    public propertiesNodePath(): string {
+        return ModelUtils.nodeToPath(this.getPropertySourceSchema()) + "/properties";
+    }
+
+    public inheritanceType(): string {
+        if (this.definition.allOf) {
+            return "allOf";
+        }
+        if (this.definition['anyOf']) {
+            return "anyOf";
+        }
+        if (this.definition['oneOf']) {
+            return "oneOf";
+        }
+
+        return "none";
+    }
+
+}