WIP Android message table support

.env

@@ -2,16 +2,7 @@
 
 # Base URL for the experimenter API (defaults to the production instance)
 #
-EXPERIMENTER_API_PREFIX="https://experimenter.services.mozilla.com/api/v7/"
-
-# API calls with parameters to fetch experiments we want to display.
-# https://htmlpreview.github.io/?https://github.com/mozilla/experimenter/blob/main/docs/experimenter/swagger-ui.html has more info.
-#
-# Live experiments
-EXPERIMENTER_API_CALL_LIVE="experiments/?status=Live&application=firefox-desktop"
-
-# Completed experiments
-EXPERIMENTER_API_CALL_COMPLETED="experiments/?status=Complete&application=firefox-desktop"
+EXPERIMENTER_API_PREFIX="https://experimenter.services.mozilla.com/api/v7/experiments/"
 
 # Looker configurables
 IS_LOOKER_ENABLED=false

.env.sample

@@ -1,7 +1,8 @@
 # Copy this to .env.local to set local variables
-
 # Preview
-# EXPERIMENTER_API_CALL="experiments/?status=Preview&application=firefox-desktop"
+# Base URL for the experimenter API (defaults to the production instance)
+#
+EXPERIMENTER_API_PREFIX="https://experimenter.services.mozilla.com/api/v7/experiments/"
 
 # Disable Auth0 for dev && preview environments
 IS_AUTH_ENABLED='false'

.github/copilot-instructions.md

@@ -0,0 +1,25 @@
+# GitHub Copilot Instructions
+
+## Case-Sensitive Filesystem
+
+Some of our development happens on a case-sensitive filesystem. It is VERY IMPORTANT that GitHub Copilot handles this correctly when refactoring and generating code and tests.
+
+### Guidelines
+
+1. **File and Directory Names**: Ensure that file and directory names are used with the correct case. For example, `MyFile.ts` and `myfile.ts` are different files on a case-sensitive filesystem.
+2. **Imports and Requires**: When generating import or require statements, ensure that the case matches the actual file or module name.
+3. **Class and Function Names**: Maintain the correct case for class and function names as defined in the codebase.
+4. **Refactoring**: When refactoring, ensure that all references to files, classes, functions, and variables maintain the correct case.
+
+### Specific Instructions for Component Files
+
+When working with component files where the component name is uppercase and the file name contains lowercase, ensure the following:
+
+1. **Do Not Create New Files**: Do not create new files with uppercase names if the existing files have lowercase names.
+2. **Correct File Names**: Use the existing files with the correct case.
+3. **Correct Imports**: When importing components in other files, ensure the import statement uses the correct case:
+   ```tsx
+   import Component from "@/app/component";
+   ```
+
+By following these guidelines, we can avoid issues related to case sensitivity and unnecessary file creation in our development process.

.github/copilot-test-generation.md

@@ -0,0 +1,25 @@
+# GitHub Copilot Instructions
+
+## Case-Sensitive Filesystem
+
+Some of our development happens on a case-sensitive filesystem. It is VERY IMPORTANT that GitHub Copilot handles this correctly when refactoring and generating code and tests.
+
+### Guidelines
+
+1. **File and Directory Names**: Ensure that file and directory names are used with the correct case. For example, `MyFile.ts` and `myfile.ts` are different files on a case-sensitive filesystem.
+2. **Imports and Requires**: When generating import or require statements, ensure that the case matches the actual file or module name.
+3. **Class and Function Names**: Maintain the correct case for class and function names as defined in the codebase.
+4. **Refactoring**: When refactoring, ensure that all references to files, classes, functions, and variables maintain the correct case.
+
+### Specific Instructions for Component Files
+
+When working with component files where the component name is uppercase and the file name contains lowercase, ensure the following:
+
+1. **Do Not Create New Files**: Do not create new files with uppercase names if the existing files have lowercase names.
+2. **Correct File Names**: Use the existing files with the correct case.
+3. **Correct Imports**: When importing components in other files, ensure the import statement uses the correct case:
+   ```tsx
+   import Component from "@/app/component";
+   ```
+
+By following these guidelines, we can avoid issues related to case sensitivity and unnecessary file creation in our development process.

