From 7234da7cd998aa290330ff90efc7a90c8a2b43c3 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Fri, 7 Feb 2020 14:14:42 +0100
Subject: [PATCH] front/plugins/github-actions: add nicer build status
 indicator

---
 frontend/packages/core/src/api/types.ts       |  2 +-
 .../BuildDetailsPage/BuildDetailsPage.tsx     |  5 +-
 .../BuildInfoCard/BuildInfoCard.tsx           |  5 +-
 .../BuildListPage/BuildListPage.tsx           |  6 +-
 .../BuildStatusIndicator.tsx                  | 63 +++++++++++++++++++
 .../components/BuildStatusIndicator/index.ts  |  1 +
 6 files changed, 77 insertions(+), 5 deletions(-)
 create mode 100644 frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/BuildStatusIndicator.tsx
 create mode 100644 frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/index.ts

diff --git a/frontend/packages/core/src/api/types.ts b/frontend/packages/core/src/api/types.ts
index 8462a5a1b9..730d237f38 100644
--- a/frontend/packages/core/src/api/types.ts
+++ b/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';
 }>;
diff --git a/frontend/packages/plugins/github-actions/src/components/BuildDetailsPage/BuildDetailsPage.tsx b/frontend/packages/plugins/github-actions/src/components/BuildDetailsPage/BuildDetailsPage.tsx
index f66fc16927..b21cbab658 100644
--- a/frontend/packages/plugins/github-actions/src/components/BuildDetailsPage/BuildDetailsPage.tsx
+++ b/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>
diff --git a/frontend/packages/plugins/github-actions/src/components/BuildInfoCard/BuildInfoCard.tsx b/frontend/packages/plugins/github-actions/src/components/BuildInfoCard/BuildInfoCard.tsx
index 823b43a21a..88875c8dcf 100644
--- a/frontend/packages/plugins/github-actions/src/components/BuildInfoCard/BuildInfoCard.tsx
+++ b/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>
diff --git a/frontend/packages/plugins/github-actions/src/components/BuildListPage/BuildListPage.tsx b/frontend/packages/plugins/github-actions/src/components/BuildListPage/BuildListPage.tsx
index 47dfb2e8d9..4f2f32d0b6 100644
--- a/frontend/packages/plugins/github-actions/src/components/BuildListPage/BuildListPage.tsx
+++ b/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} />
diff --git a/frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/BuildStatusIndicator.tsx b/frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/BuildStatusIndicator.tsx
new file mode 100644
index 0000000000..642eac350e
--- /dev/null
+++ b/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;
diff --git a/frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/index.ts b/frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/index.ts
new file mode 100644
index 0000000000..de5992cc40
--- /dev/null
+++ b/frontend/packages/plugins/github-actions/src/components/BuildStatusIndicator/index.ts
@@ -0,0 +1 @@
+export { default } from './BuildStatusIndicator';