From b2a5320a4b4b59ae60843cd822973b799ef1c10f Mon Sep 17 00:00:00 2001
From: Woody Rousseau <woodyr@sipios.com>
Date: Thu, 25 Feb 2021 20:12:32 +0100
Subject: [PATCH] Use Breadcrumbs from @backstage/core

---
 .changeset/blue-lemons-reflect.md                  |  7 +++++++
 .../BuildWithStepsPage/BuildWithStepsPage.tsx      | 13 +++++++------
 .../WorkflowRunDetails/WorkflowRunDetails.tsx      | 14 ++++++++------
 .../WorkflowRunDetails/WorkflowRunDetails.tsx      | 13 ++++++-------
 4 files changed, 28 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/blue-lemons-reflect.md

diff --git a/.changeset/blue-lemons-reflect.md b/.changeset/blue-lemons-reflect.md
new file mode 100644
index 0000000000..8b2fc144fd
--- /dev/null
+++ b/.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
diff --git a/plugins/circleci/src/components/BuildWithStepsPage/BuildWithStepsPage.tsx b/plugins/circleci/src/components/BuildWithStepsPage/BuildWithStepsPage.tsx
index 32b82eb206..ca163c194a 100644
--- a/plugins/circleci/src/components/BuildWithStepsPage/BuildWithStepsPage.tsx
+++ b/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
diff --git a/plugins/cloudbuild/src/components/WorkflowRunDetails/WorkflowRunDetails.tsx b/plugins/cloudbuild/src/components/WorkflowRunDetails/WorkflowRunDetails.tsx
index 94c6fa4d25..3879bcbb93 100644
--- a/plugins/cloudbuild/src/components/WorkflowRunDetails/WorkflowRunDetails.tsx
+++ b/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>
diff --git a/plugins/github-actions/src/components/WorkflowRunDetails/WorkflowRunDetails.tsx b/plugins/github-actions/src/components/WorkflowRunDetails/WorkflowRunDetails.tsx
index 8be87ba955..762561582c 100644
--- a/plugins/github-actions/src/components/WorkflowRunDetails/WorkflowRunDetails.tsx
+++ b/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>