Merge pull request #4639 from adamdmharvey/jenkins-tweak

jenkins: Visual updates

.changeset/three-pumpkins-watch.md

@@ -0,0 +1,7 @@
+---
+'@backstage/plugin-jenkins': patch
+---
+
+- Add Jenkins logo to project page.
+- Move to new Backstage breadcrumb component.
+- Change references of deprecated "Job" terminology to "Project" per [Jenkins Glossary](https://www.jenkins.io/doc/book/glossary/).

plugins/jenkins/README.md

@@ -50,7 +50,7 @@ metadata:
   name: 'your-component'
   description: 'a description'
   annotations:
-    jenkins.io/github-folder: 'folder-name/job-name'
+    jenkins.io/github-folder: 'folder-name/project-name'
 spec:
   type: service
   lifecycle: experimental
@@ -84,5 +84,5 @@ YWRtaW46MTFlYzI1NmU0Mzg1MDFjM2Y1Yzc2Yjc1MWE3ZTQ3YWY4Mw== is the base64 of user a
 
 ## Limitations
 
-- Only works with organization folder jobs backed by GitHub
-- No pagination support currently, limited to 50 jobs - don't run this on a Jenkins with lots of builds
+- Only works with organization folder projects backed by GitHub
+- No pagination support currently, limited to 50 projects - don't run this on a Jenkins with lots of builds

plugins/jenkins/src/components/BuildWithStepsPage/BuildWithStepsPage.tsx

@@ -15,10 +15,10 @@
  */
 import React from 'react';
 import { useParams } from 'react-router-dom';
-import { Content, Link } from '@backstage/core';
+import { Breadcrumbs, Content, Link } from '@backstage/core';
 import {
+  Box,
   Typography,
-  Breadcrumbs,
   Paper,
   TableContainer,
   Table,
@@ -36,7 +36,6 @@ import ExternalLinkIcon from '@material-ui/icons/Launch';
 const useStyles = makeStyles(theme => ({
   root: {
     maxWidth: 720,
-    margin: theme.spacing(2),
   },
   table: {
     padding: theme.spacing(1),
@@ -57,9 +56,10 @@ const BuildWithStepsView = () => {
   return (
     <div className={classes.root}>
       <Breadcrumbs aria-label="breadcrumb">
-        <Link to="../../..">Jobs</Link>
+        <Link to="../../..">Projects</Link>
         <Typography>Run</Typography>
       </Breadcrumbs>
+      <Box m={2} />
       <TableContainer component={Paper} className={classes.table}>
         <Table>
           <TableBody>

plugins/jenkins/src/components/BuildsPage/lib/CITable/CITable.tsx

@@ -16,7 +16,7 @@
 import React from 'react';
 import { Box, IconButton, Link, Typography, Tooltip } from '@material-ui/core';
 import RetryIcon from '@material-ui/icons/Replay';
-import GitHubIcon from '@material-ui/icons/GitHub';
+import JenkinsLogo from '../../../../assets/JenkinsLogo.svg';
 import { generatePath, Link as RouterLink } from 'react-router-dom';
 import { Table, TableColumn } from '@backstage/core';
 import { JenkinsRunStatus } from '../Status';
@@ -231,9 +231,9 @@ export const CITableView = ({
       onChangeRowsPerPage={onChangePageSize}
       title={
         <Box display="flex" alignItems="center">
-          <GitHubIcon />
-          <Box mr={1} />
-          <Typography variant="h6">{projectName}</Typography>
+          <img src={JenkinsLogo} alt="Jenkins logo" height="50px" />
+          <Box mr={2} />
+          <Typography variant="h6">Project: {projectName}</Typography>
         </Box>
       }
       columns={generatedColumns}