feat: Add new tab with message binding to channel documentation and add header and message binding example to example tab

Author: sam0r040

src/app/channels/channel-main/channel-main.component.html

@@ -7,21 +7,42 @@ <h4>{{ operation.message.description }}</h4>
     <mat-tab-group animationDuration="0ms">
       <mat-tab label="Example">
         <div fxLayout="column">
-          <textarea spellcheck="false"
-                    #exampleTextArea
-                    [rows]="exampleTextAreaLineCount"
-                    [value]="defaultExample?.value"
-                    (keyup)="recalculateLineCount('example', exampleTextArea.value)"
-          ></textarea>
+          <div *ngIf="isEmptyObject(operation.message.bindings.get(protocolName))" fxLayout="column" fxLayoutGap="5px">
+            <h4>Binding</h4>
+            <textarea spellcheck="false"
+                      #bindingTextArea
+                      [rows]="messageBindingExampleTextAreaLineCount"
+                      [value]="createMessageBindingExample(operation.message.bindings.get(protocolName))?.value"
+                      (keyup)="recalculateLineCount('massageBindingExample', bindingTextArea.value)"
+            ></textarea>
+          </div>
+          <div *ngIf="headers" fxLayout="column" fxLayoutGap="0px">
+            <h4>Header</h4>
+            <textarea spellcheck="false"
+                      #headersTextArea
+                      [rows]="headersTextAreaLineCount"
+                      [value]="headersExample?.value"
+                      (keyup)="recalculateLineCount('headers', headersTextArea.value)"
+            ></textarea>
+          </div>
+          <div fxLayout="column" fxLayoutGap="5px">
+            <h4>Message</h4>
+            <textarea spellcheck="false"
+                      #messageTextArea
+                      [rows]="exampleTextAreaLineCount"
+                      [value]="defaultExample?.value"
+                      (keyup)="recalculateLineCount('example', messageTextArea.value)"
+            ></textarea>
+          </div>
           <div fxLayout fxLayoutGap="8px">
-            <button mat-raised-button color="primary" (click)="publish(exampleTextArea.value, headersTextArea.value)">
+            <button mat-raised-button color="primary" (click)="publish(messageTextArea.value, headersTextArea?.value)">
               Publish
             </button>
             <button mat-raised-button color="primary"
-                    (click)="exampleTextArea.value = defaultExample.value; exampleTextAreaLineCount=defaultExample.lineCount">
+                    (click)="messageTextArea.value = defaultExample.value; exampleTextAreaLineCount=defaultExample.lineCount">
               Default
             </button>
-            <button mat-raised-button color="primary" [cdkCopyToClipboard]="exampleTextArea.value">Copy</button>
+            <button mat-raised-button color="primary" [cdkCopyToClipboard]="messageTextArea.value">Copy</button>
           </div>
         </div>
       </mat-tab>
@@ -43,16 +64,14 @@ <h4>
         </h4>
         <app-schema *ngIf="headers" [schema]="headers"></app-schema>
         <div fxLayout="column">
-          <textarea spellcheck="false"
-                    #headersTextArea
-                    [rows]="headersTextAreaLineCount"
-                    [value]="headersExample?.value"
-                    (keyup)="recalculateLineCount('headers', headersTextArea.value)"
-          ></textarea>
+          <app-json [json]="headersExample?.value"></app-json>
         </div>
       </mat-tab>
-      <mat-tab label="Bindings">
+      <mat-tab label="Operation Bindings">
         <app-json [data]="operation.bindings[protocolName]"></app-json>
       </mat-tab>
+      <mat-tab label="Message Bindings">
+        <app-json [data]="operation.message.bindings.get(protocolName)"></app-json>
+      </mat-tab>
     </mat-tab-group>
 </section>

src/app/channels/channel-main/channel-main.component.ts

@@ -4,7 +4,7 @@ import { Example } from 'src/app/shared/models/example.model';
 import { Schema } from 'src/app/shared/models/schema.model';
 import { PublisherService } from 'src/app/shared/publisher.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { Operation } from 'src/app/shared/models/channel.model';
