Merge branch 'main' into more-poms

end-to-end-tests/setup/utils.ts

@@ -16,7 +16,6 @@
  */
 
 import { type BrowserContext, type Page, expect } from "@playwright/test";
-import { ensureVisibility } from "../utils";
 
 export const openExtensionConsoleFromAdmin = async (
   adminPage: Page,
@@ -29,31 +28,25 @@ export const openExtensionConsoleFromAdmin = async (
   // initialized to be able to receive messages via the external messenger api, which happens when the Extension
   // reloads after linking. Thus, we wrap the following with an `expect.toPass` retry.
   await expect(async () => {
-    // Ensure the extension console loads with authenticated user
-    const extensionConsolePagePromise = context.waitForEvent("page", {
-      timeout: 2000,
-    });
     await adminPage
       .locator("button")
       .filter({ hasText: "Open Extension Console" })
       .click();
 
-    extensionConsolePage = await extensionConsolePagePromise;
+    extensionConsolePage = context
+      .pages()
+      .find((page) => page.url().endsWith("/options.html#/"));
+
+    if (!extensionConsolePage) {
+      throw new Error("Extension console page not found");
+    }
 
     await expect(extensionConsolePage.locator("#container")).toContainText(
       "Extension Console",
     );
-  }).toPass({ timeout: 10_000 });
-
-  if (!extensionConsolePage) {
-    throw new Error("Extension console page not found");
-  }
+    await expect(extensionConsolePage.getByText(userName)).toBeVisible();
+  }).toPass({ timeout: 15_000 });
 
-  await ensureVisibility(
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion,@typescript-eslint/no-unnecessary-type-assertion -- checked above
-    extensionConsolePage!.getByText(userName),
-    // The first time the extension console is opened after logging in, it sometimes takes a while to load the extension console
-    { timeout: 16_000 },
-  );
-  return extensionConsolePage;
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion -- needed for strict null check
+  return extensionConsolePage as Page;
 };

end-to-end-tests/tests/regressions/welcomeStarterBricks.spec.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright (C) 2024 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { test, expect } from "../../fixtures/testBase";
+// @ts-expect-error -- https://youtrack.jetbrains.com/issue/AQUA-711/Provide-a-run-configuration-for-Playwright-tests-in-specs-with-fixture-imports-only
+import { test as base } from "@playwright/test";
+import { ActivateModPage } from "../../pageObjects/extensionConsole/modsPage";
+import { getSidebarPage, runModViaQuickBar } from "../../utils";
+
+test("#8740: can view the starter mods on the pixiebrix.com/welcome page", async ({
+  page,
+  extensionId,
+}) => {
+  const modId = "@e2e-testing/test-sidebar-navigation";
+  const modActivationPage = new ActivateModPage(page, extensionId, modId);
+  await modActivationPage.goto();
+  await modActivationPage.clickActivateAndWaitForModsPageRedirect();
+
+  await page.goto("https://pixiebrix.com/welcome");
+  await runModViaQuickBar(page, "Open Sidebar");
+
+  const sideBarPage = await getSidebarPage(page, extensionId);
+  await expect(
+    sideBarPage.getByRole("heading", { name: "Announcements" }),
+  ).toBeVisible();
+  await expect(
+    sideBarPage.getByRole("heading", { name: "Decision Tree" }),
+  ).toBeVisible();
+  await expect(
+    sideBarPage.getByRole("heading", { name: "Search" }),
+  ).toBeVisible();
+  await expect(
+    sideBarPage.getByRole("heading", { name: "Snippet Manager" }),
+  ).toBeVisible();
+  await expect(
+    sideBarPage.getByRole("heading", { name: "Writing Assist" }),
+  ).toBeVisible();
+});

src/background/starterMods.test.ts

@@ -67,7 +67,7 @@ jest.mock("@/auth/authStorage", () => ({
   addListener: jest.fn(),
 }));
 
-jest.mock("@/utils/extensionUtils");
+jest.mock("@/contentScript/messenger/api");
 jest.mock("./refreshRegistries");
 
 const isLinkedMock = jest.mocked(isLinked);

src/background/starterMods.ts

