Merge remote-tracking branch 'origin/weblate' into weblate

weblate · weblate · commit b202d0d01eb7 · 2024-12-17T22:24:42.000Z
diff --git a/.github/workflows/ui-tests-playwright.yml b/.github/workflows/ui-tests-playwright.yml
@@ -14,7 +14,8 @@ jobs:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     env:
-      DEV_PASSWORD: ${{ secrets.DEV_PASSWORD }}
+      E2E_USER_EMAIL: ${{ secrets.E2E_USER_EMAIL }}
+      E2E_USER_PASSWORD: ${{ secrets.E2E_USER_PASSWORD }}
       API_BASE_URL: ${{ secrets.API_BASE_URL }}
       working-directory: ./frontend
     steps:
@@ -65,7 +66,8 @@ jobs:
         run: |
           cd frontend
           touch .env
-          echo DEV_PASSWORD="${{ secrets.DEV_PASSWORD }}" >> .env
+          echo E2E_USER_EMAIL="${{ secrets.E2E_USER_EMAIL }}" >> .env
+          echo E2E_USER_PASSWORD="${{ secrets.E2E_USER_PASSWORD }}" >> .env
           echo API_BASE_URL=${{ secrets.API_BASE_URL }} >> .env
           cat .env
 
diff --git a/.vscode/snippets.code-snippets b/.vscode/snippets.code-snippets
@@ -9,8 +9,8 @@
       "",
       "import { BtrixElement } from \"@/classes/BtrixElement\";",
       "",
-      "@localized()",
       "@customElement(\"btrix-${1:component}\")",
+      "@localized()",
       "export class ${2:Component} extends BtrixElement {",
       "\trender() {",
       "\t\treturn html``;",
diff --git a/frontend/package.json b/frontend/package.json
@@ -125,7 +125,8 @@
     "@open-wc/testing": "^3.2.0",
     "@playwright/test": "1.49.0",
     "@web/test-runner": "^0.13.22",
