feat(techdocs-header): Show breadcrumbs on docs page (#2786)

packages/core/src/layout/Header/Header.test.tsx

@@ -58,4 +58,11 @@ describe('<Header/>', () => {
     );
     rendered.getByText('tool');
   });
+
+  it('should have breadcrumb rendered', () => {
+    const rendered = render(
+      wrapInTestApp(<Header title="Title" type="tool" typeLink="/tool" />),
+    );
+    rendered.getAllByText('Title');
+  });
 });

packages/core/src/layout/Header/Header.tsx

@@ -16,9 +16,15 @@
 
 import React, { ReactNode, CSSProperties, FC, useContext } from 'react';
 import { Helmet } from 'react-helmet';
-import { Typography, Tooltip, makeStyles } from '@material-ui/core';
+import {
+  Link,
+  Typography,
+  Tooltip,
+  makeStyles,
+  Breadcrumbs,
+} from '@material-ui/core';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import { BackstageTheme } from '@backstage/theme';
-
 import { PageThemeContext } from '../Page/Page';
 
 const useStyles = makeStyles<BackstageTheme, { backgroundImage: string }>(
@@ -69,6 +75,21 @@ const useStyles = makeStyles<BackstageTheme, { backgroundImage: string }>(
       marginBottom: theme.spacing(1),
       color: theme.palette.bursts.fontColor,
     },
+    breadcrumb: {
+      fontSize: 'calc(15px + 1 * ((100vw - 320px) / 680))',
+      color: theme.palette.bursts.fontColor,
+    },
+    breadcrumbType: {
+      fontSize: 'inherit',
+      opacity: 0.7,
+      marginRight: -theme.spacing(0.3),
+      marginBottom: theme.spacing(0.3),
+    },
+    breadcrumbTitle: {
+      fontSize: 'inherit',
+      marginLeft: -theme.spacing(0.3),
+      marginBottom: theme.spacing(0.3),
+    },
   }),
 );
 
@@ -87,7 +108,8 @@ type Props = {
 
 type TypeFragmentProps = {
   classes: HeaderStyles;
-  type?: Props['title'];
+  pageTitle: string | ReactNode;
+  type?: Props['type'];
   typeLink?: Props['typeLink'];
 };
 
@@ -102,17 +124,32 @@ type SubtitleFragmentProps = {
   subtitle?: Props['subtitle'];
 };
 
-const TypeFragment: FC<TypeFragmentProps> = ({ type, typeLink, classes }) => {
+const TypeFragment: FC<TypeFragmentProps> = ({
+  type,
+  typeLink,
+  classes,
+  pageTitle,
+}) => {
   if (!type) {
     return null;
   }
 
   if (!typeLink) {
-    // TODO: Add breadcrumbs.
     return <Typography className={classes.type}>{type}</Typography>;
   }
 
-  return <Typography className={classes.type}>{type}</Typography>;
+  return (
+    <Breadcrumbs
+      aria-label="breadcrumb"
+      separator={<ChevronRightIcon fontSize="small" />}
+      className={classes.breadcrumb}
+    >
+      <Link href={typeLink} color="inherit">
+        <Typography className={classes.breadcrumbType}> {type}</Typography>
+      </Link>
+      <Typography className={classes.breadcrumbTitle}>{pageTitle}</Typography>
+    </Breadcrumbs>
+  );
 };
 
 const TitleFragment: FC<TitleFragmentProps> = ({
@@ -175,7 +212,12 @@ export const Header: FC<Props> = ({
       <Helmet titleTemplate={titleTemplate} defaultTitle={defaultTitle} />
       <header style={style} className={classes.header}>
         <div className={classes.leftItemsBox}>
-          <TypeFragment classes={classes} type={type} typeLink={typeLink} />
+          <TypeFragment
+            classes={classes}
+            type={type}
+            typeLink={typeLink}
+            pageTitle={pageTitle}
+          />
           <TitleFragment
             classes={classes}
             pageTitle={pageTitle}

plugins/techdocs/src/reader/components/TechDocsPageHeader.test.tsx

@@ -54,7 +54,7 @@ describe('<TechDocsPageHeader />', () => {
         ),
       );
       expect(rendered.container.innerHTML).toContain('header');
-      expect(rendered.getByText('test-site-name')).toBeDefined();
+      expect(rendered.getAllByText('test-site-name')).toHaveLength(2);
       expect(rendered.getByText('test-site-desc')).toBeDefined();
     });
   });

plugins/techdocs/src/reader/components/TechDocsPageHeader.tsx

@@ -48,12 +48,14 @@ export const TechDocsPageHeader = ({
     spec: { owner, lifecycle },
   } = entityMetadataValues || { spec: {} };
 
+  const componentLink = `/catalog/${kind}/${name}`;
+
   const labels = (
     <>
       <HeaderLabel
         label="Component"
         value={
-          <Link style={{ color: '#fff' }} to={`/catalog/${kind}/${name}`}>
+          <Link style={{ color: '#fff' }} to={componentLink}>
             {name}
           </Link>
         }
@@ -85,6 +87,8 @@ export const TechDocsPageHeader = ({
       subtitle={
         siteDescription && siteDescription !== 'None' ? siteDescription : ''
       }
+      type={name}
+      typeLink={componentLink}
     >
       {labels}
     </Header>