chore: finalizing migration to the AmfStore

Signed-off-by: Pawel Psztyc <[email protected]>

Author: jarrodek

.vscode/settings.json

@@ -1,9 +1,24 @@
 {
   "cSpell.words": [
+    "amfstoreapiprotocols",
     "amfstoreapisummary",
+    "amfstoreapiversion",
+    "amfstoredocumentationget",
+    "amfstoredocumentationlist",
+    "amfstoredocumentmeta",
     "amfstoreendpointbypath",
     "amfstoreendpointget",
     "amfstoreendpointlist",
+    "amfstoreopget",
+    "amfstoreopgetparent",
+    "amfstorepayloadget",
+    "amfstorerequestget",
+    "amfstoreresponseget",
+    "amfstoresecurityget",
+    "amfstoresecuritygetrequirement",
+    "amfstoresecuritygetsettings",
+    "amfstoresecuritylist",
+    "amfstoretypeget",
     "apierror",
     "apinavigate",
     "apirequest",

CHANGELOG.md

@@ -1,18 +1,33 @@
 # Changelog
 
-## General changes
+## Old components vs this repository
+
+### User (consumer) changelog
+
+The UI in most cases is consistent with the previous version, except for the following items:
+
+- Removed an option to disable a single parameter. The rationale is that these parameters are defined in the API and the request editor and the outgoing HTTP request should reflect what the API author designed.
+- Changes titles of operations and resource: added sub title describing the section.
+- The URI and query parameters are now combined into a single section: Parameters.
+- The information architecture for parameters changed for better readability and accessibility.
+- Schema documentation was redesigned to better visualize complex objects.
+- Authorization now support OpenID Connect which can be defined in an OAS file.
+
+### Developer changelog
+
+#### General changes
 
 The `compatibility` has been renamed to `anypoint`.
 
 The `selected` property has been renamed to `domainId` which is the id of the graph node rendered by the AMF parser.
 
 The `selectedType` has been renamed to `domainType`. This is a value generated by the navigation element to help to reduce the scope of searching for an object in the graph model.
 
-The components now ignore (in most cases) the rendered AMF graph model and instead uses the serialized graph objects to a simpler JavaScript objects. This serialization happens in the `ApiSerializer` class.
+The components do not read the generated graph model anymore (generated through the AMF library LD+JSON model). See **docs/architecture.md** for detailed description.
 
-## Documentation components
+#### Documentation components
 
-### Api navigation
+##### Api navigation
 
 The API navigate event definition changed. With this version the detail object has the following properties.
 
@@ -29,16 +44,16 @@ import { Events } from '@api-components/amf-components';
 Events.Navigation.apiNavigate(document.body, 'amf://id', 'resource');
 ```
 
-### ApiDocumentationElement (former api-documentation)
+##### ApiDocumentationElement (former api-documentation)
 
-#### Refactored properties
+###### Refactored properties
 
 - `selected` -> `domainId`
 - `selectedType` -> `domainType`
 - `inlineMethods` -> `tryItPanel`
 - `compatibility` -> `anypoint`
 
-#### Removed properties
+###### Removed properties
 
 - `noTryIt` - this has been replaced with `tryItButton`
 - `noUrlEditor` - this has been replaced with `httpUrlEditor`
@@ -48,16 +63,16 @@ Events.Navigation.apiNavigate(document.body, 'amf://id', 'resource');
 - `outlined` - we are dropping support for this property
 - `noBottomNavigation` - not used anymore
 
-#### New properties
+###### New properties
 
 - `tryItButton` - the opposite of the previous `noTryIt`
 - `httpUrlEditor` - passed to the request editor as `urlEditor`
 - `httpApplyAuthorization` - passed to the request editor as `applyAuthorization`
 - `httpCredentialsSource` - passed to the request editor as `credentialsSource`
 
-### ApiResourceDocumentElement (former api-endpoint-documentation)
+##### ApiResourceDocumentElement (former api-endpoint-documentation)
 
-#### Refactored properties
+###### Refactored properties
 
 - `selected` -> `domainId`
 - `selectedType` - `domainType`
@@ -66,7 +81,7 @@ Events.Navigation.apiNavigate(document.body, 'amf://id', 'resource');
 - `inlineMethods` is renamed to `tryItPanel`. Has the same function.
 - `noUrlEditor` is now renamed to `urlEditor`. When `urlEditor` is set then the HTTP request editor renders the URL editor input field.
 
-#### Removed properties
+###### Removed properties
 
 - `apiVersion` - no longer in use
 - `endpointUri` - no longer in use
@@ -89,7 +104,7 @@ Events.Navigation.apiNavigate(document.body, 'amf://id', 'resource');
 - `graph` - no longer in use
 - `noNavigation` - no longer in use
 
-#### New properties
+###### New properties
 
 - `serverId` the domain id of the selected API server.
 - `operationId` - the domain id of the selected API operation, when `tryItPanel` is set.
@@ -101,17 +116,17 @@ Events.Navigation.apiNavigate(document.body, 'amf://id', 'resource');
 - `httpNoServerSelector` - passed to the request editor as `noServerSelector`
 - `asyncApi` - indicates the rendered API is an async API.
 
-### ApiOperationDocumentElement (former api-operation-documentation)
+##### ApiOperationDocumentElement (former api-operation-documentation)
 
-#### Refactored properties
+###### Refactored properties
 
 - `tryIt` is renamed to `tryItButton`
 - `tryItButton` is always set to `false` when `tryItPanel` is set on the resource document element.
 - `method` is now `operation` which accepts serialized API operation model.
 - `endpoint` now accepts serialized API endpoint model.
 - `compatibility` -> anypoint
 
-#### Removed properties
+###### Removed properties
 
 - `methodName` - no longer in use
 - `httpMethod` - no longer in use
@@ -141,18 +156,18 @@ Events.Navigation.apiNavigate(document.body, 'amf://id', 'resource');
 - `ignoreBaseUri` - no longer in use
 - `protocol` - no longer in use
 
-#### New properties
+###### New properties
 
 - `serverId` the domain id of the selected API server.
 - `tryItButton` - the opposite of the previous `noTryIt`
 - `asyncApi` - indicates the rendered API is an async API.
 - `requestMimeType` - The mime type of rendered request.
 
-## Request editor components
+#### Request editor components
 
-### Authorization
+##### Authorization
 
-#### Configuration and HTTP request
+###### Configuration and HTTP request
 
 The authorization has been moved into this library and has a new API surface.
 
@@ -169,33 +184,33 @@ To maximize the compatibility with 0.2.0 use the following configuration:
 ></api-request-editor>
 ```
 
-### Caching values
+##### Caching values
 
 The editor has a new boolean property `globalCache`. Once set it instruct the caching mechanism to cache user input in memory. The cached values are kept in memory even when API spec change.
 Use the `src/lib/InputCache.js` class to manipulate the cache programmatically when needed.
 
 When the `globalCache` is not set then the values are stored in a reference to the editor element. After removing the element from the DOM all cached properties are GC'd.
 
-### Request editor
+##### Request editor
 
-#### Refactor
+###### Refactor
 
 - `serializeRequest()` -> `serialize()`
 - removed option `allowDisableParams`
 
-#### Setting URL values (baseUri, protocols, server)
+###### Setting URL values (baseUri, protocols, server)
 
 With version `0.2.x` it was possible to set `server`, `baseUri`, and `protocols` properties so the component is able to compute the endpoint URL without having the `server` value read from the AMF graph model. This turned out to be a feature that is not used so it is removed in `0.3.0`. Use `baseUri` to override any value defined in the servers.
 Note, when `baseUri` is set it takes precedence over any other URI configuration (like a selected server).
 
-### URL editor
+##### URL editor
 
 The URL editor is optional by default. The input won't be rendered until the `urlEditor` property is set.
 For a better user experience do not set this option unless crucial for the application. To give user a feedback when updating parameters use option `urlLabel`.
 
 Additionally, the user entered values are now updated on input value change rather than user input. This reduces UI changes (especially with URL editor enabled) while typing value into the editor.
 
-### Body editor
+##### Body editor
 
 The body editor has been re-created from scratch. The new editor uses monaco editor to render the body input.
 This requires loading monaco environment before the editor is rendered and activated.
@@ -214,7 +229,7 @@ await MonacoLoader.monacoReady(); // waits until all libraries are loaded.
 
 Note, Monaco does not support encapsulation. Once loaded a global `Monaco` variable is created.
 
-## Events
+#### Events
 
 With this version the following events are deprecated:
 
@@ -244,6 +259,6 @@ window.addEventListener(EventTypes.Request.apiRequest, (e) => {
 RequestEvents.apiRequest(window, { /* the request definition */ });
 ```
 
-## Tests
+#### Tests
 
 The tests for Firefox currently fails because `playwright` uses a previous version of the browser which has no support for ES modules in web workers. However, the current version support them. Firefox is temporarily removed from tests.

README.md

@@ -22,10 +22,10 @@ npm install --save @api-components/amf-components
 <html>
   <head>
     <script type="module">
-      import '@api-components/amf-components/api-documentation.js';
-      import '@api-components/amf-components/api-request.js';
-      import '@api-components/amf-components/api-navigation.js';
-      import '@api-components/amf-components/xhr-simple-request.js';
+      import '@api-components/amf-components/define/api-documentation.js';
+      import '@api-components/amf-components/define/api-request.js';
+      import '@api-components/amf-components/define/api-navigation.js';
+      import '@api-components/amf-components/define/xhr-simple-request.js';
       import '@advanced-rest-client/app/define/oidc-authorization.js';
       import '@advanced-rest-client/app/define/oauth2-authorization.js';
     </script>
@@ -49,19 +49,24 @@ npm install --save @api-components/amf-components
       <api-request handleNavigationEvents></api-request>
     </aside>
 
-    <script>
+    <script type="module">
+      import { DomEventsAmfStore } from '@api-components/amf-components';
       (async () => {
-        const model = getAmfModelSomehow();
-        const nodes = document.querySelectorAll('api-navigation,api-documentation,api-request');
-        Array.from(nodes).forEach((element) => {
-          element.amf = model;
-        });
+        const apiStore = new DomEventsAmfStore();
+        apiStore.amf = await getAmfModelSomehow();
       })();
     </script>
   </body>
 </html>
 ```
 
+### API store
+
+The components, unlike previously, do not rely on the graph model generated by the AMF parser. Instead they use a custom JavaScript objects generated by the [src/helpers/AmfSerializer.js](AmfSerializer) class.
+These models are provided to the components by the [src/store/AmfStore.js](AmfStore) or the [src/store/DomEventsAmfStore.js](DomEventsAmfStore). This was developers implementing the components have the most flexibility of providing the console with the graph model that source may be in a different location (like HTTP queries).
+
+See [docs/architecture.md](docs/architecture.md) for more details.
+
 ### Monaco editor
 
 The request editor uses the Monaco editor (by Microsoft) to render the body editor.

demo/api-annotation.js

@@ -1,6 +1,7 @@
 import { html } from 'lit-html';
 import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
 import { AmfDemoBase } from './lib/AmfDemoBase.js';
+import { AmfSerializer } from '../src/helpers/AmfSerializer.js';
 import '../define/api-annotation-document.js';
 
 /** @typedef {import('../src/events/NavigationEvents').ApiNavigationEvent} ApiNavigationEvent */
@@ -12,10 +13,17 @@ class ComponentPage extends AmfDemoBase {
       'shape',
     ]);
     this.shape = undefined;
+    this.serializer = new AmfSerializer();
     this.componentName = 'api-annotation-document';
     this.redirectUri = `${window.location.origin}/node_modules/@advanced-rest-client/oauth-authorization/oauth-popup.html`;
   }
 
+  /** @param {string} file */
+  async _loadFile(file) {
+    await super._loadFile(file);
+    this.serializer.amf = this.amf;
+  }
+
   /**
    * @param {ApiNavigationEvent} e
    */
@@ -30,36 +38,37 @@ class ComponentPage extends AmfDemoBase {
     } else {
       this.shape = undefined;
     }
-    console.log(this.shape);
   }
 
   /**
    * @param {string} id
    */
   setTypeData(id) {
     const declares = this._computeDeclares(this.amf);
-    const type = declares.find((item) => item['@id'] === id);
-    if (!type) {
+    const shape = declares.find((item) => item['@id'] === id);
+    if (!shape) {
       console.error('Type not found');
       return;
     }
-    this.shape = type;
+    this.shape = this.serializer.customDomainProperties(shape);
   }
 
   /**
    * @param {string} id
    */
   setEndpointData(id) {
     const webApi = this._computeWebApi(this.amf);
-    this.shape = this._computeEndpointModel(webApi, id);
+    const shape = this._computeEndpointModel(webApi, id);
+    this.shape = this.serializer.customDomainProperties(shape);
   }
 
   /**
    * @param {string} id
    */
   setMethodData(id) {
     const webApi = this._computeWebApi(this.amf);
-    this.shape = this._computeMethodModel(webApi, id);
+    const shape = this._computeMethodModel(webApi, id);
+    this.shape = this.serializer.customDomainProperties(shape);
   }
 
   contentTemplate() {
@@ -92,7 +101,7 @@ class ComponentPage extends AmfDemoBase {
   }
 
   componentTemplate() {
-    const { demoStates, darkThemeActive, shape, amf } = this;
+    const { demoStates, darkThemeActive, shape } = this;
     if (!shape) {
       return html`<p>Select API object in the navigation</p>`;
     }
@@ -103,8 +112,7 @@ class ComponentPage extends AmfDemoBase {
       ?dark="${darkThemeActive}"
     >
       <api-annotation-document
-        .amf="${amf}"
-        .shape="${shape}"
+        .customProperties="${shape}"
         slot="content"
       >
       </api-annotation-document>

demo/api-channel.js

@@ -78,7 +78,7 @@ class ComponentPage extends AmfDemoBase {
   }
 
   componentTemplate() {
-    const { demoStates, darkThemeActive, selectedId, selectedOperation, amf } = this;
+    const { demoStates, darkThemeActive, selectedId, selectedOperation } = this;
     if (!selectedId) {
       return html`<p>Select API operation in the navigation</p>`;
     }
@@ -89,7 +89,6 @@ class ComponentPage extends AmfDemoBase {
       ?dark="${darkThemeActive}"
     >
       <api-channel-document
-        .amf="${amf}"
         .domainId="${selectedId}"
         .operationId="${selectedOperation}"
         slot="content"