Generate Normandy IDs to guarantee enrollment

Replaces the Force Enroll with a new Actions column that contains a drop down menu with several actions, like "Force enroll" and "generate test ids".

Author: RJAK11

src/apis/nimbus.js

@@ -270,6 +270,16 @@ var nimbus = class extends ExtensionAPI {
               throw error;
             }
           },
+
+          async generateTestIds(recipe, branchSlug) {
+            try {
+              const result = await ExperimentManager.generateTestIds(recipe);
+              return result[branchSlug];
+            } catch (error) {
+              console.error(error);
+              throw error;
+            }
+          },
         },
       },
     };

src/apis/nimbus.json

@@ -170,6 +170,26 @@
             "description": "The slug of the experiment to delete from the store."
           }
         ]
+      },
+
+      {
+        "name": "generateTestIds",
+        "type": "function",
+        "description": "Generate Normandy UserId respective to a branch for a specific experiment.",
+        "async": true,
+        "parameters": [
+          {
+            "name": "recipe",
+            "type": "object",
+            "additionalProperties": true,
+            "description": "The recipe of the experiment to generate the UserId for."
+          },
+          {
+            "name": "branchSlug",
+            "type": "string",
+            "description": "The specific branch slug of the experiment."
+          }
+        ]
       }
     ],
     "events": []

src/types/global.d.ts

@@ -85,4 +85,6 @@ declare namespace browser.experiments.nimbus {
   function unenroll(slug: string): Promise<void>;
 
   function deleteInactiveEnrollment(slug: string): Promise<void>;
+
+  function generateTestIds(recipe: object, branchSlug: string): Promise<string>;
 }

src/ui/components/DropdownMenu.tsx

@@ -17,10 +17,10 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ onSelectFeatureConfigId }) => {
         const configs = await browser.experiments.nimbus.getFeatureConfigs();
         setFeatureConfigs(configs);
       } catch (error) {
-        addToast(
-          `Error fetching feature configurations: ${(error as Error).message ?? String(error)}`,
-          "danger",
-        );
+        addToast({
+          message: `Error fetching feature configurations: ${(error as Error).message ?? String(error)}`,
+          variant: "danger",
+        });
       }
     })();
   }, [addToast]);

src/ui/components/ExperimentBrowserPage.tsx

@@ -1,6 +1,14 @@
 import { FC, useCallback, useEffect, useState } from "react";
 import { NimbusExperiment } from "@mozilla/nimbus-schemas";
-import { Table, Button, Container, Form, Row, Col } from "react-bootstrap";
+import {
+  Table,
+  Button,
+  Container,
+  Form,
+  Row,
+  Col,
+  Dropdown,
+} from "react-bootstrap";
 
 import { useToastsContext } from "../hooks/useToasts";
 
@@ -39,10 +47,10 @@ const ExperimentBrowserPage: FC = () => {
         );
         setExperiments(fetchedExperiments);
       } catch (error) {
-        addToast(
-          `Error fetching experiments: ${(error as Error).message ?? String(error)}`,
-          "danger",
-        );
+        addToast({
+          message: `Error fetching experiments: ${(error as Error).message ?? String(error)}`,
+          variant: "danger",
+        });
       }
     },
     [environment, status, addToast],
@@ -61,18 +69,56 @@ const ExperimentBrowserPage: FC = () => {
           branchSlug,
         );
         if (result) {
-          addToast("Enrollment successful", "success");
+          addToast({ message: "Enrollment successful", variant: "success" });
         } else {
-          addToast("Enrollment failed", "danger");
+          addToast({ message: "Enrollment failed", variant: "danger" });
         }
       } catch (error) {
-        addToast(
-          `Error enrolling into experiment: ${(error as Error).message ?? String(error)}`,
-          "danger",
+        addToast({
+          message: `Error enrolling into experiment: ${(error as Error).message ?? String(error)}`,
+          variant: "danger",
+        });
+      }
+    } else {
+      addToast({
+        message: "Select a branch before enrolling",
+        variant: "danger",
+      });
+    }
+  };
+
+  const handleGenerateTestIds = async (
+    experimentId: string,
+    branchSlug: string,
+  ) => {
+    if (branchSlug) {
+      const recipe = experiments.find((exp) => exp.id === experimentId);
+      try {
+        const result = await browser.experiments.nimbus.generateTestIds(
+          recipe,
+          branchSlug,
         );
+        if (result) {
+          await navigator.clipboard.writeText(result);
+          addToast({
+            message: `Id successfully generated and copied to clipboard. Test Id: ${result}`,
+            variant: "success",
+            autohide: true,
+          });
+        } else {
+          addToast({ message: "Test Id generation failed", variant: "danger" });
+        }
+      } catch (error) {
+        addToast({
+          message: `Error generating test Id: ${(error as Error).message ?? String(error)}`,
+          variant: "danger",
+        });
       }
     } else {
-      addToast("Select a branch before enrolling", "danger");
+      addToast({
+        message: "Select a branch before generating test Id",
+        variant: "danger",
+      });
     }
   };
 
