Only send experimentationId to Glean

Glean.js doesn't support sending complex objects in extra_keys, so
we can't send the enrollment data there yet. We will look into
doing that when Glean.js is updated.

src/app/hooks/useGlean.ts

@@ -13,7 +13,7 @@ import { useExperiments } from "../../contextProviders/experiments";
 
 export const useGlean = () => {
   const session = useSession();
-  const experimentData = useExperiments();
+  const experiments = useExperiments();
   // Telemetry recording is mocked in our unit tests, therefore we
   // do not have test coverage for this method.
   /* c8 ignore start */
@@ -44,38 +44,19 @@ export const useGlean = () => {
       // Record the `nimbus_*` keys on all events.
       // `nimbus_*` is set on every metric, but it's too much work for TypeScript
       // to infer that — hence the type assertion.
-      if (
-        experimentData &&
-        typeof experimentData["Enrollments"] !== "undefined"
-      ) {
-        (data as GleanMetricMap["button"]["click"]).nimbus_user_ids =
-          experimentData["Enrollments"].map(
-            (enrollment) => enrollment.nimbus_user_id,
-          );
-        (data as GleanMetricMap["button"]["click"]).nimbus_app_ids =
-          experimentData["Enrollments"].map((enrollment) => enrollment.app_id);
-        (data as GleanMetricMap["button"]["click"]).nimbus_experiments =
-          experimentData["Enrollments"].map(
-            (enrollment) => enrollment.experiment,
-          );
-        (data as GleanMetricMap["button"]["click"]).nimbus_branches =
-          experimentData["Enrollments"].map((enrollment) => enrollment.branch);
-        (data as GleanMetricMap["button"]["click"]).nimbus_experiment_types =
-          experimentData["Enrollments"].map(
-            (enrollment) => enrollment.experiment_type,
-          );
-        (data as GleanMetricMap["button"]["click"]).nimbus_are_previews =
-          experimentData["Enrollments"].map(
-            (enrollment) => enrollment.is_preview,
-          );
+      if (experiments === null) {
+        console.warn(
+          "`useGlean` is used in a component that is not a (grand)child of <ExperimentsProvider>",
+        );
       } else {
-        console.warn("No experiment data available for Glean");
+        (data as GleanMetricMap["button"]["click"]).nimbus_user_id =
+          experiments.experimentationId;
       }
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       mod[event].record(data as any);
     },
-    [isPremiumUser, experimentData],
+    [isPremiumUser, experiments],
   );
   /* c8 ignore end */
 

src/app/layout.tsx

@@ -91,7 +91,10 @@ export default async function RootLayout({
         data-ga4-measurement-id={CONST_GA4_MEASUREMENT_ID}
         data-node-env={process.env.NODE_ENV}
       >
-        <ExperimentsProvider experimentData={experimentData}>
+        <ExperimentsProvider
+          experimentData={experimentData}
+          experimentationId={experimentationId}
+        >
           <SessionProvider session={session}>{children}</SessionProvider>
         </ExperimentsProvider>
       </body>

src/contextProviders/experiments.test.tsx

@@ -14,7 +14,10 @@ describe("Experiment context provider", () => {
       return <div />;
     };
     const { container } = render(
-      <ExperimentsProvider experimentData={defaultExperimentData}>
+      <ExperimentsProvider
+        experimentData={defaultExperimentData}
+        experimentationId="-1"
+      >
         <TestComponent />
       </ExperimentsProvider>,
     );

src/contextProviders/experiments.tsx

@@ -10,18 +10,23 @@ import { ExperimentData_V2_Or_V2LikeV1 } from "../app/functions/server/getExperi
 interface ExperimentsProviderProps {
   children: ReactNode;
   experimentData: ExperimentData_V2_Or_V2LikeV1;
+  experimentationId: string;
 }
 
-export const ExperimentsContext =
-  createContext<ExperimentData_V2_Or_V2LikeV1 | null>(null);
+export const ExperimentsContext = createContext<{
+  experimentData: ExperimentData_V2_Or_V2LikeV1;
+  experimentationId: string;
+} | null>(null);
 
-export const ExperimentsProvider = ({
-  children,
-  experimentData,
-}: ExperimentsProviderProps) => {
+export const ExperimentsProvider = (props: ExperimentsProviderProps) => {
   return (
-    <ExperimentsContext.Provider value={experimentData}>
-      {children}
+    <ExperimentsContext.Provider
+      value={{
+        experimentData: props.experimentData,
+        experimentationId: props.experimentationId,
+      }}
+    >
+      {props.children}
     </ExperimentsContext.Provider>
   );
 };