@@ -26,8 +26,7 @@ import {
   saveModComponentState,
 } from "@/store/extensionsStorage";
 import { type ModDefinition } from "@/types/modDefinitionTypes";
-import { forEachTab } from "@/utils/extensionUtils";
-import { queueReloadFrameMods } from "@/contentScript/messenger/api";
+import { reloadModsEveryTab } from "@/contentScript/messenger/api";
 import { type ModComponentState } from "@/store/extensionsTypes";
 import reportError from "@/telemetry/reportError";
 import { debounce } from "lodash";
@@ -261,7 +260,9 @@ async function activateMods(modDefinitions: ModDefinition[]): Promise<boolean> {
     saveModComponentState(optionsState),
     saveSidebarState(sidebarState),
   ]);
-  await forEachTab(queueReloadFrameMods);
+
+  reloadModsEveryTab();
+
   return newModConfigs.length > 0;
 }
 

src/bricks/renderers/documentView/DocumentView.tsx

@@ -17,7 +17,7 @@
 
 import "@/vendors/bootstrapWithoutRem.css";
 import "@/sidebar/sidebarBootstrapOverrides.scss";
-import { buildDocumentBuilderBranch } from "@/pageEditor/documentBuilder/documentTree";
+import { buildDocumentBuilderSubtree } from "@/pageEditor/documentBuilder/documentTree";
 import React from "react";
 import { type DocumentViewProps } from "./DocumentViewProps";
 import DocumentContext from "@/pageEditor/documentBuilder/render/DocumentContext";
