From 64756d3762cfca9eba16faba383af56f5998f1e1 Mon Sep 17 00:00:00 2001 From: Alex Perez Date: Mon, 28 Jul 2025 09:55:11 -0300 Subject: [PATCH 1/4] 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. --- src/ApiSummary.js | 20 ++++--- src/Styles.js | 23 ++++++++ test/api-summary.test.js | 116 +++++---------------------------------- 3 files changed, 50 insertions(+), 109 deletions(-) diff --git a/src/ApiSummary.js b/src/ApiSummary.js index a7dee70..564fc27 100644 --- a/src/ApiSummary.js +++ b/src/ApiSummary.js @@ -628,18 +628,22 @@ export class ApiSummary extends AmfHelperMixin(LitElement) { return html` ${item.method} - ${ - item.hasAgent - ? html`` - : "" - } - + >${item.method} + + ${item.hasAgent + ? html` + + Enabled for Agent + + + ` + : ''} `; } diff --git a/src/Styles.js b/src/Styles.js index 9b3f502..d0751e4 100644 --- a/src/Styles.js +++ b/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; + } `; diff --git a/test/api-summary.test.js b/test/api-summary.test.js index 00a9dc2..0c4136a 100644 --- a/test/api-summary.test.js +++ b/test/api-summary.test.js @@ -14,6 +14,14 @@ describe('ApiSummary', () => { return fixture(html``); } + /** + * @returns {Promise} + */ + async function agentFixture() { + const amf = await AmfLoader.load(false, 'agents-api'); + return fixture(html``); + } + /** * @param {any} amf * @returns {Promise} @@ -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, - ` - /reservations/reservationlookup - `, - { - 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, - `get - - `, - { - 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); }); }); From 18e651d839867e8a9782949ba997d6c12631bc42 Mon Sep 17 00:00:00 2001 From: Alex Perez Date: Mon, 28 Jul 2025 10:03:51 -0300 Subject: [PATCH 2/4] Update Styles.js to enhance the agent pill appearance by adding a font-weight of 500, improving visual consistency. --- src/Styles.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Styles.js b/src/Styles.js index d0751e4..3a7ae40 100644 --- a/src/Styles.js +++ b/src/Styles.js @@ -239,6 +239,7 @@ export default css` color: var(--agent-pill-color, #455a64); font-size: 12px; margin-left: 8px; + font-weight: 500; } .info-icon { From c4a54d1a9082be6c5780083ead28dee040a7defa Mon Sep 17 00:00:00 2001 From: Alex Perez Date: Mon, 28 Jul 2025 10:04:22 -0300 Subject: [PATCH 3/4] 4.6.11 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index ab40561..404c071 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@api-components/api-summary", - "version": "4.6.10", + "version": "4.6.11", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@api-components/api-summary", - "version": "4.6.10", + "version": "4.6.11", "license": "Apache-2.0", "dependencies": { "@advanced-rest-client/arc-marked": "^1.1.2", diff --git a/package.json b/package.json index f22931a..1f6b557 100644 --- a/package.json +++ b/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", From eec902819b9d6484cd28bc7b9c880aaa9a2189ba Mon Sep 17 00:00:00 2001 From: Alex Perez Date: Mon, 28 Jul 2025 10:18:23 -0300 Subject: [PATCH 4/4] Refactor Styles.js by removing unused styles for method labels and icons, streamlining the CSS for improved maintainability. --- src/Styles.js | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/src/Styles.js b/src/Styles.js index 3a7ae40..d44ea1d 100644 --- a/src/Styles.js +++ b/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;