W-18562610 Enhance ApiSummary component by adding an agent pill for endpoints wi…

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.10",
+  "version": "4.6.11",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",

src/ApiSummary.js

@@ -628,18 +628,22 @@ export class ApiSummary extends AmfHelperMixin(LitElement) {
     return html`
       <a
         href="#${`${endpoint.path}/${item.method}`}"
-        class="method-label ${item.hasAgent ? "method-label-with-icon" : ""}"
+        class="method-label"
         data-method="${item.method}"
         data-id="${item.id}"
         data-shape-type="method"
         title="Open method documentation"
-        >${item.method}
-        ${
-          item.hasAgent 
-          ? html`<arc-icon icon="codegenie" class='method-icon'></arc-icon>` 
-          : ""
-        }
-      </a>
+        >${item.method}</a
+      >
+
+       ${item.hasAgent
+        ? html`
+            <span class="agent-pill" title="Enabled for Agent">
+              Enabled for Agent
+              <arc-icon icon="infoOutline" class="info-icon"></arc-icon>
+            </span>
+          `
+        : ''}
     `;
   }
 

src/Styles.js

@@ -116,25 +116,11 @@ export default css`
     text-decoration: none;
   }
 
-  .method-label-with-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
   .method-label:hover,
   .method-label:focus {
     text-decoration: underline;
   }
 
-  .method-icon {
-    display: inline-flex;
-    width: 14px;
-    height: 14px;
-    padding-left: 3px;
-    padding-bottom: 2px;
-    padding-left: 7px;
-  }
 
   .endpoint-path {
     display: block;
@@ -224,4 +210,28 @@ export default css`
     font-size: var(--api-summary-server-description-font-size, 12px);
     font-weight: var(--api-summary-server-description-font-weight, 600);
   }
+
+  .endpoint-header {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .agent-pill {
+    display: flex;
+    align-items: center;
+    padding: 2px 8px;
+    border-radius: 16px;
+    background-color: var(--agent-pill-background-color, #e0e0e0);
+    color: var(--agent-pill-color, #455a64);
+    font-size: 12px;
+    margin-left: 8px;
+    font-weight: 500;
+  }
+
+  .info-icon {
+    color: var(--agent-pill-info-icon-color, #757575);
+    width: 16px;
+    height: 16px;
+    margin-left: 8px;
+  }
 `;

test/api-summary.test.js

@@ -14,6 +14,14 @@ describe('ApiSummary', () => {
     return fixture(html`<api-summary></api-summary>`);
   }
 
+  /**
+   * @returns {Promise<ApiSummary>}
+   */
+  async function agentFixture() {
+    const amf = await AmfLoader.load(false, 'agents-api');
+    return fixture(html`<api-summary .amf="${amf}"></api-summary>`);
+  }
+
   /**
    * @param {any} amf
    * @returns {Promise<ApiSummary>}
@@ -349,116 +357,22 @@ describe('ApiSummary', () => {
         });
       });
 
-      describe('Endpoints rendering with agents', () => {
+      describe("Endpoints rendering with agents", () => {
         let element = /** @type ApiSummary */ (null);
-        let amf;
-
-        before(async () => {
-          amf = await AmfLoader.load(compact,'agents-api');
-        });
 
         beforeEach(async () => {
-          element = await basicFixture();
-          element.amf = amf;
+          element = await agentFixture();
           await aTimeout(0);
         });
 
-        it('adds separator', () => {
-          const node = element.shadowRoot.querySelector('.separator');
-          assert.ok(node);
-        });
-
-        it('renders all endpoints', () => {
-          const nodes = element.shadowRoot.querySelectorAll('.endpoint-item');
+        it("renders the list of endpoints", async () => {
+          const nodes = element.shadowRoot.querySelectorAll(".endpoint-item");
           assert.lengthOf(nodes, 2);
         });
 
-        it('renders endpoint name', () => {
-          const node = element.shadowRoot.querySelectorAll('.endpoint-item')[1].querySelector('.endpoint-path');
-          assert.dom.equal(
-            node,
-            `<a
-              class="endpoint-path"
-              data-shape-type="endpoint"
-              href="#/reservations/reservationlookup"
-              title="Open endpoint documentation"
-              >
-              /reservations/reservationlookup
-            </a>`,
-            {
-              ignoreAttributes: ['data-id']
-            }
-          );
-        });
-
-        it('sets data-id on name', () => {
-          const node = element.shadowRoot.querySelectorAll('.endpoint-item')[1].querySelector('.endpoint-path');
-          assert.ok(node.getAttribute('data-id'));
-        });
-
-        it('sets data-id on path', () => {
-          const node = element.shadowRoot.querySelectorAll('.endpoint-item')[1].querySelector('.endpoint-path');
-          assert.ok(node.getAttribute('data-id'));
-        });
-
-        it('renders list of operations', () => {
-          const nodes = element.shadowRoot.querySelectorAll('.endpoint-item')[1].querySelectorAll('.method-label');
-          assert.lengthOf(nodes, 1);
-        });
-
-        it('renders operation method', () => {
-          const node = element.shadowRoot.querySelectorAll('.endpoint-item')[1].querySelector('.method-label');
-          assert.dom.equal(
-            node,
-            `<a
-              class="method-label method-label-with-icon"
-              data-method="get"
-              data-shape-type="method"
-              href="#/reservations/reservationlookup/get"
-              title="Open method documentation"
-              >get
-              <arc-icon class="method-icon" icon="codegenie"></arc-icon>
-              </a>`,
-            {
-              ignoreAttributes: ['data-id']
-            }
-          );
-        });
-
-        it('Click on an endpoint dispatches navigation event', (done) => {
-          const node = element.shadowRoot.querySelector(`.endpoint-path[data-id]`);
-          element.addEventListener('api-navigation-selection-changed', (e) => {
-            // @ts-ignore
-            const {detail} = e;
-            assert.typeOf(detail.selected, 'string');
-            assert.equal(detail.type, 'endpoint');
-            done();
-          });
-          /** @type HTMLElement */ (node).click();
-        });
-
-        it('Click on an endpoint path dispatches navigation event', (done) => {
-          const node = element.shadowRoot.querySelector(`.endpoint-path[data-id]`);
-          element.addEventListener('api-navigation-selection-changed', (e) => {
-            // @ts-ignore
-            const {detail} = e;
-            assert.typeOf(detail.selected, 'string');
-            assert.equal(detail.type, 'endpoint');
-            done();
-          });
-          /** @type HTMLElement */ (node).click();
-        });
-
-        it('Click on a method dispatches navigation event', (done) => {
-          const node = element.shadowRoot.querySelector(`.method-label[data-id]`);
-          element.addEventListener('api-navigation-selection-changed', (e) => {
-            // @ts-ignore
-            const {detail} = e;
-            assert.typeOf(detail.selected, 'string');
-            assert.equal(detail.type, 'method');
-            done();
-          });
-          /** @type HTMLElement */ (node).click();
+        it('renders the agent pill', async () => {
+          const node = element.shadowRoot.querySelector('.agent-pill');
+          assert.ok(node);
         });
       });