local storage dev root id

This puts a random id in local storage and uses it for the Firestore and Realtime database root ids.
This approach is currently broken though, because the Firebase functions have not been updated to use this same root id. The functions continue to use the Firebase user id instead.

See this PR for more info: #2403

src/clue/components/clue-app-header.tsx

@@ -9,6 +9,7 @@ import { ToggleGroup } from "@concord-consortium/react-components";
 import { GroupModelType, GroupUserModelType } from "../../models/stores/groups";
 import { CustomSelect } from "./custom-select";
 import { useStores } from "../../hooks/use-stores";
+import { getDevId } from "../../lib/root-id";
 
 // cf. https://mattferderer.com/use-sass-variables-in-typescript-and-javascript
 import styles from "./toggle-buttons.scss";
@@ -29,6 +30,7 @@ export const ClueAppHeaderComponent: React.FC<IProps> = observer(function ClueAp
   const getUserTitle = () => {
     switch(appMode){
       case "dev":
+        return `Firebase Root: ${getDevId()}`;
       case "qa":
       case "test":
         return `Firebase UID: ${db.firebase.userId}`;

src/lib/firebase.test.ts

@@ -1,5 +1,6 @@
 import { DB } from "./db";
 import { Firebase } from "./firebase";
+import { kClueDevIDKey } from "./root-id";
 
 const mockStores = {
   appMode: "authed",
@@ -22,6 +23,12 @@ describe("Firebase class", () => {
       const firebase = new Firebase(mockDB);
       expect(firebase.getRootFolder()).toBe("/authed/portals/test-portal/");
     });
+    it("should handle the dev appMode", () => {
+      window.localStorage.setItem(kClueDevIDKey, "random-id");
+      const stores = {...mockStores, appMode: "dev"};
+      const firestore = new Firebase({stores} as DB);
+      expect(firestore.getRootFolder()).toBe("/dev/random-id/portals/test-portal/");
+    });
     describe("should handle the demo appMode", () => {
       it("handles basic demo name", () => {
         const stores = {...mockStores,

src/lib/firestore.test.ts

@@ -1,5 +1,6 @@
 import { DB } from "./db";
 import { Firestore } from "./firestore";
+import { kClueDevIDKey } from "./root-id";
 
 const mockStores = {
   appMode: "authed",
@@ -65,6 +66,12 @@ describe("Firestore class", () => {
       const firestore = new Firestore(mockDB);
       expect(firestore.getRootFolder()).toBe("/authed/test-portal/");
     });
+    it("should handle the dev appMode", () => {
+      window.localStorage.setItem(kClueDevIDKey, "random-id");
+      const stores = {...mockStores, appMode: "dev"};
+      const firestore = new Firestore({stores} as DB);
+      expect(firestore.getRootFolder()).toBe("/dev/random-id/");
+    });
     describe("should handle the demo appMode", () => {
       it("handles basic demo name", () => {
         const stores = {...mockStores,

src/lib/root-id.ts

@@ -1,6 +1,19 @@
+import { nanoid } from "nanoid";
 import { IStores } from "../models/stores/stores";
 import { escapeKey } from "./fire-utils";
 
+export const kClueDevIDKey = "clue-dev-id";
+
+export function getDevId() {
+  let devId = window.localStorage.getItem(kClueDevIDKey);
+  if (!devId) {
+    const newDevId = nanoid();
+    window.localStorage.setItem(kClueDevIDKey, newDevId);
+    devId = newDevId;
+  }
+  return devId;
+}
+
 type IRootDocIdStores = Pick<IStores, "appMode" | "demo" | "user">;
 
 export function getRootId(stores: IRootDocIdStores, firebaseUserId: string) {
@@ -22,7 +35,10 @@ export function getRootId(stores: IRootDocIdStores, firebaseUserId: string) {
       const escapedDemoName = demoName ? escapeKey(demoName) : demoName;
       return escapedDemoName || escapedPortal || "demo";
     }
-    // "dev", "qa", and "test"
+    case "dev": {
+      return getDevId();
+    }
+    // "test" and "qa"
     default: {
       return firebaseUserId;
     }