Add message binding to the request made by PublisherService so that the backend can use the message binding to construct a message

Author: sam0r040

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

@@ -33,3 +33,7 @@ button {
   padding: 6px;
   font-weight: normal;
 }
+
+[hidden] {
+  display: none !important;
+}

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

@@ -7,7 +7,7 @@ <h4>{{ operation.message.description }}</h4>
     <mat-tab-group animationDuration="0ms">
       <mat-tab label="Example">
         <div fxLayout="column">
-          <div *ngIf="isEmptyObject(operation.message.bindings.get(protocolName))" fxLayout="column" fxLayoutGap="5px">
+          <div [hidden]="isEmptyObject(operation.message.bindings.get(protocolName))" fxLayout="column" fxLayoutGap="5px">
             <h4>Binding</h4>
             <textarea spellcheck="false"
                       #bindingTextArea
@@ -16,14 +16,16 @@ <h4>Binding</h4>
                       (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 [hidden]="!(headersExample?.lineCount > 1)" 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>
@@ -35,11 +37,18 @@ <h4>Message</h4>
             ></textarea>
           </div>
           <div fxLayout fxLayoutGap="8px">
-            <button mat-raised-button color="primary" (click)="publish(messageTextArea.value, headersTextArea?.value)">
+            <button mat-raised-button color="primary"
+                    (click)="publish(messageTextArea.value, headersTextArea?.value, bindingTextArea?.value)">
               Publish
             </button>
             <button mat-raised-button color="primary"
-                    (click)="messageTextArea.value = defaultExample.value; exampleTextAreaLineCount=defaultExample.lineCount">
+                    (click)="
+                    messageTextArea.value = defaultExample.value;
+                    exampleTextAreaLineCount = defaultExample.lineCount || 0;
+                    headersTextArea.value = headersExample?.value;
+                    headersTextAreaLineCount = headersExample?.lineCount || 0;
+                    bindingTextArea.value = createMessageBindingExample(operation.message.bindings.get(protocolName))?.value;
+                    messageBindingExampleTextAreaLineCount = messageBindingExample?.lineCount || 0">
               Default
             </button>
             <button mat-raised-button color="primary" [cdkCopyToClipboard]="messageTextArea.value">Copy</button>

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

@@ -29,7 +29,6 @@ export class ChannelMainComponent implements OnInit {
   protocolName: string;
   messageBindingExample?: Example;
   messageBindingExampleTextAreaLineCount: number;
-  headersTextArea?: HTMLTextAreaElement;
 
   constructor(
     private asyncApiService: AsyncApiService,
@@ -60,7 +59,7 @@ export class ChannelMainComponent implements OnInit {
   }
 
   isEmptyObject(object?: any): boolean {
-    return (object === undefined || object === null) || Object.keys(object).length > 0;
+    return (object === undefined || object === null) || Object.keys(object).length === 0;
   }
 
   createMessageBindingExample(messageBinding?: MessageBinding): Example | undefined {
@@ -104,12 +103,13 @@ export class ChannelMainComponent implements OnInit {
     }
   }
 
-  publish(example: string, headers?: string): void {
+  publish(example: string, headers?: string, bindings?: string): void {
     try {
       const payloadJson = JSON.parse(example);
       const headersJson = JSON.parse(headers);
+      const bindingsJson = JSON.parse(bindings);
 
-      this.publisherService.publish(this.protocolName, this.channelName, payloadJson, headersJson).subscribe(
+      this.publisherService.publish(this.protocolName, this.channelName, payloadJson, headersJson, bindingsJson).subscribe(
         _ => this.handlePublishSuccess(),
         err => this.handlePublishError(err)
       );

src/app/shared/publisher.service.ts

@@ -1,17 +1,17 @@
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
 import {HttpClient, HttpParams} from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { Endpoints } from './endpoints';
+import {Observable} from 'rxjs';
+import {Endpoints} from './endpoints';
 
 @Injectable()
 export class PublisherService {
 
   constructor(private http: HttpClient) { }
 
-  publish(protocol: string, topic: string, payload: object, headers: object): Observable<unknown> {
+  publish(protocol: string, topic: string, payload: object, headers: object, bindings: object): Observable<unknown> {
     const url = Endpoints.getPublishEndpoint(protocol);
     const params = new HttpParams().set('topic', topic);
-    const body = {"payload" : payload, "headers" : headers }
+    const body = {payload, headers, bindings};
     console.log(`Publishing to ${url}`);
     return this.http.post(url, body, { params });
   }