front/plugins/github-actions: add nicer build status indicator

frontend/packages/core/src/api/types.ts

@@ -1,5 +1,5 @@
 import { ComponentType } from 'react';
 
 export type IconComponent = ComponentType<{
-  fontSize: 'inherit' | 'default' | 'small' | 'large';
+  fontSize?: 'inherit' | 'default' | 'small' | 'large';
 }>;

frontend/packages/plugins/github-actions/src/components/BuildDetailsPage/BuildDetailsPage.tsx

@@ -18,6 +18,7 @@ import {
   Theme,
 } from '@material-ui/core';
 import { RelativeEntityLink } from '@backstage/core';
+import BuildStatusIndicator from '../BuildStatusIndicator';
 
 const useStyles = makeStyles<Theme>(theme => ({
   root: {
@@ -90,7 +91,9 @@ const BuildDetailsPage: FC<Props> = () => {
               <TableCell>
                 <Typography noWrap>Status</Typography>
               </TableCell>
-              <TableCell>{details?.build.status}</TableCell>
+              <TableCell>
+                <BuildStatusIndicator status={details?.build.status} />
+              </TableCell>
             </TableRow>
             <TableRow>
               <TableCell>

frontend/packages/plugins/github-actions/src/components/BuildInfoCard/BuildInfoCard.tsx

@@ -12,6 +12,7 @@ import {
   makeStyles,
   Theme,
 } from '@material-ui/core';
+import BuildStatusIndicator from '../BuildStatusIndicator';
 
 const client = BuildsClient.create('http://localhost:8080');
 
@@ -67,7 +68,9 @@ const BuildInfoCard: FC<{}> = () => {
             <TableCell>
               <Typography noWrap>Status</Typography>
             </TableCell>
-            <TableCell>{build?.status}</TableCell>
+            <TableCell>
+              <BuildStatusIndicator status={build?.status} />
+            </TableCell>
           </TableRow>
         </TableBody>
       </Table>

frontend/packages/plugins/github-actions/src/components/BuildListPage/BuildListPage.tsx

@@ -16,6 +16,7 @@ import {
 import { RelativeEntityLink } from '@backstage/core';
 import { BuildsClient } from '../../apis/builds';
 import { useAsync } from 'react-use';
+import BuildStatusIndicator from '../BuildStatusIndicator';
 
 const client = BuildsClient.create('http://localhost:8080');
 
@@ -68,8 +69,9 @@ const BuildListPage: FC<{}> = () => {
           <TableBody>
             {status.value!.map(build => (
               <TableRow key={build.uri}>
-                {/* TODO: make this an indicating blobby thing */}
-                <TableCell>{build.status}</TableCell>
+                <TableCell>
+                  <BuildStatusIndicator status={build.status} />
+                </TableCell>
                 <TableCell>
                   <Typography>
                     <LongText text={build.branch} max={30} />

frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/BuildStatusIndicator.tsx

@@ -0,0 +1,63 @@
+import React, { FC } from 'react';
+import { makeStyles, Theme } from '@material-ui/core';
+import { BuildStatus } from '../../apis/builds';
+import FailureIcon from '@material-ui/icons/Error';
+import SuccessIcon from '@material-ui/icons/CheckCircle';
+import ProgressIcon from '@material-ui/icons/Autorenew';
+import UnknownIcon from '@material-ui/icons/Help';
+import { IconComponent } from '@backstage/core';
+
+type Props = {
+  status?: BuildStatus;
+};
+
+type StatusStyle = {
+  icon: IconComponent;
+  color: string;
+};
+
+const styles: { [key in BuildStatus]: StatusStyle } = {
+  [BuildStatus.Null]: {
+    icon: UnknownIcon,
+    color: '#f49b20',
+  },
+  [BuildStatus.Success]: {
+    icon: SuccessIcon,
+    color: '#1db855',
+  },
+  [BuildStatus.Failure]: {
+    icon: FailureIcon,
+    color: '#CA001B',
+  },
+  [BuildStatus.Pending]: {
+    icon: UnknownIcon,
+    color: '#5BC0DE',
+  },
+  [BuildStatus.Running]: {
+    icon: ProgressIcon,
+    color: '#BEBEBE',
+  },
+};
+
+const useStyles = makeStyles<Theme, StatusStyle>({
+  icon: style => ({
+    color: style.color,
+  }),
+});
+
+const BuildStatusIndicator: FC<Props> = props => {
+  const { status } = props;
+  const style = (status && styles[status]) || styles[BuildStatus.Null];
+
+  const classes = useStyles(style);
+
+  const IconComponent = style.icon;
+
+  return (
+    <div className={classes.icon}>
+      <IconComponent />
+    </div>
+  );
+};
+
+export default BuildStatusIndicator;

frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/index.ts

@@ -0,0 +1 @@
+export { default } from './BuildStatusIndicator';