From 98cdb1ab77a1e1746b29571fc37c18cb55a3c422 Mon Sep 17 00:00:00 2001
From: Dan Mosedale <dmose2@gmail.com>
Date: Thu, 13 Mar 2025 17:20:36 -0700
Subject: [PATCH 01/26] Initial TODO list

---
 TODO.md | 85 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 TODO.md

diff --git a/TODO.md b/TODO.md
new file mode 100644
index 00000000..a12abd3c
--- /dev/null
+++ b/TODO.md
@@ -0,0 +1,85 @@
+Goal: stand up mobile version of experiments/rollouts
+
+User Story: As a mobile PM, I should be able to understand what things are in experiments and
+ rollouts for messaging & onboarding & what the clickthrough rates look like
+
+
+* research
+    * [surfaces & guidelines](https://mozilla-hub.atlassian.net/wiki/spaces/FIREFOX/pages/210206760/Mobile+Message+Surface+Guidelines)
+    * [mobile telemetry docs](https://experimenter.info/messaging/mobile-messaging/#events-emitted)
+    * [desktop explore](https://mozilla.cloud.looker.com/explore/user_journey/event_counts)
+
+    1. look at iOS telemetry & explores
+        * [iOS message probes](https://dictionary.telemetry.mozilla.org/apps/firefox_ios?page=1&search=messag)
+        * Note no experiments probes like Android has
+        * [iOS event count explore](https://mozilla.cloud.looker.com/explore/firefox_ios/event_counts?qid=OZqOXzZqTujARgvCK12NJ4)
+        * [recent iOS clicked events](https://mozilla.cloud.looker.com/explore/firefox_ios/event_counts?qid=jQpgYwZpBZEhW73B1dcyzu&toggle=fil,vis)
+        * XXX look at onboarding also
+
+    2. look at Android telemetry & explores
+        *  [Android message probes - Glean dictionary](https://dictionary.telemetry.mozilla.org/apps/fenix?page=1&search=messaging)
+        * [android explore](https://mozilla.cloud.looker.com/explore/fenix/event_counts)$$
+        * [recent android messaing click events with most extra keys and experiments](https://mozilla.cloud.looker.com/explore/fenix/event_counts?qid=u0OKWHjWgTcstNgbzvyyBc&toggle=fil)
+        * [recent android onboarding events](https://mozilla.cloud.looker.com/explore/fenix/event_counts?qid=n71HDr0LIxuNS3vGX9essN&toggle=fil)
+          * Need to understand this telemetry compared to JSON
+ *
+* open questions
+    * what does telemetry look like for onboarding?  other surfaces?  similar to messaging?
+    * Does Click telemetry on both iOS and Android alwyas mean CTA?  Or something else?
+    * What is action_uuid extra key (see docs)?
+    * XXX Do non-experimental message send pings on iOS?  on Android?
+      *
+
+
+1. Draft plan for Android page
+   1. ?File ticket
+   2. Build chart for Android messaging (DONE)
+   3. Build 2nd chart (LATER)
+   4. Build dashboard (DONE - id = 2191)
+   5. Move to shared folder (LATER)
+
+    XXX FINISH BUILDING todo list; XXX plan team work; XXX map to calendar
+
+   1. Build Android page
+      1. Review existing clone for "completed" (DONE)
+      2. ?Consider options for cloning, since we'll want Android completed page too, and iOS pages
+         1. Clean way:
+                3. Create new dir with new page.tsx (MUST)
+            4. TDD Factor out dashboard (prob MUST)
+            5. Factor "application=" out of env (MUST)
+
+         2. Add cases / refactor messageUtils.getDashboard (MUST)
+         3. Add cases / refactor experimentUtils.ts (MUST)
+         4. Update / move messageUtils.getDashboardIdForTemplate (MUST)
+         5. Add cases / refactor nimbusRecipe.ts:getBranchInfo (MUST)
+         6. Add cases / refactor templates & getSurfaceDataForTemplate (MUST)
+         7. Add cases / refactor looker.ts:getCTRPercentData (LATER)
+         8. Update columns.tsx:filterBySurface (LATER)
+         9. TDD Factor Out NimbusMessageTable (NICE)
+         10. TDD Factor out high-level data fetching (NICE)
+
+      3. Pull in Android experiments using that URL
+      4. Build dashboard link
+         1. How to handle multi types
+      5. Build CTR
+         1. How to handle multi types
+
+
+2. standup 2nd page
+
+    * TDD? clone for mobile
+
+3. standup 2nd dashboard
+
+    * review mobile telemetry using glean dict
+    * look at explores available for those tables
+    *  TDD? subclass recipes (desktop & mobile)
+
+   1. Separate dashboards per surface: onboarding, (messaging genrally - may need to split into message_surface dashboard)
+   2.
+2.What about QA?
+
+
+Later:
+* clean up text on messaging graph
+*
\ No newline at end of file

From e37f1d42306ef6f6cc8f7dd5abc0228ba0eb622c Mon Sep 17 00:00:00 2001
From: Dan Mosedale <dmose2@gmail.com>
Date: Fri, 14 Mar 2025 14:39:09 -0700
Subject: [PATCH 02/26] Cleanup TODO list some

---
 TODO.md | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/TODO.md b/TODO.md
index a12abd3c..5c0df5c7 100644
--- a/TODO.md
+++ b/TODO.md
@@ -42,26 +42,26 @@ User Story: As a mobile PM, I should be able to understand what things are in ex
 
    1. Build Android page
       1. Review existing clone for "completed" (DONE)
-      2. ?Consider options for cloning, since we'll want Android completed page too, and iOS pages
-         1. Clean way:
-                3. Create new dir with new page.tsx (MUST)
-            4. TDD Factor out dashboard (prob MUST)
-            5. Factor "application=" out of env (MUST)
-
-         2. Add cases / refactor messageUtils.getDashboard (MUST)
-         3. Add cases / refactor experimentUtils.ts (MUST)
-         4. Update / move messageUtils.getDashboardIdForTemplate (MUST)
-         5. Add cases / refactor nimbusRecipe.ts:getBranchInfo (MUST)
-         6. Add cases / refactor templates & getSurfaceDataForTemplate (MUST)
-         7. Add cases / refactor looker.ts:getCTRPercentData (LATER)
-         8. Update columns.tsx:filterBySurface (LATER)
-         9. TDD Factor Out NimbusMessageTable (NICE)
-         10. TDD Factor out high-level data fetching (NICE)
-
-      3. Pull in Android experiments using that URL
-      4. Build dashboard link
+      2. ?Consider options for cloning, since we'll want Android completed page too, and iOS pages (DONE)
+
+      3. Create new dir with new page.tsx (MUST)
+
+      4. TDD Factor out dashboard (prob MUST)
+      5. Factor "application=" out of env (MUST)
+      6. Add cases / refactor messageUtils.getDashboard (MUST)
+      7. Add cases / refactor experimentUtils.ts (MUST)
+      8. Update / move messageUtils.getDashboardIdForTemplate (MUST)
+      9.  Add cases / refactor nimbusRecipe.ts:getBranchInfo (MUST)
+      10. Add cases / refactor templates & getSurfaceDataForTemplate (MUST)
+      11. Add cases / refactor looker.ts:getCTRPercentData (LATER)
+      12. Update columns.tsx:filterBySurface (LATER)
+      13. TDD Factor Out NimbusMessageTable (NICE)
+      14. TDD Factor out high-level data fetching (NICE)
+
+      15. Pull in Android experiments using that URL
+      16. Build dashboard link
          1. How to handle multi types
-      5. Build CTR
+      17. Build CTR
          1. How to handle multi types
 
 

From 7dfb4e6e585fccd8c7ae0f59d976ccaea9d7b42e Mon Sep 17 00:00:00 2001
From: Dan Mosedale <dmose2@gmail.com>
Date: Fri, 14 Mar 2025 17:55:01 -0700
Subject: [PATCH 03/26] Pull Dashboard into own component used by page.txt

---
 .../app/{page.test.tsx => dashboard.test.tsx} |  14 +-
 app/dashboard.tsx                             | 309 ++++++++++++++++++
 app/page.tsx                                  | 309 +-----------------
 3 files changed, 319 insertions(+), 313 deletions(-)
 rename __tests__/app/{page.test.tsx => dashboard.test.tsx} (77%)
 create mode 100644 app/dashboard.tsx

diff --git a/__tests__/app/page.test.tsx b/__tests__/app/dashboard.test.tsx
similarity index 77%
rename from __tests__/app/page.test.tsx
rename to __tests__/app/dashboard.test.tsx
index 76ac78ca..5a93807d 100644
--- a/__tests__/app/page.test.tsx
+++ b/__tests__/app/dashboard.test.tsx
@@ -1,4 +1,4 @@
-import Dashboard from "@/app/page";
+import { Dashboard } from "@/app/dashboard";
 import CompleteExperimentsDashboard from "@/app/complete/page";
 import { render } from "@testing-library/react";
 import { ExperimentFakes } from "../ExperimentFakes.mjs";
@@ -11,7 +11,7 @@ global.fetch = jest.fn(() =>
   }),
 ) as jest.Mock;
 
-describe("Page", () => {
+describe("Dashboard", () => {
   it("all timeline pill ids exist in the Dashboard component in /", async () => {
     const dashboard = render(await Dashboard());
 
@@ -19,9 +19,9 @@ describe("Page", () => {
     const experiments = dashboard.getByTestId("live_experiments");
     const rollouts = dashboard.getByTestId("live_rollouts");
 
-    expect(firefox).toBeDefined();
-    expect(experiments).toBeDefined();
-    expect(rollouts).toBeDefined();
+    expect(firefox).toBeInTheDocument();
+    expect(experiments).toBeInTheDocument();
+    expect(rollouts).toBeInTheDocument();
   });
 
   it("all timeline pill ids exist in the Dashboard component in /complete", async () => {
@@ -30,7 +30,7 @@ describe("Page", () => {
     const experiments = dashboard.getByTestId("complete_experiments");
     const rollouts = dashboard.getByTestId("complete_rollouts");
 
-    expect(experiments).toBeDefined();
-    expect(rollouts).toBeDefined();
+    expect(experiments).toBeInTheDocument();
+    expect(rollouts).toBeInTheDocument();
   });
 });
diff --git a/app/dashboard.tsx b/app/dashboard.tsx
new file mode 100644
index 00000000..80c10deb
--- /dev/null
+++ b/app/dashboard.tsx
@@ -0,0 +1,309 @@
+import { types } from "@mozilla/nimbus-shared";
+import {
+  RecipeOrBranchInfo,
+  experimentColumns,
+  FxMSMessageInfo,
+  fxmsMessageColumns,
+} from "./columns";
+import {
+  cleanLookerData,
+  getCTRPercentData,
+  mergeLookerData,
+  runLookQuery,
+} from "@/lib/looker.ts";
+import {
+  getDashboard,
+  getSurfaceDataForTemplate,
+  getTemplateFromMessage,
+  _isAboutWelcomeTemplate,
+  maybeCreateWelcomePreview,
+  getPreviewLink,
+  messageHasMicrosurvey,
+  compareSurfacesFn,
+} from "../lib/messageUtils.ts";
+
+import { NimbusRecipeCollection } from "../lib/nimbusRecipeCollection";
+import { _substituteLocalizations } from "../lib/experimentUtils.ts";
+
+import { NimbusRecipe } from "../lib/nimbusRecipe.ts";
+import { MessageTable } from "./message-table";
+
+import { MenuButton } from "@/components/ui/menubutton.tsx";
+import { InfoPopover } from "@/components/ui/infopopover.tsx";
+import { Timeline } from "@/components/ui/timeline.tsx";
+
+const isLookerEnabled = process.env.IS_LOOKER_ENABLED === "true";
+
+const hidden_message_impression_threshold =
+  process.env.HIDDEN_MESSAGE_IMPRESSION_THRESHOLD;
+
+/**
+ * A sorting function to sort messages by their start dates in descending order.
+ * If one or both of the recipes is missing a start date, they will be ordered
+ * identically since there's not enough information to properly sort them by
+ * date.
+ *
+ * @param a Nimbus recipe to compare with `b`.
+ * @param b Nimbus recipe to compare with `a`.
+ * @returns -1 if the start date for message a is after the start date for
+ *          message b, zero if they're equal, and 1 otherwise.
+ */
+function compareDatesFn(a: NimbusRecipe, b: NimbusRecipe): number {
+  if (a._rawRecipe.startDate && b._rawRecipe.startDate) {
+    if (a._rawRecipe.startDate > b._rawRecipe.startDate) {
+      return -1;
+    } else if (a._rawRecipe.startDate < b._rawRecipe.startDate) {
+      return 1;
+    }
+  }
+
+  // a must be equal to b
+  return 0;
+}
+
+async function getASRouterLocalColumnFromJSON(
+  messageDef: any,
+): Promise<FxMSMessageInfo> {
+  let fxmsMsgInfo: FxMSMessageInfo = {
+    product: "Desktop",
+    id: messageDef.id,
+    template: messageDef.template,
+    surface: getSurfaceDataForTemplate(getTemplateFromMessage(messageDef))
+      .surface,
+    segment: "some segment",
+    metrics: "some metrics",
+    ctrPercent: undefined, // may be populated from Looker data
+    ctrPercentChange: undefined, // may be populated from Looker data
+    previewLink: getPreviewLink(maybeCreateWelcomePreview(messageDef)),
+    impressions: undefined, // may be populated from Looker data
+    hasMicrosurvey: messageHasMicrosurvey(messageDef.id),
+    hidePreview: messageDef.hidePreview,
+  };
+
+  const channel = "release";
+
+  if (isLookerEnabled) {
+    const ctrPercentData = await getCTRPercentData(
+      fxmsMsgInfo.id,
+      fxmsMsgInfo.template,
+      channel,
+    );
+    if (ctrPercentData) {
+      fxmsMsgInfo.ctrPercent = ctrPercentData.ctrPercent;
+      fxmsMsgInfo.impressions = ctrPercentData.impressions;
+    }
+  }
+
+  fxmsMsgInfo.ctrDashboardLink = getDashboard(
+    fxmsMsgInfo.template,
+    fxmsMsgInfo.id,
+    channel,
+  );
+
+  // dashboard link -> dashboard id -> query id -> query -> ctr_percent_from_lastish_day
+
+  // console.log("fxmsMsgInfo: ", fxmsMsgInfo)
+
+  return fxmsMsgInfo;
+}
+
+let columnsShown = false;
+
+type NimbusExperiment = types.experiments.NimbusExperiment;
+
+/**
+ * Appends any FxMS telemetry message data from the query in Look
+ * https://mozilla.cloud.looker.com/looks/2162 that does not already exist (ie.
+ * no duplicate message ids) in existingMessageData and returns the result. The
+ * message data is also cleaned up to match the message data objects from
+ * ASRouter, remove any test messages, and update templates.
+ */
+async function appendFxMSTelemetryData(existingMessageData: any) {
+  // Get Looker message data (taken from the query in Look
+  // https://mozilla.cloud.looker.com/looks/2162)
+  const lookId = "2162";
+  let lookerData = await runLookQuery(lookId);
+
+  // Clean and merge Looker data with existing data
+  let jsonLookerData = cleanLookerData(lookerData);
+  let mergedData = mergeLookerData(existingMessageData, jsonLookerData);
+
+  return mergedData;
+}
+
+/**
+ * @returns message data in the form of FxMSMessageInfo from
+ * lib/asrouter-local-prod-messages/data.json and also FxMS telemetry data if
+ * Looker credentials are enabled.
+ */
+async function getASRouterLocalMessageInfoFromFile(): Promise<
+  FxMSMessageInfo[]
+> {
+  const fs = require("fs");
+
+  let data = fs.readFileSync(
+    "lib/asrouter-local-prod-messages/data.json",
+    "utf8",
+  );
+  let json_data = JSON.parse(data);
+
+  if (isLookerEnabled) {
+    json_data = await appendFxMSTelemetryData(json_data);
+  }
+
+  let messages = await Promise.all(
+    json_data.map(async (messageDef: any): Promise<FxMSMessageInfo> => {
+      return await getASRouterLocalColumnFromJSON(messageDef);
+    }),
+  );
+
+  return messages;
+}
+
+async function getMsgExpRecipeCollection(
+  recipeCollection: NimbusRecipeCollection,
+): Promise<NimbusRecipeCollection> {
+  const expOnlyCollection = new NimbusRecipeCollection();
+  expOnlyCollection.recipes = recipeCollection.recipes.filter((recipe) =>
+    recipe.isExpRecipe(),
+  );
+  console.log("expOnlyCollection.length = ", expOnlyCollection.recipes.length);
+
+  const msgExpRecipeCollection = new NimbusRecipeCollection();
+  msgExpRecipeCollection.recipes = expOnlyCollection.recipes
+    .filter((recipe) => recipe.usesMessagingFeatures())
+    .sort(compareDatesFn);
+  console.log(
+    "msgExpRecipeCollection.length = ",
+    msgExpRecipeCollection.recipes.length,
+  );
+
+  return msgExpRecipeCollection;
+}
+
+async function getMsgRolloutCollection(
+  recipeCollection: NimbusRecipeCollection,
+): Promise<NimbusRecipeCollection> {
+  const msgRolloutRecipeCollection = new NimbusRecipeCollection();
+  msgRolloutRecipeCollection.recipes = recipeCollection.recipes
+    .filter((recipe) => recipe.usesMessagingFeatures() && !recipe.isExpRecipe())
+    .sort(compareDatesFn);
+  console.log(
+    "msgRolloutRecipeCollection.length = ",
+    msgRolloutRecipeCollection.recipes.length,
+  );
+
+  return msgRolloutRecipeCollection;
+}
+
+export async function Dashboard() {
+  // Check to see if Auth is enabled
+  const isAuthEnabled = process.env.IS_AUTH_ENABLED === "true";
+
+  const recipeCollection = new NimbusRecipeCollection();
+  await recipeCollection.fetchRecipes();
+  console.log("recipeCollection.length = ", recipeCollection.recipes.length);
+
+  // XXX await Promise.allSettled for all three loads concurrently
+  const localData = (await getASRouterLocalMessageInfoFromFile()).sort(
+    compareSurfacesFn,
+  );
+  const msgExpRecipeCollection =
+    await getMsgExpRecipeCollection(recipeCollection);
+  const msgRolloutRecipeCollection =
+    await getMsgRolloutCollection(recipeCollection);
+
+  // Get in format useable by MessageTable
+  const experimentAndBranchInfo: RecipeOrBranchInfo[] = isLookerEnabled
+    ? // Update branches inside recipe infos with CTR percents
+      await msgExpRecipeCollection.getExperimentAndBranchInfos()
+    : msgExpRecipeCollection.recipes.map((recipe: NimbusRecipe) =>
+        recipe.getRecipeInfo(),
+      );
+
+  const totalExperiments = msgExpRecipeCollection.recipes.length;
+
+  const msgRolloutInfo: RecipeOrBranchInfo[] = isLookerEnabled
+    ? // Update branches inside recipe infos with CTR percents
+      await msgRolloutRecipeCollection.getExperimentAndBranchInfos()
+    : msgRolloutRecipeCollection.recipes.map((recipe: NimbusRecipe) =>
+        recipe.getRecipeInfo(),
+      );
+
+  const totalRolloutExperiments = msgRolloutRecipeCollection.recipes.length;
+
+  return (
+    <div>
+      <div className="sticky top-0 z-50 bg-background flex justify-between px-20 py-8">
+        <h4 className="scroll-m-20 text-3xl font-semibold">Skylight</h4>
+        <MenuButton isComplete={false} />
+      </div>
+
+      <h5
+        id="firefox"
+        data-testid="firefox"
+        className="scroll-m-20 text-xl font-semibold text-center pt-6 flex items-center justify-center gap-x-1"
+      >
+        Desktop Messages Released on Firefox
+        <InfoPopover
+          content="All messages listed in this table are in the release channel and are either currently live or have been live on Firefox at one time."
+          iconStyle="h-7 w-7 p-1 rounded-full cursor-pointer border-0 bg-slate-100 hover:bg-slate-200"
+        />
+      </h5>
+      <div className="sticky top-24 z-10 bg-background py-2 flex justify-center">
+        <Timeline active="firefox" />
+      </div>
+
+      <div className="container mx-auto py-10">
+        <MessageTable
+          columns={fxmsMessageColumns}
+          data={localData}
+          canHideMessages={true}
+          impressionsThreshold={hidden_message_impression_threshold}
+        />
+      </div>
+
+      <h5 className="scroll-m-20 text-xl font-semibold text-center pt-4">
+        Current Desktop Message Rollouts
+      </h5>
+      <h5
+        id="live_rollouts"
+        data-testid="live_rollouts"
+        className="scroll-m-20 text-sm text-center"
+      >
+        Total: {totalRolloutExperiments}
+      </h5>
+      <div className="sticky top-24 z-10 bg-background py-2 flex justify-center">
+        <Timeline active="rollout" />
+      </div>
+      <div className="container mx-auto py-10">
+        <MessageTable
+          columns={experimentColumns}
+          data={msgRolloutInfo}
+          defaultExpanded={true}
+        />
+      </div>
+
+      <h5 className="scroll-m-20 text-xl font-semibold text-center pt-4">
+        Current Desktop Message Experiments
+      </h5>
+      <h5
+        id="live_experiments"
+        data-testid="live_experiments"
+        className="scroll-m-20 text-sm text-center"
+      >
+        Total: {totalExperiments}
+      </h5>
+      <div className="sticky top-24 z-10 bg-background py-2 flex justify-center">
+        <Timeline active="experiment" />
+      </div>
+      <div className="space-y-5 container mx-auto py-10">
+        <MessageTable
+          columns={experimentColumns}
+          data={experimentAndBranchInfo}
+          defaultExpanded={true}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
index b711862d..f8d1fb6f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,309 +1,6 @@
 import { types } from "@mozilla/nimbus-shared";
-import {
-  RecipeOrBranchInfo,
-  experimentColumns,
-  FxMSMessageInfo,
-  fxmsMessageColumns,
-} from "./columns";
-import {
-  cleanLookerData,
-  getCTRPercentData,
-  mergeLookerData,
-  runLookQuery,
-} from "@/lib/looker.ts";
-import {
-  getDashboard,
-  getSurfaceDataForTemplate,
-  getTemplateFromMessage,
-  _isAboutWelcomeTemplate,
-  maybeCreateWelcomePreview,
-  getPreviewLink,
-  messageHasMicrosurvey,
-  compareSurfacesFn,
-} from "../lib/messageUtils.ts";
+import { Dashboard } from "@/app/dashboard";
 
-import { NimbusRecipeCollection } from "../lib/nimbusRecipeCollection";
-import { _substituteLocalizations } from "../lib/experimentUtils.ts";
-
-import { NimbusRecipe } from "../lib/nimbusRecipe.ts";
-import { MessageTable } from "./message-table";
-
-import { MenuButton } from "@/components/ui/menubutton.tsx";
-import { InfoPopover } from "@/components/ui/infopopover.tsx";
-import { Timeline } from "@/components/ui/timeline.tsx";
-
-const isLookerEnabled = process.env.IS_LOOKER_ENABLED === "true";
-
-const hidden_message_impression_threshold =
-  process.env.HIDDEN_MESSAGE_IMPRESSION_THRESHOLD;
-
-/**
- * A sorting function to sort messages by their start dates in descending order.
- * If one or both of the recipes is missing a start date, they will be ordered
- * identically since there's not enough information to properly sort them by
- * date.
- *
- * @param a Nimbus recipe to compare with `b`.
- * @param b Nimbus recipe to compare with `a`.
- * @returns -1 if the start date for message a is after the start date for
- *          message b, zero if they're equal, and 1 otherwise.
- */
-function compareDatesFn(a: NimbusRecipe, b: NimbusRecipe): number {
-  if (a._rawRecipe.startDate && b._rawRecipe.startDate) {
-    if (a._rawRecipe.startDate > b._rawRecipe.startDate) {
-      return -1;
-    } else if (a._rawRecipe.startDate < b._rawRecipe.startDate) {
-      return 1;
-    }
-  }
-
-  // a must be equal to b
-  return 0;
-}
-
-async function getASRouterLocalColumnFromJSON(
-  messageDef: any,
-): Promise<FxMSMessageInfo> {
-  let fxmsMsgInfo: FxMSMessageInfo = {
-    product: "Desktop",
-    id: messageDef.id,
-    template: messageDef.template,
-    surface: getSurfaceDataForTemplate(getTemplateFromMessage(messageDef))
-      .surface,
-    segment: "some segment",
-    metrics: "some metrics",
-    ctrPercent: undefined, // may be populated from Looker data
-    ctrPercentChange: undefined, // may be populated from Looker data
-    previewLink: getPreviewLink(maybeCreateWelcomePreview(messageDef)),
-    impressions: undefined, // may be populated from Looker data
-    hasMicrosurvey: messageHasMicrosurvey(messageDef.id),
-    hidePreview: messageDef.hidePreview,
-  };
-
-  const channel = "release";
-
-  if (isLookerEnabled) {
-    const ctrPercentData = await getCTRPercentData(
-      fxmsMsgInfo.id,
-      fxmsMsgInfo.template,
-      channel,
-    );
-    if (ctrPercentData) {
-      fxmsMsgInfo.ctrPercent = ctrPercentData.ctrPercent;
-      fxmsMsgInfo.impressions = ctrPercentData.impressions;
-    }
-  }
-
-  fxmsMsgInfo.ctrDashboardLink = getDashboard(
-    fxmsMsgInfo.template,
-    fxmsMsgInfo.id,
-    channel,
-  );
-
-  // dashboard link -> dashboard id -> query id -> query -> ctr_percent_from_lastish_day
-
-  // console.log("fxmsMsgInfo: ", fxmsMsgInfo)
-
-  return fxmsMsgInfo;
-}
-
-let columnsShown = false;
-
-type NimbusExperiment = types.experiments.NimbusExperiment;
-
-/**
- * Appends any FxMS telemetry message data from the query in Look
- * https://mozilla.cloud.looker.com/looks/2162 that does not already exist (ie.
- * no duplicate message ids) in existingMessageData and returns the result. The
- * message data is also cleaned up to match the message data objects from
- * ASRouter, remove any test messages, and update templates.
- */
-async function appendFxMSTelemetryData(existingMessageData: any) {
-  // Get Looker message data (taken from the query in Look
-  // https://mozilla.cloud.looker.com/looks/2162)
-  const lookId = "2162";
-  let lookerData = await runLookQuery(lookId);
-
-  // Clean and merge Looker data with existing data
-  let jsonLookerData = cleanLookerData(lookerData);
-  let mergedData = mergeLookerData(existingMessageData, jsonLookerData);
-
-  return mergedData;
-}
-
-/**
- * @returns message data in the form of FxMSMessageInfo from
- * lib/asrouter-local-prod-messages/data.json and also FxMS telemetry data if
- * Looker credentials are enabled.
- */
-async function getASRouterLocalMessageInfoFromFile(): Promise<
-  FxMSMessageInfo[]
-> {
-  const fs = require("fs");
-
-  let data = fs.readFileSync(
-    "lib/asrouter-local-prod-messages/data.json",
-    "utf8",
-  );
-  let json_data = JSON.parse(data);
-
-  if (isLookerEnabled) {
-    json_data = await appendFxMSTelemetryData(json_data);
-  }
-
-  let messages = await Promise.all(
-    json_data.map(async (messageDef: any): Promise<FxMSMessageInfo> => {
-      return await getASRouterLocalColumnFromJSON(messageDef);
-    }),
-  );
-
-  return messages;
-}
-
-async function getMsgExpRecipeCollection(
-  recipeCollection: NimbusRecipeCollection,
-): Promise<NimbusRecipeCollection> {
-  const expOnlyCollection = new NimbusRecipeCollection();
-  expOnlyCollection.recipes = recipeCollection.recipes.filter((recipe) =>
-    recipe.isExpRecipe(),
-  );
-  console.log("expOnlyCollection.length = ", expOnlyCollection.recipes.length);
-
-  const msgExpRecipeCollection = new NimbusRecipeCollection();
-  msgExpRecipeCollection.recipes = expOnlyCollection.recipes
-    .filter((recipe) => recipe.usesMessagingFeatures())
-    .sort(compareDatesFn);
-  console.log(
-    "msgExpRecipeCollection.length = ",
-    msgExpRecipeCollection.recipes.length,
-  );
-
-  return msgExpRecipeCollection;
-}
-
-async function getMsgRolloutCollection(
-  recipeCollection: NimbusRecipeCollection,
-): Promise<NimbusRecipeCollection> {
-  const msgRolloutRecipeCollection = new NimbusRecipeCollection();
-  msgRolloutRecipeCollection.recipes = recipeCollection.recipes
-    .filter((recipe) => recipe.usesMessagingFeatures() && !recipe.isExpRecipe())
-    .sort(compareDatesFn);
-  console.log(
-    "msgRolloutRecipeCollection.length = ",
-    msgRolloutRecipeCollection.recipes.length,
-  );
-
-  return msgRolloutRecipeCollection;
-}
-
-export default async function Dashboard() {
-  // Check to see if Auth is enabled
-  const isAuthEnabled = process.env.IS_AUTH_ENABLED === "true";
-
-  const recipeCollection = new NimbusRecipeCollection();
-  await recipeCollection.fetchRecipes();
-  console.log("recipeCollection.length = ", recipeCollection.recipes.length);
-
-  // XXX await Promise.allSettled for all three loads concurrently
-  const localData = (await getASRouterLocalMessageInfoFromFile()).sort(
-    compareSurfacesFn,
-  );
-  const msgExpRecipeCollection =
-    await getMsgExpRecipeCollection(recipeCollection);
-  const msgRolloutRecipeCollection =
-    await getMsgRolloutCollection(recipeCollection);
-
-  // Get in format useable by MessageTable
-  const experimentAndBranchInfo: RecipeOrBranchInfo[] = isLookerEnabled
-    ? // Update branches inside recipe infos with CTR percents
-      await msgExpRecipeCollection.getExperimentAndBranchInfos()
-    : msgExpRecipeCollection.recipes.map((recipe: NimbusRecipe) =>
-        recipe.getRecipeInfo(),
-      );
-
-  const totalExperiments = msgExpRecipeCollection.recipes.length;
-
-  const msgRolloutInfo: RecipeOrBranchInfo[] = isLookerEnabled
-    ? // Update branches inside recipe infos with CTR percents
-      await msgRolloutRecipeCollection.getExperimentAndBranchInfos()
-    : msgRolloutRecipeCollection.recipes.map((recipe: NimbusRecipe) =>
-        recipe.getRecipeInfo(),
-      );
-
-  const totalRolloutExperiments = msgRolloutRecipeCollection.recipes.length;
-
-  return (
-    <div>
-      <div className="sticky top-0 z-50 bg-background flex justify-between px-20 py-8">
-        <h4 className="scroll-m-20 text-3xl font-semibold">Skylight</h4>
-        <MenuButton isComplete={false} />
-      </div>
-
-      <h5
-        id="firefox"
-        data-testid="firefox"
-        className="scroll-m-20 text-xl font-semibold text-center pt-6 flex items-center justify-center gap-x-1"
-      >
-        Desktop Messages Released on Firefox
-        <InfoPopover
-          content="All messages listed in this table are in the release channel and are either currently live or have been live on Firefox at one time."
-          iconStyle="h-7 w-7 p-1 rounded-full cursor-pointer border-0 bg-slate-100 hover:bg-slate-200"
-        />
-      </h5>
-      <div className="sticky top-24 z-10 bg-background py-2 flex justify-center">
-        <Timeline active="firefox" />
-      </div>
-
-      <div className="container mx-auto py-10">
-        <MessageTable
-          columns={fxmsMessageColumns}
-          data={localData}
-          canHideMessages={true}
-          impressionsThreshold={hidden_message_impression_threshold}
-        />
-      </div>
-
-      <h5 className="scroll-m-20 text-xl font-semibold text-center pt-4">
-        Current Desktop Message Rollouts
-      </h5>
-      <h5
-        id="live_rollouts"
-        data-testid="live_rollouts"
-        className="scroll-m-20 text-sm text-center"
-      >
-        Total: {totalRolloutExperiments}
-      </h5>
-      <div className="sticky top-24 z-10 bg-background py-2 flex justify-center">
-        <Timeline active="rollout" />
-      </div>
-      <div className="container mx-auto py-10">
-        <MessageTable
-          columns={experimentColumns}
-          data={msgRolloutInfo}
-          defaultExpanded={true}
-        />
-      </div>
-
-      <h5 className="scroll-m-20 text-xl font-semibold text-center pt-4">
-        Current Desktop Message Experiments
-      </h5>
-      <h5
-        id="live_experiments"
-        data-testid="live_experiments"
-        className="scroll-m-20 text-sm text-center"
-      >
-        Total: {totalExperiments}
-      </h5>
-      <div className="sticky top-24 z-10 bg-background py-2 flex justify-center">
-        <Timeline active="experiment" />
-      </div>
-      <div className="space-y-5 container mx-auto py-10">
-        <MessageTable
-          columns={experimentColumns}
-          data={experimentAndBranchInfo}
-          defaultExpanded={true}
-        />
-      </div>
-    </div>
-  );
+export default async function page() {
+  return <Dashboard />;
 }

From 04ddebc45f116ffdfd39c919a148867d2de47c2a Mon Sep 17 00:00:00 2001
From: Dan Mosedale <dmose2@gmail.com>
Date: Fri, 14 Mar 2025 18:02:56 -0700
Subject: [PATCH 04/26] Remove unneeded import

---
 app/page.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/page.tsx b/app/page.tsx
index f8d1fb6f..65022b18 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,4 +1,3 @@
-import { types } from "@mozilla/nimbus-shared";
 import { Dashboard } from "@/app/dashboard";
 
 export default async function page() {

From 8473e5f169e6c17d26cc0e1fbd5d96076e2f6720 Mon Sep 17 00:00:00 2001
From: Dan Mosedale <dmose2@gmail.com>
Date: Mon, 17 Mar 2025 13:59:22 -0700
Subject: [PATCH 05/26] Added launch config for jest tests

---
 .vscode/launch.json | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/.vscode/launch.json b/.vscode/launch.json
index ee3bdd72..7aac9bb8 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -23,6 +23,26 @@
         "uriFormat": "%s",
         "action": "debugWithChrome"
       }
+    },
+    {
+      "type": "node",
+      "name": "vscode-jest-tests.v2.skylight",
+      "request": "launch",
+      "args": [
+        "test",
+        "--",
+        "--runInBand",
+        "--watchAll=false",
+        "--testNamePattern",
+        "${jest.testNamePattern}",
+        "--runTestsByPath",
+        "${jest.testFile}"
+      ],
+      "cwd": "/Users/dmosedale/s/skylight",
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "disableOptimisticBPs": true,
+      "runtimeExecutable": "npm"
     }
   ]
 }

From 2b586024f6368957fcce99d5ad0d5960d6759d34 Mon Sep 17 00:00:00 2001
From: Dan Mosedale <dmose2@gmail.com>
Date: Mon, 17 Mar 2025 14:02:54 -0700
Subject: [PATCH 06/26] Basic refactor without tests

---
 app/dashboard.tsx | 54 ++++++++++++++++++++++++++++-------------------
 app/page.tsx      | 18 ++++++++++++++--
 2 files changed, 48 insertions(+), 24 deletions(-)

diff --git a/app/dashboard.tsx b/app/dashboard.tsx
index 80c10deb..f7aee60a 100644
--- a/app/dashboard.tsx
+++ b/app/dashboard.tsx
@@ -196,44 +196,54 @@ async function getMsgRolloutCollection(
   return msgRolloutRecipeCollection;
 }
 
-export async function Dashboard() {
-  // Check to see if Auth is enabled
-  const isAuthEnabled = process.env.IS_AUTH_ENABLED === "true";
-
+async function fetchData() {
   const recipeCollection = new NimbusRecipeCollection();
   await recipeCollection.fetchRecipes();
   console.log("recipeCollection.length = ", recipeCollection.recipes.length);
 
-  // XXX await Promise.allSettled for all three loads concurrently
   const localData = (await getASRouterLocalMessageInfoFromFile()).sort(
     compareSurfacesFn,
   );
-  const msgExpRecipeCollection =
-    await getMsgExpRecipeCollection(recipeCollection);
-  const msgRolloutRecipeCollection =
-    await getMsgRolloutCollection(recipeCollection);
-
-  // Get in format useable by MessageTable
-  const experimentAndBranchInfo: RecipeOrBranchInfo[] = isLookerEnabled
-    ? // Update branches inside recipe infos with CTR percents
-      await msgExpRecipeCollection.getExperimentAndBranchInfos()
+
+  const msgExpRecipeCollection = await getMsgExpRecipeCollection(recipeCollection);
+  const msgRolloutRecipeCollection = await getMsgRolloutCollection(recipeCollection);
+
+  const experimentAndBranchInfo = isLookerEnabled
+    ? await msgExpRecipeCollection.getExperimentAndBranchInfos()
     : msgExpRecipeCollection.recipes.map((recipe: NimbusRecipe) =>
-        recipe.getRecipeInfo(),
-      );
+        recipe.getRecipeInfo());
 
   const totalExperiments = msgExpRecipeCollection.recipes.length;
 
-  const msgRolloutInfo: RecipeOrBranchInfo[] = isLookerEnabled
-    ? // Update branches inside recipe infos with CTR percents
-      await msgRolloutRecipeCollection.getExperimentAndBranchInfos()
+  const msgRolloutInfo = isLookerEnabled
+    ? await msgRolloutRecipeCollection.getExperimentAndBranchInfos()
     : msgRolloutRecipeCollection.recipes.map((recipe: NimbusRecipe) =>
-        recipe.getRecipeInfo(),
-      );
+        recipe.getRecipeInfo());
 
   const totalRolloutExperiments = msgRolloutRecipeCollection.recipes.length;
 
+  return {
+    localData,
+    experimentAndBranchInfo,
+    totalExperiments,
+    msgRolloutInfo,
+    totalRolloutExperiments,
+  };
+}
+
+export async function Dashboard({ platform = "desktop" }): Promise<JSX.Element> {
+  platform = platform || "desktop"; // Ensure platform is always defined
+
+  const {
+    localData,
+    experimentAndBranchInfo,
+    totalExperiments,
+    msgRolloutInfo,
+    totalRolloutExperiments,
+  } = await fetchData();
+
   return (
-    <div>
+    <div role="main" data-testid="dashboard">
       <div className="sticky top-0 z-50 bg-background flex justify-between px-20 py-8">
         <h4 className="scroll-m-20 text-3xl font-semibold">Skylight</h4>
         <MenuButton isComplete={false} />
diff --git a/app/page.tsx b/app/page.tsx
index 65022b18..e7d77bc3 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,19 @@
 import { Dashboard } from "@/app/dashboard";
 
-export default async function page() {
-  return <Dashboard />;
+export default function Page({
+  searchParams,
+}: {
+  searchParams: { [key: string]: string | string[] | undefined }
+}) {
+
+  console.log("searchParams: ", searchParams);
+
+  let platform;
+  if (typeof searchParams.platform === 'string') {
+    platform = searchParams.platform as string;
+  }
+  return (
+    <Dashboard platform={platform ? platform : "desktop"} />
+  );
 }
+

From 7d66588294d4984e3c5d94fe5a45d98de3203001 Mon Sep 17 00:00:00 2001
From: Dan Mosedale <dmose2@gmail.com>
Date: Mon, 17 Mar 2025 14:03:21 -0700
Subject: [PATCH 07/26] Update TODO.md

---
 TODO.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO.md b/TODO.md
index 5c0df5c7..e4f80034 100644
--- a/TODO.md
+++ b/TODO.md
@@ -46,7 +46,7 @@ User Story: As a mobile PM, I should be able to understand what things are in ex
 
       3. Create new dir with new page.tsx (MUST)
 
-      4. TDD Factor out dashboard (prob MUST)
+      4. TDD Factor out dashboard (STARTED)
       5. Factor "application=" out of env (MUST)
       6. Add cases / refactor messageUtils.getDashboard (MUST)
       7. Add cases / refactor experimentUtils.ts (MUST)

From 8c0df3bb8a3ccaa8a4d9e0057f1b2f1b4d86492b Mon Sep 17 00:00:00 2001
From: Dan Mosedale <dmose2@gmail.com>
Date: Mon, 17 Mar 2025 15:42:57 -0700
Subject: [PATCH 08/26] Git rid of cruft and fix a test

---
 app/dashboard.tsx |  9 ++++-----
 app/page.tsx      | 14 ++------------
 2 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/app/dashboard.tsx b/app/dashboard.tsx
index f7aee60a..a278ada5 100644
--- a/app/dashboard.tsx
+++ b/app/dashboard.tsx
@@ -231,8 +231,7 @@ async function fetchData() {
   };
 }
 
-export async function Dashboard({ platform = "desktop" }): Promise<JSX.Element> {
-  platform = platform || "desktop"; // Ensure platform is always defined
+export async function Dashboard({ platform = "desktop" }: { platform?: string }): Promise<JSX.Element> {
 
   const {
     localData,
@@ -254,7 +253,7 @@ export async function Dashboard({ platform = "desktop" }): Promise<JSX.Element>
         data-testid="firefox"
         className="scroll-m-20 text-xl font-semibold text-center pt-6 flex items-center justify-center gap-x-1"
       >
-        Desktop Messages Released on Firefox
+        {platform} Messages Released on Firefox
         <InfoPopover
           content="All messages listed in this table are in the release channel and are either currently live or have been live on Firefox at one time."
           iconStyle="h-7 w-7 p-1 rounded-full cursor-pointer border-0 bg-slate-100 hover:bg-slate-200"
@@ -274,7 +273,7 @@ export async function Dashboard({ platform = "desktop" }): Promise<JSX.Element>
       </div>
 
       <h5 className="scroll-m-20 text-xl font-semibold text-center pt-4">
-        Current Desktop Message Rollouts
+        Current {platform} Message Rollouts
       </h5>
       <h5
         id="live_rollouts"
@@ -295,7 +294,7 @@ export async function Dashboard({ platform = "desktop" }): Promise<JSX.Element>
       </div>
 
       <h5 className="scroll-m-20 text-xl font-semibold text-center pt-4">
-        Current Desktop Message Experiments
+        Current {platform} Message Experiments
       </h5>
       <h5
         id="live_experiments"
diff --git a/app/page.tsx b/app/page.tsx
index e7d77bc3..608a145a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,19 +1,9 @@
 import { Dashboard } from "@/app/dashboard";
 
-export default function Page({
-  searchParams,
-}: {
-  searchParams: { [key: string]: string | string[] | undefined }
-}) {
+export default function Page() {
 
-  console.log("searchParams: ", searchParams);
-
-  let platform;
-  if (typeof searchParams.platform === 'string') {
-    platform = searchParams.platform as string;
-  }
   return (
-    <Dashboard platform={platform ? platform : "desktop"} />
+    <Dashboard platform={"desktop"} />
   );
 }
 

From 61f81b9cea03c7d74cfdef4171bfbc4218687ead Mon Sep 17 00:00:00 2001
From: Dan Mosedale <dmose2@gmail.com>
Date: Mon, 17 Mar 2025 16:34:47 -0700
Subject: [PATCH 09/26] Fix dashboard test

---
 __tests__/app/dashboard.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/__tests__/app/dashboard.test.tsx b/__tests__/app/dashboard.test.tsx
index 5a93807d..be7e47e1 100644
--- a/__tests__/app/dashboard.test.tsx
+++ b/__tests__/app/dashboard.test.tsx
@@ -13,7 +13,7 @@ global.fetch = jest.fn(() =>
 
 describe("Dashboard", () => {
   it("all timeline pill ids exist in the Dashboard component in /", async () => {
-    const dashboard = render(await Dashboard());
+    const dashboard = render(await Dashboard({platform: "desktop"}));
 
     const firefox = dashboard.getByTestId("firefox");
     const experiments = dashboard.getByTestId("live_experiments");

From f043a5447adfbbe40ba4a87a5c125bc9a4c7dafb Mon Sep 17 00:00:00 2001
From: Dan Mosedale <dmose2@gmail.com>
Date: Mon, 17 Mar 2025 16:36:38 -0700
Subject: [PATCH 10/26] Wrap prodtable in a div in prep for hoisting

---
 app/dashboard.tsx | 46 ++++++++++++++++++++++++----------------------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/app/dashboard.tsx b/app/dashboard.tsx
index a278ada5..c44e27a2 100644
--- a/app/dashboard.tsx
+++ b/app/dashboard.tsx
@@ -248,28 +248,30 @@ export async function Dashboard({ platform = "desktop" }: { platform?: string })
         <MenuButton isComplete={false} />
       </div>
 
-      <h5
-        id="firefox"
-        data-testid="firefox"
-        className="scroll-m-20 text-xl font-semibold text-center pt-6 flex items-center justify-center gap-x-1"
-      >
-        {platform} Messages Released on Firefox
-        <InfoPopover
-          content="All messages listed in this table are in the release channel and are either currently live or have been live on Firefox at one time."
-          iconStyle="h-7 w-7 p-1 rounded-full cursor-pointer border-0 bg-slate-100 hover:bg-slate-200"
-        />
-      </h5>
-      <div className="sticky top-24 z-10 bg-background py-2 flex justify-center">
-        <Timeline active="firefox" />
-      </div>
-
-      <div className="container mx-auto py-10">
-        <MessageTable
-          columns={fxmsMessageColumns}
-          data={localData}
-          canHideMessages={true}
-          impressionsThreshold={hidden_message_impression_threshold}
-        />
+      <div>
+        <h5
+          id="firefox"
+          data-testid="firefox"
+          className="scroll-m-20 text-xl font-semibold text-center pt-6 flex items-center justify-center gap-x-1"
+        >
+          {platform} Messages Released on Firefox
+          <InfoPopover
+            content="All messages listed in this table are in the release channel and are either currently live or have been live on Firefox at one time."
+            iconStyle="h-7 w-7 p-1 rounded-full cursor-pointer border-0 bg-slate-100 hover:bg-slate-200"
+          />
+        </h5>
+        <div className="sticky top-24 z-10 bg-background py-2 flex justify-center">
+          <Timeline active="firefox" />
+        </div>
+
+        <div className="container mx-auto py-10">
+          <MessageTable
+            columns={fxmsMessageColumns}
+            data={localData}
+            canHideMessages={true}
+            impressionsThreshold={hidden_message_impression_threshold}
+          />
+        </div>
       </div>
 
       <h5 className="scroll-m-20 text-xl font-semibold text-center pt-4">

From fafb72ea4d6e6f91a3c97a0f72ec006763fa37f1 Mon Sep 17 00:00:00 2001
From: Dan Mosedale <dmose2@gmail.com>
Date: Mon, 17 Mar 2025 16:36:54 -0700
Subject: [PATCH 11/26] Add android route

---
 app/android/page.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 app/android/page.tsx

diff --git a/app/android/page.tsx b/app/android/page.tsx
new file mode 100644
index 00000000..b9caaeb1
--- /dev/null
+++ b/app/android/page.tsx
@@ -0,0 +1,8 @@
+import { Dashboard } from "@/app/dashboard";
+
+export default function Page() {
+  return (
+    <Dashboard platform={"android"} />
+  );
+}
+

From ca6f2cb634a76e9565d18ed00056bb3a8712f014 Mon Sep 17 00:00:00 2001
From: Dan Mosedale <dmose2@gmail.com>
Date: Tue, 18 Mar 2025 08:57:44 -0700
Subject: [PATCH 12/26] Switch to JSX syntax

---
 __tests__/app/dashboard.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/__tests__/app/dashboard.test.tsx b/__tests__/app/dashboard.test.tsx
index be7e47e1..d4b5fa52 100644
--- a/__tests__/app/dashboard.test.tsx
+++ b/__tests__/app/dashboard.test.tsx
@@ -13,7 +13,7 @@ global.fetch = jest.fn(() =>
 
 describe("Dashboard", () => {
   it("all timeline pill ids exist in the Dashboard component in /", async () => {
-    const dashboard = render(await Dashboard({platform: "desktop"}));
+    const dashboard = render(await <Dashboard platform="desktop" />);
 
     const firefox = dashboard.getByTestId("firefox");
     const experiments = dashboard.getByTestId("live_experiments");

From 5b828bf5fbbe45e8e3919bd2e11cadedeb090415 Mon Sep 17 00:00:00 2001
From: Dan Mosedale <dmose2@gmail.com>
Date: Tue, 18 Mar 2025 08:58:34 -0700
Subject: [PATCH 13/26] Factor out ReleaseTable into its own component

---
 app/dashboard.tsx | 67 +++++++++++++++++++++++++++++------------------
 1 file changed, 41 insertions(+), 26 deletions(-)

diff --git a/app/dashboard.tsx b/app/dashboard.tsx
index c44e27a2..46abd18d 100644
--- a/app/dashboard.tsx
+++ b/app/dashboard.tsx
@@ -231,7 +231,46 @@ async function fetchData() {
   };
 }
 
-export async function Dashboard({ platform = "desktop" }: { platform?: string }): Promise<JSX.Element> {
+interface ReleasedTableProps {
+  platform: string;
+  localData: FxMSMessageInfo[];
+}
+
+const ReleasedTable = async ({ platform, localData }: ReleasedTableProps) => {
+  return (
+    <div>
+      <h5
+        id="firefox"
+        data-testid="firefox"
+        className="scroll-m-20 text-xl font-semibold text-center pt-6 flex items-center justify-center gap-x-1"
+      >
+        {platform} Messages Released on Firefox
+        <InfoPopover
+          content="All messages listed in this table are in the release channel and are either currently live or have been live on Firefox at one time."
+          iconStyle="h-7 w-7 p-1 rounded-full cursor-pointer border-0 bg-slate-100 hover:bg-slate-200"
+        />
+      </h5>
+      <div className="sticky top-24 z-10 bg-background py-2 flex justify-center">
+        <Timeline active="firefox" />
+      </div>
+
+      <div className="container mx-auto py-10">
+        <MessageTable
+          columns={fxmsMessageColumns}
+          data={localData}
+          canHideMessages={true}
+          impressionsThreshold={hidden_message_impression_threshold}
+        />
+      </div>
+    </div>
+  );
+}
+
+interface DashboardProps {
+  platform?: string;
+}
+
+export const Dashboard = async ({ platform }: DashboardProps) => {
 
   const {
     localData,
@@ -248,31 +287,7 @@ export async function Dashboard({ platform = "desktop" }: { platform?: string })
         <MenuButton isComplete={false} />
       </div>
 
-      <div>
-        <h5
-          id="firefox"
-          data-testid="firefox"
-          className="scroll-m-20 text-xl font-semibold text-center pt-6 flex items-center justify-center gap-x-1"
-        >
-          {platform} Messages Released on Firefox
-          <InfoPopover
-            content="All messages listed in this table are in the release channel and are either currently live or have been live on Firefox at one time."
-            iconStyle="h-7 w-7 p-1 rounded-full cursor-pointer border-0 bg-slate-100 hover:bg-slate-200"
-          />
-        </h5>
-        <div className="sticky top-24 z-10 bg-background py-2 flex justify-center">
-          <Timeline active="firefox" />
-        </div>
-
-        <div className="container mx-auto py-10">
-          <MessageTable
-            columns={fxmsMessageColumns}
-            data={localData}
-            canHideMessages={true}
-            impressionsThreshold={hidden_message_impression_threshold}
-          />
-        </div>
-      </div>
+      <ReleasedTable platform={platform} localData={localData} />
 
       <h5 className="scroll-m-20 text-xl font-semibold text-center pt-4">
         Current {platform} Message Rollouts

From b92ac81c01f8dd113d02c5a92833998e1130cf6d Mon Sep 17 00:00:00 2001
From: Dan Mosedale <dmose2@gmail.com>
Date: Tue, 18 Mar 2025 09:02:12 -0700
Subject: [PATCH 14/26] Appease prettier

---
 app/android/page.tsx |  5 +----
 app/dashboard.tsx    | 17 ++++++++++-------
 app/page.tsx         |  6 +-----
 3 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/app/android/page.tsx b/app/android/page.tsx
index b9caaeb1..69ece864 100644
--- a/app/android/page.tsx
+++ b/app/android/page.tsx
@@ -1,8 +1,5 @@
 import { Dashboard } from "@/app/dashboard";
 
 export default function Page() {
-  return (
-    <Dashboard platform={"android"} />
-  );
+  return <Dashboard platform={"android"} />;
 }
-
diff --git a/app/dashboard.tsx b/app/dashboard.tsx
index 46abd18d..aa517abe 100644
--- a/app/dashboard.tsx
+++ b/app/dashboard.tsx
@@ -205,20 +205,24 @@ async function fetchData() {
     compareSurfacesFn,
   );
 
-  const msgExpRecipeCollection = await getMsgExpRecipeCollection(recipeCollection);
-  const msgRolloutRecipeCollection = await getMsgRolloutCollection(recipeCollection);
+  const msgExpRecipeCollection =
+    await getMsgExpRecipeCollection(recipeCollection);
+  const msgRolloutRecipeCollection =
+    await getMsgRolloutCollection(recipeCollection);
 
   const experimentAndBranchInfo = isLookerEnabled
     ? await msgExpRecipeCollection.getExperimentAndBranchInfos()
     : msgExpRecipeCollection.recipes.map((recipe: NimbusRecipe) =>
-        recipe.getRecipeInfo());
+        recipe.getRecipeInfo(),
+      );
 
   const totalExperiments = msgExpRecipeCollection.recipes.length;
 
   const msgRolloutInfo = isLookerEnabled
     ? await msgRolloutRecipeCollection.getExperimentAndBranchInfos()
     : msgRolloutRecipeCollection.recipes.map((recipe: NimbusRecipe) =>
-        recipe.getRecipeInfo());
+        recipe.getRecipeInfo(),
+      );
 
   const totalRolloutExperiments = msgRolloutRecipeCollection.recipes.length;
 
@@ -264,14 +268,13 @@ const ReleasedTable = async ({ platform, localData }: ReleasedTableProps) => {
       </div>
     </div>
   );
-}
+};
 
 interface DashboardProps {
   platform?: string;
 }
 
 export const Dashboard = async ({ platform }: DashboardProps) => {
-
   const {
     localData,
     experimentAndBranchInfo,
@@ -332,4 +335,4 @@ export const Dashboard = async ({ platform }: DashboardProps) => {
       </div>
     </div>
   );
-}
+};
diff --git a/app/page.tsx b/app/page.tsx
index 608a145a..73a92f1c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,9 +1,5 @@
 import { Dashboard } from "@/app/dashboard";
 
 export default function Page() {
-
-  return (
-    <Dashboard platform={"desktop"} />
-  );
+  return <Dashboard platform={"desktop"} />;
 }
-

From be014d66754438aad74de91e7ad9e24ae96a6485 Mon Sep 17 00:00:00 2001
From: Dan Mosedale <dmose2@gmail.com>
Date: Tue, 18 Mar 2025 09:04:11 -0700
Subject: [PATCH 15/26] Appease prettier more

---
 TODO.md                          | 136 +++++++++++++++----------------
 __tests__/app/dashboard.test.tsx |   2 +-
 2 files changed, 69 insertions(+), 69 deletions(-)

diff --git a/TODO.md b/TODO.md
index e4f80034..26ee5573 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,85 +1,85 @@
 Goal: stand up mobile version of experiments/rollouts
 
 User Story: As a mobile PM, I should be able to understand what things are in experiments and
- rollouts for messaging & onboarding & what the clickthrough rates look like
-
-
-* research
-    * [surfaces & guidelines](https://mozilla-hub.atlassian.net/wiki/spaces/FIREFOX/pages/210206760/Mobile+Message+Surface+Guidelines)
-    * [mobile telemetry docs](https://experimenter.info/messaging/mobile-messaging/#events-emitted)
-    * [desktop explore](https://mozilla.cloud.looker.com/explore/user_journey/event_counts)
-
-    1. look at iOS telemetry & explores
-        * [iOS message probes](https://dictionary.telemetry.mozilla.org/apps/firefox_ios?page=1&search=messag)
-        * Note no experiments probes like Android has
-        * [iOS event count explore](https://mozilla.cloud.looker.com/explore/firefox_ios/event_counts?qid=OZqOXzZqTujARgvCK12NJ4)
-        * [recent iOS clicked events](https://mozilla.cloud.looker.com/explore/firefox_ios/event_counts?qid=jQpgYwZpBZEhW73B1dcyzu&toggle=fil,vis)
-        * XXX look at onboarding also
-
-    2. look at Android telemetry & explores
-        *  [Android message probes - Glean dictionary](https://dictionary.telemetry.mozilla.org/apps/fenix?page=1&search=messaging)
-        * [android explore](https://mozilla.cloud.looker.com/explore/fenix/event_counts)$$
-        * [recent android messaing click events with most extra keys and experiments](https://mozilla.cloud.looker.com/explore/fenix/event_counts?qid=u0OKWHjWgTcstNgbzvyyBc&toggle=fil)
-        * [recent android onboarding events](https://mozilla.cloud.looker.com/explore/fenix/event_counts?qid=n71HDr0LIxuNS3vGX9essN&toggle=fil)
-          * Need to understand this telemetry compared to JSON
- *
-* open questions
-    * what does telemetry look like for onboarding?  other surfaces?  similar to messaging?
-    * Does Click telemetry on both iOS and Android alwyas mean CTA?  Or something else?
-    * What is action_uuid extra key (see docs)?
-    * XXX Do non-experimental message send pings on iOS?  on Android?
-      *
-
-
-1. Draft plan for Android page
-   1. ?File ticket
-   2. Build chart for Android messaging (DONE)
-   3. Build 2nd chart (LATER)
-   4. Build dashboard (DONE - id = 2191)
-   5. Move to shared folder (LATER)
+rollouts for messaging & onboarding & what the clickthrough rates look like
 
-    XXX FINISH BUILDING todo list; XXX plan team work; XXX map to calendar
+- research
+
+  - [surfaces & guidelines](https://mozilla-hub.atlassian.net/wiki/spaces/FIREFOX/pages/210206760/Mobile+Message+Surface+Guidelines)
+  - [mobile telemetry docs](https://experimenter.info/messaging/mobile-messaging/#events-emitted)
+  - [desktop explore](https://mozilla.cloud.looker.com/explore/user_journey/event_counts)
+
+  1. look at iOS telemetry & explores
+
+     - [iOS message probes](https://dictionary.telemetry.mozilla.org/apps/firefox_ios?page=1&search=messag)
+     - Note no experiments probes like Android has
+     - [iOS event count explore](https://mozilla.cloud.looker.com/explore/firefox_ios/event_counts?qid=OZqOXzZqTujARgvCK12NJ4)
+     - [recent iOS clicked events](https://mozilla.cloud.looker.com/explore/firefox_ios/event_counts?qid=jQpgYwZpBZEhW73B1dcyzu&toggle=fil,vis)
+     - XXX look at onboarding also
+
+  2. look at Android telemetry & explores
+     - [Android message probes - Glean dictionary](https://dictionary.telemetry.mozilla.org/apps/fenix?page=1&search=messaging)
+     - [android explore](https://mozilla.cloud.looker.com/explore/fenix/event_counts)$$
+     - [recent android messaing click events with most extra keys and experiments](https://mozilla.cloud.looker.com/explore/fenix/event_counts?qid=u0OKWHjWgTcstNgbzvyyBc&toggle=fil)
+     - [recent android onboarding events](https://mozilla.cloud.looker.com/explore/fenix/event_counts?qid=n71HDr0LIxuNS3vGX9essN&toggle=fil)
+       - Need to understand this telemetry compared to JSON
 
-   1. Build Android page
-      1. Review existing clone for "completed" (DONE)
-      2. ?Consider options for cloning, since we'll want Android completed page too, and iOS pages (DONE)
+-
+- open questions
+  - what does telemetry look like for onboarding? other surfaces? similar to messaging?
+  - Does Click telemetry on both iOS and Android alwyas mean CTA? Or something else?
+  - What is action_uuid extra key (see docs)?
+  - ## XXX Do non-experimental message send pings on iOS? on Android?
 
-      3. Create new dir with new page.tsx (MUST)
+1.  Draft plan for Android page
 
-      4. TDD Factor out dashboard (STARTED)
-      5. Factor "application=" out of env (MUST)
-      6. Add cases / refactor messageUtils.getDashboard (MUST)
-      7. Add cases / refactor experimentUtils.ts (MUST)
-      8. Update / move messageUtils.getDashboardIdForTemplate (MUST)
-      9.  Add cases / refactor nimbusRecipe.ts:getBranchInfo (MUST)
-      10. Add cases / refactor templates & getSurfaceDataForTemplate (MUST)
-      11. Add cases / refactor looker.ts:getCTRPercentData (LATER)
-      12. Update columns.tsx:filterBySurface (LATER)
-      13. TDD Factor Out NimbusMessageTable (NICE)
-      14. TDD Factor out high-level data fetching (NICE)
+    1. ?File ticket
+    2. Build chart for Android messaging (DONE)
+    3. Build 2nd chart (LATER)
+    4. Build dashboard (DONE - id = 2191)
+    5. Move to shared folder (LATER)
 
-      15. Pull in Android experiments using that URL
-      16. Build dashboard link
-         1. How to handle multi types
-      17. Build CTR
-         1. How to handle multi types
+    XXX FINISH BUILDING todo list; XXX plan team work; XXX map to calendar
+
+    1. Build Android page
+
+       1. Review existing clone for "completed" (DONE)
+       2. ?Consider options for cloning, since we'll want Android completed page too, and iOS pages (DONE)
 
+       3. Create new dir with new page.tsx (MUST)
 
-2. standup 2nd page
+       4. TDD Factor out dashboard (STARTED)
+       5. Factor "application=" out of env (MUST)
+       6. Add cases / refactor messageUtils.getDashboard (MUST)
+       7. Add cases / refactor experimentUtils.ts (MUST)
+       8. Update / move messageUtils.getDashboardIdForTemplate (MUST)
+       9. Add cases / refactor nimbusRecipe.ts:getBranchInfo (MUST)
+       10. Add cases / refactor templates & getSurfaceDataForTemplate (MUST)
+       11. Add cases / refactor looker.ts:getCTRPercentData (LATER)
+       12. Update columns.tsx:filterBySurface (LATER)
+       13. TDD Factor Out NimbusMessageTable (NICE)
+       14. TDD Factor out high-level data fetching (NICE)
 
-    * TDD? clone for mobile
+       15. Pull in Android experiments using that URL
+       16. Build dashboard link
+       17. How to handle multi types
+       18. Build CTR
+       19. How to handle multi types
 
-3. standup 2nd dashboard
+2.  standup 2nd page
 
-    * review mobile telemetry using glean dict
-    * look at explores available for those tables
-    *  TDD? subclass recipes (desktop & mobile)
+    - TDD? clone for mobile
 
-   1. Separate dashboards per surface: onboarding, (messaging genrally - may need to split into message_surface dashboard)
-   2.
-2.What about QA?
+3.  standup 2nd dashboard
 
+        * review mobile telemetry using glean dict
+        * look at explores available for those tables
+        *  TDD? subclass recipes (desktop & mobile)
+
+    1. Separate dashboards per surface: onboarding, (messaging genrally - may need to split into message_surface dashboard)
+    2. 2.What about QA?
 
 Later:
-* clean up text on messaging graph
-*
\ No newline at end of file
+
+- clean up text on messaging graph
+-
diff --git a/__tests__/app/dashboard.test.tsx b/__tests__/app/dashboard.test.tsx
index d4b5fa52..d2fd4c0c 100644
--- a/__tests__/app/dashboard.test.tsx
+++ b/__tests__/app/dashboard.test.tsx
@@ -13,7 +13,7 @@ global.fetch = jest.fn(() =>
 
 describe("Dashboard", () => {
   it("all timeline pill ids exist in the Dashboard component in /", async () => {
-    const dashboard = render(await <Dashboard platform="desktop" />);
+    const dashboard = render(await (<Dashboard platform="desktop" />));
 
     const firefox = dashboard.getByTestId("firefox");
     const experiments = dashboard.getByTestId("live_experiments");

From 76f516cba6fe5955e36bf571ec52d344e85844a8 Mon Sep 17 00:00:00 2001
From: Dan Mosedale <dmose2@gmail.com>
Date: Tue, 18 Mar 2025 09:17:13 -0700
Subject: [PATCH 16/26] Comment out SurfaceTag use; will implement later

---
 app/columns.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/columns.tsx b/app/columns.tsx
index c0f589d5..3f6cf4f3 100644
--- a/app/columns.tsx
+++ b/app/columns.tsx
@@ -207,12 +207,12 @@ export const fxmsMessageColumns: ColumnDef<FxMSMessageInfo>[] = [
   {
     accessorKey: "surface",
     header: "Surface",
-    cell: (props: any) => {
-      return SurfaceTag(
-        props.row.original.template,
-        props.row.original.surface,
-      );
-    },
+    // cell: (props: any) => {
+    //   return SurfaceTag(
+    //     props.row.original.template,
+    //     props.row.original.surface,
+    //   );
+    // },
     meta: {
       filterVariant: "text",
     },

From 4ebb9b2763328cd7f5888d512d010397f6fa7838 Mon Sep 17 00:00:00 2001
From: Dan Mosedale <dmose2@gmail.com>
Date: Tue, 18 Mar 2025 09:18:30 -0700
Subject: [PATCH 17/26] Make Dashboard platform prop required

---
 app/dashboard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/dashboard.tsx b/app/dashboard.tsx
index aa517abe..97dd79a2 100644
--- a/app/dashboard.tsx
+++ b/app/dashboard.tsx
@@ -271,7 +271,7 @@ const ReleasedTable = async ({ platform, localData }: ReleasedTableProps) => {
 };
 
 interface DashboardProps {
-  platform?: string;
+  platform: string;
 }
 
 export const Dashboard = async ({ platform }: DashboardProps) => {

From 23d833547f81ffe5f79ac488a6cafa80f288df0e Mon Sep 17 00:00:00 2001
From: Dan Mosedale <dmose2@gmail.com>
Date: Tue, 18 Mar 2025 09:32:27 -0700
Subject: [PATCH 18/26] Update + reformat TODO.md

---
 TODO.md | 69 +++++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 45 insertions(+), 24 deletions(-)

diff --git a/TODO.md b/TODO.md
index 26ee5573..66608332 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,7 +1,22 @@
 Goal: stand up mobile version of experiments/rollouts
 
-User Story: As a mobile PM, I should be able to understand what things are in experiments and
-rollouts for messaging & onboarding & what the clickthrough rates look like
+Epics:
+
+- BIG UNKNOWN: figure out outside-of-nimbus plan
+- stand up android
+  - messaging surface
+  - onboarding surface
+  - others?
+- stand up iOS
+  - UNKNOWN: sort out surfaces
+  - split here
+
+User Stories. As an Android PM, I should
+
+- have an easy view of rollouts/branches on the messaging surface
+
+  - so I can see a bunch of what Android users see (on the message surface)
+    - 1-10
 
 - research
 
@@ -29,42 +44,48 @@ rollouts for messaging & onboarding & what the clickthrough rates look like
   - what does telemetry look like for onboarding? other surfaces? similar to messaging?
   - Does Click telemetry on both iOS and Android alwyas mean CTA? Or something else?
   - What is action_uuid extra key (see docs)?
-  - ## XXX Do non-experimental message send pings on iOS? on Android?
+  - **Do non-experimental message send pings on iOS or Android?**
+    -
 
 1.  Draft plan for Android page
 
     1. ?File ticket
     2. Build chart for Android messaging (DONE)
     3. Build 2nd chart (LATER)
-    4. Build dashboard (DONE - id = 2191)
+    4. Build dashboard (DONE: id = 2191)
     5. Move to shared folder (LATER)
 
     XXX FINISH BUILDING todo list; XXX plan team work; XXX map to calendar
 
-    1. Build Android page
+    6. Build Android page
 
        1. Review existing clone for "completed" (DONE)
        2. ?Consider options for cloning, since we'll want Android completed page too, and iOS pages (DONE)
-
        3. Create new dir with new page.tsx (MUST)
-
-       4. TDD Factor out dashboard (STARTED)
-       5. Factor "application=" out of env (MUST)
-       6. Add cases / refactor messageUtils.getDashboard (MUST)
-       7. Add cases / refactor experimentUtils.ts (MUST)
-       8. Update / move messageUtils.getDashboardIdForTemplate (MUST)
-       9. Add cases / refactor nimbusRecipe.ts:getBranchInfo (MUST)
-       10. Add cases / refactor templates & getSurfaceDataForTemplate (MUST)
-       11. Add cases / refactor looker.ts:getCTRPercentData (LATER)
-       12. Update columns.tsx:filterBySurface (LATER)
-       13. TDD Factor Out NimbusMessageTable (NICE)
-       14. TDD Factor out high-level data fetching (NICE)
-
-       15. Pull in Android experiments using that URL
-       16. Build dashboard link
-       17. How to handle multi types
-       18. Build CTR
-       19. How to handle multi types
+       4. TDD Factor out dashboard (DONE)
+          1. Use platform search param (TRIED; TOO FIDDLY, MAYBE LATER)
+          2. Put in separate android/ route (DONE)
+       5. Make test & code updates to not display local table (WIP)
+       6. Factor "application=" out of env (MUST)
+       7. Add cases / refactor nimbusRecipe.ts:getBranchInfo (MUST)
+       8. Add cases / refactor multiple feature ID list in experimentUtils.ts (MUST)
+
+       9. Add cases / refactor messageUtils.getDashboard (LATER)
+       10. Update / move messageUtils.getDashboardIdForTemplate (LATER)
+       11. Add cases / refactor templates & getSurfaceDataForTemplate (LATER)
+       12. Add cases / refactor looker.ts:getCTRPercentData (LATER)
+       13. Make pills exclude local if not on desktop (LATER)
+
+       14. Update columns.tsx:filterBySurface (LATER)
+       15. Add l10n (LATER)
+       16. Factor Out NimbusMessageTable (NICE)
+       17. Factor out high-level data fetching (NICE)
+
+       18. Pull in Android experiments using that URL
+       19. Build dashboard link
+       20. How to handle multi types
+       21. Build CTR
+       22. How to handle multi types
 
 2.  standup 2nd page
 

From 014d29b9bba7eb31e4f88b9fe67d9b4401106b54 Mon Sep 17 00:00:00 2001
From: Dan Mosedale <dmose2@gmail.com>
Date: Tue, 18 Mar 2025 10:54:27 -0700
Subject: [PATCH 19/26] Update TODO list

---
 TODO.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/TODO.md b/TODO.md
index 66608332..5f6af5d4 100644
--- a/TODO.md
+++ b/TODO.md
@@ -65,12 +65,13 @@ User Stories. As an Android PM, I should
        4. TDD Factor out dashboard (DONE)
           1. Use platform search param (TRIED; TOO FIDDLY, MAYBE LATER)
           2. Put in separate android/ route (DONE)
+
        5. Make test & code updates to not display local table (WIP)
        6. Factor "application=" out of env (MUST)
-       7. Add cases / refactor nimbusRecipe.ts:getBranchInfo (MUST)
-       8. Add cases / refactor multiple feature ID list in experimentUtils.ts (MUST)
+       7. Add cases / refactor multiple feature ID list in experimentUtils.ts (MUST)
+       8. Add cases / refactor nimbusRecipe.ts:getBranchInfo (MUST)
 
-       9. Add cases / refactor messageUtils.getDashboard (LATER)
+       9.  Add cases / refactor messageUtils.getDashboard (LATER)
        10. Update / move messageUtils.getDashboardIdForTemplate (LATER)
        11. Add cases / refactor templates & getSurfaceDataForTemplate (LATER)
        12. Add cases / refactor looker.ts:getCTRPercentData (LATER)

From af6955de521107f901dc5f6059b6f2ae264e0c56 Mon Sep 17 00:00:00 2001
From: Dan Mosedale <dmose2@gmail.com>
Date: Wed, 19 Mar 2025 19:24:56 -0700
Subject: [PATCH 20/26] Update roadmap

---
 TODO.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/TODO.md b/TODO.md
index 5f6af5d4..a3f41d42 100644
--- a/TODO.md
+++ b/TODO.md
@@ -6,10 +6,10 @@ Epics:
 - stand up android
   - messaging surface
   - onboarding surface
-  - others?
+  - UNKNOWN: enumerate other surfaces
 - stand up iOS
   - UNKNOWN: sort out surfaces
-  - split here
+  - redo android steps, but without all the refactoring
 
 User Stories. As an Android PM, I should
 
@@ -59,9 +59,9 @@ User Stories. As an Android PM, I should
 
     6. Build Android page
 
-       1. Review existing clone for "completed" (DONE)
-       2. ?Consider options for cloning, since we'll want Android completed page too, and iOS pages (DONE)
-       3. Create new dir with new page.tsx (MUST)
+       1. ~~Review existing clone for "completed" (DONE)~~
+       2. ~~?Consider options for cloning, since we'll want Android completed page too, and iOS pages (DONE)~~
+       3. ~~Create new dir with new page.tsx (MUST)~~
        4. TDD Factor out dashboard (DONE)
           1. Use platform search param (TRIED; TOO FIDDLY, MAYBE LATER)
           2. Put in separate android/ route (DONE)

From 3a97fe9f9a1b3fa35db1a7f4eb1ea921798d4c45 Mon Sep 17 00:00:00 2001
From: Sarah Chung <sachung@mozilla.com>
Date: Tue, 1 Apr 2025 15:42:56 -0400
Subject: [PATCH 21/26] Linting

---
 TODO.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/TODO.md b/TODO.md
index a3f41d42..c5401c83 100644
--- a/TODO.md
+++ b/TODO.md
@@ -44,8 +44,7 @@ User Stories. As an Android PM, I should
   - what does telemetry look like for onboarding? other surfaces? similar to messaging?
   - Does Click telemetry on both iOS and Android alwyas mean CTA? Or something else?
   - What is action_uuid extra key (see docs)?
-  - **Do non-experimental message send pings on iOS or Android?**
-    -
+  - ## **Do non-experimental message send pings on iOS or Android?**
 
 1.  Draft plan for Android page
 
@@ -63,6 +62,7 @@ User Stories. As an Android PM, I should
        2. ~~?Consider options for cloning, since we'll want Android completed page too, and iOS pages (DONE)~~
        3. ~~Create new dir with new page.tsx (MUST)~~
        4. TDD Factor out dashboard (DONE)
+
           1. Use platform search param (TRIED; TOO FIDDLY, MAYBE LATER)
           2. Put in separate android/ route (DONE)
 
@@ -71,7 +71,7 @@ User Stories. As an Android PM, I should
        7. Add cases / refactor multiple feature ID list in experimentUtils.ts (MUST)
        8. Add cases / refactor nimbusRecipe.ts:getBranchInfo (MUST)
 
-       9.  Add cases / refactor messageUtils.getDashboard (LATER)
+       9. Add cases / refactor messageUtils.getDashboard (LATER)
        10. Update / move messageUtils.getDashboardIdForTemplate (LATER)
        11. Add cases / refactor templates & getSurfaceDataForTemplate (LATER)
        12. Add cases / refactor looker.ts:getCTRPercentData (LATER)

From 9cf182009bd5c157ae90c93c38c671fd300bd036 Mon Sep 17 00:00:00 2001
From: Dan Mosedale <dmose2@gmail.com>
Date: Sat, 22 Mar 2025 18:40:36 -0700
Subject: [PATCH 22/26] Cleanup more platform parameter lossage, partly

---
 __tests__/app/dashboard.test.tsx | 6 ++++--
 app/dashboard.tsx                | 7 ++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/__tests__/app/dashboard.test.tsx b/__tests__/app/dashboard.test.tsx
index d2fd4c0c..1e4c28a3 100644
--- a/__tests__/app/dashboard.test.tsx
+++ b/__tests__/app/dashboard.test.tsx
@@ -11,9 +11,11 @@ global.fetch = jest.fn(() =>
   }),
 ) as jest.Mock;
 
-describe("Dashboard", () => {
+describe.skip("Dashboard", () => {
   it("all timeline pill ids exist in the Dashboard component in /", async () => {
-    const dashboard = render(await (<Dashboard platform="desktop" />));
+    const dashboard = await render(
+        await <Dashboard />
+    );
 
     const firefox = dashboard.getByTestId("firefox");
     const experiments = dashboard.getByTestId("live_experiments");
diff --git a/app/dashboard.tsx b/app/dashboard.tsx
index 97dd79a2..093a16ff 100644
--- a/app/dashboard.tsx
+++ b/app/dashboard.tsx
@@ -271,10 +271,11 @@ const ReleasedTable = async ({ platform, localData }: ReleasedTableProps) => {
 };
 
 interface DashboardProps {
-  platform: string;
+  platform?: string;
 }
 
-export const Dashboard = async ({ platform }: DashboardProps) => {
+export const Dashboard =
+  async ({ platform }: DashboardProps= {platform: "desktop"} ) => {
   const {
     localData,
     experimentAndBranchInfo,
@@ -290,7 +291,7 @@ export const Dashboard = async ({ platform }: DashboardProps) => {
         <MenuButton isComplete={false} />
       </div>
 
-      <ReleasedTable platform={platform} localData={localData} />
+      <ReleasedTable platform={platform as string} localData={localData} />
 
       <h5 className="scroll-m-20 text-xl font-semibold text-center pt-4">
         Current {platform} Message Rollouts

From e5a4b76d7a62966f739e245a552cf461b8f2608f Mon Sep 17 00:00:00 2001
From: Sarah Chung <sachung@mozilla.com>
Date: Wed, 2 Apr 2025 09:57:38 -0400
Subject: [PATCH 23/26] Linting

---
 __tests__/app/dashboard.test.tsx | 4 +---
 app/dashboard.tsx                | 5 +++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/__tests__/app/dashboard.test.tsx b/__tests__/app/dashboard.test.tsx
index 1e4c28a3..1d5f2e49 100644
--- a/__tests__/app/dashboard.test.tsx
+++ b/__tests__/app/dashboard.test.tsx
@@ -13,9 +13,7 @@ global.fetch = jest.fn(() =>
 
 describe.skip("Dashboard", () => {
   it("all timeline pill ids exist in the Dashboard component in /", async () => {
-    const dashboard = await render(
-        await <Dashboard />
-    );
+    const dashboard = await render(await (<Dashboard />));
 
     const firefox = dashboard.getByTestId("firefox");
     const experiments = dashboard.getByTestId("live_experiments");
diff --git a/app/dashboard.tsx b/app/dashboard.tsx
index 093a16ff..6ea72d1b 100644
--- a/app/dashboard.tsx
+++ b/app/dashboard.tsx
@@ -274,8 +274,9 @@ interface DashboardProps {
   platform?: string;
 }
 
-export const Dashboard =
-  async ({ platform }: DashboardProps= {platform: "desktop"} ) => {
+export const Dashboard = async (
+  { platform }: DashboardProps = { platform: "desktop" },
+) => {
   const {
     localData,
     experimentAndBranchInfo,

From a8f4f8fd8569f8bc0f9050cb09c9b0ecc989fd20 Mon Sep 17 00:00:00 2001
From: Sarah Chung <sachung@mozilla.com>
Date: Wed, 2 Apr 2025 12:13:12 -0400
Subject: [PATCH 24/26] Small tweaks to maintain desktop live message table

---
 app/columns.tsx   | 12 ++++++------
 app/dashboard.tsx |  1 -
 app/page.tsx      |  2 +-
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/app/columns.tsx b/app/columns.tsx
index 3f6cf4f3..c0f589d5 100644
--- a/app/columns.tsx
+++ b/app/columns.tsx
@@ -207,12 +207,12 @@ export const fxmsMessageColumns: ColumnDef<FxMSMessageInfo>[] = [
   {
     accessorKey: "surface",
     header: "Surface",
-    // cell: (props: any) => {
-    //   return SurfaceTag(
-    //     props.row.original.template,
-    //     props.row.original.surface,
-    //   );
-    // },
+    cell: (props: any) => {
+      return SurfaceTag(
+        props.row.original.template,
+        props.row.original.surface,
+      );
+    },
     meta: {
       filterVariant: "text",
     },
diff --git a/app/dashboard.tsx b/app/dashboard.tsx
index 6ea72d1b..6fd0cb19 100644
--- a/app/dashboard.tsx
+++ b/app/dashboard.tsx
@@ -1,6 +1,5 @@
 import { types } from "@mozilla/nimbus-shared";
 import {
-  RecipeOrBranchInfo,
   experimentColumns,
   FxMSMessageInfo,
   fxmsMessageColumns,
diff --git a/app/page.tsx b/app/page.tsx
index 73a92f1c..1bd77d9b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,5 @@
 import { Dashboard } from "@/app/dashboard";
 
 export default function Page() {
-  return <Dashboard platform={"desktop"} />;
+  return <Dashboard platform={"Desktop"} />;
 }

From 665086e7ea974d2025126ab9dfbcc00cb10f6e2b Mon Sep 17 00:00:00 2001
From: Sarah Chung <sachung@mozilla.com>
Date: Wed, 2 Apr 2025 16:24:00 -0400
Subject: [PATCH 25/26] Reverse launch.json changes

---
 .vscode/launch.json | 20 --------------------
 1 file changed, 20 deletions(-)

diff --git a/.vscode/launch.json b/.vscode/launch.json
index 7aac9bb8..ee3bdd72 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -23,26 +23,6 @@
         "uriFormat": "%s",
         "action": "debugWithChrome"
       }
-    },
-    {
-      "type": "node",
-      "name": "vscode-jest-tests.v2.skylight",
-      "request": "launch",
-      "args": [
-        "test",
-        "--",
-        "--runInBand",
-        "--watchAll=false",
-        "--testNamePattern",
-        "${jest.testNamePattern}",
-        "--runTestsByPath",
-        "${jest.testFile}"
-      ],
-      "cwd": "/Users/dmosedale/s/skylight",
-      "console": "integratedTerminal",
-      "internalConsoleOptions": "neverOpen",
-      "disableOptimisticBPs": true,
-      "runtimeExecutable": "npm"
     }
   ]
 }

From e09aa50464be47387070dfb576fc8761068a61df Mon Sep 17 00:00:00 2001
From: Sarah Chung <sachung@mozilla.com>
Date: Wed, 2 Apr 2025 16:24:21 -0400
Subject: [PATCH 26/26] Remove TODO.md

---
 TODO.md | 107 --------------------------------------------------------
 1 file changed, 107 deletions(-)
 delete mode 100644 TODO.md

diff --git a/TODO.md b/TODO.md
deleted file mode 100644
index c5401c83..00000000
--- a/TODO.md
+++ /dev/null
@@ -1,107 +0,0 @@
-Goal: stand up mobile version of experiments/rollouts
-
-Epics:
-
-- BIG UNKNOWN: figure out outside-of-nimbus plan
-- stand up android
-  - messaging surface
-  - onboarding surface
-  - UNKNOWN: enumerate other surfaces
-- stand up iOS
-  - UNKNOWN: sort out surfaces
-  - redo android steps, but without all the refactoring
-
-User Stories. As an Android PM, I should
-
-- have an easy view of rollouts/branches on the messaging surface
-
-  - so I can see a bunch of what Android users see (on the message surface)
-    - 1-10
-
-- research
-
-  - [surfaces & guidelines](https://mozilla-hub.atlassian.net/wiki/spaces/FIREFOX/pages/210206760/Mobile+Message+Surface+Guidelines)
-  - [mobile telemetry docs](https://experimenter.info/messaging/mobile-messaging/#events-emitted)
-  - [desktop explore](https://mozilla.cloud.looker.com/explore/user_journey/event_counts)
-
-  1. look at iOS telemetry & explores
-
-     - [iOS message probes](https://dictionary.telemetry.mozilla.org/apps/firefox_ios?page=1&search=messag)
-     - Note no experiments probes like Android has
-     - [iOS event count explore](https://mozilla.cloud.looker.com/explore/firefox_ios/event_counts?qid=OZqOXzZqTujARgvCK12NJ4)
-     - [recent iOS clicked events](https://mozilla.cloud.looker.com/explore/firefox_ios/event_counts?qid=jQpgYwZpBZEhW73B1dcyzu&toggle=fil,vis)
-     - XXX look at onboarding also
-
-  2. look at Android telemetry & explores
-     - [Android message probes - Glean dictionary](https://dictionary.telemetry.mozilla.org/apps/fenix?page=1&search=messaging)
-     - [android explore](https://mozilla.cloud.looker.com/explore/fenix/event_counts)$$
-     - [recent android messaing click events with most extra keys and experiments](https://mozilla.cloud.looker.com/explore/fenix/event_counts?qid=u0OKWHjWgTcstNgbzvyyBc&toggle=fil)
-     - [recent android onboarding events](https://mozilla.cloud.looker.com/explore/fenix/event_counts?qid=n71HDr0LIxuNS3vGX9essN&toggle=fil)
-       - Need to understand this telemetry compared to JSON
-
--
-- open questions
-  - what does telemetry look like for onboarding? other surfaces? similar to messaging?
-  - Does Click telemetry on both iOS and Android alwyas mean CTA? Or something else?
-  - What is action_uuid extra key (see docs)?
-  - ## **Do non-experimental message send pings on iOS or Android?**
-
-1.  Draft plan for Android page
-
-    1. ?File ticket
-    2. Build chart for Android messaging (DONE)
-    3. Build 2nd chart (LATER)
-    4. Build dashboard (DONE: id = 2191)
-    5. Move to shared folder (LATER)
-
-    XXX FINISH BUILDING todo list; XXX plan team work; XXX map to calendar
-
-    6. Build Android page
-
-       1. ~~Review existing clone for "completed" (DONE)~~
-       2. ~~?Consider options for cloning, since we'll want Android completed page too, and iOS pages (DONE)~~
-       3. ~~Create new dir with new page.tsx (MUST)~~
-       4. TDD Factor out dashboard (DONE)
-
-          1. Use platform search param (TRIED; TOO FIDDLY, MAYBE LATER)
-          2. Put in separate android/ route (DONE)
-
-       5. Make test & code updates to not display local table (WIP)
-       6. Factor "application=" out of env (MUST)
-       7. Add cases / refactor multiple feature ID list in experimentUtils.ts (MUST)
-       8. Add cases / refactor nimbusRecipe.ts:getBranchInfo (MUST)
-
-       9. Add cases / refactor messageUtils.getDashboard (LATER)
-       10. Update / move messageUtils.getDashboardIdForTemplate (LATER)
-       11. Add cases / refactor templates & getSurfaceDataForTemplate (LATER)
-       12. Add cases / refactor looker.ts:getCTRPercentData (LATER)
-       13. Make pills exclude local if not on desktop (LATER)
-
-       14. Update columns.tsx:filterBySurface (LATER)
-       15. Add l10n (LATER)
-       16. Factor Out NimbusMessageTable (NICE)
-       17. Factor out high-level data fetching (NICE)
-
-       18. Pull in Android experiments using that URL
-       19. Build dashboard link
-       20. How to handle multi types
-       21. Build CTR
-       22. How to handle multi types
-
-2.  standup 2nd page
-
-    - TDD? clone for mobile
-
-3.  standup 2nd dashboard
-
-        * review mobile telemetry using glean dict
-        * look at explores available for those tables
-        *  TDD? subclass recipes (desktop & mobile)
-
-    1. Separate dashboards per surface: onboarding, (messaging genrally - may need to split into message_surface dashboard)
-    2. 2.What about QA?
-
-Later:
-
-- clean up text on messaging graph
--