Merge branch 'main' of github.com:pixiebrix/pixiebrix-extension into …

…remove-unnecessary-no-unnecessary

.github/workflows/upload-mixpanel-lexicon.yml

@@ -0,0 +1,26 @@
+name: Upload Mixpanel Lexicon
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  upload-lexicon:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: package.json
+      - name: Install dependencies
+        run: npm ci
+      - name: Compile TypeScript
+        run: npx tsc scripts/uploadMixpanelLexicon.ts --esModuleInterop
+      - name: Upload Lexicon
+        run: node scripts/uploadMixpanelLexicon.js
+        env:
+          MIXPANEL_PROJECT_ID: ${{ secrets.MIXPANEL_PROJECT_ID }}
+          MIXPANEL_SERVICE_ACCOUNT_USERNAME: ${{ secrets.MIXPANEL_SERVICE_ACCOUNT_USERNAME }}
+          MIXPANEL_SERVICE_ACCOUNT_SECRET: ${{ secrets.MIXPANEL_SERVICE_ACCOUNT_SECRET }}

end-to-end-tests/fixtures/modDefinitions/brick-actions.yaml

@@ -61,6 +61,7 @@ extensionPoints:
           rootMode: document
           config:
             value: !nunjucks ""
+            variableName: !nunjucks ""
           root: null
           label: Assign Mod Var Brick 123
         - id: "@pixiebrix/browser/alert"

end-to-end-tests/tests/pageEditor/brickActions.spec.ts

@@ -20,6 +20,7 @@ import { expect, test } from "../../fixtures/testBase";
 import { test as base } from "@playwright/test";
 import { ActivateModPage } from "../../pageObjects/extensionConsole/modsPage";
 import { type PageEditorPage } from "end-to-end-tests/pageObjects/pageEditor/pageEditorPage";
+import { type ModListItem } from "../../pageObjects/pageEditor/modListingPanel";
 
 const testModDefinitionName = "brick-actions";
 const otherTestMod = "simple-sidebar-panel";