@@ -129,7 +175,7 @@ const ExperimentBrowserPage: FC = () => {
             <th className="text-center primary-fg light-bg">Channel</th>
             <th className="text-center primary-fg light-bg">Version</th>
             <th className="text-center primary-fg light-bg">Status</th>
-            <th className="text-center primary-fg light-bg">Force Enroll</th>
+            <th className="text-center primary-fg light-bg">Actions</th>
           </tr>
         </thead>
         <tbody>
@@ -151,28 +197,63 @@ const ExperimentBrowserPage: FC = () => {
                   : "Enrollment Paused"}
               </td>
               <td className="text-end align-middle wide-column">
-                <Form.Select
-                  value={selectedBranches[experiment.id]}
-                  onChange={(e) =>
-                    handleBranchChange(experiment.id, e.target.value)
-                  }
-                  className="grey-border small-font rounded p-2 m-0 font-monospace"
-                >
-                  <option value="">Select branch</option>
-                  {experiment.branches?.map((branch) => (
-                    <option key={branch.slug} value={branch.slug}>
-                      {branch.slug}
-                    </option>
-                  ))}
-                </Form.Select>
-                <Button
-                  className="option-button primary-fg py-1 my-1 rounded small-font fw-bold grey-border light-bg"
-                  onClick={() =>
-                    handleEnroll(experiment.id, selectedBranches[experiment.id])
-                  }
-                >
-                  Enroll
-                </Button>
+                <Container className="d-flex align-items-center">
+                  <Form.Select
+                    value={selectedBranches[experiment.id]}
+                    onChange={(e) =>
+                      handleBranchChange(experiment.id, e.target.value)
+                    }
+                    className="grey-border small-font rounded p-2 m-0 font-monospace"
+                  >
+                    <option value="">Select branch</option>
+                    {experiment.branches?.map((branch) => (
+                      <option key={branch.slug} value={branch.slug}>
+                        {branch.slug}
+                      </option>
+                    ))}
+                  </Form.Select>
+                  {status === "Live" ? (
+                    <Dropdown>
+                      <Dropdown.Toggle className="option-button primary-fg py-2 my-1 mx-2 rounded small-font fw-bold grey-border light-bg">
+                        Actions
+                      </Dropdown.Toggle>
+                      <Dropdown.Menu>
+                        <Dropdown.Item
+                          onClick={() =>
+                            handleEnroll(
+                              experiment.id,
+                              selectedBranches[experiment.id],
+                            )
+                          }
+                        >
+                          Force Enroll
+                        </Dropdown.Item>
+                        <Dropdown.Item
+                          onClick={() =>
+                            handleGenerateTestIds(
+                              experiment.id,
+                              selectedBranches[experiment.id],
+                            )
+                          }
+                        >
+                          Generate Test IDs
+                        </Dropdown.Item>
+                      </Dropdown.Menu>
+                    </Dropdown>
+                  ) : (
+                    <Button
+                      className="option-button primary-fg py-0 my-1 mx-1 rounded small-font fw-bold grey-border light-bg"
+                      onClick={() =>
+                        handleEnroll(
+                          experiment.id,
+                          selectedBranches[experiment.id],
+                        )
+                      }
+                    >
+                      Force Enroll
+                    </Button>
+                  )}
+                </Container>
               </td>
             </tr>
           ))}

src/ui/components/ExperimentStorePage.tsx

