[W-14071465] Editing code while Console is opened changes the MS URL (#…

…40)

* chore: Editing code while the Console is opened changes the MS URL

* chore: add comments

* chore: change for of and break if the iterator is too large

* 0.3.8

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@api-components/api-request",
   "description": "A set of composite components that are used to build an HTTP request editor with the support of the AMF model.",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",

src/ApiRequestEditorElement.js

@@ -257,6 +257,14 @@ export class ApiRequestEditorElement extends AmfHelperMixin(
     this._selectedChanged();
     this._updateServers();
     this.readUrlData();
+    this.dispatchEvent(
+      new CustomEvent(`api-request-panel-selection-changed`, {
+        composed: true,
+        detail: {
+          value: this.selected,
+        },
+      })
+    );
   }
 
   get httpMethod() {
@@ -509,14 +517,18 @@ export class ApiRequestEditorElement extends AmfHelperMixin(
    */
   __amfChanged(amf) {
     const { urlFactory } = this;
+    let  operationChanged = undefined;
+    if (urlFactory.amf) {
+       operationChanged = urlFactory.operation
+    }
     if (urlFactory) {
       if (!this.persistCache) {
         urlFactory.clearCache();
       }
       urlFactory.amf = amf;
       this.readUrlData();
     }
-    this._selectedChanged();
+    this._selectedChanged(operationChanged);
     this._updateServers();
   }
 
@@ -589,9 +601,83 @@ export class ApiRequestEditorElement extends AmfHelperMixin(
     });
   }
 
-  _selectedChanged() {
+  /**
+   * This function is called when the AMF model change and the element needs to update
+   * Given the current selection, it updates the selected operation
+   *
+   * To find the selected, this method searches the lexical value of the
+   * operation changed value and then searches this in the new AMF model.
+   *
+   * When not found operation return previous selection.
+   * @param {AMF} amf
+   * @param {object} operationChanged
+   * @return {string} The new selected operation
+   * @example '#14'
+   **/
+  _computeSelected(amf, operationChanged) {
+    if (operationChanged && amf && amf[0]) {
+      // get required keys
+      const opKey = this._getAmfKey(
+        this.ns.aml.vocabularies.apiContract.supportedOperation
+      );
+      const lexicalKey = this._getAmfKey(
+        this.ns.aml.vocabularies.docSourceMaps.lexical
+      );
+      const lexicalValueKey = this._getAmfKey(
+        this.ns.aml.vocabularies.docSourceMaps.value
+      );
+      const sourceKey = this._getAmfKey(
+        this.ns.aml.vocabularies.docSourceMaps.sources
+      );
+
+      // search the lexical value of the operation changed
+      const sourcesOld = this._getValueArray(operationChanged, sourceKey);
+      const lexicalsOld = this._getValueArray(sourcesOld[0], lexicalKey);
+      const lexicalValueOld = this._getValue(lexicalsOld[0], lexicalValueKey);
+
+      // get enpoints from the new AMF model
+      const encodes = this._computeEncodes(amf);
+      const endpoints = this._computeEndpoints(encodes);
+
+      let newOperationSelected = null;
+
+      // loop throught a list of endpoints and find the operation with the same lexical value
+      for (const endpoint of endpoints) {
+        const supportedOperation = this._ensureArray(endpoint[opKey]);
+        // if the operation is not supported by the endpoint, skip it
+        if (!supportedOperation) {
+          newOperationSelected = undefined;
+        }
+        // if the operation is supported by the endpoint, find the operation with the same lexical value
+        else {
+          newOperationSelected = supportedOperation.find((operation) => {
+            const sources = this._getValueArray(operation, sourceKey);
+            const lexicals = this._getValueArray(sources[0], lexicalKey);
+            const lexicalValue = this._getValue(lexicals[0], lexicalValueKey);
+            return lexicalValue === lexicalValueOld;
+          });
+        }
+        // if the operation is found, break the loop
+        if (newOperationSelected) {
+          break;
+        }
+      };
+      // if the operation is not found, return the previous selection
+      if (!newOperationSelected) {
+        return this.selected;
+      }
+      // if the operation is found, return the new selection
+      return newOperationSelected["@id"];
+    }
+  }
+
+
+  _selectedChanged(operationChanged) {
     this.clearRequest()
     const { amf, selected } = this;
+    if (operationChanged) {
+      this.selected = this._computeSelected(amf, operationChanged);
+    }
     if (!amf || !selected) {
       return;
     }

src/ApiRequestPanelElement.js

@@ -293,11 +293,11 @@ export class ApiRequestPanelElement extends EventsTargetMixin(LitElement) {
     this.allowCustomBaseUri = false;
     this.persistCache = false;
 
-    /**  
+    /**
      * @type {TransportRequest}
      */
     this.request = undefined;
-    /**  
+    /**
      * @type {ArcResponse|ErrorResponse}
      */
     this.response = undefined;
@@ -434,8 +434,8 @@ export class ApiRequestPanelElement extends EventsTargetMixin(LitElement) {
 
   /**
    * Propagate `api-response` detail object.
-   * 
-   * Until API Console v 6.x it was using a different response view. The current version 
+   *
+   * Until API Console v 6.x it was using a different response view. The current version
    * uses new response view based on ARC response view which uses different data structure.
    * This function transforms the response to the one of the corresponding data types used in ARC.
    * However, this keeps compatibility with previous versions of the transport library so it is