Remove the additional search views flag (#4222)

Signed-off-by: Olga Bulat <[email protected]>
WordPress · Apr 30, 2024 · cb5eb2f · cb5eb2f
1 parent 0ebbd18
commit cb5eb2f
Show file tree

Hide file tree

Showing 45 changed files with 4,238 additions and 6,440 deletions.
diff --git a/frontend/feat/feature-flags.json b/frontend/feat/feature-flags.json
@@ -9,11 +9,6 @@
       "defaultState": "off",
       "storage": "cookie"
     },
-    "additional_search_views": {
-      "status": "enabled",
-      "description": "Toggle additional search views for tag/creator/source.",
-      "storage": "cookie"
-    },
     "additional_search_types": {
       "status": {
         "staging": "switchable",

diff --git a/frontend/src/components/VAudioTrack/layouts/VFullLayout.vue b/frontend/src/components/VAudioTrack/layouts/VFullLayout.vue
@@ -16,7 +16,6 @@
       </div>
     </div>
     <div
-      v-if="additionalSearchViews"
       class="mx-auto grid grid-cols-1 grid-rows-[auto,1fr] gap-y-6 p-6 pb-0 sm:grid-cols-[1fr,auto] sm:grid-rows-1 sm:gap-x-6 lg:mb-6 lg:max-w-5xl"
     >
       <div
@@ -31,60 +30,21 @@
       </div>
       <VMediaInfo :media="audio" class="min-w-0" />
     </div>
-    <div
-      v-else
-      class="mx-auto grid grid-cols-1 grid-rows-[auto,auto] gap-6 p-6 pb-0 lg:mb-6 lg:max-w-5xl lg:flex-nowrap"
-    >
-      <div class="row-start-1 flex justify-between gap-x-6 sm:col-start-2">
-        <slot name="audio-control" layout="full" size="medium" />
-        <VGetMediaButton
-          :media="audio"
-          media-type="audio"
-          class="col-start-2 !w-full px-0 sm:!w-auto sm:flex-shrink-0"
-        />
-      </div>
-
-      <div
-        class="audio-info row-start-2 flex w-full flex-col justify-center sm:col-start-1 sm:row-start-1 lg:w-auto"
-      >
-        <h1 class="heading-6 lg:line-clamp-2">{{ audio.title }}</h1>
-        <div
-          class="subtitle mt-1 flex flex-col gap-2 text-base leading-snug lg:flex-row lg:items-center"
-        >
-          <i18n as="span" path="audioTrack.creator" class="font-semibold">
-            <template #creator>
-              <VLink
-                class="rounded-sm p-px focus-visible:outline-none focus-visible:ring focus-visible:ring-pink"
-                :href="audio.creator_url"
-                :send-external-link-click-event="false"
-              >
-                {{ audio.creator }}
-              </VLink>
-            </template>
-          </i18n>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
+import { defineComponent, PropType } from "vue"
 
 import type { AudioDetail } from "~/types/media"
-import { timeFmt } from "~/utils/time-fmt"
 import { audioFeatures, AudioSize, AudioStatus } from "~/constants/audio"
 
-import { useFeatureFlagStore } from "~/stores/feature-flag"
-import { useProviderStore } from "~/stores/provider"
-
-import VLink from "~/components/VLink.vue"
 import VGetMediaButton from "~/components/VMediaInfo/VGetMediaButton.vue"
 import VMediaInfo from "~/components/VMediaInfo/VMediaInfo.vue"
 
 export default defineComponent({
   name: "VFullLayout",
-  components: { VMediaInfo, VGetMediaButton, VLink },
+  components: { VMediaInfo, VGetMediaButton },
   props: {
     audio: {
       type: Object as PropType<AudioDetail>,
@@ -101,30 +61,9 @@ export default defineComponent({
       required: true,
     },
   },
-  setup(props) {
-    const isSmall = computed(() => props.size === "s")
-
-    const featureFlagStore = useFeatureFlagStore()
-    const additionalSearchViews = computed(() =>
-      featureFlagStore.isOn("additional_search_views")
-    )
-
-    const providerStore = useProviderStore()
-    const sourceName = computed(() => {
-      return providerStore.getProviderName(
-        props.audio.source ?? props.audio.provider,
-        "audio"
-      )
-    })
-
+  setup() {
     return {
-      timeFmt,
-
-      isSmall,
       audioFeatures,
-      sourceName,
-
-      additionalSearchViews,
     }
   },
 })

diff --git a/frontend/src/components/VMediaInfo/VMediaTags.vue b/frontend/src/components/VMediaInfo/VMediaTags.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="normalizedTags.length && additionalSearchViews" class="-my-1.5px">
+  <div v-if="normalizedTags.length" class="-my-1.5px">
     <ul
       ref="tagsContainerRef"
       :aria-label="$t('mediaDetails.tags.title').toString()"
@@ -30,16 +30,6 @@
         :class="{ '-scale-y-100 transform': buttonStatus === 'hide' }"
     /></VButton>
   </div>
-
-  <ul
-    v-else
-    class="flex flex-wrap gap-2"
-    :aria-label="$t('mediaDetails.tags').toString()"
-  >
-    <VMediaTag v-for="(tag, index) in normalizedTags" :key="index" tag="li">{{
-      tag
-    }}</VMediaTag>
-  </ul>
 </template>
 <script lang="ts">
 import {
@@ -56,13 +46,11 @@ import { useResizeObserver, watchDebounced } from "@vueuse/core"
 
 import type { Tag } from "~/types/media"
 import type { SupportedMediaType } from "~/constants/media"
-import { useFeatureFlagStore } from "~/stores/feature-flag"
 import { useSearchStore } from "~/stores/search"
 import { useI18n } from "~/composables/use-i18n"
 
 import { focusElement } from "~/utils/focus-management"
 
-import VMediaTag from "~/components/VMediaTag/VMediaTag.vue"
 import VTag from "~/components/VTag/VTag.vue"
 import VButton from "~/components/VButton.vue"
 import VIcon from "~/components/VIcon/VIcon.vue"
@@ -72,7 +60,7 @@ const ROWS_TO_DISPLAY = 3
 
 export default defineComponent({
   name: "VMediaTags",
-  components: { VIcon, VButton, VMediaTag, VTag },
+  components: { VIcon, VButton, VTag },
   props: {
     tags: {
       type: Array as PropType<Tag[]>,
@@ -87,14 +75,9 @@ export default defineComponent({
     const tagsContainerRef = ref<HTMLElement>()
 
     const searchStore = useSearchStore()
-    const featureFlagStore = useFeatureFlagStore()
     const { $sendCustomEvent } = useContext()
     const i18n = useI18n()
 
-    const additionalSearchViews = computed(() =>
-      featureFlagStore.isOn("additional_search_views")
-    )
-
     const localizedTagPath = (tag: string) => {
       return searchStore.getCollectionPath({
         type: props.mediaType,
@@ -231,7 +214,6 @@ export default defineComponent({
     return {
       tagsContainerRef,
 
-      additionalSearchViews,
       localizedTagPath,
 
       normalizedTags,

diff --git a/frontend/src/components/VMediaTag/VMediaTag.vue b/frontend/src/components/VMediaTag/VMediaTag.vue
diff --git a/frontend/src/components/VMediaTag/meta/VMediaTag.stories.mdx b/frontend/src/components/VMediaTag/meta/VMediaTag.stories.mdx
diff --git a/frontend/src/components/VSourcesTable.vue b/frontend/src/components/VSourcesTable.vue
@@ -40,12 +40,11 @@
     </thead>
     <tbody>
       <tr v-for="provider in sortedProviders" :key="provider.display_name">
-        <td v-if="additionalSearchViews">
+        <td>
           <VLink :href="providerViewUrl(provider)">{{
             provider.display_name
           }}</VLink>
         </td>
-        <td v-else>{{ provider.display_name }}</td>
         <td class="truncate font-semibold">
           <VLink :href="provider.source_url">
             {{ cleanSourceUrlForPresentation(provider.source_url) }}
@@ -68,7 +67,6 @@ import { useGetLocaleFormattedNumber } from "~/composables/use-get-locale-format
 import type { SupportedMediaType } from "~/constants/media"
 import type { MediaProvider } from "~/types/media-provider"
 
-import { useFeatureFlagStore } from "~/stores/feature-flag"
 import { useSearchStore } from "~/stores/search"
 
 import TableSortIcon from "~/components/TableSortIcon.vue"
@@ -141,11 +139,6 @@ export default defineComponent({
       return sorting.direction === "asc" ? providers : providers.reverse()
     })
 
-    const featureFlagStore = useFeatureFlagStore()
-    const additionalSearchViews = computed(() => {
-      return featureFlagStore.isOn("additional_search_views")
-    })
-
     const searchStore = useSearchStore()
     const providerViewUrl = (provider: MediaProvider) => {
       return searchStore.getCollectionPath({
@@ -163,7 +156,6 @@ export default defineComponent({
       sortTable,
       cleanSourceUrlForPresentation,
       providerViewUrl,
-      additionalSearchViews,
     }
   },
 })

diff --git a/frontend/src/middleware/collection.ts b/frontend/src/middleware/collection.ts
@@ -1,6 +1,5 @@
 import { isShallowEqualObjects } from "@wordpress/is-shallow-equal"
 
-import { useFeatureFlagStore } from "~/stores/feature-flag"
 import { useProviderStore } from "~/stores/provider"
 import { useSearchStore } from "~/stores/search"
 
@@ -66,14 +65,6 @@ export const collectionMiddleware: Middleware = async ({
   error: nuxtError,
   route,
 }) => {
-  if (!useFeatureFlagStore($pinia).isOn("additional_search_views")) {
-    nuxtError({
-      statusCode: 404,
-      message: "Additional search views are not enabled",
-    })
-    return
-  }
-
   const searchStore = useSearchStore($pinia)
   // Route name has the locale in it, e.g. `audio-collection__en`
   const mediaType = routeNameToMediaType(route)