#9227 Refactor useTheme to use useManagedStorageState

src/hooks/useTheme.test.ts

@@ -22,19 +22,39 @@ import { initialTheme } from "@/themes/themeStore";
 import { type AsyncState } from "@/types/sliceTypes";
 import { themeStorage } from "@/themes/themeUtils";
 import { activateTheme } from "@/background/messenger/api";
+import useManagedStorageState from "@/store/enterprise/useManagedStorageState";
 
 afterEach(() => {
   jest.clearAllMocks();
 });
 
 jest.mock("@/hooks/useAsyncExternalStore");
+jest.mock("@/background/messenger/api");
+jest.mock("@/store/enterprise/useManagedStorageState");
+
+const customTheme = {
+  themeName: "custom",
+  showSidebarLogo: true,
+  customSidebarLogo: "https://example.com/custom-logo.png",
+  toolbarIcon: "https://example.com/custom-icon.svg",
+  logo: {
+    regular: "https://example.com/custom-logo-regular.png",
+    small: "https://example.com/custom-logo-small.png",
+  },
+  lastFetched: Date.now(),
+};
 
 describe("useTheme", () => {
-  beforeEach(() => {
+  beforeEach(async () => {
     jest
       .mocked(useAsyncExternalStore)
       .mockReturnValue({ data: initialTheme, isLoading: false } as AsyncState);
+    jest.mocked(useManagedStorageState).mockReturnValue({
+      data: {},
+      isLoading: false,
+    });
   });
+
   test("calls useAsyncExternalStore and gets current theme state", async () => {
     const { result: themeResult } = renderHook(() => useTheme());
 
@@ -66,11 +86,58 @@ describe("useTheme", () => {
     } as AsyncState);
 
     renderHook(() => useTheme());
+
     expect(activateTheme).not.toHaveBeenCalled();
 
     jest.advanceTimersByTime(125_000);
 
     renderHook(() => useTheme());
+
     expect(activateTheme).toHaveBeenCalledOnce();
   });
+
+  it.each([
+    { policyValue: true, themeValue: true, expectedValue: true },
+    { policyValue: true, themeValue: false, expectedValue: true },
+    { policyValue: false, themeValue: true, expectedValue: false },
+    { policyValue: false, themeValue: false, expectedValue: false },
+    { policyValue: undefined, themeValue: true, expectedValue: true },
+    { policyValue: undefined, themeValue: false, expectedValue: false },
+  ])(
+    "handles showSidebarLogo policy (policy: $policyValue, theme: $themeValue, expected: $expectedValue)",
+    async ({ policyValue, themeValue, expectedValue }) => {
+      jest.mocked(useAsyncExternalStore).mockReturnValue({
+        data: { ...customTheme, showSidebarLogo: themeValue },
+        isLoading: false,
+      } as AsyncState);
+      jest.mocked(useManagedStorageState).mockReturnValue({
+        data: { showSidebarLogo: policyValue },
+        isLoading: false,
+      });
+
+      const { result } = renderHook(() => useTheme());
+
+      expect(result.current.activeTheme).toMatchObject({
+        ...customTheme,
+        showSidebarLogo: expectedValue,
+      });
+    },
+  );
+
+  it("uses activeTheme when an error occurs in managed storage", async () => {
+    jest.mocked(useAsyncExternalStore).mockReturnValue({
+      data: customTheme,
+      isLoading: false,
+    } as AsyncState);
+
+    jest.mocked(useManagedStorageState).mockImplementation(() => {
+      throw new Error("Managed storage error");
+    });
+
+    const { result } = renderHook(() => useTheme());
+
+    expect(result.current.activeTheme.showSidebarLogo).toBe(
+      customTheme.showSidebarLogo,
+    );
+  });
 });

src/hooks/useTheme.ts

@@ -25,6 +25,7 @@ import {
 import { initialTheme } from "@/themes/themeStore";
 import useAsyncExternalStore from "@/hooks/useAsyncExternalStore";
 import { activateTheme } from "@/background/messenger/api";
+import useManagedStorageState from "@/store/enterprise/useManagedStorageState";
 
 const themeStorageSubscribe = (callback: () => void) => {
   const abortController = new AbortController();
@@ -42,10 +43,15 @@ const themeStorageSubscribe = (callback: () => void) => {
 function useTheme(): { activeTheme: ThemeAssets; isLoading: boolean } {
   // The active theme is fetched with `getActiveTheme` in the background script and cached in the themeStorage,
   // This hook subscribes to changes in themeStorage to retrieve the latest current activeTheme
-  const { data: cachedTheme, isLoading } = useAsyncExternalStore(
-    themeStorageSubscribe,
-    themeStorage.get,
-  );
+  const { data: cachedTheme, isLoading: isCachedThemeLoading } =
+    useAsyncExternalStore(themeStorageSubscribe, themeStorage.get);
+
+  const { data: managedStorageState, isLoading: isManagedStorageLoading } =
+    useManagedStorageState();
+
+  const showSidebarLogoOverride = managedStorageState?.showSidebarLogo;
+
+  const isLoading = isManagedStorageLoading || isCachedThemeLoading;
 
   useEffect(() => {
     if (
@@ -70,7 +76,18 @@ function useTheme(): { activeTheme: ThemeAssets; isLoading: boolean } {
     setThemeFavicon(activeTheme.themeName);
   }, [activeTheme, cachedTheme, isLoading]);
 
-  return { activeTheme, isLoading };
+  return {
+    activeTheme: {
+      ...activeTheme,
+      // There is a managed storage policy that overrides the sidebar logo visibility specified by the team theme
+      // See managedStorageSchema.json
+      showSidebarLogo:
+        showSidebarLogoOverride == null
+          ? activeTheme.showSidebarLogo
+          : showSidebarLogoOverride,
+    },
+    isLoading,
+  };
 }
 
 export default useTheme;

src/sidebar/Header.tsx

@@ -34,7 +34,7 @@ function reloadSidebar() {
 const Header: React.FunctionComponent = () => {
   const {
     activeTheme: { logo, showSidebarLogo, customSidebarLogo, themeName },
-    isLoading,
+    isLoading: isThemeLoading,
   } = useTheme();
 
   const { flagOn } = useFlags();
@@ -47,23 +47,18 @@ const Header: React.FunctionComponent = () => {
     [styles.themeColor || ""]: themeName !== DEFAULT_THEME,
   });
 
-  if (isLoading) {
-    return null;
-  }
-
   return (
     <div className="d-flex py-2 pl-2 pr-0 align-items-center">
-      {showSidebarLogo && (
-        // `mx-auto` centers the logo
-        <div className="mx-auto">
+      <div className="mx-auto">
+        {!isThemeLoading && showSidebarLogo && (
           <img
             src={customSidebarLogo ?? logo.regular}
             alt={customSidebarLogo ? "Custom logo" : "PixieBrix logo"}
             className={styles.logo}
             data-testid="sidebarHeaderLogo"
           />
-        </div>
-      )}
+        )}
+      </div>
       {showDeveloperUI && (
         <Button
           type="button"

src/store/enterprise/managedStorageTypes.ts

@@ -73,4 +73,9 @@ export type ManagedStorageState = {
    * @since 1.7.36
    */
   disableBrowserWarning?: boolean;
+  /**
+   * Controls the visibility of the PixieBrix sidebar logo. Overrides the team theme, if one exists.
+   * @since 2.1.3
+   */
+  showSidebarLogo?: boolean;
 };

static/managedStorageSchema.json

@@ -49,6 +49,10 @@
       "type": "boolean",
       "description": "Disable the browser warning for non-Chrome browsers, e.g., Microsoft Edge",
       "default": false
+    },
+    "showSidebarLogo": {
+      "type": "boolean",
+      "description": "Controls the visibility the PixieBrix sidebar logo. Overrides the team theme, if one exists."
     }
   }
 }