From 07768e8b9ede09255dd4156add5f27b44d0b36d5 Mon Sep 17 00:00:00 2001
From: alde <r.dybeck@gmail.com>
Date: Mon, 19 Apr 2021 12:22:51 -0400
Subject: [PATCH] use theme colors for trend icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Fredrik Adelöw <freben@gmail.com>
---
 .../src/service/jsoncoverage-types.ts         |  2 +-
 .../src/service/router.ts                     |  6 +----
 plugins/code-coverage/package.json            |  1 +
 .../CoverageHistoryChart.tsx                  | 25 +++++++++++++++----
 4 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/plugins/code-coverage-backend/src/service/jsoncoverage-types.ts b/plugins/code-coverage-backend/src/service/jsoncoverage-types.ts
index f1ef3dd694..34fcf57968 100644
--- a/plugins/code-coverage-backend/src/service/jsoncoverage-types.ts
+++ b/plugins/code-coverage-backend/src/service/jsoncoverage-types.ts
@@ -23,7 +23,7 @@ export type JsonCodeCoverage = {
 
 export type JsonCoverageHistory = {
   entity: EntityName;
-  history: Array<CoverageHistory>;
+  history: Array<AggregateCoverage>;
 };
 
 export type CoverageHistory = {
diff --git a/plugins/code-coverage-backend/src/service/router.ts b/plugins/code-coverage-backend/src/service/router.ts
index 576bc26a31..aba5326f5d 100644
--- a/plugins/code-coverage-backend/src/service/router.ts
+++ b/plugins/code-coverage-backend/src/service/router.ts
@@ -33,11 +33,7 @@ import { aggregateCoverage, CoverageUtils } from './CoverageUtils';
 import { Cobertura } from './converter/cobertura';
 import { Jacoco } from './converter/jacoco';
 import { Converter } from './converter';
-import {
-  EntityRef,
-  parseEntityName,
-  parseEntityRef,
-} from '@backstage/catalog-model';
+import { EntityRef, parseEntityName } from '@backstage/catalog-model';
 
 export interface RouterOptions {
   config: Config;
diff --git a/plugins/code-coverage/package.json b/plugins/code-coverage/package.json
index 47d065a092..e17d894b43 100644
--- a/plugins/code-coverage/package.json
+++ b/plugins/code-coverage/package.json
@@ -30,6 +30,7 @@
     "@backstage/theme": "^0.2.3",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/styles": "^4.11.0",
     "@material-ui/lab": "4.0.0-alpha.45",
     "@types/highlightjs": "^10.1.0",
     "highlight.js": "^10.6.0",
diff --git a/plugins/code-coverage/src/components/CoverageHistoryChart/CoverageHistoryChart.tsx b/plugins/code-coverage/src/components/CoverageHistoryChart/CoverageHistoryChart.tsx
index a7bfeceb19..3e8d9b6387 100644
--- a/plugins/code-coverage/src/components/CoverageHistoryChart/CoverageHistoryChart.tsx
+++ b/plugins/code-coverage/src/components/CoverageHistoryChart/CoverageHistoryChart.tsx
@@ -19,6 +19,7 @@ import {
   Box,
   Card,
   CardContent,
+  makeStyles,
   MenuItem,
   Select,
   Typography,
@@ -42,15 +43,26 @@ import { Alert } from '@material-ui/lab';
 import TrendingDownIcon from '@material-ui/icons/TrendingDown';
 import TrendingUpIcon from '@material-ui/icons/TrendingUp';
 import TrendingFlatIcon from '@material-ui/icons/TrendingFlat';
+import { BackstageTheme } from '@backstage/theme';
+import { ClassNameMap } from '@material-ui/styles';
 
 type Coverage = 'line' | 'branch';
 
-const getTrendIcon = (trend: number) => {
+const useStyles = makeStyles<BackstageTheme>(theme => ({
+  trendDown: {
+    color: theme.palette.status.warning,
+  },
+  trendUp: {
+    color: theme.palette.status.ok,
+  },
+}));
+
+const getTrendIcon = (trend: number, classes: ClassNameMap) => {
   switch (true) {
     case trend > 0:
-      return <TrendingUpIcon style={{ color: 'green' }} />;
+      return <TrendingUpIcon className={classes.trendUp} />;
     case trend < 0:
-      return <TrendingDownIcon style={{ color: 'red' }} />;
+      return <TrendingDownIcon className={classes.trendDown} />;
     case trend === 0:
     default:
       return <TrendingFlatIcon />;
@@ -72,11 +84,14 @@ export const CoverageHistoryChart = () => {
         name: entity.metadata.name,
       }),
   );
+  const classes = useStyles();
 
   if (loadingHistory) {
     return <Progress />;
   } else if (errorHistory) {
     return <Alert severity="error">{errorHistory.message}</Alert>;
+  } else if (!valueHistory) {
+    return <Alert severity="warning">No history found.</Alert>;
   }
 
   if (!valueHistory.history.length) {
@@ -123,7 +138,7 @@ export const CoverageHistoryChart = () => {
           </Box>
           <Box px={6} display="flex">
             <Box display="flex" mr={4}>
-              {getTrendIcon(lineTrend)}
+              {getTrendIcon(lineTrend, classes)}
               <Typography>
                 Current line: {latestCoverage.line.percentage}%<br />(
                 {Math.floor(lineTrend)}% change over{' '}
@@ -131,7 +146,7 @@ export const CoverageHistoryChart = () => {
               </Typography>
             </Box>
             <Box display="flex">
-              {getTrendIcon(branchTrend)}
+              {getTrendIcon(branchTrend, classes)}
               <Typography>
                 Current branch: {latestCoverage.branch.percentage}%<br />(
                 {Math.floor(branchTrend)}% change over{' '}