Allow re-enrollment in recipe

This change checks for existing enrollments, and if present shows the user a modal asking whether they want to force enroll. If so, it unenrolls them from the previous one, and deletes it before proceeding with the new enrollment.

Fixes #50

Author: RJAK11

src/apis/nimbus.js

@@ -35,13 +35,39 @@ var nimbus = class extends ExtensionAPI {
     return {
       experiments: {
         nimbus: {
-          async enrollInExperiment(jsonData) {
+          async enrollInExperiment(jsonData, forceEnroll) {
             try {
+              const slugExistsInStore = ExperimentManager.store
+                .getAll()
+                .some((experiment) => experiment.slug === jsonData.slug);
+              const activeEnrollment =
+                ExperimentManager.store
+                  .getAll()
+                  .find(
+                    (experiment) =>
+                      experiment.slug === jsonData.slug && experiment.active,
+                  )?.slug ?? null;
+              if (slugExistsInStore || activeEnrollment) {
+                if (!forceEnroll) {
+                  return {
+                    enrolled: false,
+                    error: { slugExistsInStore, activeEnrollment },
+                  };
+                }
+
+                if (activeEnrollment) {
+                  this.unenroll(activeEnrollment);
+                }
+                if (slugExistsInStore) {
+                  this.deleteInactiveEnrollment(jsonData.slug);
+                }
+              }
+
               const result = await ExperimentManager.enroll(
                 jsonData,
                 "nimbus-devtools",
               );
-              return result !== null;
+              return { enrolled: result !== null, error: null };
             } catch (error) {
               console.error(error);
               throw error;
@@ -85,16 +111,17 @@ var nimbus = class extends ExtensionAPI {
                 "userFacingDescription": "Testing the feature with feature ID: ${featureId}."
               }`);
 
-              const experimentStore = ExperimentManager.store.getAll();
-              const slugExistsInStore = experimentStore.some(
-                (experiment) => experiment.slug === recipe.slug,
-              );
+              const slugExistsInStore = ExperimentManager.store
+                .getAll()
+                .some((experiment) => experiment.slug === recipe.slug);
               const activeEnrollment =
-                experimentStore.find(
-                  (experiment) =>
-                    experiment.featureIds.includes(featureId) &&
-                    experiment.active,
-                )?.slug || null;
+                ExperimentManager.store
+                  .getAll()
+                  .find(
+                    (experiment) =>
+                      experiment.featureIds.includes(featureId) &&
+                      experiment.active,
+                  )?.slug ?? null;
 
               if (slugExistsInStore || activeEnrollment) {
                 if (!forceEnroll) {

src/apis/nimbus.json

@@ -14,6 +14,11 @@
             "type": "object",
             "additionalProperties": true,
             "description": "An object representing the experiment to enroll in."
+          },
+          {
+            "name": "forceEnroll",
+            "type": "boolean",
+            "description": "A boolean representing whether or not the enrollment should be forced."
           }
         ]
       },

src/types/global.d.ts

@@ -57,28 +57,31 @@ declare module "mozjexl/lib/parser/Parser" {
   }
 }
 
-declare namespace browser.experiments.nimbus {
-  type EnrollWithFeatureConfigResult =
-    | {
-        enrolled: true;
-        error: null;
-      }
-    | {
-        enrolled: false;
-        error: {
-          slugExistsInStore: boolean;
-          activeEnrollment: string | null;
-        };
+type EnrollInExperimentResult =
+  | {
+      enrolled: true;
+      error: null;
+    }
+  | {
+      enrolled: false;
+      error: {
+        slugExistsInStore: boolean;
+        activeEnrollment: string | null;
       };
+    };
 
-  function enrollInExperiment(jsonData: object): Promise<boolean>;
+declare namespace browser.experiments.nimbus {
+  function enrollInExperiment(
+    jsonData: object,
+    forceEnroll: boolean,
+  ): Promise<EnrollInExperimentResult>;
 
   function enrollWithFeatureConfig(
     featureId: string,
     featureValue: object,
     isRollout: boolean,
     forceEnroll: boolean,
-  ): Promise<EnrollWithFeatureConfigResult>;
+  ): Promise<EnrollInExperimentResult>;
 
   function getFeatureConfigs(): Promise<string[]>;
 

src/ui/components/EnrollmentError.tsx

@@ -0,0 +1,57 @@
+import { FC } from "react";
+
+const EnrollmentError: FC<{
+  slug: string;
+  enrollError: EnrollInExperimentResult["error"] | null;
+}> = ({ slug, enrollError }) => {
+  if (!enrollError) {
+    return null;
+  }
+  const { activeEnrollment, slugExistsInStore } = enrollError;
+
+  if (activeEnrollment && slugExistsInStore && slug == activeEnrollment) {
+    return (
+      <p>
+        There is already an enrollment for the slug: <strong>{slug}</strong>.
+        Would you like to proceed with force enrollment by unenrolling,
+        deleting, and enrolling into the new configuration?
+      </p>
+    );
+  } else if (
+    activeEnrollment &&
+    slugExistsInStore &&
+    slug !== activeEnrollment
+  ) {
+    return (
+      <p>
+        There is already an active enrollment for the feature with a different
+        slug. Would you like to proceed with force enrollment by unenrolling,
+        deleting, and enrolling into the new configuration?
+      </p>
+    );
+  }
+
+  if (activeEnrollment) {
+    return (
+      <p>
+        There is an active enrollment for the slug:{" "}
+        <strong>{activeEnrollment}</strong>. Would you like to unenroll from the
+        active enrollment and enroll into the new configuration?
+      </p>
+    );
+  }
+
+  if (slugExistsInStore) {
+    return (
+      <p>
+        There is an inactive enrollment stored for the slug:{" "}
+        <strong>{slug}</strong>. Would you like to delete the inactive
+        enrollment and enroll into the new configuration?
+      </p>
+    );
+  }
+
+  return null;
+};
+
+export default EnrollmentError;

src/ui/components/FeatureConfigPage.tsx

@@ -3,26 +3,14 @@ import { Form, Container, Button, Row, Col, Modal } from "react-bootstrap";
 
 import { useToastsContext } from "../hooks/useToasts";
 import DropdownMenu from "./DropdownMenu";
-
-type EnrollWithFeatureConfigResult =
-  | {
-      enrolled: true;
-      error: null;
-    }
-  | {
-      enrolled: false;
-      error: {
-        slugExistsInStore: boolean;
-        activeEnrollment: string | null;
-      };
-    };
+import EnrollmentError from "./EnrollmentError";
 
 const FeatureConfigPage: FC = () => {
   const [jsonInput, setJsonInput] = useState("");
   const [selectedFeatureId, setSelectedFeatureId] = useState("");
   const [isRollout, setIsRollout] = useState(false);
   const [enrollError, setEnrollError] =
-    useState<EnrollWithFeatureConfigResult["error"]>(null);
+    useState<EnrollInExperimentResult["error"]>(null);
   const { addToast } = useToastsContext();
 
   const slug = useMemo(() => {
@@ -54,8 +42,6 @@ const FeatureConfigPage: FC = () => {
       event?: React.MouseEvent<HTMLButtonElement>,
       forceEnroll = false,
     ) => {
-      event?.preventDefault();
-
       if (selectedFeatureId === "") {
         addToast({
           message: "Invalid Input: Select feature",
@@ -65,7 +51,7 @@ const FeatureConfigPage: FC = () => {
         addToast({ message: "Invalid Input: Enter JSON", variant: "danger" });
       } else {
         try {
-          const result: EnrollWithFeatureConfigResult =
+          const result =
             await browser.experiments.nimbus.enrollWithFeatureConfig(
               selectedFeatureId,
               JSON.parse(jsonInput) as object,
@@ -100,49 +86,6 @@ const FeatureConfigPage: FC = () => {
     setEnrollError(null);
   }, [setEnrollError]);
 
-  function EnrollmentError(
-    slug: string,
-    enrollError: EnrollWithFeatureConfigResult["error"],
-  ) {
-    if (!enrollError) {
-      return null;
-    }
-    const { activeEnrollment, slugExistsInStore } = enrollError;
-
-    if (activeEnrollment && slugExistsInStore) {
-      return (
-        <p>
-          There already is an enrollment for the feature:{" "}
-          <strong>{slug}</strong>. Would you like to proceed with force
-          enrollment by unenrolling, deleting, and re-enrolling into the new
-          configuration?
-        </p>
-      );
-    }
-
-    if (activeEnrollment) {
-      return (
-        <p>
-          There is an active enrollment for the feature: <strong>{slug}</strong>
-          . Would you like to unenroll from the active enrollment and re-enroll
-          into the new configuration?
-        </p>
-      );
-    }
-
-    if (slugExistsInStore) {
-      return (
-        <p>
-          There is an inactive enrollment stored for the feature:{" "}
-          <strong>{slug}</strong>. Would you like to delete the inactive
-          enrollment and re-enroll into the new configuration?
-        </p>
-      );
-    }
-
-    return null;
-  }
-
   return (
     <Container className="main-content p-2 overflow-hidden">
       <Form>
@@ -183,7 +126,9 @@ const FeatureConfigPage: FC = () => {
         <Modal.Header closeButton>
           <Modal.Title>Force Enrollment</Modal.Title>
         </Modal.Header>
-        <Modal.Body>{EnrollmentError(slug, enrollError)}</Modal.Body>
+        <Modal.Body>
+          <EnrollmentError slug={slug} enrollError={enrollError} />
+        </Modal.Body>
         <Modal.Footer>
           <Button variant="secondary" onClick={handleModalClose}>
             Cancel