add breadcrumbs to AutomatedPage component (#49247)

src/automated-pipelines/components/AutomatedPage.tsx

@@ -8,6 +8,7 @@ import { MiniTocs } from 'src/frame/components/ui/MiniTocs'
 import { useAutomatedPageContext } from 'src/automated-pipelines/components/AutomatedPageContext'
 import { ClientSideHighlight } from 'src/frame/components/ClientSideHighlight'
 import { Alert } from 'src/frame/components/ui/Alert'
+import { Breadcrumbs } from 'src/frame/components/page-header/Breadcrumbs'
 
 type Props = {
   children: React.ReactNode
@@ -23,7 +24,14 @@ export const AutomatedPage = ({ children }: Props) => {
 
       <div className="container-xl px-3 px-md-6 my-4">
         <ArticleGridLayout
-          topper={<ArticleTitle>{title}</ArticleTitle>}
+          topper={
+            <>
+              <div className="d-none d-xl-block my-3 mr-auto width-full">
+                <Breadcrumbs />
+              </div>
+              <ArticleTitle>{title}</ArticleTitle>
+            </>
+          }
           intro={
             <>
               {intro && (

src/fixtures/fixtures/content/index.md

@@ -4,6 +4,7 @@ featuredLinks:
   gettingStarted:
     - /get-started/start-your-journey/hello-world
     - /rest
+    - /webhooks
   popular:
     - /get-started
     - /get-started/foo/bar
@@ -31,6 +32,7 @@ children:
   - code-security
   - actions
   - rest
+  - webhooks
   # - account-and-profile
   # - authentication
   # - repositories

src/fixtures/fixtures/content/webhooks/index.md

@@ -0,0 +1,23 @@
+---
+title: Webhooks documentation
+shortTitle: Webhooks
+intro: 'Webhooks can let your integrations take an action in response to events that occur on {% data variables.product.company_short %}.'
+introLinks:
+  reference: /webhooks/webhook-events-and-payloads
+featuredLinks:
+  popular:
+    - /webhooks/webhook-events-and-payloads
+versions:
+  fpt: '*'
+  ghes: '*'
+  ghae: '*'
+  ghec: '*'
+topics:
+  - Webhooks
+children:
+  - /webhook-events-and-payloads
+changelog:
+  label: webhooks
+layout: product-landing
+---
+

src/fixtures/fixtures/content/webhooks/webhook-events-and-payloads.md

@@ -0,0 +1,18 @@
+---
+title: Webhook events and payloads
+intro: Learn about when each webhook event occurs and what the payload contains.
+versions:
+  fpt: '*'
+  ghes: '*'
+  ghec: '*'
+topics:
+  - Webhooks
+shortTitle: Webhook events & payloads
+autogenerated: webhooks
+---
+
+## About webhook events and payloads
+
+HubGit webhook events and payloads.
+
+<!-- Content after this section is automatically generated -->

src/fixtures/tests/playwright-rendering.spec.ts

@@ -301,6 +301,12 @@ test.describe('test nav at different viewports', () => {
     // breadcrumbs show up in rest reference pages
     await page.goto('/rest/actions/artifacts')
     await expect(page.getByTestId('breadcrumbs-in-article')).toBeVisible()
+
+    // breadcrumbs show up in one of the pages that use the AutomatedPage
+    // component (e.g. graphql, audit log, etc.) -- we test the webhooks
+    // reference page here
+    await page.goto('/webhooks/webhook-events-and-payloads')
+    await expect(page.getByTestId('breadcrumbs-in-article')).toBeVisible()
   })
 
   test('large -> x-large viewports - 1012+', async ({ page }) => {

src/landings/tests/featured-links.js

@@ -14,7 +14,7 @@ describe('featuredLinks', () => {
   test('landing page intro links have expected properties', async () => {
     const $ = await getDOM('/en')
     const $featuredLinks = $('[data-testid=article-list] a')
-    expect($featuredLinks).toHaveLength(6)
+    expect($featuredLinks).toHaveLength(7)
     expect($featuredLinks.eq(0).attr('href')).toBe('/en/get-started/start-your-journey/hello-world')
     expect($featuredLinks.eq(0).children('h3').text()).toMatch('Hello World')
     expect($featuredLinks.eq(0).children('p').text()).toMatch('Follow this Hello World exercise')