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 && (