Merge remote-tracking branch 'origin/main' into feature/enforce-exhau…

…stive-deps

.github/workflows/beta-release.yaml

@@ -44,7 +44,7 @@ jobs:
           cache: npm
       - run: npm ci
       - run: npm run build
-      - run: bash scripts/upload-sourcemaps.sh
+      - run: bash applications/browser-extension/scripts/upload-sourcemaps.sh
         env:
           AWS_ACCESS_KEY_ID: ${{ secrets.SOURCEMAP_USER_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.SOURCEMAP_USER_KEY }}

.github/workflows/release.yaml

@@ -37,28 +37,28 @@ jobs:
           RELEASE_CHANNEL: stable
           DATADOG_APPLICATION_ID: ${{ secrets.DATADOG_APPLICATION_ID }}
           DATADOG_CLIENT_TOKEN: ${{ secrets.DATADOG_CLIENT_TOKEN }}
-      - run: bash scripts/upload-sourcemaps.sh
+      - run: bash applications/browser-extension/scripts/upload-sourcemaps.sh
         env:
           AWS_ACCESS_KEY_ID: ${{ secrets.SOURCEMAP_USER_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.SOURCEMAP_USER_KEY }}
           AWS_DEFAULT_REGION: "us-east-2"
           DATADOG_API_KEY: ${{ secrets.DATADOG_API_KEY }}
       - name: Delete local sourcemaps
-        run: find dist -name '*.map' -delete
+        run: find applications/browser-extension/dist -name '*.map' -delete
       - name: Save store extension
         uses: actions/upload-artifact@v4
         with:
           name: build-for-store
-          path: dist
+          path: applications/browser-extension/dist
           retention-days: 30
           if-no-files-found: error
       - name: Create production version
-        run: npx [email protected] dist/manifest.json key '${{ env.CHROME_MANIFEST_KEY }}'
+        run: npx [email protected] applications/browser-extension/dist/manifest.json key '${{ env.CHROME_MANIFEST_KEY }}'
       - name: Save production extension
         uses: actions/upload-artifact@v4
         with:
           name: build-production
-          path: dist
+          path: applications/browser-extension/dist
           retention-days: 30
           if-no-files-found: error
 

.pre-commit-config.yaml

@@ -21,6 +21,12 @@ repos:
     rev: v3.1.0
     hooks:
       - id: prettier
+        additional_dependencies:
+          # mirrors-prettier won't receive updates after v3.1.0 because prettier changed their
+          # plugin system: "prettier made some changes that breaks plugins entirely"
+          # See: https://github.com/pre-commit/pre-commit/issues/3133
+          # The additional_dependencies aren't updated with `pre-commit autoupdate`
+          - [email protected]
   # TODO: restore in https://github.com/pixiebrix/pixiebrix-extension/issues/9441
   # - repo: local
   #   hooks:

.prettierignore

@@ -4,7 +4,7 @@ coverage
 
 # ignore libraries
 node_modules
-public/mockServiceWorker.js
+**/public/mockServiceWorker.js
 
 # ignore snapshots
 **/*-snapshots/**

applications/browser-extension/end-to-end-tests/pageObjects/pageEditor/pageEditorPage.ts

@@ -73,6 +73,8 @@ export class PageEditorPage extends BasePageObject {
     name: "Launch Template Gallery",
   });
 
+  toastLocator = this.getByRole("status");
+
   constructor(
     page: Page,
     private readonly urlToConnectTo: string,

applications/browser-extension/end-to-end-tests/tests/pageEditor/addStarterBrick.spec.ts

@@ -41,6 +41,9 @@ test("Add new mod with different starter brick components", async ({
       page.getByRole("link", { name: "navigation" }),
     );
 
+    // Check for https://github.com/pixiebrix/pixiebrix-extension/issues/9511
+    await expect(pageEditorPage.toastLocator).toBeHidden();
+
     await expect(
       pageEditorPage.getByText(modComponentNameMatcher),
     ).toBeVisible();

applications/browser-extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixiebrix/extension",
-  "version": "2.1.9-alpha.0",
+  "version": "2.2.1-alpha.0",
   "description": "PixieBrix Browser Extension",
   "scripts": {
     "test": "TZ=UTC jest",
@@ -153,7 +153,6 @@
     "slugify": "^1.6.6",
     "stemmer": "^2.0.1",
     "uint8array-extras": "^1.4.0",
-    "urlpattern-polyfill": "^5.0.3",
     "use-async-effect": "^2.2.7",
     "use-debounce": "^10.0.4",
     "use-sync-external-store": "^1.2.2",
@@ -289,6 +288,7 @@
     "type-fest": "^4.26.1",
     "typescript": "^5.6.3",
     "typescript-plugin-css-modules": "^5.1.0",
+    "urlpattern-polyfill": "^10.0.0",
     "webpack": "^5.96.1",
     "webpack-build-notifier": "^3.1.0",
     "webpack-bundle-analyzer": "^4.10.2",

applications/browser-extension/scripts/upload-extension.sh

@@ -17,5 +17,5 @@ BUILD_FILENAME="${BUILD_PATH##*/}"
 : "${AWS_SECRET_ACCESS_KEY?Need to set AWS_SECRET_ACCESS_KEY}"
 : "${AWS_DEFAULT_REGION?Need to set AWS_DEFAULT_REGION}"
 
