Update to Nuxt 3

Use har for audio tests to prevent provider requests and flakiness
Convert ui cookies for ease of use
Move analytics tests from unit tests to e2e tests
Disable buttons until hydrated
Make audio tapes smaller
Update tests
Use har for audio tests to prevent provider requests and flakiness
Convert ui cookies for ease of use
Move analytics tests from unit tests to e2e tests
Disable buttons until hydrated
Remove everything but the homepage and content pages
Vendor in SVG sprites
Remove patch
Add search, media and related-media stores
Add search pages with search functionality
Add single result pages
Re-add tests; fix unit tests; disable buttons until hydrated
Fix invalid locale keys
Refactor search page and fetching
Fix localePath warning
Add additional search views
Get localePath from useNuxtApp
Add healthcheck and robots server routes
Add photos redirect
Add sitemap
Add simple sentry integration
Proxy API calls
Tests
Add a missing tapes and add peaks=true to related audio tapes
Add peaks=true to related tapes
Reuse the same audio for seo
Add server-prepare for initial provider loading
Fix e2e route mocking
Fix collection test
Fix provider unit test
Handle case when there are no providers
Fix ui cookie overwriting
Fix Tab border when focused
Fix Waveform on box layout
Fix Sources table sorting
Fix content report POST request
Fix global audio player on navigation
Add link to source page to the sources table
Update nuxt prepare script and add logging
Remove aria-pressed from buttons when not set
Refactor media store to make easier to test
Add coverage to unit tests
Add more media store unit tests
Extract api-token from the api route
Add api token tests
Remove duplicate tags
Use script setup for pages fetching data
Improve VSkipToContentButton and add it to VCollectionPage
Error component: add modal target and script setup
Unify error handling
Update sentry and env settings
Remove unnecessary await from VSvg
Remove provider-init plugin
Set lazy to true in useAsyncData
Remove error watch from index pages
Remove VFetchingError
Use script setup and remove useHead from pages
Remove head and localeHead from app, error and single result
Remove sentry
Use script setup; simplify VLoadMore; remove fetchState
Remove async from watchers
Convert headers to script setup
Replace store getters with actions
Remove page title
Update @nuxtjs/i18n to edge version
Update dependencies
Move search handling to search.vue
Remove single-result middleware
Use script setup and t from useNuxtApp.$i18n
layout
Replace axios with ofetch
Signed-off-by: Olga Bulat <[email protected]>

Update prettier; types; analytics plugin
Signed-off-by: Olga Bulat <[email protected]>

Use axios for fetching search requests
Signed-off-by: Olga Bulat <[email protected]>

Author: obulat

.eslintignore

@@ -1,5 +1,7 @@
 coverage
 
+frontend/test/unit/test-utils/render-suspended.ts
+
 frontend/test/tapes
 frontend/nuxt-template-overrides
 frontend/storybook-static

.github/actions/build-docs/action.yml

@@ -17,19 +17,8 @@ runs:
         # Pass -W to fail CI if warnings exist
         just documentation/build -W
 
-    - name: Install translations
-      shell: bash
-      run: |
-        just frontend/run i18n
-
-    - name: Build Storybook
-      shell: bash
-      run: |
-        just frontend/run storybook:build-for-docs
-
     # Storybook will be available at `/storybook`
     - name: Merge all docs
       shell: bash
       run: |
         mv documentation/_build /tmp/docs
-        mv frontend/storybook-static /tmp/docs/storybook

.github/workflows/ci_cd.yml

@@ -670,14 +670,11 @@ jobs:
         name:
           - playwright_vr
           - playwright_e2e
-          - storybook
         include:
           - name: playwright_vr
             script: "test:playwright visual-regression"
           - name: playwright_e2e
             script: "test:playwright e2e"
-          - name: storybook
-            script: "test:storybook"
 
     steps:
       - name: Checkout repository
@@ -714,7 +711,6 @@ jobs:
         name:
           - playwright_vr
           - playwright_e2e
-          - storybook
 
     steps:
       - name: Pass

frontend/.env.template