-    "@web/test-runner-playwright": "^0.11.0"
+    "@web/test-runner-playwright": "^0.11.0",
+    "http-proxy-middleware": "^2.0.7"
   },
   "lint-staged": {
     "*.{ts,js,html,css,json,webmanifest}": "prettier --write"
diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts
@@ -1,10 +1,14 @@
 import { defineConfig, devices } from "@playwright/test";
 
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
-// require('dotenv').config();
+if (!process.env.CI) {
+  /**
+   * Read environment variables from file.
+   * https://github.com/motdotla/dotenv
+   */
+  require("dotenv").config({
+    path: ".env.local",
+  });
+}
 
 /**
  * See https://playwright.dev/docs/test-configuration.
diff --git a/frontend/sample.env.local b/frontend/sample.env.local
@@ -1,3 +1,5 @@
 API_BASE_URL=
 DOCS_URL=https://docs.browsertrix.com/
+E2E_USER_EMAIL=
+E2E_USER_PASSWORD=
 GLITCHTIP_DSN=
diff --git a/frontend/scripts/serve.js b/frontend/scripts/serve.js
@@ -27,8 +27,8 @@ Object.keys(devServer.proxy).forEach((path) => {
   app.use(
     path,
     createProxyMiddleware({
-      target: devServer.proxy[path],
-      changeOrigin: true,
+      ...devServer.proxy[path],
+      followRedirects: true,
     }),
   );
 });
diff --git a/frontend/src/index.ejs b/frontend/src/index.ejs
@@ -22,6 +22,7 @@
   </head>
   <body>
     <script>
+      // Fetch API settings in parallel with dynamically loaded components
       window
         .fetch("/api/settings", {
           headers: { "Content-Type": "application/json" },
diff --git a/frontend/src/index.test.ts b/frontend/src/index.test.ts
@@ -6,7 +6,7 @@ import { NavigateController } from "./controllers/navigate";
 import { NotifyController } from "./controllers/notify";
 import { type AppSettings } from "./utils/app";
 import AuthService from "./utils/AuthService";
-import appState, { AppStateService } from "./utils/state";
+import { AppStateService } from "./utils/state";
 import { formatAPIUser } from "./utils/user";
 
 import { App, type APIUser } from ".";
@@ -62,7 +62,7 @@ describe("browsertrix-app", () => {
     expect(el).instanceOf(App);
   });
 
-  it("renders home when authenticated", async () => {
+  it("blocks render if settings aren't defined", async () => {
     stub(AuthService, "initSessionStorage").returns(
       Promise.resolve({
         headers: { Authorization: "_fake_headers_" },
@@ -72,25 +72,43 @@ describe("browsertrix-app", () => {
     );
     // @ts-expect-error checkFreshness is private
     stub(AuthService.prototype, "checkFreshness");
-    stub(appState, "settings").returns(mockAppSettings);
     const el = await fixture<App>(html` <browsertrix-app></browsertrix-app>`);
     await el.updateComplete;
+
+    expect(el.shadowRoot?.childElementCount).to.equal(0);
+  });
+
+  it("renders home when authenticated", async () => {
+    stub(AuthService, "initSessionStorage").returns(
+      Promise.resolve({
+        headers: { Authorization: "_fake_headers_" },
+        tokenExpiresAt: 0,
+        username: "test-auth@example.com",
+      }),
+    );
+    // @ts-expect-error checkFreshness is private
+    stub(AuthService.prototype, "checkFreshness");
+    const el = await fixture<App>(
+      html` <browsertrix-app .settings=${mockAppSettings}></browsertrix-app>`,
+    );
+    await el.updateComplete;
     expect(el.shadowRoot?.querySelector("btrix-home")).to.exist;
   });
 
   it("renders home when not authenticated", async () => {
     stub(AuthService, "initSessionStorage").returns(Promise.resolve(null));
     // @ts-expect-error checkFreshness is private
     stub(AuthService.prototype, "checkFreshness");
-    stub(appState, "settings").returns(mockAppSettings);
     stub(NavigateController, "createNavigateEvent").callsFake(
       () =>
         new CustomEvent("x-ignored", {
           detail: { url: "", resetScroll: false },
         }),
     );
 
-    const el = await fixture<App>(html` <browsertrix-app></browsertrix-app>`);
+    const el = await fixture<App>(
+      html` <browsertrix-app .settings=${mockAppSettings}></browsertrix-app>`,
+    );
     expect(el.shadowRoot?.querySelector("btrix-home")).to.exist;
   });
 
diff --git a/frontend/src/index.ts b/frontend/src/index.ts
@@ -40,7 +40,7 @@ import {
   translatedLocales,
   type TranslatedLocaleEnum,
 } from "@/types/localization";
-import { getAppSettings, type AppSettings } from "@/utils/app";
+import { type AppSettings } from "@/utils/app";
 import { DEFAULT_MAX_SCALE } from "@/utils/crawler";
 import localize from "@/utils/localize";
 import { toast } from "@/utils/notify";
@@ -70,21 +70,33 @@ export interface UserGuideEventMap {
   "btrix-user-guide-show": CustomEvent<{ path?: string }>;
 }
 
-@localized()
 @customElement("browsertrix-app")
+@localized()
 export class App extends BtrixElement {
+  /**
+   * Browsertrix app version to display in the UI
+   */
   @property({ type: String })
   version?: string;
 
+  /**
+   * Base URL for user guide documentation
+   */
   @property({ type: String })
   docsUrl = "/docs/";
 
+  /**
+   * App settings from `/api/settings`
+   */
   @property({ type: Object })
   settings?: AppSettings;
 
   private readonly router = new APIRouter(ROUTES);
   authService = new AuthService();
 
+  @state()
+  private translationReady = false;
+
   @state()
   private viewState!: ViewState<typeof ROUTES>;
 
@@ -116,19 +128,6 @@ export class App extends BtrixElement {
       void this.fetchAndUpdateUserInfo();
     }
 
-    try {
-      this.settings = await getAppSettings();
-    } catch (e) {
-      console.error(e);
-      this.notify.toast({
-        message: msg("Couldn’t initialize Browsertrix correctly."),
-        variant: "danger",
-        icon: "exclamation-octagon",
-        id: "get-app-settings-error",
-      });
-    } finally {
-      await localize.initLanguage();
-    }
     super.connectedCallback();
 
     this.addEventListener("btrix-navigate", this.onNavigateTo);
@@ -157,6 +156,10 @@ export class App extends BtrixElement {
   willUpdate(changedProperties: Map<string, unknown>) {
     if (changedProperties.has("settings")) {
       AppStateService.updateSettings(this.settings || null);
+
+      if (this.settings && !changedProperties.get("settings")) {
+        void this.initTranslation();
+      }
     }
     if (changedProperties.has("viewState")) {
       if (this.viewState.route === "orgs") {
@@ -170,6 +173,13 @@ export class App extends BtrixElement {
     }
   }
 
+  async initTranslation() {
+    await localize.initLanguage();
+    // TODO We might want to set this in a lit-localize-status event listener
+    // see https://lit.dev/docs/localization/runtime-mode/#example-of-using-the-status-event
+    this.translationReady = true;
+  }
+
   getLocationPathname() {
     return window.location.pathname;
   }
@@ -264,6 +274,8 @@ export class App extends BtrixElement {
   }
 
   render() {
+    if (!this.translationReady) return;
+
     return html`
       <div class="min-w-screen flex min-h-screen flex-col">
         ${this.renderNavBar()} ${this.renderAlertBanner()}
diff --git a/frontend/src/pages/account-settings.ts b/frontend/src/pages/account-settings.ts
@@ -603,6 +603,7 @@ export class AccountSettings extends BtrixElement {
       message: msg("Your formatting preference has been updated."),
       variant: "success",
       icon: "check2-circle",
+      id: "account-settings-formatting",
     });
   };
 }
diff --git a/frontend/src/utils/localize.ts b/frontend/src/utils/localize.ts
@@ -20,11 +20,19 @@ import {
 } from "@/types/localization";
 import appState from "@/utils/state";
 
+// Pre-load all locales
+const localizedTemplates = new Map(
+  targetLocales.map((locale) => [
+    locale,
+    import(`/src/__generated__/locales/${locale}.ts`),
+  ]),
+);
+
 const { getLocale, setLocale } = configureLocalization({
   sourceLocale,
   targetLocales,
   loadLocale: async (locale: string) =>
-    import(`/src/__generated__/locales/${locale}.ts`),
+    localizedTemplates.get(locale as (typeof targetLocales)[number]),
 });
 
 const defaultDateOptions: Intl.DateTimeFormatOptions = {
diff --git a/frontend/tests/login.spec.ts b/frontend/tests/login.spec.ts
@@ -11,15 +11,22 @@ test("test", async ({ baseURL }) => {
     await page.waitForLoadState("load");
     await page.waitForSelector('input[name="username"]');
     await page.click('input[name="username"]');
-    await page.fill('input[name="username"]', "dev@webrecorder.net");
+
+    const e2eEmail = process.env.E2E_USER_EMAIL;
+    if (!e2eEmail) {
+      throw new Error(
+        "E2E_USER_EMAIL environment variable is not defined or null.",
+      );
+    }
+    await page.fill('input[name="username"]', e2eEmail);
     await page.click('input[name="password"]');
-    const devPassword = process.env.DEV_PASSWORD;
-    if (!devPassword) {
+    const e2ePassword = process.env.E2E_USER_PASSWORD;
+    if (!e2ePassword) {
       throw new Error(
-        "DEV_PASSWORD environment variable is not defined or null.",
+        "E2E_USER_PASSWORD environment variable is not defined or null.",
       );
     }
-    await page.fill('input[name="password"]', devPassword);
+    await page.fill('input[name="password"]', e2ePassword);
     await page.click('sl-button:has-text("Log In")');
   } finally {
     await browser.close();
diff --git a/frontend/yarn.lock b/frontend/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -603,6 +603,7 @@ export class AccountSettings extends BtrixElement {`
`603`	`603`	`message: msg("Your formatting preference has been updated."),`
`604`	`604`	`variant: "success",`
`605`	`605`	`icon: "check2-circle",`
	`606`	`+ id: "account-settings-formatting",`
`606`	`607`	`});`
`607`	`608`	`};`
`608`	`609`	`}`