-zip -r "$BUILD_FILENAME" dist -x '*.map'
+zip -r "$BUILD_FILENAME" applications/browser-extension/dist -x '*.map'
 aws s3 cp "$BUILD_FILENAME" "s3://pixiebrix-extension-builds/$BUILD_PATH" --no-progress

applications/browser-extension/scripts/upload-sourcemaps.sh

@@ -14,11 +14,11 @@ set -e
 
 # Upload to S3 for debugging in Chrome
 S3_UPLOAD_BASE_URL="s3://pixiebrix-extension-source-maps/$SOURCE_MAP_PATH"
-aws s3 cp ./dist "$S3_UPLOAD_BASE_URL" --exclude '*' --include '*.js.map' --include '*.js' --recursive --no-progress
+aws s3 cp ./applications/browser-extension/dist "$S3_UPLOAD_BASE_URL" --exclude '*' --include '*.js.map' --include '*.js' --recursive --no-progress
 
 # Datadog uses release-version, not the code commit version. So get from produced manifest
 # Clean-up the name because it's not clear if the cli normalized the name like the JS library does
-RELEASE_VERSION=$(jq -r '.version_name | gsub("\\+"; "_") | ascii_downcase' dist/manifest.json)
+RELEASE_VERSION=$(jq -r '.version_name | gsub("\\+"; "_") | ascii_downcase' applications/browser-extension/dist/manifest.json)
 
 # Should match the path that appears in minified stack trace
 # See sourceMapPublicUrl in webpack.config.mjs
@@ -32,7 +32,7 @@ echo "Uploading sourcemaps to Datadog for version [[$RELEASE_VERSION]] with mini
 # Reference: https://github.com/DataDog/datadog-ci/tree/master/src/commands/sourcemaps#commands
 # `release-version` must match the version in initErrorReporter.ts and performance.ts
 # project-path is the prefix before src in the map: webpack:///./src/bricks/registry.ts
-npx --yes @datadog/datadog-ci sourcemaps upload ./dist \
+npx --yes @datadog/datadog-ci sourcemaps upload ./applications/browser-extension/dist \
   --service="pixiebrix-browser-extension" \
   --release-version="$RELEASE_VERSION" \
   --minified-path-prefix="$MINIFIED_PATH_PREFIX" \

applications/browser-extension/src/analysis/analysisVisitors/varAnalysis/varAnalysis.ts

