Handle learning track paths from a different product (github#21776)

* Add trackProduct property

* Fall back to learning track product URL param

* Add product URL param to learning track banner

* Add product URL param to featured track links

* Fix typo :(

* Add product URL param to learning track

* Add multi-product learning track tests

* Re-enable tests with a Code Security learning track

* Re-enable more tests with Code Security learning tracks

* Add more multi-product testing

* Update components/sublanding/LearningTrack.tsx

Co-authored-by: Kevin Heis <[email protected]>

Co-authored-by: Kevin Heis <[email protected]>

Author: rsese

components/article/LearningTrackNav.tsx

@@ -6,7 +6,7 @@ type Props = {
 }
 export function LearningTrackNav({ track }: Props) {
   const { t } = useTranslation('learning_track_nav')
-  const { prevGuide, nextGuide, trackName } = track
+  const { prevGuide, nextGuide, trackName, trackProduct } = track
   return (
     <div
       data-testid="learning-track-nav"
@@ -17,7 +17,7 @@ export function LearningTrackNav({ track }: Props) {
           <>
             <span className="f6 color-text-secondary">{t('prevGuide')}</span>
             <a
-              href={`${prevGuide.href}?learn=${trackName}`}
+              href={`${prevGuide.href}?learn=${trackName}&learnProduct=${trackProduct}`}
               className="text-bold color-text-secondary"
             >
               {prevGuide.title}
@@ -31,7 +31,7 @@ export function LearningTrackNav({ track }: Props) {
           <>
             <span className="f6 color-text-secondary">{t('nextGuide')}</span>
             <a
-              href={`${nextGuide.href}?learn=${trackName}`}
+              href={`${nextGuide.href}?learn=${trackName}&learnProduct=${trackProduct}`}
               className="text-bold color-text-secondary text-right f4"
             >
               {nextGuide.title}

components/context/ArticleContext.tsx

@@ -2,6 +2,7 @@ import { createContext, useContext } from 'react'
 
 export type LearningTrack = {
   trackName?: string
+  trackProduct?: string
   prevGuide?: { href: string; title: string }
   nextGuide?: { href: string; title: string }
 }

components/context/ProductSubLandingContext.tsx

@@ -3,6 +3,7 @@ import pick from 'lodash/pick'
 
 export type FeaturedTrack = {
   trackName: string
+  trackProduct: string
   title: string
   description: string
   guides?: Array<{ href: string; page?: { type: string }; title: string; intro: string }>
@@ -47,14 +48,14 @@ export const getProductSubLandingContextFromRequest = (req: any): ProductSubLand
     title: req.context.productMap[req.context.currentProduct].name,
     featuredTrack: page.featuredTrack
       ? {
-          ...pick(page.featuredTrack, ['title', 'description', 'trackName']),
+          ...pick(page.featuredTrack, ['title', 'description', 'trackName', 'trackProduct']),
           guides: (page.featuredTrack?.guides || []).map((guide: any) => {
             return pick(guide, ['title', 'intro', 'href', 'page.type'])
           }),
         }
       : null,
     learningTracks: (page.learningTracks || []).map((track: any) => ({
-      ...pick(track, ['title', 'description', 'trackName']),
+      ...pick(track, ['title', 'description', 'trackName', 'trackProduct']),
       guides: (track.guides || []).map((guide: any) => {
         return pick(guide, ['title', 'intro', 'href', 'page.type'])
       }),

components/sublanding/LearningTrack.tsx

@@ -33,7 +33,9 @@ export const LearningTrack = ({ track }: Props) => {
           <a
             className="d-inline-flex btn no-wrap mt-3 mt-md-0 flex-items-center flex-justify-center"
             role="button"
-            href={`${track?.guides && track?.guides[0].href}?learn=${track?.trackName}`}
+            href={`${track?.guides && track?.guides[0].href}?learn=${
+              track?.trackName
+            }&learnProduct=${track?.trackProduct}`}
           >
             <span>{t('start')}</span>
             <ArrowRightIcon size={20} className="ml-2" />
@@ -44,7 +46,7 @@ export const LearningTrack = ({ track }: Props) => {
           <div key={guide.href + track?.trackName}>
             <a
               className="Box-row d-flex flex-items-center color-text-primary no-underline"
-              href={`${guide.href}?learn=${track?.trackName}`}
+              href={`${guide.href}?learn=${track?.trackName}&learnProduct=${track?.trackProduct}`}
             >
               <div
                 className="color-bg-tertiary d-inline-flex mr-4 circle flex-items-center flex-justify-center"

components/sublanding/SubLandingHero.tsx

@@ -16,7 +16,7 @@ export const SubLandingHero = () => {
   const guideItems = featuredTrack?.guides?.map((guide) => (
     <li className="px-2 d-flex flex-shrink-0" key={guide.href} style={{ width: cardWidth }}>
       <Link
-        href={`${guide.href}?learn=${featuredTrack.trackName}`}
+        href={`${guide.href}?learn=${featuredTrack.trackName}&learnProduct=${featuredTrack.trackProduct}`}
         className="d-inline-block Box p-5 color-bg-primary color-border-primary no-underline"
       >
         <div className="d-flex flex-justify-between flex-items-center">
@@ -71,7 +71,7 @@ export const SubLandingHero = () => {
                   <Link
                     className="d-inline-flex flex-items-center flex-justify-center btn px-4 py-2 f5 no-underline text-bold"
                     role="button"
-                    href={`${featuredTrack.guides[0].href}?learn=${featuredTrack.trackName}`}
+                    href={`${featuredTrack.guides[0].href}?learn=${featuredTrack.trackName}&learnProduct=${featuredTrack.trackProduct}`}
                   >
                     {t(`start_path`)}
                     <ArrowRightIcon size={20} className="ml-2" />

lib/process-learning-tracks.js

@@ -34,6 +34,7 @@ export default async function processLearningTracks(rawLearningTracks, context)
 
     const learningTrack = {
       trackName: renderedTrackName,
+      trackProduct: context.currentProduct || null,
       title: await renderContent(track.title, context, renderOpts),
       description: await renderContent(track.description, context, renderOpts),
       // getLinkData respects versioning and only returns guides available in the current version;

middleware/learning-track.js

@@ -13,14 +13,24 @@ export default async function learningTrack(req, res, next) {
   const trackName = req.query.learn
   if (!trackName) return noTrack()
 
-  const tracksPerProduct = req.context.site.data['learning-tracks'][req.context.currentProduct]
+  let trackProduct = req.context.currentProduct
+  let tracksPerProduct = req.context.site.data['learning-tracks'][trackProduct]
+
+  // If there are no learning tracks for the current product, try and fall
+  // back to the learning track product set as a URL parameter.  This handles
+  // the case where a learning track has guide paths for a different product
+  // than the current learning track product.
+  if (!tracksPerProduct) {
+    trackProduct = req.query.learnProduct
+    tracksPerProduct = req.context.site.data['learning-tracks'][trackProduct]
+  }
+
   if (!tracksPerProduct) return noTrack()
 
-  const track = req.context.site.data['learning-tracks'][req.context.currentProduct][trackName]
+  const track = req.context.site.data['learning-tracks'][trackProduct][trackName]
   if (!track) return noTrack()
 
-  const currentLearningTrack = { trackName }
-
+  const currentLearningTrack = { trackName, trackProduct }
   const guidePath = getPathWithoutLanguage(getPathWithoutVersion(req.pagePath))
   let guideIndex = track.guides.findIndex((path) => path === guidePath)
 

tests/rendering/learning-tracks.js

@@ -3,9 +3,9 @@ import { jest } from '@jest/globals'
 
 jest.setTimeout(3 * 60 * 1000)
 
-describe.skip('learning tracks', () => {
+describe('learning tracks', () => {
   test('render first track as feature track', async () => {
-    const $ = await getDOM('/en/actions/guides')
+    const $ = await getDOM('/en/code-security/guides')
     expect($('[data-testid=feature-track]')).toHaveLength(1)
     const href = $('[data-testid=feature-track] li a').first().attr('href')
     const found = href.match(/.*\?learn=(.*)/i)
@@ -19,7 +19,7 @@ describe.skip('learning tracks', () => {
   })
 
   test('render other tracks', async () => {
-    const $ = await getDOM('/en/actions/guides')
+    const $ = await getDOM('/en/code-security/guides')
     expect($('[data-testid=learning-track]').length).toBeGreaterThanOrEqual(4)
     $('[data-testid=learning-track]').each((i, trackElem) => {
       const href = $(trackElem).find('.Box-header a').first().attr('href')
@@ -37,16 +37,16 @@ describe.skip('learning tracks', () => {
   })
 })
 
-describe.skip('navigation banner', () => {
+describe('navigation banner', () => {
   test('render navigation banner when url includes correct learning track name', async () => {
     const $ = await getDOM(
-      '/en/actions/guides/setting-up-continuous-integration-using-workflow-templates?learn=continuous_integration'
+      '/en/code-security/security-advisories/creating-a-security-advisory?learn=security_advisories'
     )
     expect($('[data-testid=learning-track-nav]')).toHaveLength(1)
     const $navLinks = $('[data-testid=learning-track-nav] a')
     expect($navLinks).toHaveLength(2)
     $navLinks.each((i, elem) => {
-      expect($(elem).attr('href')).toEqual(expect.stringContaining('?learn=continuous_integration'))
+      expect($(elem).attr('href')).toEqual(expect.stringContaining('?learn=security_advisories'))
     })
   })
 
@@ -62,6 +62,47 @@ describe.skip('navigation banner', () => {
     })
   })
 
+  test('render navigation banner when url belongs to a multi-product learning track', async () => {
+    // This is a `code-security` product learning track and it includes a guide
+    // path that belongs to the `repositories` product.
+    const $ = await getDOM(
+      '/en/repositories/managing-your-repositorys-settings-and-features/enabling-features-for-your-repository/managing-security-and-analysis-settings-for-your-repository?learn=dependabot_alerts&learnProduct=code-security'
+    )
+    expect($('[data-testid=learning-track-nav]')).toHaveLength(1)
+    const $navLinks = $('[data-testid=learning-track-nav] a')
+    expect($navLinks).toHaveLength(2)
+    $navLinks.each((i, elem) => {
+      expect($(elem).attr('href')).toEqual(
+        expect.stringContaining('?learn=dependabot_alerts&learnProduct=code-security')
+      )
+    })
+  })
+
+  test('render navigation banner when url belongs to a learning track and has an incorrect `learnProduct` param', async () => {
+    // This is a `code-security` product learning track so the path should
+    // work as-is and we won't check `learnProduct`.
+    const $ = await getDOM(
+      '/en/code-security/supply-chain-security/managing-vulnerabilities-in-your-projects-dependencies/viewing-and-updating-vulnerable-dependencies-in-your-repository?learn=dependabot_alerts&learnProduct=not_real'
+    )
+    expect($('[data-testid=learning-track-nav]')).toHaveLength(1)
+    const $navLinks = $('[data-testid=learning-track-nav] a')
+    expect($navLinks).toHaveLength(2)
+    $navLinks.each((i, elem) => {
+      expect($(elem).attr('href')).toEqual(
+        expect.stringContaining('?learn=dependabot_alerts&learnProduct=code-security')
+      )
+    })
+  })
+
+  test('does not include banner with multi-product learning track and when url has incorrect `learnProduct` param', async () => {
+    // This is a `code-security` product learning track and it includes a guide
+    // path that belongs to the `repositories` product.
+    const $ = await getDOM(
+      '/en/repositories/managing-your-repositorys-settings-and-features/enabling-features-for-your-repository/managing-security-and-analysis-settings-for-your-repository?learn=dependabot_alerts&learnProduct=not_real'
+    )
+    expect($('[data-testid=learning-track-nav]')).toHaveLength(0)
+  })
+
   test('does not include banner when url does not include `learn` param', async () => {
     const $ = await getDOM(
       '/en/actions/guides/setting-up-continuous-integration-using-workflow-templates'