#9222 Add policy for hiding the sidebar logo

src/hooks/useTheme.test.ts

@@ -22,21 +22,31 @@ import { initialTheme } from "@/themes/themeStore";
 import { type AsyncState } from "@/types/sliceTypes";
 import { themeStorage } from "@/themes/themeUtils";
 import { activateTheme } from "@/background/messenger/api";
+import { readManagedStorageByKey } from "@/store/enterprise/managedStorage";
 
 afterEach(() => {
   jest.clearAllMocks();
 });
 
 jest.mock("@/hooks/useAsyncExternalStore");
+jest.mock("@/background/messenger/api");
+jest.mock("@/store/enterprise/managedStorage");
 
 describe("useTheme", () => {
-  beforeEach(() => {
+  beforeEach(async () => {
     jest
       .mocked(useAsyncExternalStore)
       .mockReturnValue({ data: initialTheme, isLoading: false } as AsyncState);
+    // eslint-disable-next-line no-restricted-syntax -- this func requires a parameter
+    jest.mocked(readManagedStorageByKey).mockResolvedValue(undefined);
   });
+
   test("calls useAsyncExternalStore and gets current theme state", async () => {
-    const { result: themeResult } = renderHook(() => useTheme());
+    const { result: themeResult, waitForNextUpdate } = renderHook(() =>
+      useTheme(),
+    );
+
+    await waitForNextUpdate();
 
     expect(useAsyncExternalStore).toHaveBeenNthCalledWith(
       1,
@@ -57,20 +67,71 @@ describe("useTheme", () => {
     });
   });
 
-  it("calls activateTheme after loading is done and it hasn't been called recently", () => {
+  it("calls activateTheme after loading is done and it hasn't been called recently", async () => {
     jest.useFakeTimers();
 
     jest.mocked(useAsyncExternalStore).mockReturnValue({
       data: { ...initialTheme, lastFetched: Date.now() },
       isLoading: false,
     } as AsyncState);
 
-    renderHook(() => useTheme());
+    let result = renderHook(() => useTheme());
+    await result.waitForNextUpdate();
     expect(activateTheme).not.toHaveBeenCalled();
 
     jest.advanceTimersByTime(125_000);
 
-    renderHook(() => useTheme());
+    result = renderHook(() => useTheme());
+    await result.waitForNextUpdate();
     expect(activateTheme).toHaveBeenCalledOnce();
   });
+
+  it("overrides showSidebarLogo when hideSidebarLogo is true in managed storage", async () => {
+    jest.mocked(readManagedStorageByKey).mockResolvedValue(true);
+
+    const { result, waitForNextUpdate } = renderHook(() => useTheme());
+
+    await waitForNextUpdate();
+
+    expect(result.current.activeTheme.showSidebarLogo).toBe(false);
+  });
+
+  it("uses default activeTheme when hideSidebarLogo is false in managed storage", async () => {
+    jest.mocked(readManagedStorageByKey).mockResolvedValue(false);
+
+    const { result, waitForNextUpdate } = renderHook(() => useTheme());
+
+    await waitForNextUpdate();
+
+    expect(result.current.activeTheme.showSidebarLogo).toBe(
+      initialTheme.showSidebarLogo,
+    );
+  });
+
+  it("uses default activeTheme when hideSidebarLogo is undefined in managed storage", async () => {
+    // eslint-disable-next-line no-restricted-syntax -- this func requires a parameter
+    jest.mocked(readManagedStorageByKey).mockResolvedValue(undefined);
+
+    const { result, waitForNextUpdate } = renderHook(() => useTheme());
+
+    await waitForNextUpdate();
+
+    expect(result.current.activeTheme.showSidebarLogo).toBe(
+      initialTheme.showSidebarLogo,
+    );
+  });
+
+  it("uses default activeTheme when an error occurs while fetching from managed storage", async () => {
+    jest
+      .mocked(readManagedStorageByKey)
+      .mockRejectedValue(new Error("Managed storage error"));
+
+    const { result, waitForNextUpdate } = renderHook(() => useTheme());
+
+    await waitForNextUpdate();
+
+    expect(result.current.activeTheme.showSidebarLogo).toBe(
+      initialTheme.showSidebarLogo,
+    );
+  });
 });

src/hooks/useTheme.ts

@@ -25,6 +25,8 @@ import {
 import { initialTheme } from "@/themes/themeStore";
 import useAsyncExternalStore from "@/hooks/useAsyncExternalStore";
 import { activateTheme } from "@/background/messenger/api";
+import useAsyncState from "@/hooks/useAsyncState";
+import { readManagedStorageByKey } from "@/store/enterprise/managedStorage";
 
 const themeStorageSubscribe = (callback: () => void) => {
   const abortController = new AbortController();
@@ -42,10 +44,13 @@ 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: hideSidebarLogo, isLoading: isManagedStorageLoading } =
+    useAsyncState(async () => readManagedStorageByKey("hideSidebarLogo"), []);
+
+  const isLoading = isManagedStorageLoading || isCachedThemeLoading;
 
   useEffect(() => {
     if (
@@ -70,7 +75,15 @@ function useTheme(): { activeTheme: ThemeAssets; isLoading: boolean } {
     setThemeFavicon(activeTheme.themeName);
   }, [activeTheme, cachedTheme, isLoading]);
 
-  return { activeTheme, isLoading };
+  return {
+    activeTheme: {
+      ...activeTheme,
+      // There is a managed storage policy to hide the sidebar logo, overriding the team theme
+      // See managedStorageSchema.json
+      showSidebarLogo: hideSidebarLogo ? false : activeTheme.showSidebarLogo,
+    },
+    isLoading,
+  };
 }
 
 export default useTheme;

src/sidebar/Header.tsx

@@ -53,17 +53,16 @@ const Header: React.FunctionComponent = () => {
 
   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">
+        {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;
+  /**
+   * Hides the logo in the PixieBrix sidebar, overriding the team theme.
+   * @since 2.1.4
+   */
+  hideSidebarLogo?: boolean;
 };

static/managedStorageSchema.json

@@ -49,6 +49,11 @@
       "type": "boolean",
       "description": "Disable the browser warning for non-Chrome browsers, e.g., Microsoft Edge",
       "default": false
+    },
+    "hideSidebarLogo": {
+      "type": "boolean",
+      "description": "If set, hide the logo on the PixieBrix sidebar, overriding the team theme.",
+      "default": false
     }
   }
 }