@@ -22,10 +22,10 @@ const ExperimentStorePage: FC = () => {
         await browser.experiments.nimbus.getExperimentStore();
       setExperiments(experimentStore as NimbusEnrollment[]);
     } catch (error) {
-      addToast(
-        `Error fetching experiments: ${(error as Error).message ?? String(error)}`,
-        "danger",
-      );
+      addToast({
+        message: `Error fetching experiments: ${(error as Error).message ?? String(error)}`,
+        variant: "danger",
+      });
     }
   }, [experiments, addToast]);
 
@@ -37,13 +37,13 @@ const ExperimentStorePage: FC = () => {
     async (slug: string) => {
       try {
         await browser.experiments.nimbus.unenroll(slug);
-        addToast("Unenrollment successful", "success");
+        addToast({ message: "Unenrollment successful", variant: "success" });
         await fetchExperiments();
       } catch (error) {
-        addToast(
-          `Error unenrolling from experiment: ${(error as Error).message ?? String(error)}`,
-          "danger",
-        );
+        addToast({
+          message: `Error unenrolling from experiment: ${(error as Error).message ?? String(error)}`,
+          variant: "danger",
+        });
       }
     },
     [fetchExperiments, addToast],
@@ -53,13 +53,13 @@ const ExperimentStorePage: FC = () => {
     async (slug: string) => {
       try {
         await browser.experiments.nimbus.deleteInactiveEnrollment(slug);
-        addToast("Deletion successful", "success");
+        addToast({ message: "Deletion successful", variant: "success" });
         await fetchExperiments();
       } catch (error) {
-        addToast(
-          `Error deleting experiment: ${(error as Error).message ?? String(error)}`,
-          "danger",
-        );
+        addToast({
+          message: `Error deleting experiment: ${(error as Error).message ?? String(error)}`,
+          variant: "danger",
+        });
       }
     },
     [fetchExperiments, addToast],

src/ui/components/FeatureConfigPage.tsx

@@ -30,9 +30,9 @@ const FeatureConfigPage: FC = () => {
 
   const handleEnrollClick = useCallback(async () => {
     if (selectedFeatureId === "") {
-      addToast("Invalid Input: Select feature", "danger");
+      addToast({ message: "Invalid Input: Select feature", variant: "danger" });
     } else if (jsonInput === "") {
-      addToast("Invalid Input: Enter JSON", "danger");
+      addToast({ message: "Invalid Input: Enter JSON", variant: "danger" });
     } else {
       try {
         const result = await browser.experiments.nimbus.enrollWithFeatureConfig(
@@ -42,21 +42,21 @@ const FeatureConfigPage: FC = () => {
         );
 
         if (result) {
-          addToast("Enrollment successful", "success");
+          addToast({ message: "Enrollment successful", variant: "success" });
         } else {
-          addToast("Enrollment failed", "danger");
+          addToast({ message: "Enrollment failed", variant: "danger" });
         }
       } catch (error) {
-        addToast(
-          `Error enrolling into experiment: ${(error as Error).message ?? String(error)}`,
-          "danger",
-        );
+        addToast({
+          message: `Error enrolling into experiment: ${(error as Error).message ?? String(error)}`,
+          variant: "danger",
+        });
       }
     }
   }, [jsonInput, selectedFeatureId, isRollout, addToast]);
 
   return (
-    <Container className="main-content p-2">
+    <Container className="main-content p-2 overflow-hidden">
       <Form>
         <Row className="align-items-stretch">
           <Col md={9}>

src/ui/components/JEXLDebuggerPage.tsx

@@ -22,10 +22,10 @@ const JEXLDebuggerPage: FC = () => {
       const context = await browser.experiments.nimbus.getClientContext();
       setClientContext(context);
     } catch (error) {
-      addToast(
-        `Error fetching client context: ${(error as Error).message ?? String(error)}`,
-        "danger",
-      );
+      addToast({
+        message: `Error fetching client context: ${(error as Error).message ?? String(error)}`,
+        variant: "danger",
+      });
     }
   }, [addToast]);
 
@@ -50,10 +50,10 @@ const JEXLDebuggerPage: FC = () => {
       }
     } catch (error) {
       setOutput("Error evaluating expression");
-      addToast(
-        `Error evaluating expression: ${(error as Error).message ?? String(error)}`,
-        "danger",
-      );
+      addToast({
+        message: `Error evaluating expression: ${(error as Error).message ?? String(error)}`,
+        variant: "danger",
+      });
     }
   }, [jexlExpression, clientContext, addToast]);