feat: add timeCommitment field to journeyTracks frontmatter schema (#61211)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Kevin Heis <heiskr@users.noreply.github.com>

Author: 3 people

src/frame/lib/frontmatter.ts

@@ -220,6 +220,12 @@ export const schema: Schema = {
             translatable: true,
             description: 'Optional description for the journey track',
           },
+          timeCommitment: {
+            type: 'string',
+            translatable: true,
+            description:
+              'Optional time commitment displayed as metadata for the track (e.g. "2-4 hours")',
+          },
           guides: {
             type: 'array',
             items: {

src/journeys/lib/journey-path-resolver.ts

@@ -34,6 +34,7 @@ export interface JourneyTrack {
   id: string
   title: string
   description?: string
+  timeCommitment?: string
   guides: Array<{
     href: string
     title: string
@@ -50,6 +51,7 @@ type JourneyPage = {
     id: string
     title: string
     description?: string
+    timeCommitment?: string
     guides: Array<{
       href: string
       alternativeNextStep?: string
@@ -329,6 +331,11 @@ export async function resolveJourneyTracks(
           ? await renderContent(track.description, context, { textOnly: true })
           : track.description
 
+      const renderedTimeCommitment =
+        track.timeCommitment && needsRendering(track.timeCommitment)
+          ? await renderContent(track.timeCommitment, context, { textOnly: true })
+          : track.timeCommitment
+
       const guides = (
         await Promise.all(
           track.guides.map(async (guide: { href: string; alternativeNextStep?: string }) => {
@@ -346,6 +353,7 @@ export async function resolveJourneyTracks(
         id: track.id,
         title: renderedTitle,
         description: renderedDescription,
+        timeCommitment: renderedTimeCommitment,
         guides,
       }
     }),

src/journeys/tests/journey-path-resolver.ts

@@ -22,8 +22,15 @@ vi.mock('@/journeys/lib/get-link-data', () => ({
 
 const mockGetLinkData = vi.mocked(getLinkData)
 
+const mockRenderContent = vi.fn(async (content: string, _context?: unknown, _options?: unknown) => {
+  void _context
+  void _options
+  return content
+})
+
 vi.mock('@/content-render/index', () => ({
-  renderContent: async (content: string) => content,
+  renderContent: (content: string, context?: unknown, options?: unknown) =>
+    mockRenderContent(content, context, options),
 }))
 
 vi.mock('@/languages/lib/render-with-fallback', () => ({
@@ -204,6 +211,7 @@ describe('journey-path-resolver', () => {
         id: 'getting_started',
         title: 'Getting started with {% data variables.product.company_short %}',
         description: 'Learn the {% data variables.product.company_short %} basics',
+        timeCommitment: '{% data variables.product.company_short %} 2-4 hours',
         guides: [
           { href: '/enterprise-onboarding/setup' },
           { href: '/enterprise-onboarding/config' },
@@ -213,6 +221,7 @@ describe('journey-path-resolver', () => {
         id: 'advanced',
         title: 'Advanced configuration',
         description: 'Advanced topics for experts',
+        timeCommitment: '4-6 hours',
         guides: [{ href: '/enterprise-onboarding/advanced-setup' }],
       },
     ]
@@ -237,6 +246,27 @@ describe('journey-path-resolver', () => {
       )
     })
 
+    test('propagates timeCommitment and renders Liquid with textOnly like title/description', async () => {
+      mockRenderContent.mockClear()
+      const result = await resolveJourneyTracks(mockJourneyTracks, mockContext)
+
+      // Liquid value passes through the (passthrough) renderer; plain string is unchanged
+      expect(result[0].timeCommitment).toBe('{% data variables.product.company_short %} 2-4 hours')
+      expect(result[1].timeCommitment).toBe('4-6 hours')
+
+      // The Liquid-bearing timeCommitment should be rendered with { textOnly: true },
+      // matching how title/description are rendered.
+      const timeCommitmentCall = mockRenderContent.mock.calls.find(
+        ([content]) => content === '{% data variables.product.company_short %} 2-4 hours',
+      )
+      expect(timeCommitmentCall).toBeDefined()
+      expect(timeCommitmentCall?.[2]).toEqual({ textOnly: true })
+
+      // Plain (non-Liquid) timeCommitment should not be sent through renderContent
+      const plainCall = mockRenderContent.mock.calls.find(([content]) => content === '4-6 hours')
+      expect(plainCall).toBeUndefined()
+    })
+
     test('resolves guide links with proper versioning', async () => {
       const result = await resolveJourneyTracks(mockJourneyTracks, mockContext)
 
@@ -275,6 +305,7 @@ describe('journey-path-resolver', () => {
       const result = await resolveJourneyTracks(trackWithoutDescription, mockContext)
 
       expect(result[0].description).toBeUndefined()
+      expect(result[0].timeCommitment).toBeUndefined()
     })
   })
 

src/landings/components/journey/JourneyLearningTracks.tsx

@@ -31,7 +31,8 @@ export const JourneyLearningTracks = ({ tracks, articlesHeading }: JourneyLearni
         <summary className={styles.trackSummary}>
           <div className={styles.trackHeader}>
             <h2 className="h4 text-bold">{track.title}</h2>
-            <Token text={`${track.guides?.length || 0} articles`} />
+            <Token text={t('articles').replace('{{ number }}', `${track.guides?.length || 0}`)} />
+            {track.timeCommitment && <Token text={track.timeCommitment} />}
           </div>
           <div className={styles.trackDescription}>
             <p>{track.description}</p>