.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"
     }
   ]
 }

MOBILE-EPICS.md

@@ -0,0 +1,45 @@
+Top-level bullets are user story epics, 2nd-level bullet are regular user stories
+
+# Android
+
+1. Looker Dashboard
+   1. Make messaging feature Looker dashboard (3: DONE)
+   2. Shared folder, permissions & docs) (LATER)
+2. Stand up viewable (though incorrect) Skylight dashboard route (3: DONE)
+3. Make things work for Android & Desktop enough to see Android msg rollouts:
+
+   1. Page route/dashboard component (5: DONE)
+   2. Data fetching: (5: DONE)
+   3. Experimenter API client work (DONE)
+   4. Feature ID list (LATER)
+   5. Nimbus.GetBranchInfo (5: DONE)
+
+4. Add experiments - or hide and LATER if interesting amount of work (2: DONE)
+5. Get simple dashboard links for surfaces we support (3)
+6. Publish to web so they can test
+7. Get Amplitude onboarding dashboard
+
+8. Handle production telemetry (waiting on research)
+
+9. Key Unknowns to research
+10. Make a list of all-subsurfaces with links to telemetry
+11. How to handle production telemetry
+12. How much work is adding messaging sub-surfaces?
+13. Which other feature ids (eg onboarding) are desired? How much work will they be
+14. Basic usability fix
+15. Make pills exclude "Firefox" on Android page (3?)
+16. Rapidly Port features
+17. Add at least one other subsurface now? (DONE)
+18. Add monthly Impressions/CTR chart to Looker dashboard (2)
+19. Inline Impressions/CTR (8 - needs breakdown or SPIKE)
+20. Fully useful surface columns ()
+21. Completed page
+22. Maybe
+23. Add other feature IDs? Prob at least onboarding
+24. Microsurveys badge?
+25. Surface-based filtering?
+
+# iOS
+
+1. Looker Dashboard
+2. Stand up viewable (though incorrect) Skylight dashboard route (3)

TODO.md

@@ -0,0 +1,131 @@
+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. ~~Refactor to not display local table on Android (DONE)~~
+           6. Factor "application=" out of env (DONE)
+              1.  ~~Create PlatformInfo interface~~
+                 1. ~~application name~~
+              2. ~~Create PlatformInfoDict containing (android, desktop)~~
+              3. ~~pull experiments path component into EXPERIMENTER_API_PREFIX~~
+              4. ~~Figure out how to resolve NimbusAppSlug and Platform param stuff~~
+              5. ~~Get application param from PlatformInfoDict; remove from env~~
+              6. ~~Get status param from appropriate files; remove from env~~
+           7. Pull platform-specific-feature-list from experimentUtils into
+            PlatformInfo (LATER)
+           8. Move nimbusRecipe.ts:getBranchInfo into own file included into PlatformInfo? (fallback: add messaging cases for now; move to PlatformInfo later - XXX DONE)
+              1. Detect by surface
+              2. Call into GetAndroidBranchInfo
+                 1. Move existing code
+                 2. Copy-paste proposedEndDate
+                 3. ...
+           9. Fix exeriments (DONE -- for messaging & juno-onboarding)
+
+           10. Deploy to web (ALREADY WORKING)
+           11. Add getAndroidDashboard
+           12. Add getAndroidDashboardIdForTemplate
+           13. --
+           14. Build onBoarding dashboard in Amplitude
+           15. Link in
+
+           16. Add cases / refactor messageUtils.getDashboard (IMPT)
+           17. Update / move messageUtils.getDashboardIdForTemplate (IMPT)
+
+           18. Visual polish on surfaces?
+           19. Make pills exclude local if not on desktop (NICE)
+
+    . 2. Add cases / refactor looker.ts:getCTRPercentData (NICE)
+
+           20. Add cases / refactor templates & getSurfaceDataForTemplate (LATER)
+           21. Support microsurveys badge, if sensible on mobile (LATER)
+           22. Update columns.tsx:filterBySurface (LATER)
+           23. Add l10n (LATER)
+
+           24. Factor Out NimbusMessageTable (EVEN LATER)
+           25. Factor out high-level data fetching (EVEN LATER)
+
+           26. Pull in Android experiments using that URL
+           27. Build dashboard link
+           28. How to handle multi types
+           29. Build CTR
+           30. 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
+-

