#7613 : custom organization toolbar icon is loaded (#7632)

* custom organization toolbar icon is loaded

* adding coverage and fixing migration type

* fix minor type and linting issues

* fetching organization theme in background script

some minor renaming
removing toolbarIcon from settings state

src/auth/authTypes.ts

@@ -242,7 +242,7 @@ export type AuthState = {
   /**
    * List of milestones for the user. A Milestone represents progress through the PixieBrix product.
    */
-  readonly milestones: Milestone[];
+  readonly milestones: readonly Milestone[];
 
   /**
    * The partner, controlling theme, documentation links, etc.

src/background/activateBrowserActionIcon.test.ts

@@ -108,7 +108,13 @@ describe("activateBrowserActionIcon", () => {
 
       expect(result).toBe("image data");
       expect(getContextmock).toHaveBeenCalledWith("2d");
-      expect(drawImageMock).toHaveBeenCalledWith(expect.any(Image), 0, 0);
+      expect(drawImageMock).toHaveBeenCalledWith(
+        expect.any(Image),
+        0,
+        0,
+        16,
+        16,
+      );
       expect(getImageDataMock).toHaveBeenCalledWith(0, 0, 16, 16);
     });
   });

src/background/activateBrowserActionIcon.ts

@@ -18,7 +18,7 @@
 import { browserAction } from "@/mv3/api";
 import axios from "axios";
 
-export default async function activateBrowserActionIcon(url?: string) {
+export default async function activateBrowserActionIcon(url?: string | null) {
   const imageData = await getImageData(url);
 
   if (imageData) {
@@ -34,7 +34,7 @@ export default async function activateBrowserActionIcon(url?: string) {
  * Converts a Blob object into ImageData.
  *
  * This function creates an Image object from a Blob, decodes the image,
- * draws it on an offscreen canvas, and then returns the image data from the canvas.
+ * draws it in 16x16 on an offscreen canvas, and then returns the image data from the canvas.
  *
  * @param {Blob} blob - The Blob object to convert into ImageData.
  * @returns {Promise<ImageData>} A promise that resolves to the ImageData of the Blob.
@@ -57,11 +57,13 @@ export async function blobToImageData(blob: Blob): Promise<ImageData> {
     throw new Error("Failed to get 2d context for canvas");
   }
 
-  context.drawImage(img, 0, 0);
+  context.drawImage(img, 0, 0, 16, 16);
   return context.getImageData(0, 0, 16, 16);
 }
 
-export async function getImageData(url?: string): Promise<ImageData | null> {
+export async function getImageData(
+  url?: string | null,
+): Promise<ImageData | null> {
   if (!url) {
     return null;
   }

src/background/background.ts

@@ -37,8 +37,7 @@ import initNavigation from "@/background/navigation";
 import initExecutor from "@/background/executor";
 import initBrowserCommands from "@/background/initBrowserCommands";
 import initDeploymentUpdater from "@/background/deploymentUpdater";
-import activateBrowserActionIcon from "@/background/activateBrowserActionIcon";
-import initPartnerTheme from "@/background/partnerTheme";
+import initTheme from "@/background/initTheme";
 import initStarterMods from "@/background/starterMods";
 import { initPartnerTokenRefresh } from "@/background/partnerIntegrations";
 import { initContentScriptReadyListener } from "@/background/contentScript";
@@ -74,8 +73,7 @@ initContextMenus();
 initContentScriptReadyListener();
 initBrowserCommands();
 initDeploymentUpdater();
-void activateBrowserActionIcon();
-initPartnerTheme();
+initTheme();
 initStarterMods();
 initPartnerTokenRefresh();
 initLogSweep();

src/background/partnerTheme.ts → src/background/initTheme.ts

@@ -23,22 +23,21 @@ import { expectContext } from "@/utils/expectContext";
 import { getActiveTheme } from "@/themes/themeStore";
 
 /**
- * Set the toolbar icon based on the current theme.
+ * Set the toolbar icon based on the current theme settings.
  * @see useGetTheme
  */
 async function setToolbarIcon(): Promise<void> {
-  const activeTheme = await getActiveTheme();
+  const { themeName: activeThemeName, toolbarIcon } = await getActiveTheme();
 
-  if (activeTheme === DEFAULT_THEME) {
-    await activateBrowserActionIcon();
-    return;
+  if (activeThemeName === DEFAULT_THEME) {
+    await activateBrowserActionIcon(toolbarIcon);
+  } else {
+    const themeLogo = getThemeLogo(activeThemeName);
+    browserAction.setIcon({ path: themeLogo.small });
   }
-
-  const themeLogo = getThemeLogo(activeTheme);
-  browserAction.setIcon({ path: themeLogo.small });
 }
 
-export default function initPartnerTheme() {
+export default function initTheme() {
   expectContext("background");
 
   void setToolbarIcon();

src/background/messenger/strict/api.ts

@@ -29,7 +29,7 @@ export const dataStore = {
   get: getMethod("GET_DATA_STORE", bg),
   set: getMethod("SET_DATA_STORE", bg),
 };
-export const activatePartnerTheme = getMethod("ACTIVATE_PARTNER_THEME", bg);
+export const activateTheme = getMethod("ACTIVATE_THEME", bg);
 
 export const traces = {
   addEntry: getNotifier("ADD_TRACE_ENTRY", bg),

src/background/messenger/strict/registration.ts

@@ -22,7 +22,7 @@ import { expectContext } from "@/utils/expectContext";
 import { showMySidePanel } from "@/background/sidePanel";
 import { ensureContentScript } from "@/background/contentScript";
 import { getRecord, setRecord } from "@/background/dataStore";
-import initPartnerTheme from "@/background/partnerTheme";
+import initTheme from "@/background/initTheme";
 import {
   addTraceEntry,
   addTraceExit,
@@ -45,7 +45,7 @@ declare global {
     INJECT_SCRIPT: typeof ensureContentScript;
     GET_DATA_STORE: typeof getRecord;
     SET_DATA_STORE: typeof setRecord;
-    ACTIVATE_PARTNER_THEME: typeof initPartnerTheme;
+    ACTIVATE_THEME: typeof initTheme;
     ADD_TRACE_ENTRY: typeof addTraceEntry;
     ADD_TRACE_EXIT: typeof addTraceExit;
     CLEAR_TRACES: typeof clearExtensionTraces;
@@ -67,7 +67,7 @@ export default function registerMessenger(): void {
     INJECT_SCRIPT: ensureContentScript,
     GET_DATA_STORE: getRecord,
     SET_DATA_STORE: setRecord,
-    ACTIVATE_PARTNER_THEME: initPartnerTheme,
+    ACTIVATE_THEME: initTheme,
     ADD_TRACE_ENTRY: addTraceEntry,
     ADD_TRACE_EXIT: addTraceExit,
     CLEAR_TRACES: clearExtensionTraces,

src/components/addBlockModal/AddBlockModal.tsx

@@ -60,7 +60,7 @@ import {
 } from "@/components/addBlockModal/addBlockModalTypes";
 import { getItemKey } from "@/components/addBlockModal/addBlockModalHelpers";
 import useAddBlock from "@/components/addBlockModal/useAddBlock";
-import { useGetTheme } from "@/hooks/useTheme";
+import { useGetThemeName } from "@/hooks/useTheme";
 import { AUTOMATION_ANYWHERE_PARTNER_KEY } from "@/services/constants";
 import aaLogo from "@img/aa-logo-small.svg";
 import { scrollbarWidth } from "@xobotyi/scrollbar-width";
@@ -182,11 +182,11 @@ const AddBlockModal: React.FC = () => {
     [marketplaceTags, listings],
   );
 
-  const partnerKey = useGetTheme();
+  const themeName = useGetThemeName();
 
   const tagItems: TagItem[] = useMemo(() => {
     const items: TagItem[] = [{ tag: TAG_ALL }];
-    if (partnerKey === AUTOMATION_ANYWHERE_PARTNER_KEY) {
+    if (themeName === AUTOMATION_ANYWHERE_PARTNER_KEY) {
       const aaTag = marketplaceTags.find(
         (tag) => tag.name === "Automation Anywhere",
       );
@@ -208,7 +208,7 @@ const AddBlockModal: React.FC = () => {
     );
 
     return items;
-  }, [marketplaceTags, partnerKey]);
+  }, [marketplaceTags, themeName]);
 
   const filteredBlocks = useMemo<Brick[]>(() => {
     if (isLoadingAllBricks || isLoadingTags || isEmpty(allBricks)) {
@@ -217,21 +217,15 @@ const AddBlockModal: React.FC = () => {
 
     let typedBlocks = [...allBricks.values()];
 
-    if (partnerKey === AUTOMATION_ANYWHERE_PARTNER_KEY) {
+    if (themeName === AUTOMATION_ANYWHERE_PARTNER_KEY) {
       typedBlocks = typedBlocks.filter(
         // eslint-disable-next-line security/detect-object-injection -- constant
         (typed) => !taggedBrickIds[TAG_UIPATH]?.has(typed.block.id),
       );
     }
 
     return typedBlocks.map(({ block }) => block);
-  }, [
-    allBricks,
-    isLoadingAllBricks,
-    isLoadingTags,
-    partnerKey,
-    taggedBrickIds,
-  ]);
+  }, [allBricks, isLoadingAllBricks, isLoadingTags, themeName, taggedBrickIds]);
 
   const searchResults = useBlockSearch(
     filteredBlocks,
@@ -384,7 +378,7 @@ const AddBlockModal: React.FC = () => {
               className={cx(styles.tagList, {
                 // Fit the "Automation Anywhere" tag name on one line
                 [styles.widerTagList ?? ""]:
-                  partnerKey === AUTOMATION_ANYWHERE_PARTNER_KEY,
+                  themeName === AUTOMATION_ANYWHERE_PARTNER_KEY,
               })}
             >
               {isLoadingTags ? (

src/extensionConsole/Navbar.test.tsx

@@ -20,12 +20,12 @@ import { MemoryRouter } from "react-router";
 import Navbar from "@/extensionConsole/Navbar";
 import { render } from "@/extensionConsole/testHelpers";
 import { THEME_LOGOS } from "@/themes/themeUtils";
-import { type Theme } from "@/themes/themeTypes";
+import { type ThemeName } from "@/themes/themeTypes";
 
 const renderNavbar = () => {
   // There doesn't seem to be significant testable differences between
   // different Theme logos. We'll test with the default PixieBrix logos for now.
-  const logo = THEME_LOGOS["default" as Theme];
+  const logo = THEME_LOGOS["default" as ThemeName];
   return render(
     <MemoryRouter>
       <Navbar logo={logo} />

src/hooks/useIsEnterpriseUser.ts

@@ -17,11 +17,11 @@
 
 import { useSelector } from "react-redux";
 import { selectTelemetryOrganizationId } from "@/auth/authSelectors";
-import { useGetTheme } from "@/hooks/useTheme";
+import { useGetThemeName } from "@/hooks/useTheme";
 
 function useIsEnterpriseUser() {
   const telemetryOrganizationId = useSelector(selectTelemetryOrganizationId);
-  const theme = useGetTheme();
+  const theme = useGetThemeName();
   return Boolean(telemetryOrganizationId) || theme !== "default";
 }