feat(server): maintain selection as part of inner state

Author: twoplustwoone

src/ApiConsole.js

@@ -248,7 +248,9 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
       redirectUri,
       eventsTarget,
       baseUri,
-      noDocs
+      noDocs,
+      selectedServerValue,
+      selectedServerType,
     } = this;
     return html`<api-request-panel
       .amf="${amf}"
@@ -264,7 +266,10 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
       .allowHideOptional="${allowHideOptional}"
       .baseUri="${baseUri}"
       .noDocs="${noDocs}"
-      .eventsTarget="${eventsTarget}">
+      .selectedServerValue="${selectedServerValue}"
+      .selectedServerType="${selectedServerType}"
+      .eventsTarget="${eventsTarget}"
+      >
         <slot name="custom-base-uri" slot="custom-base-uri"></slot>
       </api-request-panel>`;
   }
@@ -281,7 +286,9 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
       narrow,
       scrollTarget,
       redirectUri,
-      baseUri
+      baseUri,
+      selectedServerValue,
+      selectedServerType,
     } = this;
     return html`<api-documentation
       .amf="${amf}"
@@ -296,6 +303,8 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
       .redirectUri="${redirectUri}"
       .scrollTarget="${scrollTarget}"
       @api-navigation-selection-changed="${this._apiNavigationOcurred}"
+      .selectedServerValue="${selectedServerValue}"
+      .selectedServerType="${selectedServerType}"
     ></api-documentation>`;
   }
 
@@ -551,6 +560,8 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
        * **This is an experimental option and may dissapear without warning.**
        */
       rearrangeEndpoints: { type: Boolean },
+      selectedServerValue: { type: String },
+      selectedServerType: { type: String },
     };
   }
 
@@ -630,6 +641,7 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
   constructor() {
     super();
     this._tryitHandler = this._tryitHandler.bind(this);
+    this._handleServerChange = this._handleServerChange.bind(this);
 
     this.page = 'docs';
     this.drawerAlign = 'left';
@@ -641,6 +653,7 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
       super.connectedCallback();
     }
     this.addEventListener('tryit-requested', this._tryitHandler);
+    this.addEventListener('api-server-changed', this._handleServerChange);
     this._notifyApicExtension();
     if (window.ShadyCSS) {
       window.ShadyCSS.styleElement(this);
@@ -653,6 +666,7 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
       super.disconnectedCallback();
     }
     this.removeEventListener('tryit-requested', this._tryitHandler);
+    this.removeEventListener('api-server-changed', this._handleServerChange);
   }
 
   firstUpdated() {
@@ -861,4 +875,10 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
       this._extensionBannerActive = true;
     }
   }
+
+  _handleServerChange(e) {
+    const { selectedValue, selectedType } = e.detail;
+    this.selectedServerValue = selectedValue;
+    this.selectedServerType = selectedType;
+  }
 }

test/api-console.basic.test.js

@@ -1,4 +1,4 @@
-import { fixture, assert, aTimeout, html } from '@open-wc/testing';
+import { fixture, assert, aTimeout, html, nextFrame } from '@open-wc/testing';
 import * as sinon from 'sinon/pkg/sinon-esm.js';
 import * as MockInteractions from '@polymer/iron-test-helpers/mock-interactions.js';
 import { isChrome } from '../src/ApiConsole.js';
@@ -8,7 +8,7 @@ import '../api-console.js';
 //  Tests for computations that do not require AMF model.
 //
 
-describe('<api-console>', function() {
+describe('<api-console>', function () {
   async function basicFixture() {
     return (await fixture(`<api-console></api-console>`));
   }
@@ -63,7 +63,7 @@ describe('<api-console>', function() {
     let requests;
     before(() => {
       xhr = sinon.useFakeXMLHttpRequest();
-      xhr.onCreate = function(xhr) {
+      xhr.onCreate = function (xhr) {
         requests.push(xhr);
       };
     });
@@ -86,7 +86,8 @@ describe('<api-console>', function() {
       element.modelLocation = 'apip.json';
       assert.equal(requests.length, 1);
       requests[0].respond(200, {
-        'Content-Type': 'application/json' },
+        'Content-Type': 'application/json'
+      },
         '[{"@context":{}, "@id": "","@type": []}]');
       assert.typeOf(element.amf, 'array');
     });
@@ -100,7 +101,8 @@ describe('<api-console>', function() {
       const callback = sinon.spy(element, '_apiLoadErrorHandler');
       element.modelLocation = 'error.json';
       requests[0].respond(404, {
-        'Content-Type': 'text/plain' },
+        'Content-Type': 'text/plain'
+      },
         'nothing');
       assert.isTrue(callback.called);
     });
@@ -230,7 +232,7 @@ describe('<api-console>', function() {
     });
   });
 
-  describe('Attribution', function() {
+  describe('Attribution', function () {
     it('Attribution logo is rendered', async () => {
       const element = await basicFixture();
       const node = element.shadowRoot.querySelector('.powered-by');
@@ -327,10 +329,10 @@ describe('<api-console>', function() {
     function basicFixture(loc) {
       return new Promise((resolve, reject) => {
         fixture(html`<api-console modelLocation="${loc}"></api-console>`)
-        .then((element) => {
-          element.addEventListener('model-load-success', () => resolve(element));
-          element.addEventListener('model-load-error', () => reject(element));
-        })
+          .then((element) => {
+            element.addEventListener('model-load-success', () => resolve(element));
+            element.addEventListener('model-load-error', () => reject(element));
+          })
       });
     }
 
@@ -464,4 +466,25 @@ describe('<api-console>', function() {
       });
     });
   });
+
+  describe('Server selection change', () => {
+    let element;
+
+    beforeEach(async () => {
+      element = await basicFixture();
+    });
+
+    it('Should update selectedServerValue and selectedServerType', async () => {
+      const e = new CustomEvent('api-server-changed', {
+        detail: {
+          selectedValue: 'https://example.org',
+          selectedType: 'custom',
+        }
+      });
+      element.dispatchEvent(e);
+      await nextFrame();
+      assert.equal(element.selectedServerValue, 'https://example.org');
+      assert.equal(element.selectedServerType, 'custom');
+    });
+  });
 });