__tests__/app/page.test.tsx → __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,17 +11,25 @@ global.fetch = jest.fn(() =>
   }),
 ) as jest.Mock;
 
-describe("Page", () => {
+const mockFetchData = {
+  localData: [],
+  experimentAndBranchInfo: [],
+  totalExperiments: 0,
+  msgRolloutInfo: [],
+  totalRolloutExperiments: 0,
+};
+
+describe.skip("Dashboard", () => {
   it("all timeline pill ids exist in the Dashboard component in /", async () => {
-    const dashboard = render(await Dashboard());
+    const dashboard = await render(await (<Dashboard {...mockFetchData} />));
 
     const firefox = dashboard.getByTestId("firefox");
     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 +38,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();
   });
 });

__tests__/lib/nimbusRecipeCollection.test.ts

@@ -2,6 +2,9 @@ import { NimbusRecipe } from "@/lib/nimbusRecipe";
 import { NimbusRecipeCollection } from "@/lib/nimbusRecipeCollection";
 import { ExperimentFakes } from "@/__tests__/ExperimentFakes.mjs";
 import { RecipeInfo } from "@/app/columns";
+import { Platform } from "@/lib/types";
+
+const platform: Platform = "firefox-desktop";
 
 const fakeFetchData = [ExperimentFakes.recipe()];
 global.fetch = jest.fn(() =>
@@ -27,6 +30,29 @@ describe("NimbusRecipeCollection", () => {
 
       expect(recipes).toEqual([new NimbusRecipe(fakeFetchData[0])]);
     });
+
+    it("constructs the correct URL for live experiments", async () => {
+      const nimbusRecipeCollection = new NimbusRecipeCollection(
+        false,
+        platform,
+      ); //XXX YYY
+      await nimbusRecipeCollection.fetchRecipes();
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        `${process.env.EXPERIMENTER_API_PREFIX}?status=Live&application=${platform}`,
+        { credentials: "omit" },
+      );
+    });
+
+    it("constructs the correct URL for completed experiments", async () => {
+      const nimbusRecipeCollection = new NimbusRecipeCollection(true);
+      await nimbusRecipeCollection.fetchRecipes();
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        `${process.env.EXPERIMENTER_API_PREFIX}?status=Complete&application=${platform}`,
+        { credentials: "omit" },
+      );
+    });
   });
 
   describe("getExperimentAndBranchInfos", () => {

app/android/page.tsx

@@ -0,0 +1,25 @@
+import { Dashboard } from "@/app/dashboard";
+import { fetchData } from "@/app/fetchData";
+import { Platform } from "@/lib/types";
+
+const platform: Platform = "fenix";
+
+export default async function Page() {
+  const {
+    localData,
+    experimentAndBranchInfo,
+    totalExperiments,
+    msgRolloutInfo,
+    totalRolloutExperiments,
+  } = await fetchData(platform);
+
+  return (
+    <Dashboard
+      platform={platform}
+      experimentAndBranchInfo={experimentAndBranchInfo}
+      totalExperiments={totalExperiments}
+      msgRolloutInfo={msgRolloutInfo}
+      totalRolloutExperiments={totalRolloutExperiments}
+    />
+  );
+}