Fix/missing server description

demo/APIC-641/APIC-641.yaml

@@ -0,0 +1,26 @@
+openapi: '3.0.2'
+info:
+  title: 'profiles'
+  description: >
+    Provides `profiles` domain services of the **Client Data Platform**.
+  version: '2.0.1'
+  contact:
+    name: Client Data Platform Platform & Support
+    email: CDP_Services_Support@capgroup.com
+    url: https://cg-itg.slack.com/archives/C018M7FCSMS/p1602588312007200
+servers:
+  - url: https://api.aws-west-prd.capgroup.com/cdp-proxy/profiles
+    description: MuleSoft PROD
+  - url: https://api.aws-west-snp.capgroup.com/cdp-proxy-e2e/profiles
+    description: MuleSoft UAT (for enterprise consumers)
+  - url: https://api.aws-west-oz.capgroup.com/cdp-proxy-ite2/profiles
+    description: MuleSoft QA (for enterprise consumers)
+  - url: https://api.aws-west-oz.capgroup.com/cdp-proxy-dev2/profiles
+paths:
+  /parties/v1/{partyId}:
+    summary: Represents a client of Capital Group
+    description: >
+      Provides details about Capital Group clients including name, address and other information
+    get:
+      operationId: getPartyById
+      summary: Gets the specific parties in the system.

demo/apis.json

@@ -11,5 +11,6 @@
   "google-drive-api/google-drive-api.raml": "RAML 1.0",
   "async-api/async-api.yaml": "ASYNC 2.0",
   "exchange-experience-api/exchange-experience-api.raml": "RAML 0.8",
-  "multiple-servers/multiple-servers.yaml": { "type": "OAS 3.0", "mime": "application/yaml" }
+  "multiple-servers/multiple-servers.yaml": { "type": "OAS 3.0", "mime": "application/yaml" },
+  "APIC-641/APIC-641.yaml": { "type": "OAS 3.0", "mime": "application/yaml" }
 }

demo/index.js