@@ -56,7 +56,7 @@ const DocumentView: React.FC<DocumentViewProps> = ({
       <StylesheetsContext.Provider value={{ stylesheets }}>
         <Stylesheets href={stylesheets}>
           {body.map((documentElement, index) => {
-            const documentBuilderBranch = buildDocumentBuilderBranch(
+            const documentBuilderSubtree = buildDocumentBuilderSubtree(
               documentElement,
               {
                 staticId: joinPathParts("body", "children"),
@@ -65,11 +65,11 @@ const DocumentView: React.FC<DocumentViewProps> = ({
               },
             );
 
-            if (documentBuilderBranch == null) {
+            if (documentBuilderSubtree == null) {
               return null;
             }
 
-            const { Component, props } = documentBuilderBranch;
+            const { Component, props } = documentBuilderSubtree;
             // eslint-disable-next-line react/no-array-index-key -- They have no other unique identifier
             return <Component key={index} {...props} />;
           })}

src/pageEditor/documentBuilder/documentBuilderTypes.ts

@@ -145,7 +145,7 @@ export type DynamicPath = {
   }>;
 };
 
-export type BuildDocumentBuilderBranch = (
+export type BuildDocumentBuilderSubtree = (
   root: DocumentBuilderElement,
   tracePath: DynamicPath,
 ) => DocumentBuilderComponent | null;

src/pageEditor/documentBuilder/documentTree.test.tsx

@@ -23,7 +23,7 @@ import blockRegistry from "@/bricks/registry";
 import MarkdownRenderer from "@/bricks/renderers/MarkdownRenderer";
 import * as contentScriptAPI from "@/contentScript/messenger/api";
 import { uuidv4 } from "@/types/helpers";
-import { buildDocumentBuilderBranch } from "./documentTree";
+import { buildDocumentBuilderSubtree } from "./documentTree";
 import {
   type DocumentBuilderElement,
   type DocumentBuilderElementType,
@@ -46,7 +46,7 @@ describe("When rendered in panel", () => {
   });
 
   const renderDocument = (config: DocumentBuilderElement) => {
-    const branch = buildDocumentBuilderBranch(config, {
+    const branch = buildDocumentBuilderSubtree(config, {
       staticId: "body",
       branches: [],
     });

src/pageEditor/documentBuilder/documentTree.tsx

@@ -20,7 +20,7 @@ import BlockElement from "@/pageEditor/documentBuilder/render/BlockElement";
 import { get } from "lodash";
 import { Col, Container, Row, Image } from "react-bootstrap";
 import {
-  type BuildDocumentBuilderBranch,
+  type BuildDocumentBuilderSubtree,
   type ButtonElementConfig,
   type DocumentBuilderComponent,
   type DocumentBuilderElement,
@@ -59,7 +59,7 @@ const UnknownType: React.FC<{ componentType: string }> = ({
   <div className="text-danger">Unknown component type: {componentType}</div>
 );
 
-export const buildDocumentBuilderBranch: BuildDocumentBuilderBranch = (
+export const buildDocumentBuilderSubtree: BuildDocumentBuilderSubtree = (
   root,
   tracePath,
 ) => {
@@ -84,16 +84,16 @@ export const buildDocumentBuilderBranch: BuildDocumentBuilderBranch = (
   ) {
     documentBuilderComponent.props.children = root.children.map(
       (child, index) => {
-        const branch = buildDocumentBuilderBranch(child, {
+        const subtree = buildDocumentBuilderSubtree(child, {
           staticId: joinPathParts(staticId, root.type, "children"),
           branches: [...branches, { staticId, index }],
         });
 
-        if (branch == null) {
+        if (subtree == null) {
           return null;
         }
 
-        const { Component, props } = branch;
+        const { Component, props } = subtree;
         // eslint-disable-next-line react/no-array-index-key -- They have no other unique identifier
         return <Component key={index} {...props} />;
       },
@@ -265,7 +265,7 @@ export function getDocumentBuilderComponent(
         elementKey: config.elementKey,
         config: config.element,
         tracePath,
-        buildDocumentBuilderBranch,
+        buildDocumentBuilderSubtree,
       };
 
       return {

src/pageEditor/documentBuilder/render/ListElement.tsx

@@ -20,7 +20,7 @@ import DocumentContext from "./DocumentContext";
 import { type Args } from "@/runtime/mapArgs";
 import Loader from "@/components/Loader";
 import {
-  type BuildDocumentBuilderBranch,
+  type BuildDocumentBuilderSubtree,
   type DocumentBuilderElement,
   type DynamicPath,
 } from "@/pageEditor/documentBuilder/documentBuilderTypes";
@@ -41,7 +41,7 @@ type DocumentListProps = {
   array: UnknownObject[];
   elementKey?: string;
   config: Args;
-  buildDocumentBuilderBranch: BuildDocumentBuilderBranch;
+  buildDocumentBuilderSubtree: BuildDocumentBuilderSubtree;
   tracePath: DynamicPath;
 };
 
@@ -51,7 +51,7 @@ const ListElementInternal: React.FC<DocumentListProps> = ({
   array = DEFAULT_ARRAY,
   elementKey,
   config,
-  buildDocumentBuilderBranch,
+  buildDocumentBuilderSubtree,
   tracePath,
 }) => {
   const { staticId, branches } = tracePath;
@@ -138,7 +138,7 @@ const ListElementInternal: React.FC<DocumentListProps> = ({
     <>
       {rootDefinitions?.map(({ documentElement, elementContext }, index) => {
         const { Component, props } =
-          buildDocumentBuilderBranch(
+          buildDocumentBuilderSubtree(
             documentElement as DocumentBuilderElement,
             {
               staticId: joinPathParts(staticId, "list", "children"),

src/pageEditor/exampleStarterBrickConfigs.ts

@@ -26,17 +26,17 @@ const quickbarActionId = validateRegistryId("@pixiebrix/quickbar/add");
 
 export function getExampleBrickPipeline(type: StarterBrickType): BrickPipeline {
   if (type === "actionPanel") {
-    const documentBuilderBlock = createNewConfiguredBrick(documentBrickId);
-    return [documentBuilderBlock];
+    const documentBuilderBrick = createNewConfiguredBrick(documentBrickId);
+    return [documentBuilderBrick];
   }
 
   if (type === "quickBarProvider") {
-    const quickbarActionBlock = createNewConfiguredBrick(quickbarActionId);
-    quickbarActionBlock.config = {
+    const quickbarActionBrick = createNewConfiguredBrick(quickbarActionId);
+    quickbarActionBrick.config = {
       title: "Example Action",
       action: toExpression("pipeline", []),
     };
-    return [quickbarActionBlock];
+    return [quickbarActionBrick];
   }
 
   return [];