Add display of description, examples and required fields

DmitriButorchin · stavshamir · commit 4ea49d5eb1d8 · 2022-05-23T09:14:08.000+03:00
springwolf/springwolf-core#35
diff --git a/build.gradle b/build.gradle
@@ -6,7 +6,7 @@ plugins {
 }
 
 group = 'io.github.springwolf'
-version = '0.4.0' + (Boolean.valueOf(System.getProperty('snapshot')) ? '-SNAPSHOT' : '')
+version = '0.5.0' + (Boolean.valueOf(System.getProperty('snapshot')) ? '-SNAPSHOT' : '')
 sourceCompatibility = '1.8'
 
 node {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -19,6 +19,7 @@ import { AsyncApiService } from './shared/asyncapi.service';
 import { MockServer } from './shared/mock-server';
 import { PublisherService } from './shared/publisher.service';
 import { FormsModule } from '@angular/forms';
+import { JsonComponent } from './shared/components/json/json.component';
 
 @NgModule({
   declarations: [
@@ -30,6 +31,7 @@ import { FormsModule } from '@angular/forms';
     ChannelMainComponent,
     SchemasComponent,
     SchemaComponent,
+    JsonComponent,
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/channels/channel-main/channel-main.component.css b/src/app/channels/channel-main/channel-main.component.css
@@ -1,7 +1,6 @@
 textarea {
     margin-top: 16px;
     padding: 8px;
-    width: 99%;
     border-radius: 4px;
     border-width: 0;
     line-height: 24px;
diff --git a/src/app/channels/channel-main/channel-main.component.html b/src/app/channels/channel-main/channel-main.component.html
@@ -2,26 +2,32 @@
     <mat-divider></mat-divider>
     <mat-tab-group animationDuration="0ms">
       <mat-tab label="Example">
-            <textarea spellcheck="false" #exampleTextArea [rows]="exampleTextAreaLineCount"
-                      [value]="defaultExample?.value" (keyup)="recalculateLineCount(exampleTextArea.value)"></textarea>
-        <div fxLayout fxLayoutGap="8px">
-          <button mat-raised-button color="primary" (click)="publish(exampleTextArea.value)">
-            Publish
-          </button>
-          <button mat-raised-button color="primary"
-                  (click)="exampleTextArea.value = defaultExample.value; exampleTextAreaLineCount=defaultExample.lineCount">
-            Default
-          </button>
-          <button mat-raised-button color="primary" [cdkCopyToClipboard]="exampleTextArea.value">Copy</button>
+        <div fxLayout="column">
+          <textarea spellcheck="false"
+                    #exampleTextArea
+                    [rows]="exampleTextAreaLineCount"
+                    [value]="defaultExample?.value"
+                    (keyup)="recalculateLineCount(exampleTextArea.value)"
+          ></textarea>
+          <div fxLayout fxLayoutGap="8px">
+            <button mat-raised-button color="primary" (click)="publish(exampleTextArea.value)">
+              Publish
+            </button>
+            <button mat-raised-button color="primary"
+                    (click)="exampleTextArea.value = defaultExample.value; exampleTextAreaLineCount=defaultExample.lineCount">
+              Default
+            </button>
+            <button mat-raised-button color="primary" [cdkCopyToClipboard]="exampleTextArea.value">Copy</button>
+          </div>
         </div>
       </mat-tab>
       <mat-tab label="Schema">
         <h4>{{ operation.message.title }} </h4>
         <div class="payload-name">{{ operation.message.name }}</div>
-        <app-schema *ngIf="schema" [schema]="schema" [root]="schemaRoot"></app-schema>
+        <app-schema *ngIf="schema" [schema]="schema"></app-schema>
       </mat-tab>
       <mat-tab label="Bindings">
-        <app-schema [schema]="operation.bindings" [root]="protocolName"></app-schema>
+        <app-json [data]="operation.bindings[protocolName]"></app-json>
       </mat-tab>
     </mat-tab-group>
 </section>
diff --git a/src/app/channels/channel-main/channel-main.component.ts b/src/app/channels/channel-main/channel-main.component.ts
@@ -22,7 +22,6 @@ export class ChannelMainComponent implements OnInit {
   schema: Schema;
   defaultExample: Example;
   exampleTextAreaLineCount: number;
-  schemaRoot = "properties";
   protocolName: string;
   nameSubscription: Subscription;
 
@@ -36,8 +35,8 @@ export class ChannelMainComponent implements OnInit {
     this.asyncApiService.getAsyncApis().subscribe(
       asyncapi => {
         let schemas: Map<string, Schema> = asyncapi.get(this.docName).components.schemas;
-        this.schema = schemas.get(this.operation.message.title);
-        this.defaultExample = this.schema.example;
+        this.schema = schemas[this.operation.message.title];
+        this.defaultExample = new Example(this.schema.example);
         this.exampleTextAreaLineCount = this.defaultExample.lineCount;
       }
     );
diff --git a/src/app/schemas/schema/schema.component.css b/src/app/schemas/schema/schema.component.css
@@ -0,0 +1,21 @@
+.schema {
+  font-weight: 500;
+}
+
+.key {
+  width: 12em;
+  vertical-align: top;
+}
+
+.required {
+  color: red;
+}
+
+.type {
+  color: #55A;
+}
+
+.example {
+  color: #6B6B6B;
+  font-style: italic;
+}
diff --git a/src/app/schemas/schema/schema.component.html b/src/app/schemas/schema/schema.component.html
@@ -0,0 +1,21 @@
+<table class="schema">
+  <tbody>
+  <tr *ngFor="let property of schema.properties | keyvalue">
+    <td class="key">
+      {{ property.key }}
+      <span class="required" *ngIf="schema.required?.includes(property.key)">*</span>
+    </td>
+    <td>
+      <span class="type" *ngIf="property.value.type">{{ property.value.type }}</span>
+      <span class="type" *ngIf="property.value['$ref']">
+        <a [href]="'#' + property.value['$ref'].split('/').pop()">{{ property.value['$ref'] }}</a>
+      </span>
+      <span class="format" *ngIf="property.value.format">({{ property.value.format }})</span>
+      <div class="description">{{ property.value.description }}</div>
+      <span class="example" *ngIf="property.value.example">example: {{ property.value.example }}</span>
+      <mat-select *ngIf="property.value.enum" placeholder="Enum">
+        <mat-option *ngFor="let enum of property.value.enum" [value]="enum">{{ enum }}</mat-option>
+      </mat-select>
+    </td>
+  </tbody>
+</table>
diff --git a/src/app/schemas/schema/schema.component.ts b/src/app/schemas/schema/schema.component.ts
@@ -1,24 +1,13 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { Schema } from 'src/app/shared/models/schema.model';
 
 @Component({
   selector: 'app-schema',
-  template: '<pre><code [highlight]="json"></code></pre>',
-  styles: [`code {
-    margin-top: 16px;
-    padding: 8px;
-    border-radius: 4px;
-  }`]
+  templateUrl: './schema.component.html',
+  styleUrls: ['./schema.component.css']
 })
-export class SchemaComponent implements OnInit {
+export class SchemaComponent {
 
-  @Input() root: string;
-  @Input() schema: any;
-  json: string;
-
-  constructor() { }
-
-  ngOnInit(): void {
-    this.json = JSON.stringify(this.schema[this.root], null, 2);
-  }
+  @Input() schema: Schema;
 
 }
diff --git a/src/app/schemas/schemas.component.css b/src/app/schemas/schemas.component.css
@@ -0,0 +1,3 @@
+h3 {
+  margin: 0;
+}
diff --git a/src/app/schemas/schemas.component.html b/src/app/schemas/schemas.component.html
@@ -1,11 +1,14 @@
 <h1>Schemas</h1>
 <mat-accordion>
-    <mat-expansion-panel *ngFor="let schema of schemas | keyvalue">
+    <mat-expansion-panel *ngFor="let schema of schemas | keyvalue" [id]="schema.key">
         <mat-expansion-panel-header>
             <mat-panel-title>
                 <h3>{{ schema.key }}</h3>
             </mat-panel-title>
+            <mat-panel-description>
+                {{ schema.value.description }}
+            </mat-panel-description>
         </mat-expansion-panel-header>
-        <app-schema [schema]="schema?.value" [root]="schemaRoot"></app-schema>
+        <app-schema [schema]="schema?.value"></app-schema>
     </mat-expansion-panel>
 </mat-accordion>
diff --git a/src/app/schemas/schemas.component.ts b/src/app/schemas/schemas.component.ts
@@ -12,7 +12,6 @@ export class SchemasComponent implements OnInit {
 
 
   schemas: Map<string, Schema>;
-  schemaRoot = "properties";
   nameSubscription: Subscription;
 
   constructor(private asyncApiService: AsyncApiService) { }
diff --git a/src/app/shared/asyncapi.service.ts b/src/app/shared/asyncapi.service.ts
@@ -2,7 +2,6 @@ import { AsyncApi } from './models/asyncapi.model';
 import { Server } from './models/server.model';
 import { Channel, Message, Operation } from './models/channel.model';
 import { Schema } from './models/schema.model';
-import { Example } from './models/example.model';
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable, of, Subject } from 'rxjs';
@@ -33,13 +32,7 @@ interface ServerAsyncApi {
         };
     };
     components: {
-        schemas: {
-            [key: string]: {
-                type: string;
-                properties: object;
-                example: object;
-            };
-        };
+        schemas: Map<string, Schema>;
     };
 }
 
@@ -84,7 +77,7 @@ export class AsyncApiService {
             servers: this.mapServers(item.servers),
             channels: this.mapChannels(item.channels),
             components: {
-                schemas: this.mapSchemas(item.components.schemas)
+                schemas: item.components.schemas
             }
         };
     }
@@ -135,14 +128,4 @@ export class AsyncApiService {
         return Object.keys(bindings)[0];
     }
 
-    mapSchemas(schemas: { [key: string]: { type: string; properties: object; example: object; } }): Map<string, Schema> {
-        const s = new Map<string, Schema>();
-        Object.entries(schemas).forEach(([k, v]) => s.set(k, {
-            type: v.type,
-            properties: v.properties,
-            example: new Example(v.example)
-        }));
-        return s;
-    }
-
 }
diff --git a/src/app/shared/components/json/json.component.ts b/src/app/shared/components/json/json.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-json',
+  template: '<pre><code [highlight]="json"></code></pre>',
+  styles: [`code {
+    margin-top: 16px;
+    padding: 8px;
+    border-radius: 4px;
+  }`]
+})
+export class JsonComponent implements OnInit {
+
+  @Input() data: any;
+  json: string;
+
+  ngOnInit(): void {
+    this.json = JSON.stringify(this.data, null, 2);
+  }
+
+}
diff --git a/src/app/shared/mock.json b/src/app/shared/mock.json
@@ -77,37 +77,44 @@
     "components": {
       "schemas": {
         "ExamplePayloadDto": {
+          "description": "Example payload model",
           "type": "object",
           "properties": {
             "someString": {
-              "type": "string"
+              "description": "some string field",
+              "type": "string",
+              "example": "string"
             },
             "someLong": {
+              "description": "some long field",
               "type": "integer",
-              "format": "int64"
+              "format": "int64",
+              "example": 0
             },
             "someEnum": {
+              "description": "some enum field",
               "type": "string",
-              "enum": [
-                "FOO1",
-                "FOO2",
-                "FOO3"
-              ]
+              "enum": ["FOO1", "FOO2", "FOO3"],
+              "example": "FOO1"
             }
           },
           "example": {
             "someString": "string",
             "someLong": 0,
             "someEnum": "FOO1"
-          }
+          },
+          "required": ["someString", "someEnum"]
         },
         "AnotherPayloadDto": {
+          "description": "Another payload model",
           "type": "object",
           "properties": {
             "foo": {
+              "description": "foo field",
               "type": "string"
             },
             "example": {
+              "description": "example field",
               "$ref": "#/components/schemas/ExamplePayloadDto"
             }
           },
diff --git a/src/app/shared/models/schema.model.ts b/src/app/shared/models/schema.model.ts
@@ -1,7 +1,9 @@
 import { Example } from './example.model';
 
 export interface Schema {
+    description?: String;
     type: String;
-    properties: object;
+    properties: Map<string, Schema>;
     example: Example;
+    required?: string[];
 }

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ plugins {`
`6`	`6`	`}`
`7`	`7`
`8`	`8`	`group = 'io.github.springwolf'`
`9`		`-version = '0.4.0' + (Boolean.valueOf(System.getProperty('snapshot')) ? '-SNAPSHOT' : '')`
	`9`	`+version = '0.5.0' + (Boolean.valueOf(System.getProperty('snapshot')) ? '-SNAPSHOT' : '')`
`10`	`10`	`sourceCompatibility = '1.8'`
`11`	`11`
`12`	`12`	`node {`