Remove the searchBy creator filter from the filters list (#2146)

* Filter `searchBy` from the filter array

* Update snapshots

* Fix e2e tests

* Remove `searchBy` filter references

* Update snapshots

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

@@ -51,7 +51,6 @@ export const NoResultsTemplate = (args) => ({
         license_type: "",
         mature: false,
         q: "sad person",
-        searchBy: "",
       },
     }}
   >

src/components/VExternalSearch/VExternalSearchForm.vue

@@ -175,7 +175,6 @@ export default defineComponent({
     /**
      * Find the last focusable element in VSearchGridFilter to add a 'Tab' keydown event
      * handler to it.
-     * We could actually hard-code this because 'searchBy' is always the last now.
      */
     const lastFocusableElement = computed<HTMLElement>(() => {
       const focusable = getFocusableElements(sectionRef.value)

src/components/VFilters/VFilterChecklist.vue

@@ -1,8 +1,6 @@
 <template>
   <fieldset class="mb-8">
-    <legend v-if="title" class="text-sm font-semibold">
-      {{ title }}
-    </legend>
+    <legend class="label-bold">{{ title }}</legend>
     <div
       v-for="(item, index) in options"
       :key="index"
@@ -12,7 +10,7 @@
         :id="item.code"
         :key="index"
         :checked="item.checked"
-        :name="itemName"
+        :name="title"
         :value="item.code"
         :disabled="isDisabled(item)"
         @change="onValueChange"
@@ -57,7 +55,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "@nuxtjs/composition-api"
+import { defineComponent, PropType } from "@nuxtjs/composition-api"
 
 import { useSearchStore } from "~/stores/search"
 import { useI18n } from "~/composables/use-i18n"
@@ -114,11 +112,6 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const i18n = useI18n()
-    const itemName = computed(() => {
-      return props.filterType === "searchBy"
-        ? i18n.t("filters.search-by.title")
-        : props.title
-    })
 
     const itemLabel = (item: FilterItem) =>
       ["audioProviders", "imageProviders"].indexOf(props.filterType) > -1
@@ -149,7 +142,6 @@ export default defineComponent({
 
     return {
       icons,
-      itemName,
       isDisabled,
       itemLabel,
       onValueChange,

src/components/VFilters/VSearchGridFilter.vue

@@ -108,9 +108,7 @@ export default defineComponent({
       () => Object.keys(filters.value) as NonMatureFilterCategory[]
     )
     const filterTypeTitle = (filterType: string) =>
-      filterType === "searchBy"
-        ? ""
-        : i18n.t(`filters.${kebab(filterType)}.title`)
+      i18n.t(`filters.${kebab(filterType)}.title`)
 
     /**
      * This watcher fires even when the queries are equal. We update the path only

src/stores/search.ts

@@ -124,11 +124,14 @@ export const useSearchStore = defineStore("search", {
     },
 
     /**
-     * Returns the object with filters for selected search type, with codes, names for i18n labels, and checked status.
+     * 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.
      */
     searchFilters(state) {
       return mediaFilterKeys[state.searchType]
-        .filter((filterKey) => filterKey !== "mature")
+        .filter((filterKey) => !["searchBy", "mature"].includes(filterKey))
         .reduce((obj, filterKey) => {
           obj[filterKey] = this.filters[filterKey]
           return obj

test/playwright/e2e/filters.spec.ts

@@ -37,9 +37,9 @@ const assertCheckboxCount = async (
 }
 
 const FILTER_COUNTS = {
-  [ALL_MEDIA]: 11,
-  [AUDIO]: 32,
-  [IMAGE]: 70,
+  [ALL_MEDIA]: 10,
+  [AUDIO]: 31,
+  [IMAGE]: 69,
 }
 
 breakpoints.describeMobileAndDesktop(() => {
@@ -63,7 +63,8 @@ breakpoints.describeMobileAndDesktop(() => {
       "/search/?q=cat&license_type=commercial&license=cc0&searchBy=creator"
     )
     await openFilters(page)
-    const expectedFilters = ["cc0", "commercial", "creator"]
+    // Creator filter was removed from the UI
+    const expectedFilters = ["cc0", "commercial"]
 
     for (const checkbox of expectedFilters) {
       await assertCheckboxStatus(page, checkbox)
@@ -77,7 +78,8 @@ breakpoints.describeMobileAndDesktop(() => {
       "/search/?q=cat&license_type=commercial&license=cc0&searchBy=creator"
     )
     await openFilters(page)
-    const expectedFilters = ["cc0", "commercial", "creator"]
+    // Creator filter was removed from the UI
+    const expectedFilters = ["cc0", "commercial"]
 
     for (const checkbox of expectedFilters) {
       await assertCheckboxStatus(page, checkbox)
@@ -101,14 +103,15 @@ breakpoints.describeMobileAndDesktop(() => {
     )
     await openFilters(page)
 
-    for (const checkbox of ["cc0", "commercial", "creator"]) {
+    // Creator filter was removed from the UI
+    for (const checkbox of ["cc0", "commercial"]) {
       await assertCheckboxStatus(page, checkbox)
     }
 
     await changeContentType(page, "All content")
 
     await openFilters(page)
-    await expect(page.locator('input[type="checkbox"]:checked')).toHaveCount(3)
+    await expect(page.locator('input[type="checkbox"]:checked')).toHaveCount(2)
 
     await expect(page).toHaveURL(
       "/search/?q=cat&license_type=commercial&license=cc0&searchBy=creator"

test/playwright/e2e/search-query-server.spec.ts

@@ -69,7 +69,8 @@ test.describe("search query on SSR", () => {
       })
 
       await openFilters(page)
-      for (const checkbox of ["cc0", "commercial", "creator"]) {
+      // Creator filter was removed from the UI
+      for (const checkbox of ["cc0", "commercial"]) {
         await assertCheckboxStatus(page, checkbox)
       }
     })

test/unit/specs/components/v-search-grid-filter.spec.js

@@ -72,6 +72,6 @@ describe("VSearchGridFilter", () => {
 
     expect(checkedFilters.length).toEqual(0)
     // Filters are reset with the initial `filterData` for ALL_MEDIA
-    expect(uncheckedFilters.length).toEqual(11)
+    expect(uncheckedFilters.length).toEqual(10)
   })
 })

test/unit/specs/stores/search-store.spec.js

@@ -79,7 +79,7 @@ describe("Search Store", () => {
         const searchStore = useSearchStore()
         searchStore.setSearchType(searchType)
         const filtersForDisplay = searchStore.searchFilters
-        const expectedFilterCount = Math.max(0, filterTypeCount - 1)
+        const expectedFilterCount = Math.max(0, filterTypeCount - 2)
         expect(Object.keys(filtersForDisplay).length).toEqual(
           expectedFilterCount
         )