Merge pull request #56 from advanced-rest-client/feat/W-15520183/show…

…-message-id

feat: show message id for async api

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@api-components/api-body-document",
   "description": "A component to render HTTP method body documentation based on AMF model",
-  "version": "4.4.8",
+  "version": "4.4.9",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",

src/ApiBodyDocumentElement.js

@@ -126,6 +126,11 @@ export class ApiBodyDocumentElement extends AmfHelperMixin(LitElement) {
         * `api-navigation-selection-changed` when clicked.
         */
        graph: { type: Boolean },
+       /**
+         * Method's endpoint definition as a
+         * `http://raml.org/vocabularies/http#endpoint` of AMF model.
+         */
+       endpoint: { type: Object },
        _hasObjectExamples: { type: Boolean },
        /**
         * When enabled it renders properties that are marked as `readOnly`
@@ -153,6 +158,24 @@ export class ApiBodyDocumentElement extends AmfHelperMixin(LitElement) {
     this._renderMediaSelector = this._computeRenderMediaSelector(value);
   }
 
+  get messageId() {
+    try {
+      const apiContractsupportedOperation = this._getAmfKey(this.ns.aml.vocabularies.apiContract.supportedOperation)
+      const apiContractExpects = this._getAmfKey(this.ns.aml.vocabularies.apiContract.expects)
+      const apiContractMessageId = this._getAmfKey(this.ns.aml.vocabularies.apiContract.messageId)
+      const coreName = this._getAmfKey(this.ns.schema.name)    
+      const expects = this.endpoint[apiContractsupportedOperation][0][apiContractExpects][0];
+      const messageId = expects[apiContractMessageId] || expects[coreName]
+      return messageId[0]['@value']
+    } catch(e) {
+      return ''
+    }
+  }
+
+  get hasMessageId() {
+    return this._isAsyncAPI(this.amf) && !!this.messageId
+  }
+
   get _selectedBody() {
     return this.__selectedBody;
   }
@@ -245,11 +268,16 @@ export class ApiBodyDocumentElement extends AmfHelperMixin(LitElement) {
     const dataTypeKey = this._getAmfKey(this.ns.w3.shacl.datatype)
     const descriptionKey = this._getAmfKey(this.ns.aml.vocabularies.core.description)
 
-    this._bindings = value?.map((item) => ({
-      key: item[messageKey][0][descriptionKey][0]['@value'],
-      dataType: item[messageKey][0][dataTypeKey] ? this._getDataType(item[messageKey][0][dataTypeKey][0]['@id']) : 'any', // integer, number, long, float, double, boolean
-      bindingType: this._getValue(item, typeKey), // kafka, AMQP, etc
-    }))
+    try {
+      this._bindings = value?.map((item) => ({
+        key: item[messageKey][0][descriptionKey][0]['@value'],
+        dataType: item[messageKey][0][dataTypeKey] ? this._getDataType(item[messageKey][0][dataTypeKey][0]['@id']) : 'any', // integer, number, long, float, double, boolean
+        bindingType: this._getValue(item, typeKey), // kafka, AMQP, etc
+      }))
+    } catch(e) {
+      console.log(e)
+    }
+
   }
 
   _getDataType(type){
@@ -561,7 +589,9 @@ export class ApiBodyDocumentElement extends AmfHelperMixin(LitElement) {
       amf,
       narrow,
       renderReadOnly,
-      bodyDescription
+      bodyDescription,
+      hasMessageId,
+      messageId
     } = this;
     const hasBodyName = !!_bodyName;
     const hasDescription = !!_description;
@@ -575,6 +605,7 @@ export class ApiBodyDocumentElement extends AmfHelperMixin(LitElement) {
         this._mediaTypesTemplate() :
         html`<span class="media-type-label">${_selectedMediaType}</span>`}
     </div>
+    ${hasMessageId ? html`<div class="message-id-container">Message ID <span class="message-id-tag">${messageId}</span></div>` : ''}
     ${hasBodyDescription ? html`
         <arc-marked .markdown="${bodyDescription}" sanitize>
             <div slot="markdown-html" class="markdown-html" part="markdown-html"></div>

src/Styles.js

@@ -143,4 +143,18 @@ arc-marked {
 .bindings-container-list li .bindings-body > .binding-data-type {
   text-transform: capitalize;
 }
+
+.message-id-container {
+  background-color: white;
+  font-size: 14px;
+  padding: 1em;
+}
+
+.message-id-tag {
+  border: 1px solid #D67300;
+  border-radius: 4px;
+  padding: 4px 19px;
+  color: #D67300;
+  margin-left: 20px;
+}
 `;