+import {MessageBinding, Operation} from 'src/app/shared/models/channel.model';
 import { STATUS } from 'angular-in-memory-web-api';
 
 @Component({
@@ -27,6 +27,9 @@ export class ChannelMainComponent implements OnInit {
   headersExample: Example;
   headersTextAreaLineCount: number;
   protocolName: string;
+  messageBindingExample?: Example;
+  messageBindingExampleTextAreaLineCount: number;
+  headersTextArea?: HTMLTextAreaElement;
 
   constructor(
     private asyncApiService: AsyncApiService,
@@ -38,47 +41,82 @@ export class ChannelMainComponent implements OnInit {
   ngOnInit(): void {
     this.asyncApiService.getAsyncApi().subscribe(
       asyncapi => {
-        let schemas: Map<string, Schema> = asyncapi.components.schemas;
-        this.schemaName = this.operation.message.payload.name.slice(this.operation.message.payload.name.lastIndexOf('/') + 1)
+        const schemas: Map<string, Schema> = asyncapi.components.schemas;
+        this.schemaName = this.operation.message.payload.name.slice(this.operation.message.payload.name.lastIndexOf('/') + 1);
         this.schema = schemas.get(this.schemaName);
 
         this.defaultExample = this.schema.example;
         this.exampleTextAreaLineCount = this.defaultExample?.lineCount || 0;
 
-        this.headersSchemaName = this.operation.message.headers.name.slice(this.operation.message.headers.name.lastIndexOf('/') + 1)
+        this.headersSchemaName = this.operation.message.headers.name.slice(this.operation.message.headers.name.lastIndexOf('/') + 1);
         this.headers = schemas.get(this.headersSchemaName);
         this.headersExample = this.headers.example;
         this.headersTextAreaLineCount = this.headersExample?.lineCount || 0;
+        this.messageBindingExampleTextAreaLineCount = this.messageBindingExample?.lineCount || 0;
       }
     );
 
     this.protocolName = Object.keys(this.operation.bindings)[0];
   }
 
+  isEmptyObject(object?: any): boolean {
+    return (object === undefined || object === null) || Object.keys(object).length > 0;
+  }
+
+  createMessageBindingExample(messageBinding?: MessageBinding): Example | undefined {
+    if (messageBinding === undefined || messageBinding === null) {
+      return undefined;
+    }
+
+    const bindingExampleObject = {};
+    Object.keys(messageBinding).forEach((bindingKey) => {
+      if (bindingKey !== 'bindingVersion') {
+        bindingExampleObject[bindingKey] = this.getExampleValue(messageBinding[bindingKey]);
+      }
+    });
+
+    const bindingExample = new Example(bindingExampleObject);
+
+    this.messageBindingExampleTextAreaLineCount = bindingExample.lineCount;
+
+    return bindingExample;
+  }
+
+  getExampleValue(bindingValue: string | Schema): any {
+    if (typeof bindingValue === 'string') {
+      return bindingValue;
+    } else {
+      return bindingValue.example.value;
+    }
+  }
+
   recalculateLineCount(field: string, text: string): void {
     switch (field) {
       case 'example':
         this.exampleTextAreaLineCount = text.split('\n').length;
         break;
       case 'headers':
-        this.headersTextAreaLineCount = text.split('\n').length
+        this.headersTextAreaLineCount = text.split('\n').length;
+        break;
+      case 'massageBindingExample':
+        this.messageBindingExampleTextAreaLineCount = text.split('\n').length;
         break;
     }
   }
 
-  publish(example: string, headers: string): void {
+  publish(example: string, headers?: string): void {
     try {
       const payloadJson = JSON.parse(example);
-      const headersJson = JSON.parse(headers)
+      const headersJson = JSON.parse(headers);
 
       this.publisherService.publish(this.protocolName, this.channelName, payloadJson, headersJson).subscribe(
         _ => this.handlePublishSuccess(),
         err => this.handlePublishError(err)
       );
-    } catch(error) {
+    } catch (error) {
       this.snackBar.open('Example payload is not valid', 'ERROR', {
         duration: 3000
-      })
+      });
     }
   }
 

src/app/shared/asyncapi-mapper.service.ts

@@ -1,10 +1,10 @@
-import { AsyncApi } from './models/asyncapi.model';
-import { Server } from './models/server.model';
-import {Channel, CHANNEL_ANCHOR_PREFIX, Message, Operation, OperationType} from './models/channel.model';
-import { Schema } from './models/schema.model';
-import { Injectable } from '@angular/core';
-import {Example} from "./models/example.model";
-import {Info} from "./models/info.model";
+import {AsyncApi} from './models/asyncapi.model';
+import {Server} from './models/server.model';
+import {Channel, CHANNEL_ANCHOR_PREFIX, Message, MessageBinding, Operation, OperationType} from './models/channel.model';
+import {Schema} from './models/schema.model';
+import {Injectable} from '@angular/core';
+import {Example} from './models/example.model';
+import {Info} from './models/info.model';
 
 interface ServerAsyncApiSchema {
   description?: string;
@@ -26,6 +26,10 @@ interface ServerAsyncApiMessage {
   description?: string;
   payload: { $ref: string };
   headers: { $ref: string };
+  bindings: {[key: string]: ServerAsyncApiMessageBinding};
+}
+interface ServerAsyncApiMessageBinding {
+  [key: string]: ServerAsyncApiSchema | string;
 }
 
 interface ServerAsyncApiInfo {
@@ -64,7 +68,7 @@ export interface ServerAsyncApi {
 
 @Injectable()
 export class AsyncApiMapperService {
-    static BASE_URL = window.location.pathname + window.location.search + "#";
+    static BASE_URL = window.location.pathname + window.location.search + '#';
 
     constructor() {
     }
@@ -89,49 +93,52 @@ export class AsyncApiMapperService {
       };
     }
 
-    private mapServers(servers: ServerAsyncApi["servers"]): Map<string, Server> {
+    private mapServers(servers: ServerAsyncApi['servers']): Map<string, Server> {
         const s = new Map<string, Server>();
         Object.entries(servers).forEach(([k, v]) => s.set(k, v));
         return s;
     }
 
-    private mapChannels(channels: ServerAsyncApi["channels"]): Channel[] {
+    private mapChannels(channels: ServerAsyncApi['channels']): Channel[] {
         const s = new Array<Channel>();
         Object.entries(channels).forEach(([k, v]) => {
-            const subscriberChannels = this.mapChannel(k, v.description, v.subscribe, "subscribe")
-            subscriberChannels.forEach(channel => s.push(channel))
+            const subscriberChannels = this.mapChannel(k, v.description, v.subscribe, 'subscribe');
+            subscriberChannels.forEach(channel => s.push(channel));
 
-            const publisherChannels = this.mapChannel(k, v.description, v.publish, "publish")
-            publisherChannels.forEach(channel => s.push(channel))
+            const publisherChannels = this.mapChannel(k, v.description, v.publish, 'publish');
+            publisherChannels.forEach(channel => s.push(channel));
         });
         return s;
     }
 
     private mapChannel(
         topicName: string,
-        description: ServerAsyncApi["channels"][""]["description"],
-        serverOperation: ServerAsyncApi["channels"][""]["subscribe"] | ServerAsyncApi["channels"][""]["publish"],
-        operationType: OperationType): Channel[]
+        description: ServerAsyncApi['channels']['']['description'],
+        serverOperation: ServerAsyncApi['channels']['']['subscribe'] | ServerAsyncApi['channels']['']['publish'],
+        operationType: OperationType
+    ): Channel[]
     {
-        if(serverOperation !== undefined) {
-            let messages: Message[] = this.mapMessages(serverOperation.message)
+        if (serverOperation !== undefined) {
+            const messages: Message[] = this.mapMessages(serverOperation.message);
 
             return messages.map(message => {
-                const operation = this.mapOperation(operationType, message, serverOperation.bindings)
+                const operation = this.mapOperation(operationType, message, serverOperation.bindings);
                 return {
                     name: topicName,
-                    anchorIdentifier: CHANNEL_ANCHOR_PREFIX + [operation.protocol, topicName, operation.operation, operation.message.title].join( "-"),
-                    description: description,
-                    operation: operation,
-                }
-            })
+                    anchorIdentifier: CHANNEL_ANCHOR_PREFIX + [
+                      operation.protocol, topicName, operation.operation, operation.message.title
+                    ].join( '-'),
+                    description,
+                    operation,
+                };
+            });
         }
         return [];
     }
 
     private mapMessages(message: ServerAsyncApiChannelMessage): Message[] {
-      if('oneOf' in message) {
-        return this.mapServerAsyncApiMessages(message.oneOf)
+      if ('oneOf' in message) {
+        return this.mapServerAsyncApiMessages(message.oneOf);
       }
       return this.mapServerAsyncApiMessages([message]);
     }
@@ -144,23 +151,50 @@ export class AsyncApiMapperService {
           description: v.description,
           payload: {
             name: v.payload.$ref,
-            anchorUrl: AsyncApiMapperService.BASE_URL  +v.payload.$ref?.split('/')?.pop()
+            anchorUrl: AsyncApiMapperService.BASE_URL  + v.payload.$ref?.split('/')?.pop()
           },
           headers: {
             name: v.headers.$ref,
             anchorUrl: AsyncApiMapperService.BASE_URL + v.headers.$ref?.split('/')?.pop()
-          }
-        }
-      })
+          },
+          bindings: this.mapServerAsyncApiMessageBindings(v.bindings)
+        };
+      });
     }
 
