Enhance ApiSummary component by adding an agent pill for endpoints with agents, improving visual indication. Update styles for the agent pill and info icon. Refactor tests to include validation for the agent pill rendering.

Author: alexpmule

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

@@ -224,4 +224,27 @@ 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;
+  }
+
+  .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);
         });
       });