Merge branch 'main' into main

.github/.lighthouserc.yml

@@ -0,0 +1,11 @@
+ci:
+  collect:
+    url:
+      - http://127.0.0.1:8443/
+    startServerCommand: "just p frontend start"
+    startServerReadyPattern: "Listening on http"
+  upload:
+    # temporary target until either temporary-public-storage is back
+    # (https://github.com/GoogleChrome/lighthouse-ci/issues/1072)
+    # or we spin up our own Openverse lhci server
+    target: "filesystem"

.github/workflows/ci_cd.yml

@@ -1014,6 +1014,43 @@ jobs:
           issue-number: ${{ github.event.pull_request.number }}
           body: ${{ steps.help-body.outputs.help_body }}
 
+  lighthouse-ci:
+    name: Collect Lighthouse CI results
+    runs-on: ubuntu-latest
+    needs:
+      - nuxt-build
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup CI env
+        uses: ./.github/actions/setup-env
+        with:
+          setup_python: false
+          install_recipe: node-install
+
+      - name: Run build
+        run: just frontend/run build
+        env:
+          DEPLOYMENT_ENV: production
+          NODE_ENV: production
+
+      - name: Run Lighthouse CI
+        id: lhci-autorun
+        # Lighthouse CI runs the webserver for us, as configured in lighthouserc
+        env:
+          NODE_ENV: production
+        run: |
+          pnpm --package=@lhci/cli dlx lhci autorun --config .github/.lighthouserc.yml
+
+      - name: Display Report
+        if: always()
+        uses: jackywithawhitedog/lighthouse-viewer-action@v2
+        with:
+          resultsPath: .lighthouseci
+          lighthouseOutcome: ${{ steps.lhci-autorun.outcome }}
+
   #################
   # Documentation #
   #################

frontend/src/pages/preferences.vue

@@ -7,6 +7,8 @@ import { useFeatureFlagStore } from "~/stores/feature-flag"
 import { isFlagName } from "~/types/feature-flag"
 import { SWITCHABLE, ON, OFF } from "~/constants/feature-flag"
 
+import { useHydrating } from "~/composables/use-hydrating"
+
 import VContentPage from "~/components/VContentPage.vue"
 import VCheckbox from "~/components/VCheckbox/VCheckbox.vue"
 
@@ -50,6 +52,8 @@ const flagsBySwitchable = computed(() => {
 const featureGroups = computed(() => {
   return featureFlagStore.getFeatureGroups()
 })
+
+const doneHydrating = computed(() => useHydrating())
 </script>
 
 <template>
@@ -86,6 +90,7 @@ const featureGroups = computed(() => {
             class="flex-row items-center"
             :checked="flag.state === ON"
             is-switch
+            :disabled="!doneHydrating"
             @change="handleChange"
             >{{ $t(`prefPage.features.${flag.name}`) }}</VCheckbox
           >

frontend/test/playwright/e2e/attribution.spec.ts

@@ -17,13 +17,16 @@ const copyAttribution = async (
 ) => {
   const formatPattern = new RegExp(formatTitle[formatId], "i")
 
+  // Ensure the page is fully hydrated before interacting with it.
+  const copyButton = getCopyButton(page)
+  await expect(copyButton).toBeEnabled()
+
   await page.getByRole("tab", { name: formatPattern }).click()
 
   await expect(
     page.getByRole("tabpanel", { name: formatPattern })
   ).toBeVisible()
 
-  const copyButton = getCopyButton(page)
   await expect(copyButton).toHaveAttribute("id", `copyattr-${formatId}`)
   await copyButton.click()
 

frontend/test/playwright/e2e/preferences.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect, Page } from "@playwright/test"
+import { expect, Page, test } from "@playwright/test"
 
 import { preparePageForTests } from "~~/test/playwright/utils/navigation"
 
@@ -114,8 +114,12 @@ test.describe("switchable features", () => {
     }) => {
       await page.goto(`/preferences`)
       const featureFlag = await getSwitchableInput(page, name, checked)
+
       await featureFlag.click()
 
+      // Ensure the feature flag is updated
+      await getSwitchableInput(page, name, !checked)
+
       const storageCookie = { cookie: "features", session: "sessionFeatures" }[
         featureData.features[name as FlagName].storage as "cookie" | "session"
       ]

justfile

@@ -350,6 +350,7 @@ f:
 # alias for `pnpm --filter {package} run {script}`
 [positional-arguments]
 p package script *args:
+    #!/usr/bin/env bash
     pnpm --filter {{ package }} run {{ script }} "${@:3}"
 
 # Run eslint with --fix and default file selection enabled; used to enable easy file overriding whilst retaining the defaults when running --all-files