Rename mature to includeSensitiveResults

frontend/src/components/VErrorSection/VServerTimeout.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="server-timeout">
-    <h4 class="text-5xl">{{ $t("server-timeout.heading") }}</h4>
+    <h4 class="text-5xl">{{ $t("serverTimeout.heading") }}</h4>
   </div>
 </template>
 

frontend/src/components/VErrorSection/meta/VErrorSection.stories.mdx

@@ -12,6 +12,7 @@ import VNoResults from "~/components/VErrorSection/VNoResults.vue"
 import VServerTimeout from "~/components/VErrorSection/VServerTimeout.vue"
 
 import { NO_RESULT, SERVER_TIMEOUT } from "~/constants/errors"
+import { INCLUDE_SENSITIVE_QUERY_PARAM } from "~/constants/content-safety"
 
 <Meta title="Components/VErrorSection" component={VErrorSection} />
 
@@ -31,7 +32,7 @@ export const NoResultsTemplate = (args) => ({
       <template #image>
        <VErrorImage :error-code="args.errorCode" />
       </template>
-      <VNoResults :type="args.type" :query="args.query"/>
+      <VNoResults :media-type="args.type" :search-term="args.searchTerm" :external-sources=[] />
     </VErrorSection>
     `,
   components: { VErrorSection, VErrorImage, VNoResults },
@@ -46,12 +47,7 @@ export const NoResultsTemplate = (args) => ({
     args={{
       errorCode: NO_RESULT,
       type: "image",
-      query: {
-        license: "",
-        license_type: "",
-        mature: false,
-        q: "sad person",
-      },
+      searchTerm: "sad person",
     }}
   >
     {NoResultsTemplate.bind({})}

frontend/src/constants/content-safety.ts

@@ -27,3 +27,6 @@ export const SENSITIVE_MEDIA_STATES = [
 ] as const
 
 export type SensitiveMediaVisibility = (typeof SENSITIVE_MEDIA_STATES)[number]
+
+export const INCLUDE_SENSITIVE_QUERY_PARAM =
+  "unstable__include_sensitive_results"

frontend/src/constants/filters.ts

@@ -23,10 +23,13 @@ export interface Filters {
   audioProviders: FilterItem[]
   imageProviders: FilterItem[]
   searchBy: FilterItem[]
-  mature: FilterItem[]
+  includeSensitiveResults: FilterItem[]
 }
 export type FilterCategory = keyof Filters
-export type NonMatureFilterCategory = Exclude<FilterCategory, "mature">
+export type NonMatureFilterCategory = Exclude<
+  FilterCategory,
+  "includeSensitiveResults"
+>
 
 /**
  * List of filters available for each search type. The order of the keys
@@ -43,7 +46,7 @@ export const mediaFilterKeys = deepFreeze<Record<SearchType, FilterCategory[]>>(
       "sizes",
       "imageProviders",
       "searchBy",
-      "mature",
+      "includeSensitiveResults",
     ],
     [AUDIO]: [
       "licenseTypes",
@@ -53,11 +56,16 @@ export const mediaFilterKeys = deepFreeze<Record<SearchType, FilterCategory[]>>(
       "lengths",
       "audioProviders",
       "searchBy",
-      "mature",
+      "includeSensitiveResults",
     ],
     [VIDEO]: [],
     [MODEL_3D]: [],
-    [ALL_MEDIA]: ["licenseTypes", "licenses", "searchBy", "mature"],
+    [ALL_MEDIA]: [
+      "licenseTypes",
+      "licenses",
+      "searchBy",
+      "includeSensitiveResults",
+    ],
   }
 )
 
@@ -101,7 +109,7 @@ const filterCodesPerCategory = deepFreeze<Record<FilterCategory, string[]>>({
   audioProviders: [],
   imageProviders: [],
   searchBy: ["creator"],
-  mature: ["mature"],
+  includeSensitiveResults: ["includeSensitiveResults"],
 })
 /**
  * Converts the filterCodesPerCategory object into the format that's used by the filter store.

frontend/src/stores/search.ts

@@ -33,6 +33,7 @@ import {
   mediaFilterKeys,
   mediaUniqueFilterKeys,
 } from "~/constants/filters"
+import { INCLUDE_SENSITIVE_QUERY_PARAM } from "~/constants/content-safety"
 
 import { useProviderStore } from "~/stores/provider"
 import { useFeatureFlagStore } from "~/stores/feature-flag"
@@ -70,7 +71,11 @@ function computeQueryParams(
   return queryKeys.reduce(
     (obj, key) => {
       if (key !== "q" && query[key]?.length) {
-        obj[key] = query[key]
+        if (key !== INCLUDE_SENSITIVE_QUERY_PARAM) {
+          obj[key] = query[key]
+        } else if (query[key] === "includeSensitiveResults") {
+          obj[key] = "true"
+        }
       }
       return obj
     },
@@ -114,11 +119,11 @@ export const useSearchStore = defineStore("search", {
     },
 
     /**
-     * Returns the number of checked filters, excluding the `mature` filter.
+     * Returns the number of checked filters, excluding the `includeSensitiveResults` filter.
      */
     appliedFilterCount(state) {
       const filterKeys = mediaFilterKeys[state.searchType].filter(
-        (f) => f !== "mature"
+        (f) => f !== "includeSensitiveResults"
       )
       return filterKeys.reduce((count, filterCategory) => {
         return (
@@ -131,19 +136,22 @@ export const useSearchStore = defineStore("search", {
      * Returns the object with filters for selected search type,
      * with codes, names for i18n labels, and checked status.
      *
-     * Excludes `searchBy` and `mature` filters that we don't display.
+     * Excludes `searchBy` and `includeSensitiveResults` filters that we don't display.
      */
     searchFilters(state) {
       return mediaFilterKeys[state.searchType]
-        .filter((filterKey) => !["searchBy", "mature"].includes(filterKey))
+        .filter(
+          (filterKey) =>
+            !["searchBy", "includeSensitiveResults"].includes(filterKey)
+        )
         .reduce((obj, filterKey) => {
           obj[filterKey] = this.filters[filterKey]
           return obj
         }, {} as Filters)
     },
 
     /**
-     * True if any filter for selected search type except `mature` is checked.
+     * True if any filter for selected search type except `includeSensitiveResults` is checked.
      */
     isAnyFilterApplied() {
       const filterEntries = Object.entries(this.searchFilters) as [
@@ -152,7 +160,8 @@ export const useSearchStore = defineStore("search", {
       ][]
       return filterEntries.some(
         ([filterKey, filterItems]) =>
-          filterKey !== "mature" && filterItems.some((filter) => filter.checked)
+          filterKey !== "includeSensitiveResults" &&
+          filterItems.some((filter) => filter.checked)
       )
     },
     /**
@@ -413,12 +422,11 @@ export const useSearchStore = defineStore("search", {
       this.searchType = queryStringToSearchType(path)
       if (!isSearchTypeSupported(this.searchType)) return
 
-      // When setting filters from URL query, 'mature' has a value of 'true',
-      // but we need the 'mature' code. Creating a local shallow copy to prevent mutation.
-      if (query.mature === "true") {
-        query.mature = "mature"
-      } else {
-        delete query.mature
+      // TODO: Convert the 'unstable__include_sensitive_results=true' query param
+      // to `includeSensitiveResults` filterType and the filterCode with the same name:
+      // includeSensitiveResults: { code: includeSensitiveResults, name: '...', checked: true }
+      if (!(query[INCLUDE_SENSITIVE_QUERY_PARAM] === "true")) {
+        delete query[INCLUDE_SENSITIVE_QUERY_PARAM]
       }
 
       const newFilterData = queryToFilterData({

frontend/src/utils/search-query-transform.ts

@@ -11,6 +11,7 @@ import {
   SupportedSearchType,
   supportedSearchTypes,
 } from "~/constants/media"
+import { INCLUDE_SENSITIVE_QUERY_PARAM } from "~/constants/content-safety"
 import { getParameterByName } from "~/utils/url-params"
 import { deepClone } from "~/utils/clone"
 
@@ -28,7 +29,7 @@ export interface ApiQueryParams {
   category?: string
   source?: string
   length?: string
-  mature?: string
+  [INCLUDE_SENSITIVE_QUERY_PARAM]?: string
   page?: string
   /**
    * A conditional to show audio waveform data.
@@ -58,7 +59,7 @@ const filterPropertyMappings: Record<FilterCategory, ApiQueryKeys> = {
   audioProviders: "source",
   imageProviders: "source",
   searchBy: "searchBy",
-  mature: "mature",
+  includeSensitiveResults: INCLUDE_SENSITIVE_QUERY_PARAM,
 }
 
 const getMediaFilterTypes = (searchType: SearchType) => {
@@ -70,14 +71,14 @@ const getMediaFilterTypes = (searchType: SearchType) => {
 /**
  * Joins all the filters which have the checked property `true`
  * to a string separated by commas for the API request URL, e.g.: "by,nd-nc,nc-sa".
- * Mature is a special case, and is converted to `true`.
+ * `includeSensitiveResults` is a special case, and is converted to `true`.
  */
 const filterToString = (filterItem: FilterItem[]) => {
   const filterString = filterItem
     .filter((f) => f.checked)
     .map((filterItem) => filterItem.code)
     .join(",")
-  return filterString === "mature" ? "true" : filterString
+  return filterString === INCLUDE_SENSITIVE_QUERY_PARAM ? "true" : filterString
 }
 
 /**
@@ -199,7 +200,10 @@ export const queryToFilterData = ({
     } else {
       const queryDataKey = filterPropertyMappings[filterDataKey]
       if (query[queryDataKey]) {
-        if (queryDataKey === "mature" && query[queryDataKey].length > 0) {
+        if (
+          queryDataKey === INCLUDE_SENSITIVE_QUERY_PARAM &&
+          query[queryDataKey].length > 0
+        ) {
           filters[filterDataKey][0].checked = true
         } else {
           const filterValues = query[queryDataKey].split(",")