Initialize Provider store data, UI store and flags store from cookies…

… in a plugin (#4231)

* Update header internal test

Signed-off-by: Olga Bulat <obulat@gmail.com>

* Wait for full navigation in header-internal e2e test

Signed-off-by: Olga Bulat <obulat@gmail.com>

* Revert header changes

Signed-off-by: Olga Bulat <obulat@gmail.com>

* Initialize ui and flags from cookies at request time

Signed-off-by: Olga Bulat <obulat@gmail.com>

* Add source name in decode-media-data

* Split sessionFeatures from features when setting cookies for tests

* Update tapes

* Refactor VByLine params

* Update content report form test

* Remove redundant default icon class

* Remove lastUpdated

---------

Signed-off-by: Olga Bulat <obulat@gmail.com>

documentation/meta/media_properties/frontend.md

@@ -42,11 +42,11 @@ clarity.
 | `license_version`                             | `LicenseVersion` (custom)     |           |
 | [`originalTitle`](#Media-originalTitle-notes) | `string`                      |           |
 | `provider`                                    | `string`                      |           |
-| `providerName`                                | `string`                      | ✓         |
+| `providerName`                                | `string`                      |           |
 | `related_url`                                 | `string`                      |           |
 | `sensitivity`                                 | `Sensitivity[]` (custom)      |           |
-| `source`                                      | `string`                      | ✓         |
-| `sourceName`                                  | `string`                      | ✓         |
+| `source`                                      | `string`                      |           |
+| `sourceName`                                  | `string`                      |           |
 | `tags`                                        | `Tag[]` (custom)              |           |
 | `thumbnail`                                   | `string`                      | ✓         |
 | [`title`](#Media-title-notes)                 | `string`                      |           |

frontend/nuxt.config.ts

@@ -135,7 +135,7 @@ const config: NuxtConfig = {
       : undefined,
   },
   router: {
-    middleware: "middleware",
+    middleware: "feature-flags",
   },
   components: [
     { path: "~/components", extensions: ["vue"], pathPrefix: false },
@@ -148,6 +148,7 @@ const config: NuxtConfig = {
     "~/plugins/sentry.ts",
     "~/plugins/analytics.ts",
     "~/plugins/errors.ts",
+    "~/plugins/init-stores.ts",
   ],
   css: ["~/assets/fonts.css", "~/styles/tailwind.css", "~/styles/accent.css"],
   head,
@@ -314,6 +315,7 @@ const config: NuxtConfig = {
     trackLocalhost: !isProdNotPlaywright,
   },
   publicRuntimeConfig: {
+    deploymentEnv: process.env.DEPLOYMENT_ENV ?? "local",
     plausible: {
       // This is the current domain of the site.
       domain:
@@ -346,7 +348,6 @@ const config: NuxtConfig = {
         environment: process.env.SENTRY_ENVIRONMENT,
       },
     },
-    deploymentEnv: process.env.DEPLOYMENT_ENV ?? "local",
   },
 }
 

frontend/src/components/VContentSwitcher/VSearchTypeButton.vue

@@ -9,7 +9,7 @@
     v-bind="$attrs"
     @click="$emit('click')"
   >
-    <VIcon :name="searchType" class="h-6 w-6" />
+    <VIcon :name="searchType" />
     <template v-if="showLabel">
       <span class="label-regular block truncate text-start">{{ label }}</span>
       <VIcon name="caret-down" />

frontend/src/components/VMediaInfo/VByLine/VByLine.vue

@@ -1,15 +1,15 @@
 <template>
   <VScrollableLine>
     <VSourceCreatorButton
-      v-if="showCreator && creatorHref && creator"
-      :href="creatorHref"
+      v-if="creator"
+      :title="creator.name"
+      :href="creator.href"
       icon-name="person"
-      :title="creator"
     />
     <VSourceCreatorButton
       :href="sourceHref"
       icon-name="institution"
-      :title="sourceName"
+      :title="media.sourceName"
     />
   </VScrollableLine>
 </template>
@@ -18,7 +18,7 @@
 import { computed, defineComponent, type PropType } from "vue"
 
 import { useSearchStore } from "~/stores/search"
-import type { SupportedMediaType } from "~/constants/media"
+import type { AudioDetail, ImageDetail } from "~/types/media"
 
 import VSourceCreatorButton from "~/components/VMediaInfo/VByLine/VSourceCreatorButton.vue"
 import VScrollableLine from "~/components/VScrollableLine.vue"
@@ -33,58 +33,41 @@ export default defineComponent({
     VSourceCreatorButton,
   },
   props: {
-    creator: {
-      type: String,
-    },
-    sourceName: {
-      type: String,
-      required: true,
-    },
-    sourceSlug: {
-      type: String,
-      required: true,
-    },
-    mediaType: {
-      type: String as PropType<SupportedMediaType>,
+    media: {
+      type: Object as PropType<AudioDetail | ImageDetail>,
       required: true,
     },
   },
   setup(props) {
-    const showCreator = computed(() => {
-      return Boolean(
-        props.creator && props.creator.toLowerCase() !== "unidentified"
-      )
-    })
-
     const searchStore = useSearchStore()
 
-    const creatorHref = computed(() => {
-      if (!props.creator) {
-        return undefined
+    const creator = computed(() => {
+      if (props.media.creator && props.media.creator !== "unidentified") {
+        const href = searchStore.getCollectionPath({
+          type: props.media.frontendMediaType,
+          collectionParams: {
+            collection: "creator",
+            source: props.media.source,
+            creator: props.media.creator,
+          },
+        })
+        return { name: props.media.creator, href }
       }
-      return searchStore.getCollectionPath({
-        type: props.mediaType,
-        collectionParams: {
-          collection: "creator",
-          source: props.sourceSlug,
-          creator: props.creator,
-        },
-      })
+      return null
     })
 
     const sourceHref = computed(() => {
       return searchStore.getCollectionPath({
-        type: props.mediaType,
+        type: props.media.frontendMediaType,
         collectionParams: {
           collection: "source",
-          source: props.sourceSlug,
+          source: props.media.source,
         },
       })
     })
 
     return {
-      showCreator,
-      creatorHref,
+      creator,
       sourceHref,
     }
   },

frontend/src/components/VMediaInfo/VByLine/meta/VByLine.stories.mdx

@@ -6,16 +6,13 @@ import {
   Story,
 } from "@storybook/addon-docs"
 import { supportedMediaTypes } from "~/constants/media"
-import { useProviderStore } from "~/stores/provider"
 
 import VByLine from "~/components/VMediaInfo/VByLine/VByLine.vue"
 
 export const Template = (args) => ({
   template: `<div class="wrapper w-full inline-flex p-4"><VByLine v-bind="args" /></div>`,
   components: { VByLine },
   setup() {
-    const providerStore = useProviderStore()
-    providerStore.getProviders().then(/** */)
     return { args }
   },
 })

frontend/src/components/VMediaInfo/VMediaInfo.vue

@@ -1,19 +1,13 @@
 <template>
   <div class="w-full lg:w-auto">
     <h1 class="heading-6 mb-3 sm:mb-1">{{ media.title }}</h1>
-    <VByLine
-      :media-type="media.frontendMediaType"
-      :source-slug="source"
-      :source-name="sourceName"
-      :creator="media.creator"
-    />
+    <VByLine :media="media" />
   </div>
 </template>
 <script lang="ts">
-import { computed, defineComponent } from "vue"
+import { defineComponent } from "vue"
 
-import { Media } from "~/types/media"
-import { useProviderStore } from "~/stores/provider"
+import type { Media } from "~/types/media"
 
 import VByLine from "~/components/VMediaInfo/VByLine/VByLine.vue"
 
@@ -28,19 +22,5 @@ export default defineComponent({
       required: true,
     },
   },
-  setup(props) {
-    const source = computed(() => {
-      return props.media.source ?? props.media.provider
-    })
-
-    const providerStore = useProviderStore()
-    const sourceName = computed(() => {
-      return providerStore.getProviderName(
-        source.value,
-        props.media.frontendMediaType
-      )
-    })
-    return { source, sourceName }
-  },
 })
 </script>

frontend/src/middleware/feature-flags.ts

@@ -0,0 +1,11 @@
+import { defineNuxtMiddleware } from "@nuxtjs/composition-api"
+
+import { useFeatureFlagStore } from "~/stores/feature-flag"
+
+/**
+ * On every page navigation, update the feature flags from query.
+ */
+export default defineNuxtMiddleware(async ({ $pinia, query }) => {
+  const featureFlagStore = useFeatureFlagStore($pinia)
+  featureFlagStore.initFromQuery(query)
+})

frontend/src/plugins/init-stores.ts

@@ -0,0 +1,23 @@
+import { defineNuxtPlugin } from "@nuxtjs/composition-api"
+
+import { useFeatureFlagStore } from "~/stores/feature-flag"
+import { useUiStore } from "~/stores/ui"
+import { useProviderStore } from "~/stores/provider"
+
+/**
+ * Initialize the feature flag and UI stores from cookies and query parameters on every request.
+ */
+export default defineNuxtPlugin(async ({ $cookies, $pinia }) => {
+  /* Provider store */
+  const providerStore = useProviderStore($pinia)
+  await providerStore.fetchProviders()
+
+  /* Feature flag store */
+  const featureFlagStore = useFeatureFlagStore($pinia)
+  featureFlagStore.initFromCookies($cookies.get("features") ?? {})
+  featureFlagStore.initFromCookies($cookies.get("sessionFeatures") ?? {})
+
+  /* UI store */
+  const uiStore = useUiStore($pinia)
+  uiStore.initFromCookies($cookies.get("ui") ?? {})
+})

frontend/src/stores/media/single-result.ts

@@ -11,7 +11,6 @@ import type { SupportedMediaType } from "~/constants/media"
 
 import { initServices } from "~/stores/media/services"
 import { useMediaStore } from "~/stores/media/index"
-import { useProviderStore } from "~/stores/provider"
 
 import type { FetchingError, FetchState } from "~/types/fetch-state"
 
@@ -59,23 +58,6 @@ export const useSingleResultStore = defineStore("single-result", {
       action === "start" ? this._startFetching() : this._endFetching(option)
     },
 
-    _addProviderName<T extends SupportedMediaType>(
-      mediaItem: DetailFromMediaType<T>
-    ): DetailFromMediaType<T> {
-      const providerStore = useProviderStore()
-
-      mediaItem.providerName = providerStore.getProviderName(
-        mediaItem.provider,
-        mediaItem.frontendMediaType
-      )
-      if (mediaItem.source) {
-        mediaItem.sourceName = providerStore.getProviderName(
-          mediaItem.source,
-          mediaItem.frontendMediaType
-        )
-      }
-      return mediaItem
-    },
     reset() {
       this.mediaItem = null
       this.mediaType = null
@@ -91,7 +73,7 @@ export const useSingleResultStore = defineStore("single-result", {
      */
     setMediaItem(mediaItem: AudioDetail | ImageDetail | null) {
       if (mediaItem) {
-        this.mediaItem = this._addProviderName(mediaItem)
+        this.mediaItem = mediaItem
         this.mediaType = mediaItem.frontendMediaType
         this.mediaId = mediaItem.id
       } else {
@@ -160,7 +142,7 @@ export const useSingleResultStore = defineStore("single-result", {
         this._updateFetchState("start")
         const accessToken = this.$nuxt.$openverseApiToken
         const service = initServices[type](accessToken)
-        const item = this._addProviderName(await service.getMediaDetail(id))
+        const item = await service.getMediaDetail(id)
 
         this.setMediaItem(item)
         this._updateFetchState("end")