Adding support for v2 api version. (#329)

* Adding support for v2 api version.
* adjusting styling
* Added test for apiVersion change

Author: alexcottner

extension/content/index.html

@@ -25,6 +25,10 @@ <h2>Options</h2>
           <option value="dev-preview">Dev (preview)</option>
           <option value="local">Local</option>
         </select>
+        <select id="apiVersion">
+          <option value="v1">API v1</option>
+          <option value="v2">API v2</option>
+        </select>
         <span>
           <input type="checkbox" id="enable-signatures"/>
           <label for="enable-signatures">Signatures enabled</label>

extension/content/script.js

@@ -67,6 +67,7 @@ async function refreshUI(state) {
     collections,
     pollingEndpoint,
     environment,
+    apiVersion,
     history,
     serverSettingIgnored,
     signaturesEnabled,
@@ -76,6 +77,8 @@ async function refreshUI(state) {
 
   const environmentElt = document.getElementById("environment");
   environmentElt.value = environment;
+  const apiVersionElt = document.getElementById("apiVersion");
+  apiVersionElt.value = apiVersion;
   document.getElementById("environment-error").style.display =
     serverSettingIgnored ? "block" : "none";
   if (serverSettingIgnored) {
@@ -85,9 +88,9 @@ async function refreshUI(state) {
       .forEach((optionElt) => optionElt.setAttribute("disabled", "disabled"));
   }
 
-  document.getElementById("polling-url").textContent = new URL(
-    pollingEndpoint,
-  ).origin;
+  document.getElementById("polling-url").textContent = `${
+    new URL(pollingEndpoint).origin
+  }/${apiVersion}`;
   document.getElementById("polling-url").setAttribute("href", pollingEndpoint);
   document.getElementById("local-timestamp").textContent = localTimestamp;
   document.getElementById("server-timestamp").textContent = serverTimestamp;
@@ -217,7 +220,21 @@ async function main() {
   document.getElementById("environment").onchange = async (event) => {
     showGlobalError(null);
     showLoading(true);
-    await remotesettings.switchEnvironment(event.target.value);
+    const apiVersion = document.getElementById("apiVersion");
+    await remotesettings.switchEnvironment(
+      event.target.value,
+      apiVersion.value,
+    );
+  };
+
+  document.getElementById("apiVersion").onchange = async (event) => {
+    showGlobalError(null);
+    showLoading(true);
+    const environment = document.getElementById("environment");
+    await remotesettings.switchEnvironment(
+      environment.value,
+      event.target.value,
+    );
   };
 
   document.getElementById("enable-signatures").onchange = async (event) => {

extension/content/style.css

@@ -95,7 +95,7 @@ section.bordered {
   padding-bottom: 10px;
 }
 
-#environment {
+#environment, #apiVersion {
   text-align: center;
 }
 

extension/experiments/remotesettings/api.js

@@ -17,30 +17,31 @@ ChromeUtils.defineLazyGetter(this, "RemoteSettings", () => {
 const { EventManager } = ExtensionCommon;
 const { ExtensionError } = ExtensionUtils;
 
-const SERVER_LOCAL = "http://localhost:8888/v1";
-const SERVER_PROD = "https://firefox.settings.services.mozilla.com/v1";
-const SERVER_STAGE = "https://firefox.settings.services.allizom.org/v1";
-const SERVER_DEV = "https://remote-settings-dev.allizom.org/v1";
+const SERVER_LOCAL = "http://localhost:8888";
+const SERVER_PROD = "https://firefox.settings.services.mozilla.com";
+const SERVER_STAGE = "https://firefox.settings.services.allizom.org";
+const SERVER_DEV = "https://remote-settings-dev.allizom.org";
 const MEGAPHONE_STAGE = "wss://autoconnect.stage.mozaws.net";
 
 async function getState() {
   const inspected = await RemoteSettings.inspect();
 
   const { collections, serverURL, previewMode } = inspected;
-  let environment = "custom";
-  switch (serverURL) {
-    case SERVER_PROD:
-      environment = "prod";
-      break;
-    case SERVER_STAGE:
-      environment = "stage";
-      break;
-    case SERVER_DEV:
-      environment = "dev";
-      break;
-    case SERVER_LOCAL:
-      environment = "local";
-      break;
+  let environment = "custom",
+    apiVersion = "v1";
+
+  if (serverURL.startsWith(SERVER_PROD)) {
+    environment = "prod";
+  } else if (serverURL.startsWith(SERVER_STAGE)) {
+    environment = "stage";
+  } else if (serverURL.startsWith(SERVER_DEV)) {
+    environment = "dev";
+  } else if (serverURL.startsWith(SERVER_LOCAL)) {
+    environment = "local";
+  }
+
+  if (serverURL.endsWith("v2")) {
+    apiVersion = "v2";
   }
 
   if (previewMode) {
@@ -77,6 +78,7 @@ async function getState() {
   return {
     ...inspected,
     environment,
+    apiVersion,
     serverSettingIgnored,
     signaturesEnabled,
   };
@@ -136,29 +138,29 @@ var remotesettings = class extends ExtensionAPI {
            * setEnvironment() will set the necessary internal preferences to switch from
            * an environment to another.
            */
-          async switchEnvironment(env) {
+          async switchEnvironment(env, apiVersion = "v1") {
             if (env.includes("prod")) {
               Services.prefs.setCharPref(
                 "services.settings.server",
-                SERVER_PROD,
+                `${SERVER_PROD}/${apiVersion}`,
               );
               Services.prefs.clearUserPref("dom.push.serverURL");
             } else if (env.includes("stage")) {
               Services.prefs.setCharPref(
                 "services.settings.server",
-                SERVER_STAGE,
+                `${SERVER_STAGE}/${apiVersion}`,
               );
               Services.prefs.setCharPref("dom.push.serverURL", MEGAPHONE_STAGE);
             } else if (env.includes("dev")) {
               Services.prefs.setCharPref(
                 "services.settings.server",
-                SERVER_DEV,
+                `${SERVER_DEV}/${apiVersion}`,
               );
               Services.prefs.clearUserPref("dom.push.serverURL");
             } else if (env.includes("local")) {
               Services.prefs.setCharPref(
                 "services.settings.server",
-                SERVER_LOCAL,
+                `${SERVER_LOCAL}/${apiVersion}`,
               );
               Services.prefs.clearUserPref("dom.push.serverURL");
             }

extension/experiments/remotesettings/schema.json

@@ -27,6 +27,10 @@
             "name": "env",
             "type": "string",
             "description": "One of 'dev', 'stage', or 'prod'"
+          },{
+            "name": "apiVersion",
+            "type": "string",
+            "description": "One of 'v1' or 'v2'"
           }
         ]
       },

tests/selenium.spec.js

@@ -195,4 +195,19 @@ describe("End to end browser tests", () => {
       expect(await firstTimestamp.getAttribute("class")).toContain("unsync");
     });
   });
+
+  test("Switch to v2 endpoint", async () => {
+    await clickByCss("#apiVersion");
+    await clickByCss('#apiVersion [value="v2"]');
+    await waitForLoad();
+
+    // verify server URI changes as expected
+    let serverLink = await driver.findElement(By.css("#polling-url"));
+    expect(await serverLink.getText()).toMatch(/\/v2$/);
+
+    // verify table loads as expected
+    expect(
+      (await driver.findElements(By.css("#status tr"))).length,
+    ).toBeGreaterThan(1);
+  });
 });