@@ -25,6 +25,7 @@ class ApiDemo extends ApiDemoPage {
       ['no-server', 'No server!'],
       ['multiple-servers', 'Multiple servers'],
       ['async-api', 'AsyncAPI'],
+      ['APIC-641', 'APIC-641'],
     ].map(
       ([file, label]) => html`
         <anypoint-item data-src="${file}-compact.json">${label}</anypoint-item>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@api-components/api-summary",
   "description": "A summary view for an API base on AMF data model",
-  "version": "4.6.0",
+  "version": "4.6.1",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",
@@ -26,28 +26,28 @@
   },
   "dependencies": {
     "@advanced-rest-client/arc-marked": "^1.1.1",
-    "@advanced-rest-client/markdown-styles": "^3.1.4",
-    "@api-components/amf-helper-mixin": "^4.3.6",
-    "@api-components/api-method-documentation": "^5.1.10",
+    "@advanced-rest-client/markdown-styles": "^3.1.5",
+    "@api-components/amf-helper-mixin": "^4.3.10",
+    "@api-components/api-method-documentation": "^5.2.3",
     "@api-components/http-method-label": "^3.1.4",
     "@api-components/raml-aware": "^3.0.0",
-    "dompurify": "^2.2.7",
-    "lit-element": "^2.3.1",
-    "lit-html": "^1.3.0"
+    "dompurify": "^2.2.9",
+    "lit-element": "^2.5.1",
+    "lit-html": "^1.4.1"
   },
   "devDependencies": {
     "@advanced-rest-client/arc-demo-helper": "^2.2.6",
-    "@api-components/api-model-generator": "^0.2.8",
-    "@commitlint/cli": "^12.0.1",
-    "@commitlint/config-conventional": "^12.0.1",
-    "@open-wc/eslint-config": "^4.0.1",
-    "@open-wc/testing": "^2.5.32",
-    "@types/dompurify": "^2.2.1",
-    "@web/dev-server": "^0.1.10",
-    "@web/test-runner": "^0.12.17",
-    "@web/test-runner-playwright": "^0.8.4",
-    "eslint": "^7.22.0",
-    "eslint-config-prettier": "^8.1.0",
+    "@api-components/api-model-generator": "^0.2.11",
+    "@commitlint/cli": "^12.1.4",
+    "@commitlint/config-conventional": "^12.1.4",
+    "@open-wc/eslint-config": "^4.3.0",
+    "@open-wc/testing": "^2.5.33",
+    "@types/dompurify": "^2.2.2",
+    "@web/dev-server": "^0.1.17",
+    "@web/test-runner": "^0.13.5",
+    "@web/test-runner-playwright": "^0.8.6",
+    "eslint": "^7.28.0",
+    "eslint-config-prettier": "^8.3.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
     "sinon": "^9.2.4",

src/ApiSummary.js

@@ -397,7 +397,11 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
   _serverListTemplate(server) {
     const { baseUri, protocols } = this;
     const uri = this._computeBaseUri(server, baseUri, protocols);
-    return html`<li>${uri}</li>`;
+    const description = this._computeDescription(server);
+    return html`<li>
+      ${uri}
+      <arc-marked .markdown=${description} class="server-description"></arc-marked>
+    </li>`;
   }
 
   /**

src/Styles.js

@@ -165,4 +165,10 @@ a:hover {
   font-weight: 700;
   margin: 0.8em 0 0.2em 0;
 }
+
+.server-description {
+  display: block;
+  font-size: var(--api-summary-server-description-font-size, 12px);
+  font-weight: var(--api-summary-server-description-font-weight, 600);
+}
 `;

test/api-summary.test.js

@@ -352,10 +352,12 @@ describe('ApiSummary', () => {
       describe('Server rendering', () => {
         let ramlSingleServerAmf;
         let oasMultipleServersAmf;
+        let oasMultipleServersWithDescriptionAmf;
         let noServersAmf;
         before(async () => {
           ramlSingleServerAmf = await AmfLoader.load(compact);
           oasMultipleServersAmf = await AmfLoader.load(compact, 'multiple-servers');
+          oasMultipleServersWithDescriptionAmf = await AmfLoader.load(compact, 'APIC-641');
           noServersAmf = await AmfLoader.load(compact, 'no-server');
         });
 
@@ -393,6 +395,20 @@ describe('ApiSummary', () => {
           const serversNode = element.shadowRoot.querySelector('.servers');
           assert.notOk(serversNode);
         });
+
+        it('renders multiple URLs with descriptions', async () => {
+          const element = await modelFixture(oasMultipleServersWithDescriptionAmf);
+          const nodes = element.shadowRoot.querySelectorAll('.server-lists li');
+          assert.lengthOf(nodes, 4, 'has 4 servers');
+          assert.equal(nodes[0].textContent.trim(), 'https://api.aws-west-prd.capgroup.com/cdp-proxy/profiles');
+          assert.equal(nodes[0].querySelector('arc-marked').markdown, 'MuleSoft PROD');
+          assert.equal(nodes[1].textContent.trim(), 'https://api.aws-west-snp.capgroup.com/cdp-proxy-e2e/profiles');
+          assert.equal(nodes[1].querySelector('arc-marked').markdown, 'MuleSoft UAT (for enterprise consumers)');
+          assert.equal(nodes[2].textContent.trim(), 'https://api.aws-west-oz.capgroup.com/cdp-proxy-ite2/profiles');
+          assert.equal(nodes[2].querySelector('arc-marked').markdown, 'MuleSoft QA (for enterprise consumers)');
+          assert.equal(nodes[3].textContent.trim(), 'https://api.aws-west-oz.capgroup.com/cdp-proxy-dev2/profiles');
+          assert.isUndefined(nodes[3].querySelector('arc-marked').markdown);
+        });
       });
 
       describe('AsyncAPI', () => {
@@ -419,10 +435,6 @@ describe('ApiSummary', () => {
 
       describe('hideToc', () => {
         let element = /** @type ApiSummary */ (null);
-        let amf;
-        before(async () => {
-          amf = await AmfLoader.load(compact);
-        });
         beforeEach(async () => {
           element = await basicFixture();
           element.setAttribute('hideToc', 'true');