Merge pull request #17133 from adamdmharvey/adamdmharvey/circleci-avatar-hover

feat(circleci): Add hover to CircleCI avatar icon to show user's name

.changeset/clean-items-draw.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-circleci': patch
+---
+
+Add hover over CircleCI avatar icon to show user name in builds table

plugins/circleci/README.md

@@ -74,4 +74,4 @@ spec:
 ## Limitations
 
 - CircleCI has pretty strict rate limits per token, be careful with opened tabs
-- CircleCI doesn't provide a way to auth by 3rd party (e.g. GitHub) token, nor by calling their OAuth endpoints, which currently stands in the way of better auth integration with Backstage (https://discuss.circleci.com/t/circleci-api-authorization-with-github-token/5356)
+- CircleCI doesn't provide a way to auth by 3rd party (e.g. GitHub) token, nor by calling their OAuth endpoints, which currently stands in the way of better auth integration with Backstage (reference [feature request](https://ideas.circleci.com/api-feature-requests/p/allow-circleci-api-calls-using-github-auth) and [discussion topic](https://discuss.circleci.com/t/circleci-api-authorization-with-github-token/5356))

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

@@ -21,6 +21,7 @@ import {
   Box,
   IconButton,
   makeStyles,
+  Tooltip,
 } from '@material-ui/core';
 import RetryIcon from '@material-ui/icons/Replay';
 import GitHubIcon from '@material-ui/icons/GitHub';
@@ -116,7 +117,13 @@ const SourceInfo = ({ build }: { build: CITableBuildInfo }) => {
 
   return (
     <Box display="flex" alignItems="center" className={classes.root}>
-      <Avatar alt={user.name} src={user.avatarUrl} className={classes.small} />
+      <Tooltip title={user.name ?? user.login}>
+        <Avatar
+          alt={user.name}
+          src={user.avatarUrl}
+          className={classes.small}
+        />
+      </Tooltip>
       <Box>
         <Typography variant="button">{source?.branchName}</Typography>
         <Typography variant="body1">
@@ -217,7 +224,11 @@ const generatedColumns: TableColumn[] = [
       <Link
         to={`https://app.circleci.com/pipelines/workflows/${row?.workflow?.id}`}
       >
-        {row?.workflow?.name}
+        <Box display="flex" alignItems="center">
+          <LaunchIcon fontSize="small" color="disabled" />
+          <Box mr={1} />
+          {row?.workflow?.name}
+        </Box>
       </Link>
     ),
   },