From e2503cfa42fba97f8f7f2b3183773f72372bdd9e Mon Sep 17 00:00:00 2001 From: Alex Perez <96145153+alexpmule@users.noreply.github.com> Date: Thu, 26 Oct 2023 14:43:53 -0300 Subject: [PATCH] [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-lock.json | 4 +- package.json | 2 +- src/ApiRequestEditorElement.js | 90 +++++++++++++++++++++++++++++++++- src/ApiRequestPanelElement.js | 8 +-- 4 files changed, 95 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8d692ef..a02c800 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@api-components/api-request", - "version": "0.3.7", + "version": "0.3.8", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@api-components/api-request", - "version": "0.3.7", + "version": "0.3.8", "license": "Apache-2.0", "dependencies": { "@advanced-rest-client/arc-events": "^0.2.13", diff --git a/package.json b/package.json index 8c70969..730a182 100644 --- a/package.json +++ b/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", diff --git a/src/ApiRequestEditorElement.js b/src/ApiRequestEditorElement.js index 79f39dc..63fdaa5 100644 --- a/src/ApiRequestEditorElement.js +++ b/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,6 +517,10 @@ 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(); @@ -516,7 +528,7 @@ export class ApiRequestEditorElement extends AmfHelperMixin( 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; } diff --git a/src/ApiRequestPanelElement.js b/src/ApiRequestPanelElement.js index a3accf9..4d6e295 100644 --- a/src/ApiRequestPanelElement.js +++ b/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