Experiment Store Browser

Added a table that includes the details of enrollments in the experiment store with the option to delete inactive enrollments and unenroll from active ones.

Author: RJAK11

src/apis/nimbus.js

@@ -243,6 +243,33 @@ var nimbus = class extends ExtensionAPI {
               throw error;
             }
           },
+
+          async getExperimentStore() {
+            try {
+              return await ExperimentManager.store.getAll();
+            } catch (error) {
+              console.error(error);
+              throw error;
+            }
+          },
+
+          async unenroll(slug) {
+            try {
+              return await ExperimentManager.unenroll(slug, "nimbus-devtools");
+            } catch (error) {
+              console.error(error);
+              throw error;
+            }
+          },
+
+          async deleteInactiveEnrollment(slug) {
+            try {
+              return await ExperimentManager.store._deleteForTests(slug);
+            } catch (error) {
+              console.error(error);
+              throw error;
+            }
+          },
         },
       },
     };

src/apis/nimbus.json

@@ -134,6 +134,42 @@
             "description": "The specific branch slug of the experiment to enroll into."
           }
         ]
+      },
+
+      {
+        "name": "getExperimentStore",
+        "type": "function",
+        "description": "Get all enrollments from the experiment store.",
+        "async": true,
+        "parameters": []
+      },
+
+      {
+        "name": "unenroll",
+        "type": "function",
+        "description": "Unenroll from an active experiment in the store.",
+        "async": true,
+        "parameters": [
+          {
+            "name": "slug",
+            "type": "string",
+            "description": "The slug of the experiment to unenroll from."
+          }
+        ]
+      },
+
+      {
+        "name": "deleteInactiveEnrollment",
+        "type": "function",
+        "description": "Delete an inactive experiment from the store.",
+        "async": true,
+        "parameters": [
+          {
+            "name": "slug",
+            "type": "string",
+            "description": "The slug of the experiment to delete from the store."
+          }
+        ]
       }
     ],
     "events": []

src/types/global.d.ts

@@ -79,4 +79,10 @@ declare namespace browser.experiments.nimbus {
   function updateRecipes(forceSync: boolean): Promise<void>;
 
   function forceEnroll(recipe: object, branchSlug: string): Promise<boolean>;
+
+  function getExperimentStore(): Promise<object[]>;
+
+  function unenroll(slug: string): Promise<void>;
+
+  function deleteInactiveEnrollment(slug: string): Promise<void>;
 }

src/ui/components/ExperimentStorePage.tsx

@@ -0,0 +1,107 @@
+import { FC, useCallback, useEffect, useState } from "react";
+
+interface NimbusEnrollment {
+  slug: string;
+  userFacingName: string;
+  userFacingDescription: string;
+  isRollout: boolean;
+  featureIds: string[];
+  active: boolean;
+}
+
+const ExperimentStorePage: FC = () => {
+  const [experiments, setExperiments] = useState<NimbusEnrollment[]>([]);
+
+  const fetchExperiments = useCallback(async () => {
+    try {
+      const experimentStore =
+        await browser.experiments.nimbus.getExperimentStore();
+      setExperiments(experimentStore as NimbusEnrollment[]);
+    } catch (error) {
+      console.error("Error fetching experiments:", error);
+    }
+  }, [experiments]);
+
+  useEffect(() => {
+    void fetchExperiments();
+  }, [fetchExperiments]);
+
+  const unenrollExperiment = useCallback(
+    async (slug: string) => {
+      try {
+        await browser.experiments.nimbus.unenroll(slug);
+        alert("Unenrollment successful");
+        await fetchExperiments();
+      } catch (error) {
+        console.error(`Error unenrolling from experiment ${slug}:`, error);
+      }
+    },
+    [fetchExperiments],
+  );
+
+  const deleteExperiment = useCallback(
+    async (slug: string) => {
+      try {
+        await browser.experiments.nimbus.deleteInactiveEnrollment(slug);
+        alert("Deletion successful");
+        await fetchExperiments();
+      } catch (error) {
+        console.error(`Error deleting experiment ${slug}:`, error);
+      }
+    },
+    [fetchExperiments],
+  );
+
+  return (
+    <div className="experiment-viewer">
+      <h1 className="experiment-viewer__title">Experiment Store</h1>
+      <div className="experiment-viewer__list">
+        <table>
+          <thead>
+            <tr>
+              <th>Experiment</th>
+              <th>featureIds</th>
+              <th>isRollout</th>
+              <th>Status</th>
+              <th>Options</th>
+            </tr>
+          </thead>
+          <tbody>
+            {experiments?.map((experiment: NimbusEnrollment, index: number) => (
+              <tr key={index}>
+                <td>
+                  <strong>{experiment.slug}</strong> <br />
+                  <br />
+                  {experiment.userFacingName}:{" "}
+                  {experiment.userFacingDescription}
+                </td>
+                <td>{experiment.featureIds.join(", ")}</td>
+                <td>{experiment.isRollout ? "Yes" : "No"}</td>
+                <td>{experiment.active ? "Active" : "Inactive"}</td>
+                <td>
+                  {experiment.active ? (
+                    <button
+                      className="experiment-viewer-list__button"
+                      onClick={() => unenrollExperiment(experiment.slug)}
+                    >
+                      Unenroll
+                    </button>
+                  ) : (
+                    <button
+                      className="experiment-viewer-list__button"
+                      onClick={() => deleteExperiment(experiment.slug)}
+                    >
+                      Delete
+                    </button>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default ExperimentStorePage;

src/ui/components/Sidebar.tsx

@@ -13,6 +13,9 @@ const Sidebar: FC = () => {
       <Link to="/jexl-debugger" className="sidebar__link">
         JEXL Debugger
       </Link>
+      <Link to="/experiment-store" className="sidebar__link">
+        Experiment Store
+      </Link>
       <Link to="/experiment-browser" className="sidebar__link">
         Experiment Browser
       </Link>

src/ui/index.tsx

@@ -14,6 +14,7 @@ import FeatureConfigPage from "./components/FeatureConfigPage";
 import SettingsPage from "./components/SettingsPage";
 import JEXLDebuggerPage from "./components/JEXLDebuggerPage";
 import ExperimentBrowserPage from "./components/ExperimentBrowserPage";
+import ExperimentStorePage from "./components/ExperimentStorePage";
 
 document.addEventListener("DOMContentLoaded", () => {
   document.querySelectorAll("#app").forEach((el) => {
@@ -32,6 +33,10 @@ document.addEventListener("DOMContentLoaded", () => {
                 element={<FeatureConfigPage />}
               />
               <Route path="/jexl-debugger" element={<JEXLDebuggerPage />} />
+              <Route
+                path="/experiment-store"
+                element={<ExperimentStorePage />}
+              />
               <Route
                 path="/experiment-browser"
                 element={<ExperimentBrowserPage />}