feat(W-15520218): show servers name in documentation operation for async api

Author: leandrogilcarrano

demo/index.js

@@ -152,6 +152,7 @@ class ComponentDemo extends ApiDemoPage {
   _apiListTemplate() {
     return [
       ['demo-api', 'Demo API'],
+      ['jldAsync26', 'Async API 2.6'],
       ['multi-server', 'Multiple servers'],
       ['google-drive-api', 'Google Drive'],
       ['appian-api', 'Appian API'],

src/ApiUrl.js

@@ -165,8 +165,38 @@ export class ApiUrl extends AmfHelperMixin(LitElement) {
     return this._baseUri;
   }
 
+
+
+  get asyncServersNames(){
+    if(!this.endpoint){
+      return ''
+    }
+    const endpoint = Array.isArray(this.endpoint) ? this.endpoint[0]: this.endpoint
+    const apiContractServerKey = this._getAmfKey( this.ns.aml.vocabularies.apiContract.server)
+    const endpointServers = this._ensureArray(endpoint[apiContractServerKey])
+
+    // try to find servers in channel level
+    if(endpointServers){
+      return endpointServers.map((item)=>(this._getValue(item, this.ns.aml.vocabularies.core.name)));  
+    }
+
+    // try to find root server (only one) that is received by property
+    if(this.server){
+      return [this._getValue(this.server, this.ns.aml.vocabularies.core.name)]
+    }
+
+    // in case that async api doesn't have servers
+    return null      
+  }
+
   render() {
-    const { url } = this;
+    const { url, asyncServersNames } = this;
+    const isAsyncApi = this._isAsyncAPI(this.amf)
+
+    if(isAsyncApi && asyncServersNames){
+      // only if an async api and has servers
+      return this.renderAsyncApi(asyncServersNames)
+    }
     return html`
       <style>${this.styles}</style>
       <section class="url-area">
@@ -234,6 +264,44 @@ export class ApiUrl extends AmfHelperMixin(LitElement) {
     this._dispatchChangeEvent();
   }
 
+  renderAsyncApi(asyncServersNames){
+    const { url, _method } = this;
+    if(!_method){
+      return ''
+    }
+    return html`
+      <style>${this.styles}</style>
+      <section class="async-servers-names-area">
+        ${this._getMethodTemplate()}
+        <div class="async-servers">
+          ${this._getAsyncPathTemplate()}
+          ${this._getAsyncServersNamesTemplate(asyncServersNames)}
+        </div>
+      </section>
+      <clipboard-copy id="urlCopy" .content="${url}"></clipboard-copy>
+    `;
+  }
+
+  _getAsyncPathTemplate() {
+    if (this.isNotHttp && !!this._method) {
+      return html`<div class="async-servers-path">${this.path}</div>`;
+    }
+    return '';
+  }
+
+  _getAsyncServersNamesTemplate(asyncServersNames) {
+    const { _method } = this;
+    if (asyncServersNames && !!_method) {
+      return html`<div class="async-server-names-container">
+        <span class="async-server-names-title">Available on servers:</span> ${this._getAsyncServersNamesList(asyncServersNames)}</div>`
+    }
+    return html``
+  }
+
+  _getAsyncServersNamesList(asyncServersNames) {
+      return asyncServersNames.map((name) => html`<span class="async-server-name">${name}</span>`)
+  }
+
   /**
    * Computes value for `httpMethod` property.
    *

src/Styles.js

@@ -73,7 +73,7 @@ export default css`
   flex: 1;
 }
 
-.url-area {
+.url-area, .async-servers-names-area {
   flex: 1;
   display: flex;
   flex-direction: row;
@@ -93,7 +93,7 @@ export default css`
     --api-method-documentation-url-font-color,
     var(--code-color)
   );
-  padding: var(--api-method-documentation-url-padding, 8px);
+  padding: var(--api-method-documentation-url-padding, 13px);
   border-radius: var(--api-method-documentation-url-border-radius, 4px);
   position: relative;
 }
@@ -269,4 +269,49 @@ api-security-documentation:last-of-type {
 .messages-options > anypoint-dropdown-menu {
   margin-left: 0;
 }
+
+.async-servers-names-area{
+  flex-wrap: wrap
+}
+
+.async-servers{
+  margin-left: 11px;
+}
+
+.async-servers .async-servers-path{
+  color: var(--api-method-documentation-async-channel-name-color,#000);
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  margin-top: -1px;
+}
+
+.async-servers .async-server-names-title{
+  color: var(--api-method-documentation-async-server-names-title-color,#414141);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  font-family: var(--api-method-documentation-async-server-names-title-font,Helvetica)
+}
+
+.async-servers .async-server-names-container{
+  margin-top: 16px;
+  margin-bottom: 10px;
+}
+
+.async-servers .async-server-name{
+  color: var(--api-method-documentation-async-server-names-color,#249FC6);
+  text-align: center;
+  font-family: var(--api-method-documentation-async-server-names-font,Avenir);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  border-radius: 4px;
+  border: 1px solid var(--api-method-documentation-async-server-names-border-color,#249FC6);;
+  padding: 0px 8px 0px 8px;
+  margin-right: 10px;
+}
 `;

test/api-url.test.js

@@ -115,6 +115,10 @@ describe('<api-url>', () => {
 		  assert.equal(element.url, 'amqp://broker.mycompany.com');
 		});
 
+		it('should compute server names', () => {
+		  assert.equal(element.asyncServersNames[0], 'production');
+		});
+
 		it('should compute method', () => {
 		  assert.equal(element._method, 'PUBLISH');
 		});