Merge branch 'main' into fix-#2340

.github/workflows/renovate.yml

@@ -62,13 +62,15 @@ jobs:
           sudo chown -R runneradmin:root /tmp/renovate/
           ls -R "$cache_dir"
 
-      - uses: renovatebot/github-action@v39.2.4
+      - uses: renovatebot/github-action@v40.1.5
         with:
           configurationFile: .github/renovate.json
           token: ${{ secrets.ACCESS_TOKEN }}
         env:
           # This enables the cache -- if this is set, it's not necessary to add it to renovate.json.
           RENOVATE_REPOSITORY_CACHE: ${{ github.event.inputs.repoCache || 'enabled' }}
+          # Debug logs to figure out why vulnerability updates aren't occurring
+          LOG_LEVEL: debug
 
       # Compression helps performance in the upload step!
       - name: Compress renovate cache

documentation/changelogs/api/2024.03.25.15.22.26.md

@@ -0,0 +1,11 @@
+# 2024.03.25.15.22.26
+
+## New Features
+
+- Add accesstoken and ThrottledApplication to admin panel
+  ([#3836](https://github.com/WordPress/openverse/pull/3836)) by @bjornthiberg
+
+## Internal Improvements
+
+- Bump jwcrypto from 1.5.4 to 1.5.6 in /api
+  ([#3953](https://github.com/WordPress/openverse/pull/3953)) by @dependabot

documentation/changelogs/catalog/2024.03.22.17.45.11.md

@@ -0,0 +1,29 @@
+# 2024.03.22.17.45.11
+
+## Improvements
+
+- Add point_alias DAG and add alias params to create_new_es_index DAGs
+  ([#3890](https://github.com/WordPress/openverse/pull/3890)) by @stacimc
+
+## Bug Fixes
+
+- Use DAG_DEFAULT_ARGS for all DAGs
+  ([#3928](https://github.com/WordPress/openverse/pull/3928)) by @AetherUnbound
+- Freesound: handle space in creator name when making URL
+  ([#3909](https://github.com/WordPress/openverse/pull/3909)) by @AetherUnbound
+- Remove leftover files from catalog
+  ([#3915](https://github.com/WordPress/openverse/pull/3915)) by @krysal
+- ccMixter: Handle spaces in URLs
+  ([#3907](https://github.com/WordPress/openverse/pull/3907)) by @AetherUnbound
+- Recover from updated build_param in Phylopic DAG
+  ([#3874](https://github.com/WordPress/openverse/pull/3874)) by @stacimc
+- ccMixter: Handle bad numbers with a decimal point
+  ([#3905](https://github.com/WordPress/openverse/pull/3905)) by @AetherUnbound
+- ES healthcheck: skip message composition task when cluster is green
+  ([#3903](https://github.com/WordPress/openverse/pull/3903)) by @AetherUnbound
+- Extend timeout on iNaturalist table loads
+  ([#3888](https://github.com/WordPress/openverse/pull/3888)) by @AetherUnbound
+- Various iNaturalist updates
+  ([#3846](https://github.com/WordPress/openverse/pull/3846)) by @AetherUnbound
+- Preemptively fail unparsable/unusable Europeana URLs
+  ([#3845](https://github.com/WordPress/openverse/pull/3845)) by @AetherUnbound

documentation/changelogs/frontend/2024.03.25.15.22.24.md

@@ -0,0 +1,24 @@
+# 2024.03.25.15.22.24
+
+## Improvements
+
+- Update payload of collection search analytics events
+  ([#3957](https://github.com/WordPress/openverse/pull/3957)) by @zackkrida
+- Cleanup tag display for long lists of tags
+  ([#3808](https://github.com/WordPress/openverse/pull/3808)) by @obulat
+
+## Internal Improvements
+
+- Use the `VMediaCollection` for search and collection results
+  ([#3835](https://github.com/WordPress/openverse/pull/3835)) by @obulat
+- Update pinia and vue-demi
+  ([#3952](https://github.com/WordPress/openverse/pull/3952)) by @obulat
+
+## Bug Fixes
+
+- Adds locale to the locale kebab-case warnings
+  ([#3951](https://github.com/WordPress/openverse/pull/3951)) by @obulat
+- Centralise frontend error reporting (and suppress unactionable Sentry errors)
+  ([#3850](https://github.com/WordPress/openverse/pull/3850)) by @sarayourfriend
+- Fix the skip-to-content link reloading the results
+  ([#3942](https://github.com/WordPress/openverse/pull/3942)) by @obulat

documentation/index.md

@@ -1,6 +1,6 @@
 <img src="https://raw.githubusercontent.com/WordPress/openverse/main/brand/banner.svg" width="100%" alt="Openverse"/>
 
-Openverse is a search engine for openly licensed media.
+[Openverse](https://openverse.org) is a search engine for openly licensed media.
 
 # Documentation
 

documentation/projects/proposals/dark_mode/20240313-project_proposal_dark_mode.md

@@ -0,0 +1,104 @@
+# 2024-03-13 Project Proposal
+
+**Author**: @fcoveram
+
+## Reviewers
+
+<!-- Choose two people at your discretion who make sense to review this based on their existing expertise. Check in to make sure folks aren't currently reviewing more than one other proposal or RFC. -->
+
+- [x] @obulat
+- [x] @zackkrida
+
+## Project summary
+
+<!-- A brief one or two sentence summary of the project's features -->
+
+Include a feature that changes the UI from light to a dark color scheme.
+
+### Motivation
+
+Dark mode is a customization level that is in the spirit of adapting the UI to
+user's contexts. The benefits span a11y, personal preferences set on the
+devices, energy efficiency in devices, and an alternative browsing experience of
+visual content due to the background contrast.
+
+## Goals
+
+<!-- Which yearly goal does this project advance? -->
+
+Refine Search Experience
+
+## Requirements
+
+<!-- Detailed descriptions of the features required for the project. Include user stories if you feel they'd be helpful, but focus on describing a specification for how the feature would work with an eye towards edge cases. -->
+
+1. Add the dark theme to the site and set the Light theme as default. The reason
+   comes from not changing the site settings without user consent through an
+   action.
+2. Introduce the feature to users on the site once deployed.
+3. Allow visitors to change the UI in an reachable manner from the whole site
+   through three options: Light theme, Dark theme, or follow device setting.
+4. Design a dark theme preserving the brand identity.
+5. Design a dark theme that meet the color contrast requirements pointed out in
+   the accessibility section below.
+6. Document the design of pages and UI components in the Design Library and any
+   other additional Figma files.
+7. Document the dark variant of every UI element on Storybook.
+8. Document the transition from current to new frontend implementation.
+9. Include an analytic event to record how users utilize the functionality.
+
+## Success
+
+<!-- How do we measure the success of the project? How do we know our ideas worked? -->
+
+- The use of this feature will be recorded and analyzed to assess its success.
+- Evaluate the color contrast with an automated tool and a revision from
+  contributors.
+
+## Participants and stakeholders
+
+<!-- Who is working on the project and who are the external stakeholders, if any? Consider the lead, implementers, designers, and other stakeholders who have a say in how the project goes. -->
+
+- Lead: @fcoveram
+- Design: @fcoveram
+- Implementation: @obulat
+
+## Infrastructure
+
+<!-- What infrastructural considerations need to be made for this project? If there are none, say so explicitly rather than deleting the section. -->
+
+This project only concerns frontend user interface code, and swapping colors. It
+should not require any changes to our infrastructure.
+
+## Accessibility
+
+<!-- Are there specific accessibility concerns relevant to this project? Do you expect new UI elements that would need particular care to ensure they're implemented in an accessible way? Consider also low-spec device and slow internet accessibility, if relevant. -->
+
+Shifting the UI theme should be actioned through a mix of one or more of the
+following current elements:
+
+- VCheckbox
+- VRadio
+- VItemGroup
+- VSelectField
+- VPopover
+- VButton
+- VIconButton
+
+The designs of pages and components need to meet the contrast color requirements
+described in WCAG 2.2 to meet AA. See the
+[Perceivable section](https://www.w3.org/WAI/WCAG22/quickref/?currentsidebar=%23col_overview&levels=aaa&showtechniques=321#principle1)
+of the guideline for more context.
+
+## Marketing
+
+<!-- Are there potential marketing opportunities that we'd need to coordinate with the community to accomplish? If there are none, say so explicitly rather than deleting the section.-->
+
+An announcement showing the functionality will be created in conjunction with
+marketing team based on their existing workflows.
+
+## Required implementation plans
+
+<!-- What are the required implementation plans? Consider if they should be split per level of the stack or per feature. -->
+
+Frontend implementation plan.

documentation/projects/proposals/dark_mode/index.md

@@ -0,0 +1,8 @@
+# Dark Mode
+
+```{toctree}
+:titlesonly:
+:glob:
+
+*
+```

frontend/nuxt.config.ts

@@ -147,6 +147,7 @@ const config: NuxtConfig = {
     "~/plugins/polyfills.client.ts",
     "~/plugins/sentry.ts",
     "~/plugins/analytics.ts",
+    "~/plugins/errors.ts",
   ],
   css: ["~/assets/fonts.css", "~/styles/tailwind.css", "~/styles/accent.css"],
   head,

frontend/package.json

@@ -82,7 +82,7 @@
     "glob": "^8.0.1",
     "node-html-parser": "^5.3.3",
     "nuxt": "^2.17.2",
-    "pinia": "^2.0.33",
+    "pinia": "^2.1.7",
     "portal-vue": "^2.1.7",
     "postcss-focus-visible": "^6.0.4",
     "prom-client": "^14.0.1",
@@ -136,7 +136,7 @@
     "talkback": "^3.0.1",
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2",
-    "vue-demi": "^0.14.6",
+    "vue-demi": "^0.14.7",
     "vue-i18n-extract": "^2.0.7",
     "vue-jest": "^3.0.7",
     "vue-loader": "^15.10.0",

frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue

@@ -119,14 +119,14 @@ import { cyclicShift } from "~/utils/math"
 
 import { keycodes } from "~/constants/key-codes"
 
-import { useAnalytics } from "~/composables/use-analytics"
 import { useDialogControl } from "~/composables/use-dialog-control"
 import { useSearch } from "~/composables/use-search"
 
 import { useMediaStore } from "~/stores/media"
 import { useSearchStore } from "~/stores/search"
 
 import { useHydrating } from "~/composables/use-hydrating"
+import { useAnalytics } from "~/composables/use-analytics"
 
 import VLogoButton from "~/components/VHeader/VLogoButton.vue"
 import VInputModal from "~/components/VModal/VInputModal.vue"

frontend/src/components/VImageCell/VImageCell.vue

@@ -63,16 +63,19 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue"
 
+import { useContext } from "@nuxtjs/composition-api"
+
 import type { AspectRatio, ImageDetail } from "~/types/media"
 import type { ResultKind } from "~/types/result"
 import { useImageCellSize } from "~/composables/use-image-cell-size"
 import { useI18n } from "~/composables/use-i18n"
-import { useAnalytics } from "~/composables/use-analytics"
 
 import { IMAGE } from "~/constants/media"
 
 import { useSensitiveMedia } from "~/composables/use-sensitive-media"
 
+import { useSearchStore } from "~/stores/search"
+
 import VLicense from "~/components/VLicense/VLicense.vue"
 import VLink from "~/components/VLink.vue"
 
@@ -182,7 +185,8 @@ export default defineComponent({
           })
     })
 
-    const { sendCustomEvent } = useAnalytics()
+    const { $sendCustomEvent } = useContext()
+    const searchStore = useSearchStore()
 
     /**
      * If the user left clicks on a search result, send
@@ -194,7 +198,7 @@ export default defineComponent({
         return
       }
 
-      sendCustomEvent("SELECT_SEARCH_RESULT", {
+      $sendCustomEvent("SELECT_SEARCH_RESULT", {
         id: props.image.id,
         kind: props.kind,
         mediaType: IMAGE,
@@ -203,6 +207,9 @@ export default defineComponent({
         relatedTo: props.relatedTo,
         sensitivities: props.image.sensitivity?.join(",") ?? "",
         isBlurred: shouldBlur.value,
+        collectionType:
+          searchStore.strategy !== "default" ? searchStore.strategy : null,
+        collectionValue: searchStore.collectionValue,
       })
     }
 

frontend/src/components/VLoadMore.vue

@@ -13,6 +13,7 @@
     </VButton>
   </div>
 </template>
+
 <script lang="ts">
 import {
   computed,
@@ -34,6 +35,8 @@ import { defineEvent } from "~/types/emits"
 import type { ResultKind } from "~/types/result"
 import type { SupportedSearchType } from "~/constants/media"
 
+import { useSearchStore } from "~/stores/search"
+
 import VButton from "~/components/VButton.vue"
 
 export default defineComponent({
@@ -67,15 +70,22 @@ export default defineComponent({
     const route = useRoute()
     const i18n = useI18n()
     const mediaStore = useMediaStore()
+    const searchStore = useSearchStore()
     const { $sendCustomEvent } = useContext()
 
     const { currentPage } = storeToRefs(mediaStore)
 
     const eventPayload = computed(() => {
+      let kind: ResultKind =
+        searchStore.strategy === "default" ? "search" : "collection"
       return {
         searchType: props.searchType,
         query: props.searchTerm,
         resultPage: currentPage.value || 1,
+        kind,
+        collectionType:
+          searchStore.strategy !== "default" ? searchStore.strategy : null,
+        collectionValue: searchStore.collectionValue,
       }
     })