@@ -1,3 +1,13 @@
-#API_URL=http://127.17.0.1:8000/
-#API_CLIENT_ID=""
-#API_CLIENT_SECRET=""
+#NUXT_PUBLIC_API_URL=http://127.17.0.1:8000/ # local dev API
+#NUXT_PUBLIC_API_URL=http://localhost:49153/ # talkback proxy
+#NUXT_PUBLIC_API_URL=https://api.openverse.engineering/ # prod API
+#NUXT_API_CLIENT_ID=""
+#NUXT_API_CLIENT_SECRET=""
+NUXT_PUBLIC_SAVED_SEARCH_COUNT=4
+NUXT_PUBLIC_PROVIDER_UPDATE_FREQUENCY=3600000# 1 hour
+NUXT_PUBLIC_PLAUSIBLE_DOMAIN="openverse.org" #localhost
+NUXT_PUBLIC_PLAUSIBLE_API_HOST="https://openverse.org" #http://localhost:50290
+NUXT_PUBLIC_SENTRY_DSN="https://[email protected]/5799642"
+NUXT_PUBLIC_SENTRY_ENVIRONMENT="local"
+NUXT_PUBLIC_SENTRY_RELEASE=""
+PORT=8443

frontend/.gitignore

@@ -1,5 +1,6 @@
 # Nuxt
 .nuxt
+.output
 
 # Storybook
 .nuxt-storybook
@@ -11,6 +12,7 @@ test/Default
 
 # Coverage
 test/unit/coverage/
+coverage
 
 # Generated translation files
 *.pot

frontend/.storybook/decorators/with-rtl.js

@@ -22,7 +22,7 @@ WORKDIR /home/node/
 
 # Copy monorepo mocking files into `/home/node`, which pretends to be the monorepo root.
 # Note: these files must be manually un-ignored in the root .dockerignore
-COPY --from=repo_root --chown=node:node .npmrc .pnpmfile.cjs pnpm-lock.yaml tsconfig.base.json ./
+COPY --from=repo_root --chown=node:node .npmrc .pnpmfile.cjs pnpm-lock.yaml ./
 RUN echo '{"packages":["frontend/"]}' > pnpm-workspace.yaml
 
 # Copy the `frontend/` directory into `/home/node/frontend`, as a package in the monorepo.
@@ -41,9 +41,10 @@ RUN pnpm install
 # disable telemetry when building the app
 ENV NUXT_TELEMETRY_DISABLED=1
 ENV NODE_ENV=production
-ENV SENTRY_DSN=https://[email protected]/5799642
+ENV NUXT_PUBLIC_SENTRY_DSN=https://[email protected]/5799642
 
-ARG API_URL
+ARG API_URL=https://api.openverse.engineering/
+ENV NUXT_PUBLIC_API_URL=$API_URL
 
 RUN pnpm build:only
 
@@ -68,7 +69,9 @@ COPY --from=builder --chown=node:node /home/node/frontend ./frontend/
 WORKDIR /home/node/frontend/
 
 ARG SEMANTIC_VERSION
-ENV SENTRY_RELEASE=$SEMANTIC_VERSION
+ARG DEPLOYMENT_ENV=production
+ENV NUXT_PUBLIC_SENTRY_RELEASE=$SEMANTIC_VERSION
+ENV NUXT_PUBLIC_SENTRY_ENVIRONMENT=$DEPLOYMENT_ENV
 
 # set app serving to permissive / assigned
 ENV NUXT_HOST=0.0.0.0

frontend/.storybook/decorators/with-screenshot-area.js

@@ -6,7 +6,14 @@ FROM mcr.microsoft.com/playwright:v${PLAYWRIGHT_VERSION}-jammy
 
 ARG PACKAGE_MANAGER
 
+WORKDIR /frontend
+
 COPY package.json .
 
 # Requires `packageManager` field to be present in `frontend/package.json`.
 RUN npm install -g $PACKAGE_MANAGER
+
+# DO NOT actually run `pnpm install` here. Doing so requires us to copy the the source into the container.
+# However, that's a waste of time because we mount the source in the compose file anyway.
+# Instead, we run `pnpm install` in the entrypoint script defined in the compose file.
+# ENTRYPOINT ["pnpm", "install", "&&"]

frontend/.storybook/decorators/with-ui-store.js

@@ -8,12 +8,15 @@ services:
         - PACKAGE_MANAGER=${PACKAGE_MANAGER}
         - PLAYWRIGHT_VERSION=${PLAYWRIGHT_VERSION}
     volumes:
-      - ../node_modules:/node_modules
-      - .:/frontend
-      - ${PWD}/../tsconfig.base.json:/tsconfig.base.json
+      - ../node_modules:/node_modules:rw,Z
+      - .:/frontend:rw,Z
     user: ${USER_ID}
     working_dir: /frontend
-    command: pnpm ${TEST_COMMAND} ${PLAYWRIGHT_ARGS:-}
+    entrypoint: >
+      /bin/sh -c '
+      pnpm install;
+      pnpm ${TEST_COMMAND} ${PLAYWRIGHT_ARGS:-};
+      '
     environment:
       # This makes the webserver that Playwright runs show the build
       - DEBUG=pw:webserver