@api-components/api-navigation 4.3.3 → 4.3.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@api-components/api-navigation",
   "description": "An element to display the response body",
-  "version": "4.3.3",
+  "version": "4.3.4",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",
@@ -26,10 +26,10 @@
     "email": "arc@mulesoft.com"
   },
   "dependencies": {
-    "@advanced-rest-client/arc-icons": "^3.3.4",
+    "@advanced-rest-client/icons": "^4.0.2",
     "@anypoint-web-components/anypoint-button": "^1.2.3",
     "@anypoint-web-components/anypoint-collapse": "^0.1.0",
-    "@api-components/amf-helper-mixin": "^4.5.17",
+    "@api-components/amf-helper-mixin": "^4.5.31",
     "@api-components/http-method-label": "^3.1.5",
     "@api-components/raml-aware": "^3.0.0",
     "lit-element": "^2.3.1",
@@ -47,9 +47,9 @@
     "@open-wc/eslint-config": "^4.0.1",
     "@open-wc/testing": "^2.5.32",
     "@polymer/iron-test-helpers": "^3.0.0",
-    "@web/dev-server": "^0.1.25",
-    "@web/test-runner": "^0.13.18",
-    "@web/test-runner-playwright": "^0.8.8",
+    "@web/dev-server": "^0.1.8",
+    "@web/test-runner": "^0.13.15",
+    "@web/test-runner-playwright": "^0.11.0",
     "eslint": "^8.0.0",
     "eslint-config-prettier": "^8.3.0",
     "husky": "^7.0.2",

package/src/ApiNavigation.js

@@ -3,10 +3,7 @@ import { LitElement, html } from 'lit-element';
 import { AmfHelperMixin } from '@api-components/amf-helper-mixin/amf-helper-mixin.js';
 import '@api-components/raml-aware/raml-aware.js';
 import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';
-import {
-  keyboardArrowDown,
-  openInNew,
-} from '@advanced-rest-client/arc-icons/ArcIcons.js';
+import '@advanced-rest-client/icons/arc-icon.js';
 import '@anypoint-web-components/anypoint-collapse/anypoint-collapse.js';
 import httpMethodStyles from '@api-components/http-method-label/http-method-label-common-styles.js';
 import navStyles from './Styles.js';
@@ -1799,6 +1796,36 @@ export class ApiNavigation extends AmfHelperMixin(LitElement) {
     }, 1);
   }
 
