Use Breadcrumbs from @backstage/core

.changeset/blue-lemons-reflect.md

@@ -0,0 +1,7 @@
+---
+'@backstage/plugin-circleci': patch
+'@backstage/plugin-cloudbuild': patch
+'@backstage/plugin-github-actions': patch
+---
+
+Use Breadcrumbs from @backstage/core rather than material-ui

plugins/circleci/src/components/BuildWithStepsPage/BuildWithStepsPage.tsx

@@ -16,13 +16,12 @@
 
 import React, { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import { InfoCard, Progress, Link } from '@backstage/core';
+import { Breadcrumbs, InfoCard, Progress, Link } from '@backstage/core';
 import { BuildWithSteps, BuildStepAction } from '../../api';
 import {
   Grid,
   Box,
   IconButton,
-  Breadcrumbs,
   Typography,
   Link as MaterialLink,
 } from '@material-ui/core';
@@ -146,10 +145,12 @@ export const BuildWithStepsPage = () => {
 
   return (
     <>
-      <Breadcrumbs aria-label="breadcrumb">
-        <Link to="..">All builds</Link>
-        <Typography>Build details</Typography>
-      </Breadcrumbs>
+      <Box mb={3}>
+        <Breadcrumbs aria-label="breadcrumb">
+          <Link to="..">All builds</Link>
+          <Typography>Build details</Typography>
+        </Breadcrumbs>
+      </Box>
       <Grid container spacing={3} direction="column">
         <Grid item>
           <InfoCard

plugins/cloudbuild/src/components/WorkflowRunDetails/WorkflowRunDetails.tsx

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 import { Entity } from '@backstage/catalog-model';
-import { Link, WarningPanel } from '@backstage/core';
+import { Breadcrumbs, Link, WarningPanel } from '@backstage/core';
 import {
-  Breadcrumbs,
+  Box,
   LinearProgress,
   Link as MaterialLink,
   makeStyles,
@@ -86,10 +86,12 @@ export const WorkflowRunDetails = ({ entity }: { entity: Entity }) => {
 
   return (
     <div className={classes.root}>
-      <Breadcrumbs aria-label="breadcrumb">
-        <Link to="..">Workflow runs</Link>
-        <Typography>Workflow run details</Typography>
-      </Breadcrumbs>
+      <Box mb={3}>
+        <Breadcrumbs aria-label="breadcrumb">
+          <Link to="..">Workflow runs</Link>
+          <Typography>Workflow run details</Typography>
+        </Breadcrumbs>
+      </Box>
       <TableContainer component={Paper} className={classes.table}>
         <Table>
           <TableBody>

plugins/github-actions/src/components/WorkflowRunDetails/WorkflowRunDetails.tsx

@@ -54,9 +54,6 @@ const useStyles = makeStyles<Theme>(theme => ({
   title: {
     padding: theme.spacing(1, 0, 2, 0),
   },
-  breadcrumb: {
-    margin: theme.spacing(0, 0, 3, 0),
-  },
   table: {
     padding: theme.spacing(1),
   },
@@ -186,10 +183,12 @@ export const WorkflowRunDetails = ({ entity }: { entity: Entity }) => {
   }
   return (
     <div className={classes.root}>
-      <Breadcrumbs aria-label="breadcrumb" className={classes.breadcrumb}>
-        <Link to="..">Workflow runs</Link>
-        <Typography>Workflow run details</Typography>
-      </Breadcrumbs>
+      <Box mb={3}>
+        <Breadcrumbs aria-label="breadcrumb">
+          <Link to="..">Workflow runs</Link>
+          <Typography>Workflow run details</Typography>
+        </Breadcrumbs>
+      </Box>
       <TableContainer component={Paper} className={classes.table}>
         <Table>
           <TableBody>