Merge pull request #80 from advanced-rest-client/feat/W-15520218/servers-in-operation

feat(W-15520218): show servers name in documentation operation for as…

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'],

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@api-components/api-method-documentation",
   "description": "A HTTP method documentation build from AMF model",
-  "version": "5.2.16",
+  "version": "5.2.17",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",

package.json

@@ -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/ApiMethodDocumentation.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}
     };
   }
 
@@ -165,8 +170,46 @@ 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      
+  }
+
+  get operationId(){
+    return this._operationId
+  }
+
+  set operationId(value){
+    this._operationId = value
+  }
+
   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 +277,54 @@ 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._getOperationIdTemplate()}
+          ${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 url-channel-value">${this.path}</div>`;
+    }
+    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) {
+      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 url-value">${name}</span>`)
+  }
+
   /**
    * Computes value for `httpMethod` property.
    *

src/ApiUrl.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;
@@ -98,6 +98,10 @@ export default css`
   position: relative;
 }
 
+.async-servers-names-area{
+  padding: var(--api-method-documentation-url-padding, 13px);
+}
+
 .section-title-area {
   display: flex;
   flex-direction: row;
@@ -269,4 +273,44 @@ api-security-documentation:last-of-type {
 .messages-options > anypoint-dropdown-menu {
   margin-left: 0;
 }
+
+.async-servers{
+  margin-left: 11px;
+}
+
+.async-servers .async-servers-path{
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  margin-top: -1px;
+  word-break: break-all;
+}
+
+.async-servers .async-server-names-title{
+  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;
+}
 `;

src/Styles.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');
 		});
@@ -144,15 +148,15 @@ describe('<api-url>', () => {
 			});
 
 			it('should render channel', async () => {
-				const channel = 'Channelsmartylighting/streetlights/1/0/event/{streetlightId}/lighting/measured'
-				await waitUntil(() => element.shadowRoot.querySelector('.url-channel-value'));
-				assert.equal(element.shadowRoot.querySelector('.url-channel-value').textContent, channel);
+				const channel = 'smartylighting/streetlights/1/0/event/{streetlightId}/lighting/measured'
+				await waitUntil(() => element.shadowRoot.querySelector('.async-servers-path'));
+				assert.equal(element.shadowRoot.querySelector('.async-servers-path').textContent, channel);
 			});
 
 			it('should render server', async () => {
-				const expectedServer = 'Servermqtt://api.streetlights.smartylighting.com:{port}'
-				await waitUntil(() => element.shadowRoot.querySelector('.url-server-value'));
-				assert.equal(element.shadowRoot.querySelector('.url-server-value').textContent, expectedServer);
+				const expectedServer = 'production'
+				await waitUntil(() => element.shadowRoot.querySelector('.async-server-name'));
+				assert.equal(element.shadowRoot.querySelector('.async-server-name').textContent, expectedServer);
 			});
 
 			it('should only render url value when no operation selected', async () => {