feat(W-15520218): add operation id

Author: leandrogilcarrano

src/ApiMethodDocumentation.js

@@ -804,6 +804,7 @@ export class ApiMethodDocumentation extends AmfHelperMixin(LitElement) {
   }
 
   _getTitleTemplate() {
+    const isAsyncApi = this._isAsyncAPI(this.amf)
     if (this._titleHidden) {
       return '';
     }
@@ -826,7 +827,7 @@ export class ApiMethodDocumentation extends AmfHelperMixin(LitElement) {
       </div>`}
     </div>
     ${methodSummary ? html`<p class="summary">${methodSummary}</p>` : ''}
-    ${operationId ? html`<span class="operation-id">Operation ID: ${operationId}</span>` : ''}
+    ${operationId && !isAsyncApi ? html`<span class="operation-id">Operation ID: ${operationId}</span>` : ''}
     `;
   }
 
@@ -846,6 +847,7 @@ export class ApiMethodDocumentation extends AmfHelperMixin(LitElement) {
       .apiVersion="${this.apiVersion}"
       .baseUri="${this.baseUri}"
       .operation="${this.method}"
+      .operationId="${this.operationId}"
       @change="${this._handleUrlChange}"
     >
     </api-url>`;

src/ApiUrl.js

@@ -55,12 +55,17 @@ export class ApiUrl extends AmfHelperMixin(LitElement) {
        * @attribute
        */
       baseUri: { type: String },
+      /**
+       * Optional, operation id that is render only for async api
+       */
+      operationId:{type: String},
       _url: { type: String },
       _method: { type: String },
       _protocol: { type: String },
       _protocolVersion: { type: String },
       _operation: { type: Object },
-      _server: { type: Object }
+      _server: { type: Object },
+      _operationId:{type: String}
     };
   }
 
@@ -189,6 +194,14 @@ export class ApiUrl extends AmfHelperMixin(LitElement) {
     return null      
   }
 
+  get operationId(){
+    return this._operationId
+  }
+
+  set operationId(value){
+    this._operationId = value
+  }
+
   render() {
     const { url, asyncServersNames } = this;
     const isAsyncApi = this._isAsyncAPI(this.amf)
@@ -275,6 +288,7 @@ export class ApiUrl extends AmfHelperMixin(LitElement) {
         ${this._getMethodTemplate()}
         <div class="async-servers">
           ${this._getAsyncPathTemplate()}
+          ${this._getOperationIdTemplate()}
           ${this._getAsyncServersNamesTemplate(asyncServersNames)}
         </div>
       </section>
@@ -289,6 +303,15 @@ export class ApiUrl extends AmfHelperMixin(LitElement) {
     return '';
   }
 
+  _getOperationIdTemplate() {
+    const { operationId } = this;
+    if (operationId) {
+      return html`<div class="async-server-names-container">
+        <span class="async-server-names-title">Operation ID: ${operationId}</span></div>`
+    }
+    return html``
+  }
+
   _getAsyncServersNamesTemplate(asyncServersNames) {
     const { _method } = this;
     if (asyncServersNames && !!_method) {