@@ -39,6 +40,8 @@ test("brick actions panel behavior", async ({
   const { id: modId } = modDefinitionsMap[testModDefinitionName]!;
   const { id: otherModId } = modDefinitionsMap[otherTestMod]!;
   let pageEditorPage: PageEditorPage;
+  let modListItem: ModListItem;
+  let testStarterBrick: ModListItem;
 
   await test.step("Activate mods, and initialize page editor", async () => {
     let modActivationPage = new ActivateModPage(page, extensionId, modId);
@@ -54,14 +57,14 @@ test("brick actions panel behavior", async ({
 
   const { brickActionsPanel } = pageEditorPage!;
   await test.step("Select the mod in the page editor and verify brick actions panel is hidden", async () => {
-    const modListItem =
+    modListItem =
       pageEditorPage.modListingPanel.getModListItemByName("Mod Actions Test");
     await modListItem.select();
     await expect(brickActionsPanel.root).toBeHidden();
   });
 
   await test.step("Select the starter brick and verify brick actions panel is visible", async () => {
-    const testStarterBrick = pageEditorPage.modListingPanel.getModStarterBrick(
+    testStarterBrick = pageEditorPage.modListingPanel.getModStarterBrick(
       "Mod Actions Test",
       "Button",
     );
@@ -71,23 +74,28 @@ test("brick actions panel behavior", async ({
 
   await test.step("Add a new brick", async () => {
     await brickActionsPanel.addBrick("Set Mod Variable", { index: 1 });
+    await modListItem.select();
     await pageEditorPage.saveActiveMod();
     await verifyModDefinitionSnapshot({ modId, snapshotName: "brick-added" });
   });
 
   await test.step("Remove a brick", async () => {
+    await testStarterBrick.select();
     await brickActionsPanel.getBrickByName("Set Mod Variable").select();
-    await brickActionsPanel.removeBrickButton.click();
+    await brickActionsPanel.removeActiveBrick();
+    await modListItem.select();
     await pageEditorPage.saveActiveMod();
     await verifyModDefinitionSnapshot({ modId, snapshotName: "brick-removed" });
   });
 
   await test.step("Copy and paste a brick", async () => {
+    await testStarterBrick.select();
     await brickActionsPanel.getBrickByName("Alert Brick").select();
     await expect(brickActionsPanel.getPasteBrickButton(0)).toBeHidden();
     await brickActionsPanel.copyActiveBrick();
     await brickActionsPanel.pasteBrick(1);
     await expect(brickActionsPanel.getPasteBrickButton(0)).toBeHidden();
+    await modListItem.select();
     await pageEditorPage.saveActiveMod();
     await verifyModDefinitionSnapshot({
       modId,
@@ -96,27 +104,34 @@ test("brick actions panel behavior", async ({
   });
 
   await test.step("Move bricks", async () => {
+    await testStarterBrick.select();
     await brickActionsPanel.getBrickByName("Custom Modal").moveDown();
     await brickActionsPanel.getBrickByName("Assign Mod Var Brick").moveUp();
+    await modListItem.select();
     await pageEditorPage.saveActiveMod();
     await verifyModDefinitionSnapshot({ modId, snapshotName: "bricks-moved" });
   });
 
   await test.step("Copy a brick from one mod to another", async () => {
     const targetModId = modDefinitionsMap[otherTestMod]!.id;
 
+    await testStarterBrick.select();
     await brickActionsPanel.getBrickByName("Assign Mod Var Brick").select();
     await brickActionsPanel.copyActiveBrick();
 
     // Switch to the other mod, and select its starter brick
-    await pageEditorPage.modListingPanel
-      .getModListItemByName("Simple Sidebar Panel")
-      .select();
+    const otherModListItem =
+      pageEditorPage.modListingPanel.getModListItemByName(
+        "Simple Sidebar Panel",
+      );
+    await otherModListItem.select();
+
     await pageEditorPage.modListingPanel
       .getModStarterBrick("Simple Sidebar Panel", "Simple Sidebar Panel")
       .select();
-
     await brickActionsPanel.pasteBrick(1);
+
+    await otherModListItem.select();
     await pageEditorPage.saveActiveMod();
     await verifyModDefinitionSnapshot({
       modId: targetModId,

end-to-end-tests/tests/pageEditor/brickActions.spec.ts-snapshots/brick-actions-panel-behavior/brick-added.diff

@@ -2,7 +2,7 @@ Index: brick-added
 ===================================================================
 --- brick-added
 +++ brick-added
-@@ -6,77 +6,84 @@
+@@ -6,78 +6,85 @@
        containerSelector: span:has(> span:contains('Review in codespace'))
        isAvailable:
          allFrames: true
@@ -51,6 +51,7 @@ Index: brick-added
 +          rootMode: document
 +        - config:
              value: !nunjucks ''
+             variableName: !nunjucks ''
            id: '@pixiebrix/state/assign'
            label: Assign Mod Var Brick 123
            root: null

end-to-end-tests/tests/pageEditor/brickActions.spec.ts-snapshots/brick-actions-panel-behavior/brick-copy-pasted.diff

@@ -2,7 +2,7 @@ Index: brick-copy-pasted
 ===================================================================
 --- brick-copy-pasted
 +++ brick-copy-pasted
-@@ -6,77 +6,86 @@
+@@ -6,78 +6,86 @@
        containerSelector: span:has(> span:contains('Review in codespace'))
        isAvailable:
          allFrames: true
@@ -52,7 +52,7 @@ Index: brick-copy-pasted
 +          rootMode: document
 +        - config:
              value: !nunjucks ''
-+            variableName: !nunjucks ''
+             variableName: !nunjucks ''
            id: '@pixiebrix/state/assign'
            label: Assign Mod Var Brick 123
            root: null

end-to-end-tests/tests/pageEditor/brickActions.spec.ts-snapshots/brick-actions-panel-behavior/brick-removed.diff

@@ -2,7 +2,7 @@ Index: brick-removed
 ===================================================================
 --- brick-removed
 +++ brick-removed
-@@ -6,84 +6,77 @@
+@@ -6,85 +6,78 @@
        containerSelector: span:has(> span:contains('Review in codespace'))
        isAvailable:
          allFrames: true
@@ -51,6 +51,7 @@ Index: brick-removed
 -          rootMode: document
 -        - config:
              value: !nunjucks ''
+             variableName: !nunjucks ''
            id: '@pixiebrix/state/assign'
            label: Assign Mod Var Brick 123
            root: null

end-to-end-tests/tests/pageEditor/brickConfiguration.spec.ts

@@ -21,6 +21,7 @@ import { test as base } from "@playwright/test";
 import { ActivateModPage } from "../../pageObjects/extensionConsole/modsPage";
 import { type PageEditorPage } from "end-to-end-tests/pageObjects/pageEditor/pageEditorPage";
 import { type ConfigurationForm } from "../../pageObjects/pageEditor/configurationForm";
+import { type ModListItem } from "../../pageObjects/pageEditor/modListingPanel";
 
 const testModDefinitionName = "brick-configuration";
 test.use({ modDefinitionNames: [testModDefinitionName] });
@@ -34,6 +35,7 @@ test("brick configuration", async ({
   const { id: modId } = modDefinitionsMap[testModDefinitionName]!;
   let pageEditorPage: PageEditorPage;
   let brickConfigurationPanel: ConfigurationForm;
+  let modListItem: ModListItem;
 
   await test.step("Activate mods, and initialize page editor, and select the mod starter brick", async () => {
     const modActivationPage = new ActivateModPage(page, extensionId, modId);
@@ -45,7 +47,7 @@ test("brick configuration", async ({
 
     brickConfigurationPanel = pageEditorPage.brickConfigurationPanel;
 
-    const modListItem = pageEditorPage.modListingPanel.getModListItemByName(
+    modListItem = pageEditorPage.modListingPanel.getModListItemByName(
       "Test mod - Brick Configuration",
     );
     await modListItem.select();
@@ -55,19 +57,12 @@ test("brick configuration", async ({
       "Context menu item",
     );
     await testStarterBrick.select();
-
-    await expect(testStarterBrick.saveButton).toBeDisabled();
   });
 
-  await test.step("Modify the mod name, title and menu context", async () => {
+  await test.step("Modify the mod component name, title and menu context", async () => {
     await brickConfigurationPanel.fillField("Name", "A cool menu action");
 
-    const updatedTestStarterBrick =
-      pageEditorPage.modListingPanel.getModStarterBrick(
-        "Test mod - Brick Configuration",
-        "A cool menu action",
-      );
-    await expect(updatedTestStarterBrick.saveButton).toBeEnabled();
+    await expect(modListItem.saveButton).toBeEnabled();
 
     await brickConfigurationPanel.fillField("Title", "Do cool stuff with ");
     await brickConfigurationPanel.clickShortcut("Title", "selected text");
@@ -121,6 +116,7 @@ test("brick configuration", async ({
     await brickConfigurationPanel.clickShortcut("Sites/APIs", "All URLs");
   });
 
+  await modListItem!.select();
   await pageEditorPage!.saveActiveMod();
 
   await verifyModDefinitionSnapshot({

end-to-end-tests/tests/runtime/localIntegrations.spec.ts

@@ -74,6 +74,7 @@ test.describe("Local Integrations Page", () => {
       localIntegrationsPage.getByText("controlRoomUrl is a required field"),
     ).toBeVisible();
 
+    await localIntegrationsPage.getByLabel("Username").click();
     await expect(localIntegrationsPage.getByLabel("Username")).toBeFocused();
 
     await page.keyboard.press("Tab");

end-to-end-tests/tests/telemetry/errors.spec.ts

@@ -165,7 +165,7 @@ test("can report a service worker error to telemetry service", async ({
       }),
       extensionVersion: expect.any(String),
       manifestVersion: 3,
-      message: "Request failed with status code 500",
+      message: "Internal Server Error",
       name: "AxiosError",
       origin: "logger",
       pageName: "background",

knip.mjs

@@ -29,6 +29,8 @@ const knipConfig = {
     "end-to-end-tests/setup/unaffiliated.setup.ts",
     "end-to-end-tests/setup/utils.ts",
     "scripts/DiscardFilePlugin.mjs",
+    "scripts/uploadMixpanelLexicon.ts",
+    "src/telemetry/lexicon.ts",
   ],
   // https://knip.dev/guides/handling-issues#mocks-and-other-implicit-imports
   ignore: [

package.json

@@ -73,7 +73,7 @@
     "copy-text-to-clipboard": "^3.2.0",
     "csharp-helpers": "^0.9.3",
     "css-selector-generator": "^3.6.8",
-    "date-fns": "^3.6.0",
+    "date-fns": "^4.1.0",
     "dompurify": "^3.1.6",
     "downloadjs": "^1.4.7",
     "exifreader": "^4.23.5",
@@ -293,7 +293,7 @@
     "terser-webpack-plugin": "^5.3.10",
     "ts-loader": "^9.5.1",
     "type-fest": "^4.26.1",
-    "typescript": "^5.5.4",
+    "typescript": "^5.6.2",
     "typescript-plugin-css-modules": "^5.1.0",
     "webpack": "^5.94.0",
     "webpack-build-notifier": "^3.1.0",

scripts/uploadMixpanelLexicon.ts

@@ -0,0 +1,63 @@
+/*
+ * 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 axios from "axios";
+import {
+  lexicon,
+  transformLexiconMapToRequestSchema,
+} from "../src/telemetry/lexicon";
+
+async function uploadMixpanelLexicon() {
+  const transformedLexicon = transformLexiconMapToRequestSchema(lexicon);
+
+  const {
+    MIXPANEL_PROJECT_ID,
+    MIXPANEL_SERVICE_ACCOUNT_USERNAME,
+    MIXPANEL_SERVICE_ACCOUNT_SECRET,
+  } = process.env;
+
+  for (const [key, value] of Object.entries({
+    MIXPANEL_PROJECT_ID,
+    MIXPANEL_SERVICE_ACCOUNT_USERNAME,
+    MIXPANEL_SERVICE_ACCOUNT_SECRET,
+  })) {
+    if (!value) {
+      throw new Error(`${key} is required`);
+    }
+  }
+
+  try {
+    const response = await axios.post(
+      `https://mixpanel.com/api/app/projects/${MIXPANEL_PROJECT_ID}/schemas`,
+      transformedLexicon,
+      {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Basic ${Buffer.from(
+            `${MIXPANEL_SERVICE_ACCOUNT_USERNAME}:${MIXPANEL_SERVICE_ACCOUNT_SECRET}`,
+          ).toString("base64")}`,
+        },
+      },
+    );
+
+    console.log("Lexicon uploaded successfully:", response.data);
+  } catch (error) {
+    console.error("Error uploading lexicon:", error);
+  }
+}
+
+void uploadMixpanelLexicon();