Add Status Icons (#1622)

* add status icons

* removed circle from IconType

* formatted svgs

ui/components/Icon.tsx

@@ -18,6 +18,13 @@ import SkipNextIcon from "@material-ui/icons/SkipNext";
 import SkipPreviousIcon from "@material-ui/icons/SkipPrevious";
 import * as React from "react";
 import styled from "styled-components";
+/*eslint import/no-unresolved: [0]*/
+//@ts-ignore
+import failedSrc from "url:../images/failed.svg";
+//@ts-ignore
+import successSrc from "url:../images/success.svg";
+//@ts-ignore
+import suspendedSrc from "url:../images/suspended.svg";
 // eslint-disable-next-line
 import { colors, spacing } from "../typedefs/styled";
 import Flex from "./Flex";
@@ -41,9 +48,11 @@ export enum IconType {
   RemoveCircleIcon,
   FilterIcon,
   ClearIcon,
-  Circle,
   SearchIcon,
   LogoutIcon,
+  SuccessIcon,
+  FailedIcon,
+  SuspendedIcon,
 }
 
 type Props = {
@@ -107,19 +116,21 @@ function getIcon(i: IconType) {
     case IconType.ClearIcon:
       return ClearIcon;
 
-    case IconType.Circle:
-      // Our version of material UI icons does not have a plain circle.
-      return () => (
-        <svg viewBox="0 0 100 100">
-          <circle cx="50" cy="50" r="45" />
-        </svg>
-      );
     case IconType.SearchIcon:
       return SearchIcon;
 
     case IconType.LogoutIcon:
       return LogoutIcon;
 
+    case IconType.SuccessIcon:
+      return () => <img src={successSrc} />;
+
+    case IconType.FailedIcon:
+      return () => <img src={failedSrc} />;
+
+    case IconType.SuspendedIcon:
+      return () => <img src={suspendedSrc} />;
+
     default:
       break;
   }

ui/components/KubeStatusIndicator.tsx

@@ -29,11 +29,12 @@ export function computeMessage(conditions: Condition[]) {
 function KubeStatusIndicator({ className, conditions }: Props) {
   const ready = computeReady(conditions);
   const readyText = ready ? "Ready" : computeMessage(conditions);
-  const color = ready ? "success" : "alert";
+  const icon =
+    readyText === "Ready" ? IconType.SuccessIcon : IconType.FailedIcon;
 
   return (
     <Flex start className={className} align>
-      <Icon color={color} size="base" type={IconType.Circle} text={readyText} />
+      <Icon size="base" type={icon} text={readyText} />
     </Flex>
   );
 }

ui/components/__tests__/__snapshots__/KubeStatusIndicator.test.tsx.snap

@@ -43,11 +43,10 @@ exports[`KubeStatusIndicator snapshots renders error 1`] = `
   font-weight: 800;
   text-transform: none;
   font-style: normal;
-  color: #BC381D;
 }
 
 .c4 svg {
-  fill: #BC381D !important;
+  fill: !important;
   height: 16px;
   width: 16px;
 }
@@ -66,7 +65,6 @@ exports[`KubeStatusIndicator snapshots renders error 1`] = `
 
 .c4 .c5 {
   margin-left: 4px;
-  color: #BC381D;
 }
 
 .c1 .c3 .c5 {
@@ -80,18 +78,11 @@ exports[`KubeStatusIndicator snapshots renders error 1`] = `
   <div
     className="c2 c3 c4"
   >
-    <svg
-      viewBox="0 0 100 100"
-    >
-      <circle
-        cx="50"
-        cy="50"
-        r="45"
-      />
-    </svg>
+    <img
+      src=""
+    />
     <span
       className="c5 c6"
-      color="alert"
       size="normal"
     >
       There was a problem
@@ -143,11 +134,10 @@ exports[`KubeStatusIndicator snapshots renders success 1`] = `
   font-weight: 800;
   text-transform: none;
   font-style: normal;
-  color: #27AE60;
 }
 
 .c4 svg {
-  fill: #27AE60 !important;
+  fill: !important;
   height: 16px;
   width: 16px;
 }
@@ -166,7 +156,6 @@ exports[`KubeStatusIndicator snapshots renders success 1`] = `
 
 .c4 .c5 {
   margin-left: 4px;
-  color: #27AE60;
 }
 
 .c1 .c3 .c5 {
@@ -180,18 +169,11 @@ exports[`KubeStatusIndicator snapshots renders success 1`] = `
   <div
     className="c2 c3 c4"
   >
-    <svg
-      viewBox="0 0 100 100"
-    >
-      <circle
-        cx="50"
-        cy="50"
-        r="45"
-      />
-    </svg>
+    <img
+      src=""
+    />
     <span
       className="c5 c6"
-      color="success"
       size="normal"
     >
       Ready