+  /**
+   * Computes whether each method in an endpoint has an associated "agent" by inspecting the AMF model.
+   * This function iterates through the methods of a given endpoint, finds the corresponding AMF operation,
+   * and checks for the presence of an agent. The `hasAgent` property is then set on the method item.
+   *
+   * @param {EndpointItem} item The endpoint item containing the methods to be processed.
+   * @returns {EndpointItem} The same endpoint item with the `hasAgent` flag updated on its methods.
+   */
+  _computeAgentsForMethods(item) {
+    const webApi = this._computeWebApi(this.amf);
+    if (!webApi) {
+      return item;
+    }
+    const operations = this._computeOperations(webApi, item.id);
+    if (!operations) {
+      return item;
+    }
+
+    item.methods.forEach(method => {
+      // Find the corresponding AMF operation for the current method item.
+      const operation = operations.find(op => op['@id'] === method.id);
+      if (operation) {
+        // Check if the operation has an agent defined in the AMF model.
+        const agent = this._computeAgents(operation);
+        method.hasAgent = !!(agent && agent.length > 0);
+      }
+    });
+    return item;
+  }
+
   /**
    * Renders a template for endpoints and methods list.
    * @return {TemplateResult|string}
@@ -1808,6 +1835,13 @@ export class ApiNavigation extends AmfHelperMixin(LitElement) {
       return '';
     }
     const items = this._getFilteredEndpoints();
+
+    if (items) {
+      items.forEach(item => {
+        this._computeAgentsForMethods(item);
+      });
+    }
+
     if (!items || !items.length) {
       return '';
     }
@@ -1839,7 +1873,7 @@ export class ApiNavigation extends AmfHelperMixin(LitElement) {
           data-toggle="endpoints"
         >
           <span class="icon" aria-label="${toggleState}"
-            >${keyboardArrowDown}</span
+            ><arc-icon icon="keyboardArrowDown"></arc-icon></span
           >
         </anypoint-icon-button>
       </div>
@@ -1926,7 +1960,7 @@ export class ApiNavigation extends AmfHelperMixin(LitElement) {
           tabindex="-1"
           @click="${this._toggleEndpointButton}"
         >
-          <span class="icon" aria-label="${ariaLabel}">${keyboardArrowDown}</span>
+          <span class="icon" aria-label="${ariaLabel}"><arc-icon icon="keyboardArrowDown"></arc-icon></span>
         </anypoint-icon-button>
       </div>
       <anypoint-collapse
@@ -1965,8 +1999,18 @@ export class ApiNavigation extends AmfHelperMixin(LitElement) {
       @click="${this._itemClickHandler}"
       style="${style}"
     >
-      <span class="method-label" data-method="${methodItem.method}"
-        >${methodItem.method}</span
+      <span
+        class="method-label ${methodItem.hasAgent
+          ? 'method-label-with-icon'
+          : ''}"
+        data-method="${methodItem.method}"
+        >${methodItem.method}
+        ${methodItem.hasAgent
+          ? html`<arc-icon
+              icon="codegenie"
+              class="method-icon"
+            ></arc-icon>`
+          : ''}</span
       >
       ${methodItem.label}
     </div>`;
@@ -2007,7 +2051,7 @@ export class ApiNavigation extends AmfHelperMixin(LitElement) {
             tabindex="-1"
           >
             <span class="icon" aria-label="${toggleState}"
-              >${keyboardArrowDown}</span
+              ><arc-icon icon="keyboardArrowDown"></arc-icon></span
             >
           </anypoint-icon-button>
         </div>
@@ -2037,7 +2081,7 @@ export class ApiNavigation extends AmfHelperMixin(LitElement) {
       >
         ${item.label}
         <span class="icon new-tab" title="Opens in a new tab"
-          >${openInNew}</span
+          ><arc-icon icon="openInNew"></arc-icon></span
         >
       </a>`;
     }
@@ -2087,7 +2131,7 @@ export class ApiNavigation extends AmfHelperMixin(LitElement) {
             data-toggle="types"
           >
             <span class="icon" aria-label="${toggleState}"
-              >${keyboardArrowDown}</span
+              ><arc-icon icon="keyboardArrowDown"></arc-icon></span
             >
           </anypoint-icon-button>
         </div>
@@ -2148,7 +2192,7 @@ export class ApiNavigation extends AmfHelperMixin(LitElement) {
           data-toggle="security"
         >
           <span class="icon" aria-label="${toggleState}"
-            >${keyboardArrowDown}</span
+            ><arc-icon icon="keyboardArrowDown"></arc-icon></span
           >
         </anypoint-icon-button>
       </div>

package/src/Styles.js

@@ -190,6 +190,22 @@ export default css`
     white-space: nowrap;
   }
 
+  .method-label-with-icon {
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .method-icon {
+    display: inline-flex;
+    width: 14px;
+    height: 14px;
+    padding-left: 3px;
+    padding-bottom: 2px;
+    padding-left: 4px;
+  }
+
+
   .list-item.selected .method-label[data-method] {
     color: var(--method-display-selected-color, #fff);
   }

package/src/types.d.ts

@@ -5,6 +5,7 @@ export declare interface NavigationItem {
 
 export declare interface MethodItem extends NavigationItem {
   method: string;
+  hasAgent?: boolean;
 }
 
 export declare interface EndpointItem extends NavigationItem {