Fix "Back to results" link and remove grey background from single res…

…ults page (#1977)

Co-authored-by: Olga Bulat <obulat@gmail.com>

bin/playwright.sh

@@ -11,6 +11,8 @@ PLAYWRIGHT_VERSION=$(version)
 export PLAYWRIGHT_VERSION
 export TEST_COMMAND="${TEST_COMMAND:-test:playwright:local}"
 
+pnpm i18n:get-translations --en-only
+
 echo Running Playwright v"$PLAYWRIGHT_VERSION" as "$USER_ID" with Playwright arguments "$PLAYWRIGHT_ARGS"
 
 docker-compose -f docker-compose.playwright.yml up --build --force-recreate --exit-code-from playwright --remove-orphans

src/components/VAudioTrack/layouts/VFullLayout.vue

@@ -1,6 +1,13 @@
 <template>
-  <div class="full-track w-full">
-    <div class="relative bg-dark-charcoal-06">
+  <div class="full-track w-full" :class="{ isNewHeaderEnabled }">
+    <div
+      class="relative"
+      :class="
+        isNewHeaderEnabled
+          ? 'border-b border-dark-charcoal-20'
+          : 'bg-dark-charcoal-06'
+      "
+    >
       <span
         v-if="currentTime > 0"
         class="pointer-events-none absolute left-0 hidden h-full w-4 bg-yellow md:block lg:w-10"
@@ -76,6 +83,7 @@ import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 import type { AudioDetail } from '~/models/media'
 import { timeFmt } from '~/utils/time-fmt'
 import { AudioSize, AudioStatus, audioFeatures } from '~/constants/audio'
+import { useFeatureFlagStore } from '~/stores/feature-flag'
 
 import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
@@ -105,12 +113,18 @@ export default defineComponent({
   setup(props) {
     const isSmall = computed(() => props.size === 's')
 
+    const featureFlagStore = useFeatureFlagStore()
+    const isNewHeaderEnabled = computed(() =>
+      featureFlagStore.isOn('new_header')
+    )
+
     return {
       timeFmt,
 
       isSmall,
       audioFeatures,
       externalIcon,
+      isNewHeaderEnabled,
     }
   },
 })
@@ -121,6 +135,10 @@ export default defineComponent({
   @apply h-[185px] rounded-sm;
 }
 
+.full-track.isNewHeaderEnabled .waveform {
+  --waveform-background-color: theme('colors.white');
+}
+
 .full-track .play-pause {
   @apply rounded-sm;
 }

src/components/VBackToSearchResultsLink.vue

@@ -1,10 +1,10 @@
 <template>
   <!-- @todo: Separate the absolute container from the link itself. -->
   <VLink
-    class="flex flex-row items-center px-2 py-3 text-xs font-semibold text-dark-charcoal md:px-6 md:pt-4 md:pb-2 md:text-sr"
-    :href="path"
+    class="time inline-flex flex-row items-center gap-2 rounded-sm p-2 text-xs font-semibold text-dark-charcoal-70 pe-3 hover:text-dark-charcoal"
+    v-bind="$attrs"
   >
-    <VIcon :icon-path="chevronIcon" class="-ms-2" />
+    <VIcon :icon-path="chevronIcon" :rtl-flip="true" />
     {{ $t('single-result.back') }}
   </VLink>
 </template>
@@ -17,17 +17,16 @@ import VLink from '~/components/VLink.vue'
 
 import chevronIcon from '~/assets/icons/chevron-left.svg'
 
+/**
+ * This link takes the user from a single result back to the list of all
+ * results. It only appears if the user navigated from the search results.
+ */
 export default defineComponent({
   components: {
     VIcon,
     VLink,
   },
-  props: {
-    path: {
-      type: String,
-      required: true,
-    },
-  },
+  inheritAttrs: false,
   setup() {
     return { chevronIcon }
   },

src/components/meta/VBackToSearchResultsLink.stories.mdx

@@ -0,0 +1,26 @@
+import { Description, Meta, Canvas, Story } from '@storybook/addon-docs'
+
+import VBackToSearchResultsLink from '~/components/VBackToSearchResultsLink.vue'
+
+<Meta
+  title="Components/VBackToSearchResultsLink"
+  component={VBackToSearchResultsLink}
+/>
+
+export const Template = (args) => ({
+  template: `<VBackToSearchResultsLink v-bind="args"/>`,
+  components: { VBackToSearchResultsLink },
+  setup() {
+    return { args }
+  },
+})
+
+# VBackToSearchResultsLink
+
+<Description of={VBackToSearchResultsLink} />
+
+<Canvas>
+  <Story name="Default" args={{ href: '#' }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>

src/layouts/default.vue

@@ -22,7 +22,7 @@
       ]"
     >
       <div v-if="isNewHeaderEnabled" class="main-page min-w-0">
-        <Nuxt class="!px-6" />
+        <Nuxt />
         <VFooter
           :mode="isSearchHeader ? 'content' : 'search'"
           class="border-t border-dark-charcoal-20"

src/locales/scripts/en.json5

@@ -487,7 +487,7 @@
     },
   },
   'single-result': {
-    back: 'Back to search results',
+    back: 'Back to results',
   },
   'image-details': {
     creator: 'by {name}',

src/pages/audio/_id.vue

@@ -1,8 +1,9 @@
 <template>
-  <main class="relative">
-    <div v-if="backToSearchPath" class="w-full p-2">
-      <VBackToSearchResultsLink :path="backToSearchPath" />
+  <main>
+    <div v-if="backToSearchPath" class="w-full py-2 px-2 md:px-6">
+      <VBackToSearchResultsLink :href="backToSearchPath" />
     </div>
+
     <VAudioTrack layout="full" :audio="audio" class="main-track" />
     <div
       class="mx-auto mt-10 flex flex-col gap-10 px-6 lg:mt-16 lg:max-w-5xl lg:gap-16"
@@ -25,6 +26,7 @@ import { AUDIO } from '~/constants/media'
 import type { AudioDetail } from '~/models/media'
 import { useRelatedMediaStore } from '~/stores/media/related-media'
 import { useSingleResultStore } from '~/stores/media/single-result'
+import { useFeatureFlagStore } from '~/stores/feature-flag'
 import { createDetailPageMeta } from '~/utils/og'
 
 import VAudioDetails from '~/components/VAudioDetails/VAudioDetails.vue'
@@ -53,6 +55,11 @@ export default defineComponent({
     const singleResultStore = useSingleResultStore()
     const relatedMediaStore = useRelatedMediaStore()
 
+    const featureFlagStore = useFeatureFlagStore()
+    const isNewHeaderEnabled = computed(() =>
+      featureFlagStore.isOn('new_header')
+    )
+
     const audio = computed(() =>
       singleResultStore.mediaType === AUDIO
         ? (singleResultStore.mediaItem as AudioDetail)
@@ -62,7 +69,13 @@ export default defineComponent({
     const relatedFetchState = computed(() => relatedMediaStore.fetchState)
     const backToSearchPath = computed(() => route.value.meta?.backToSearchPath)
 
-    return { audio, backToSearchPath, relatedMedia, relatedFetchState }
+    return {
+      audio,
+      backToSearchPath,
+      relatedMedia,
+      relatedFetchState,
+      isNewHeaderEnabled,
+    }
   },
   async asyncData({ route, error, app, $pinia }) {
     const audioId = route.params.id

src/pages/image/_id.vue

@@ -1,13 +1,21 @@
 <template>
   <div>
-    <figure class="relative mb-4 w-full bg-dark-charcoal-06 px-6 pt-12">
-      <div
-        v-if="backToSearchPath"
-        class="absolute left-0 top-0 right-0 w-full px-2"
-      >
-        <VBackToSearchResultsLink :path="backToSearchPath" />
-      </div>
+    <div
+      v-if="backToSearchPath"
+      class="w-full py-2 px-2 md:px-6"
+      :class="{ 'bg-dark-charcoal-06': !isNewHeaderEnabled }"
+    >
+      <VBackToSearchResultsLink :href="backToSearchPath" />
+    </div>
 
+    <figure
+      class="relative mb-4 px-6"
+      :class="
+        isNewHeaderEnabled
+          ? 'border-b border-dark-charcoal-20'
+          : 'bg-dark-charcoal-06 pt-4 md:pt-8'
+      "
+    >
       <img
         v-if="!sketchFabUid"
         id="main-image"
@@ -96,6 +104,7 @@ import { IMAGE } from '~/constants/media'
 import type { ImageDetail } from '~/models/media'
 import { useSingleResultStore } from '~/stores/media/single-result'
 import { useRelatedMediaStore } from '~/stores/media/related-media'
+import { useFeatureFlagStore } from '~/stores/feature-flag'
 import { createDetailPageMeta } from '~/utils/og'
 
 import VButton from '~/components/VButton.vue'
@@ -139,6 +148,11 @@ export default defineComponent({
         : null
     )
 
+    const featureFlagStore = useFeatureFlagStore()
+    const isNewHeaderEnabled = computed(() =>
+      featureFlagStore.isOn('new_header')
+    )
+
     const backToSearchPath = computed(() => route.value.meta?.backToSearchPath)
     const hasRelatedMedia = computed(() => relatedMediaStore.media.length > 0)
     const relatedMedia = computed(() => relatedMediaStore.media)
@@ -225,6 +239,7 @@ export default defineComponent({
       onImageError,
       backToSearchPath,
       externalIcon,
+      isNewHeaderEnabled,
     }
   },
   async asyncData({ app, error, route, $pinia }) {

test/locales/ar.json

@@ -52,6 +52,7 @@
   },
   "modal": {
     "close": "قريب",
+    "aria-close": "أغلق النموذج",
     "close-named": "إغلاق {name}"
   },
   "download-button": {

test/playwright/e2e/image-detail.spec.ts

@@ -1,6 +1,7 @@
 import { test, expect, Page } from '@playwright/test'
 
 import { mockProviderApis } from '~~/test/playwright/utils/route'
+import { t } from '~~/test/playwright/utils/navigation'
 
 const goToCustomImagePage = async (page: Page) => {
   // Test in a custom image detail page, it should apply the same for any image.
@@ -37,7 +38,9 @@ test('shows the main image with its title as alt text', async ({ page }) => {
 
 test('does not show back to search results breadcrumb', async ({ page }) => {
   await goToCustomImagePage(page)
-  await expect(page.locator('text="Back to search results"')).not.toBeVisible({
+  await expect(
+    page.locator(`text="${t('single-result.back')}"`)
+  ).not.toBeVisible({
     timeout: 300,
   })
 })

test/playwright/e2e/search-navigation-old.spec.ts

@@ -4,6 +4,7 @@ import {
   goToSearchTerm,
   OLD_HEADER,
   openFilters,
+  t,
 } from '~~/test/playwright/utils/navigation'
 import { mockProviderApis } from '~~/test/playwright/utils/route'
 
@@ -73,7 +74,7 @@ test.describe('back to search results link', () => {
     const url = '/search/?q=galah'
     await page.goto(url)
     await page.locator('a[href^="/image"]').first().click()
-    const link = page.locator('text="Back to search results"')
+    const link = page.locator(`text="${t('single-result.back')}"`)
     await expect(link).toBeVisible()
     await link.click()
     await expect(page).toHaveURL(url)

test/playwright/e2e/search-navigation.spec.ts

@@ -4,6 +4,7 @@ import {
   enableNewHeader,
   goToSearchTerm,
   openFilters,
+  t,
 } from '~~/test/playwright/utils/navigation'
 import { mockProviderApis } from '~~/test/playwright/utils/route'
 import breakpoints from '~~/test/playwright/utils/breakpoints'
@@ -82,7 +83,7 @@ test.describe('search history navigation', () => {
         const url = '/search/?q=galah'
         await page.goto(url)
         await page.locator('a[href^="/image"]').first().click()
-        const link = page.locator('text="Back to search results"')
+        const link = page.locator(`text="${t('single-result.back')}"`)
         await expect(link).toBeVisible()
         await link.click()
         await expect(page).toHaveURL(url)

test/playwright/visual-regression/pages/pages-single-result.spec.ts

@@ -0,0 +1,43 @@
+import { test } from '@playwright/test'
+
+import { removeHiddenOverflow } from '~~/test/playwright/utils/page'
+import breakpoints from '~~/test/playwright/utils/breakpoints'
+import {
+  closeFilters,
+  dismissTranslationBanner,
+  enableNewHeader,
+  goToSearchTerm,
+  isPageDesktop,
+  languageDirections,
+  openFirstResult,
+} from '~~/test/playwright/utils/navigation'
+
+import { supportedMediaTypes } from '~/constants/media'
+
+test.describe.configure({ mode: 'parallel' })
+
+for (const mediaType of supportedMediaTypes) {
+  for (const dir of languageDirections) {
+    test.describe(`${mediaType} ${dir} single-result page snapshots`, () => {
+      breakpoints.describeEvery(({ expectSnapshot }) => {
+        test.beforeEach(async ({ page }) => {
+          await enableNewHeader(page)
+          await goToSearchTerm(page, 'birds', { dir })
+          if (isPageDesktop(page)) await closeFilters(page)
+          await dismissTranslationBanner(page)
+        })
+
+        test(`from search results`, async ({ page }) => {
+          // This will include the "Back to results" link.
+          await openFirstResult(page, mediaType)
+          await removeHiddenOverflow(page)
+          await expectSnapshot(
+            `${mediaType}-${dir}-from-search-results`,
+            page,
+            { fullPage: true }
+          )
+        })
+      })
+    })
+  }
+}