Merge branch 'main' into issue-2260-superadmin-org-list

.github/workflows/frontend-build-prepare.yaml

@@ -10,6 +10,9 @@ on:
 jobs:
   setup-and-build:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [20, 22]
 
     steps:
       # Setup:
@@ -21,7 +24,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: ${{ matrix.node }}
           cache: 'yarn'
           cache-dependency-path: frontend/yarn.lock
 

.github/workflows/ui-tests-playwright.yml

@@ -25,7 +25,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '22'
           cache: 'yarn'
           cache-dependency-path: frontend/yarn.lock
 

.github/workflows/weblate-reformat.yaml

@@ -27,7 +27,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '22'
           cache: 'yarn'
           cache-dependency-path: frontend/yarn.lock
       - name: Install dependencies

frontend/.yarnrc

@@ -1 +0,0 @@
-ignore-engines true

frontend/Dockerfile

@@ -1,5 +1,5 @@
 # syntax=docker/dockerfile:1.4
-FROM --platform=$BUILDPLATFORM docker.io/library/node:18 as build_deps
+FROM --platform=$BUILDPLATFORM docker.io/library/node:22 as build_deps
 
 WORKDIR /app
 COPY .yarnrc yarn.lock package.json ./

frontend/docs/docs/develop/frontend-dev.md

@@ -10,15 +10,15 @@ Instead of rebuilding the entire frontend image to view your UI changes, you can
 
 The frontend development server requires an existing backend that has been deployed locally or is in production. See [Deploying Browsertrix](../deploy/index.md).
 
-### 2. Node.js ≥18
+### 2. Node.js ≥20
 
 To check if you already have Node.js installed, run the following command in your command line terminal:
 
 ```sh
 node --version
 ```
 
-You should see a version number like `v18.12.1`. If you see a command line error instead of a version number, [install Node.js](https://nodejs.org/en/download/package-manager) before continuing.
+You should see a version number like `v20.17.0`. If you see a command line error instead of a version number, [install Node.js](https://nodejs.org/en/download/package-manager) before continuing.
 
 ??? question "What if my other project requires a different version of Node.js?"
 

frontend/package.json

@@ -138,7 +138,7 @@
     }
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20 <23"
   },
   "resolutions": {
     "**/playwright": "1.49.0",

frontend/src/components/orgs-list.ts

@@ -7,7 +7,8 @@ import type {
   SlMenuItem,
 } from "@shoelace-style/shoelace";
 import { serialize } from "@shoelace-style/shoelace/dist/utilities/form.js";
-import { css, html, nothing } from "lit";
+import Fuse from "fuse.js";
+import { css, html, nothing, type PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 
@@ -57,12 +58,62 @@ export class OrgsList extends BtrixElement {
   @query("#orgDeleteButton")
   private readonly orgDeleteButton?: SlButton | null;
 
+  // For fuzzy search:
+  private readonly fuse = new Fuse(this.orgList ?? [], {
+    keys: [
+      "id",
+      "name",
+      "slug",
+      "users.name",
+      "users.email",
+      "subscription.subId",
+      "subscription.planId",
+    ],
+    useExtendedSearch: true,
+  });
+
+  @state()
+  private search = "";
+
+  protected willUpdate(changedProperties: PropertyValues<this>) {
+    if (changedProperties.has("orgList")) {
+      this.fuse.setCollection(this.orgList ?? []);
+    }
+  }
+
+  protected firstUpdated() {
+    this.fuse.setCollection(this.orgList ?? []);
+  }
+
   render() {
     if (this.skeleton) {
       return this.renderSkeleton();
     }
 
+    const orgs = this.search
+      ? this.fuse.search(this.search).map(({ item }) => item)
+      : this.orgList;
+
     return html`
+      <sl-input
+        value=${this.search}
+        clearable
+        size="small"
+        class="mb-6"
+        placeholder=${msg(
+          "Search all orgs by name, id, slug, users, and subscriptions",
+        )}
+        @sl-input=${(e: Event) => {
+          this.search = (e.target as SlInput).value.trim() || "";
+        }}
+      >
+        <sl-icon
+          name="search"
+          slot="prefix"
+          aria-hidden="true"
+          library="default"
+        ></sl-icon
+      ></sl-input>
       <btrix-table>
         <btrix-table-head class="mb-2">
           <btrix-table-header-cell>
@@ -88,7 +139,7 @@ export class OrgsList extends BtrixElement {
           </btrix-table-header-cell>
         </btrix-table-head>
         <btrix-table-body class="rounded border">
-          ${this.orgList?.map(this.renderOrg)}
+          ${orgs?.map(this.renderOrg)}
         </btrix-table-body>
       </btrix-table>
 

frontend/src/pages/admin.ts

@@ -366,6 +366,7 @@ export class Admin extends BtrixElement {
         method: "POST",
         body: JSON.stringify(params),
       });
+      await this.fetchOrgs();
       const userInfo = await this.getUserInfo();
       AppStateService.updateUser(formatAPIUser(userInfo));
 

frontend/tailwind.config.js

@@ -1,10 +1,10 @@
-const theme = require("@webrecorder/hickory/tokens/tailwind");
-const { tailwindTransform } = require("postcss-lit");
+import theme from "@webrecorder/hickory/tokens/tailwind";
+import { tailwindTransform } from "postcss-lit";
 
-const attributes = require("./config/tailwind/plugins/attributes");
-const containPlugin = require("./config/tailwind/plugins/contain");
-const contentVisibilityPlugin = require("./config/tailwind/plugins/content-visibility");
-const cssPartsPlugin = require("./config/tailwind/plugins/parts");
+import attributes from "./config/tailwind/plugins/attributes";
+import containPlugin from "./config/tailwind/plugins/contain";
+import contentVisibilityPlugin from "./config/tailwind/plugins/content-visibility";
+import cssPartsPlugin from "./config/tailwind/plugins/parts";
 
 /**
  * Merge Shoelace and hickory themes