-    private mapOperation(operationType: OperationType, message: Message, bindings?: any): Operation {
+  private mapServerAsyncApiMessageBindings(
+    serverMessageBindings: { [type: string]: ServerAsyncApiMessageBinding }
+  ): Map<string, MessageBinding> {
+      const messageBindings = new Map<string, MessageBinding>();
+      Object.keys(serverMessageBindings).forEach((protocol) => {
+        messageBindings.set(protocol, this.mapServerAsyncApiMessageBinding(serverMessageBindings[protocol]));
+      });
+      return messageBindings;
+  }
+
+  private mapServerAsyncApiMessageBinding(serverMessageBinding: ServerAsyncApiMessageBinding): MessageBinding {
+      const messageBinding: MessageBinding = {};
+
+      Object.keys(serverMessageBinding).forEach((key) => {
+        const value = serverMessageBinding[key];
+        if (typeof value === 'object') {
+          messageBinding[key] = this.mapSchema('MessageBinding', value);
+        } else {
+          messageBinding[key] = value;
+        }
+      });
+
+      return messageBinding;
+  }
+
+
+  private mapOperation(operationType: OperationType, message: Message, bindings?: any): Operation {
         return {
             protocol: this.getProtocol(bindings),
             operation: operationType,
-            message: message,
-            bindings: bindings
-        }
+            message,
+            bindings
+        };
     }
 
     private getProtocol(bindings?: any): string {
@@ -184,12 +218,12 @@ export class AsyncApiMapperService {
         anchorIdentifier: '#' + schemaName,
         anchorUrl: anchorUrl,
         type: schema.type,
-        items: items,
+        items,
         format: schema.format,
         enum: schema.enum,
-        properties: properties,
+        properties,
         required: schema.required,
-        example: example,
-      }
+        example,
+      };
     }
 }

src/app/shared/components/json/json.component.ts

@@ -12,10 +12,10 @@ import { Component, OnInit, Input } from '@angular/core';
 export class JsonComponent implements OnInit {
 
   @Input() data: any;
-  json: string;
+  @Input() json: string;
 
   ngOnInit(): void {
-    this.json = JSON.stringify(this.data, null, 2);
+    this.json = this.json === undefined ? JSON.stringify(this.data, null, 2) : this.json;
   }
 
 }