[PM-5539] Migrate ThemingService (#8219)

* Update ThemingService

* Finish ThemingService

* Lint

* More Tests & Docs

* Refactor to ThemeStateService

* Rename File

* Fix Import

* Remove `type` added to imports

* Update InitServices

* Fix Test

* Remove Unreferenced Code

* Remove Unneeded Null Check

* Add Ticket Link

* Add Back THEMING_DISK

* Fix Desktop

* Create SYSTEM_THEME_OBSERVABLE

* Fix Browser Injection

* Update Desktop Manual Access

* Fix Default Theme

* Update Test

libs/common/src/state-migrations/migrations/35-move-theme-to-state-providers.spec.ts

@@ -0,0 +1,78 @@
+import { runMigrator } from "../migration-helper.spec";
+
+import { MoveThemeToStateProviderMigrator } from "./35-move-theme-to-state-providers";
+
+describe("MoveThemeToStateProviders", () => {
+  const sut = new MoveThemeToStateProviderMigrator(34, 35);
+
+  describe("migrate", () => {
+    it("migrates global theme and deletes it", async () => {
+      const output = await runMigrator(sut, {
+        global: {
+          theme: "dark",
+        },
+      });
+
+      expect(output).toEqual({
+        global_theming_selection: "dark",
+        global: {},
+      });
+    });
+
+    it.each([{}, null])(
+      "doesn't touch it if global state looks like: '%s'",
+      async (globalState) => {
+        const output = await runMigrator(sut, {
+          global: globalState,
+        });
+
+        expect(output).toEqual({
+          global: globalState,
+        });
+      },
+    );
+  });
+
+  describe("rollback", () => {
+    it("migrates state provider theme back to original location when no global", async () => {
+      const output = await runMigrator(
+        sut,
+        {
+          global_theming_selection: "disk",
+        },
+        "rollback",
+      );
+
+      expect(output).toEqual({
+        global: {
+          theme: "disk",
+        },
+      });
+    });
+
+    it("migrates state provider theme back to legacy location when there is an existing global object", async () => {
+      const output = await runMigrator(
+        sut,
+        {
+          global_theming_selection: "disk",
+          global: {
+            other: "stuff",
+          },
+        },
+        "rollback",
+      );
+
+      expect(output).toEqual({
+        global: {
+          theme: "disk",
+          other: "stuff",
+        },
+      });
+    });
+
+    it("does nothing if no theme in state provider location", async () => {
+      const output = await runMigrator(sut, {}, "rollback");
+      expect(output).toEqual({});
+    });
+  });
+});

libs/common/src/state-migrations/migrations/35-move-theme-to-state-providers.ts

@@ -0,0 +1,31 @@
+import { KeyDefinitionLike, MigrationHelper } from "../migration-helper";
+import { Migrator } from "../migrator";
+
+type ExpectedGlobal = { theme?: string };
+
+const THEME_SELECTION: KeyDefinitionLike = {
+  key: "selection",
+  stateDefinition: { name: "theming" },
+};
+
+export class MoveThemeToStateProviderMigrator extends Migrator<34, 35> {
+  async migrate(helper: MigrationHelper): Promise<void> {
+    const legacyGlobalState = await helper.get<ExpectedGlobal>("global");
+    const theme = legacyGlobalState?.theme;
+    if (theme != null) {
+      await helper.setToGlobal(THEME_SELECTION, theme);
+      delete legacyGlobalState.theme;
+      await helper.set("global", legacyGlobalState);
+    }
+  }
+
+  async rollback(helper: MigrationHelper): Promise<void> {
+    const theme = await helper.getFromGlobal<string>(THEME_SELECTION);
+    if (theme != null) {
+      const legacyGlobal = (await helper.get<ExpectedGlobal>("global")) ?? {};
+      legacyGlobal.theme = theme;
+      await helper.set("global", legacyGlobal);
+      await helper.removeFromGlobal(THEME_SELECTION);
+    }
+  }
+}