@@ -225,7 +225,7 @@ function setVarsFromSchema({
       const nodePath = [...parentPath, key];
 
       const existence =
-        existenceOverride ?? required?.includes(key)
+        (existenceOverride ?? required?.includes(key))
           ? VarExistence.DEFINITELY
           : VarExistence.MAYBE;
 
@@ -254,7 +254,7 @@ function setVarsFromSchema({
       });
     } else if (propertySchema.type === "array") {
       const existence =
-        existenceOverride ?? required?.includes(key)
+        (existenceOverride ?? required?.includes(key))
           ? VarExistence.DEFINITELY
           : VarExistence.MAYBE;
 
@@ -295,7 +295,7 @@ function setVarsFromSchema({
         source,
         path: [...parentPath, key],
         existence:
-          existenceOverride ?? required?.includes(key)
+          (existenceOverride ?? required?.includes(key))
             ? VarExistence.DEFINITELY
             : VarExistence.MAYBE,
       });

applications/browser-extension/src/background/auth/partnerIntegrations/launchAuthIntegration.ts

@@ -135,7 +135,7 @@ export async function launchAuthIntegration({
       "Integration did not return an OAuth2 context",
     );
 
-    const refreshUrl = refreshToken ? oAuth2Context.tokenUrl ?? null : null;
+    const refreshUrl = refreshToken ? (oAuth2Context.tokenUrl ?? null) : null;
 
     console.info("Setting partner auth for Control Room %s", controlRoomUrl);
 

applications/browser-extension/src/components/MarketplaceListingIcon.tsx

@@ -69,7 +69,7 @@ const MarketplaceListingIcon: React.FC<{
       color={
         inheritColor
           ? "inherit"
-          : listing?.icon_color ?? DEFAULT_TEXT_ICON_COLOR
+          : (listing?.icon_color ?? DEFAULT_TEXT_ICON_COLOR)
       }
       className={faIconClass}
       size={size}

applications/browser-extension/src/components/fields/schemaFields/integrations/IntegrationDependencyWidget.tsx

@@ -94,8 +94,8 @@ function lookupAuthId(
 
   return dependency == null
     ? null
-    : authOptions.find(({ value }) => value === dependency.configId)?.value ??
-        null;
+    : (authOptions.find(({ value }) => value === dependency.configId)?.value ??
+        null);
 }
 
 /**

applications/browser-extension/src/components/fields/schemaFields/widgets/DatabaseCreateModal.tsx

@@ -71,15 +71,14 @@ const initialValues: DatabaseConfig = {
 
 function getOrganizationOptions(organizations: Team[]) {
   const organizationOptions = (organizations ?? [])
-    .filter(
-      (organization) =>
-        organization.memberships?.some(
-          (member) =>
-            // If the current user is an admin of the organization, then all of the members are listed for the organization
-            // Otherwise, only the current user is listed for the organization
-            // So if any listed member is an admin, the current user is an admin
-            member.role === UserRole.admin,
-        ),
+    .filter((organization) =>
+      organization.memberships?.some(
+        (member) =>
+          // If the current user is an admin of the organization, then all of the members are listed for the organization
+          // Otherwise, only the current user is listed for the organization
+          // So if any listed member is an admin, the current user is an admin
+          member.role === UserRole.admin,
+      ),
     )
     .map((organization) => ({
       label: organization.teamName,

applications/browser-extension/src/components/fields/schemaFields/widgets/DatabaseWidget.tsx

@@ -49,7 +49,9 @@ const DatabaseWidget: React.FunctionComponent<SchemaFieldProps> = ({
   // eslint-disable-next-line react-hooks/exhaustive-deps -- only run on mount
   const initialFieldValue = useMemo(() => fieldValue, []);
   const fullDatabaseOptions = useMemo(() => {
-    const loadedOptions = isLoadingDatabaseOptions ? [] : databaseOptions ?? [];
+    const loadedOptions = isLoadingDatabaseOptions
+      ? []
+      : (databaseOptions ?? []);
 
     // If the schema format is 'preview', and the initial field value is a string, use that string
     // as the auto-created database name, and add it as an option to the database dropdown at the

applications/browser-extension/src/components/fields/schemaFields/widgets/ObjectWidget.tsx

@@ -121,8 +121,8 @@ const ObjectFieldRow: React.FunctionComponent<RowProps> = ({
     // As of v3, we allow object props of any type, not just string
     const defaultSchema: Schema = {};
     const rawSchema = defined
-      ? parentSchema.properties?.[property] ?? defaultSchema
-      : parentSchema.additionalProperties ?? defaultSchema;
+      ? (parentSchema.properties?.[property] ?? defaultSchema)
+      : (parentSchema.additionalProperties ?? defaultSchema);
 
     return typeof rawSchema === "boolean" ? defaultSchema : rawSchema;
   }, [

applications/browser-extension/src/components/fields/schemaFields/widgets/varPopup/SourceLabel.tsx

@@ -41,8 +41,9 @@ const SourceLabel: React.FunctionComponent<SourceLabelProps> = ({
     }
 
     default: {
-      const brickConfig = nodes.find((node) => node.path === source)
-        ?.blockConfig;
+      const brickConfig = nodes.find(
+        (node) => node.path === source,
+      )?.blockConfig;
       if (brickConfig == null) {
         label = source;
       } else {

applications/browser-extension/src/components/form/widgets/RemoteMultiSelectWidget.tsx

@@ -90,8 +90,8 @@ const RemoteMultiSelectWidget = <TOption extends Option<TOption["value"]>>({
     } as ChangeEvent<MultiSelectLike<TOption>>);
   };
 
-  const selectedOptions = options.filter(
-    (option: Option) => value?.includes(option.value),
+  const selectedOptions = options.filter((option: Option) =>
+    value?.includes(option.value),
   );
 
   return (

applications/browser-extension/src/extensionConsole/pages/packageEditor/useSubmitPackage.ts

@@ -118,9 +118,10 @@ function useSubmitPackage({ create = false }: SubmitOptions): SubmitCallbacks {
       const { kind, metadata } = unsavedPackageJson;
 
       try {
-        const data = await (create
-          ? createPackage({ ...values, kind })
-          : updatePackage({ ...values, kind })
+        const data = await (
+          create
+            ? createPackage({ ...values, kind })
+            : updatePackage({ ...values, kind })
         ).unwrap();
 
         // We attach the handler below, and don't want it to block the save

applications/browser-extension/src/globals.d.ts

@@ -22,6 +22,7 @@ https://github.com/typescript-eslint/typescript-eslint/issues/3295#issuecomment-
 */
 
 // We only use this package for its types. URLPattern is Chrome 95+
+// See https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1199
 /// <reference types="urlpattern-polyfill" />
 
 // Improve standard type library https://www.totaltypescript.com/ts-reset

applications/browser-extension/src/pageEditor/hooks/useAddNewModComponent.ts

@@ -38,7 +38,10 @@ import { StarterBrickTypes } from "@/types/starterBrickTypes";
 import { openSidePanel } from "@/utils/sidePanelUtils";
 import { useInsertPane } from "@/pageEditor/panes/insert/InsertPane";
 import { type ModMetadata } from "@/types/modComponentTypes";
-import { createNewUnsavedModMetadata } from "@/utils/modUtils";
+import {
+  createNewUnsavedModMetadata,
+  emptyModVariablesDefinitionFactory,
+} from "@/utils/modUtils";
 import {
   selectGetModDraftStateForModId,
   selectModMetadatas,
@@ -123,14 +126,20 @@ function useAddNewModComponent(modMetadata?: ModMetadata): AddNewModComponent {
         dispatch(actions.addModComponentFormState(initialFormState));
         // Need to explicitly check availability of the new component form state
         // TODO: https://github.com/pixiebrix/pixiebrix-extension/issues/9389
-        void dispatch(actions.checkActiveModComponentAvailability());
+        void dispatch(actions.checkAvailableDraftModComponents());
+
+        // Mod won't exist in getModDraftStateForModId (method will throw) because it captures the state
+        // from the render, not the current state of the store
+        const draftModState = modMetadata
+          ? getModDraftStateForModId(initialFormState.modMetadata.id)
+          : {
+              variablesDefinition: emptyModVariablesDefinitionFactory(),
+              optionsArgs: {},
+            };
 
         updateDraftModComponent(
           allFramesInInspectedTab,
-          adapter.asDraftModComponent(
-            initialFormState,
-            getModDraftStateForModId(initialFormState.modMetadata.id),
-          ),
+          adapter.asDraftModComponent(initialFormState, draftModState),
           {
             isSelectedInEditor: true,
             runReason: RunReason.PAGE_EDITOR_REGISTER,

applications/browser-extension/src/pageEditor/modals/addBrickModal/useAddBrick.ts

@@ -143,7 +143,7 @@ function useAddBrick(): AddBrick {
 
       return {};
     },
-    [activeModComponent, getModDraftStateForModId, modalData, makeNewBrick],
+    [activeModComponent, modalData, makeNewBrick, getModDraftStateForModId],
   );
 
   const addBrick = useCallback(

applications/browser-extension/src/pageEditor/store/runtime/runtimeSelectors.ts

@@ -38,7 +38,7 @@ export const selectActiveModComponentTraces: EditorSelector<TraceRecord[]> =
     (activeModComponentId, modComponentTraces) =>
       activeModComponentId
         ? // eslint-disable-next-line security/detect-object-injection -- UUID
-          modComponentTraces[activeModComponentId] ?? []
+          (modComponentTraces[activeModComponentId] ?? [])
         : [],
   );
 

applications/browser-extension/src/store/sidebar/sidebarSlice.ts

@@ -203,7 +203,7 @@ const sidebarSlice = createSlice({
             -- Immer Draft<T> type resolution can't handle JsonObject (recursive) types properly
             See: https://github.com/immerjs/immer/issues/839 */
             // @ts-ignore-error -- SidebarEntries.panels --> PanelEntry.actions --> PanelButton.detail is JsonObject
-            initialEventKey ?? defaultEventKey(state, state.closedTabs);
+            (initialEventKey ?? defaultEventKey(state, state.closedTabs));
     },
     selectTab(state, action: PayloadAction<string>) {
       // We were seeing some automatic calls to selectTab with a stale event key...

applications/browser-extension/src/testUtils/permissionsMock.ts

@@ -75,14 +75,12 @@ browser.permissions = {
   remove: jest
     .fn()
     .mockImplementation(async (toRemove: Permissions.AnyPermissions) => {
-      remove(
-        extensionPermissions.permissions,
-        (permission) => toRemove.permissions?.includes(permission),
+      remove(extensionPermissions.permissions, (permission) =>
+        toRemove.permissions?.includes(permission),
       );
       // XXX: only handles exact matches
-      remove(
-        extensionPermissions.origins,
-        (permission) => toRemove.origins?.includes(permission),
+      remove(extensionPermissions.origins, (permission) =>
+        toRemove.origins?.includes(permission),
       );
 
       for (const listener of removeListeners) {