Merge pull request #16471 from martincostello/sonarqube-conditional-icons

Update SonarQube card icons

.changeset/thin-candles-wait.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-sonarqube': patch
+---
+
+Show a more appropriate icon if there are no code smells and/or vulnerabilities.

plugins/sonarqube/src/components/SonarQubeCard/SonarQubeCard.tsx

@@ -23,9 +23,11 @@ import {
 import { Chip, Grid } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import BugReport from '@material-ui/icons/BugReport';
+import Lock from '@material-ui/icons/Lock';
 import LockOpen from '@material-ui/icons/LockOpen';
 import Security from '@material-ui/icons/Security';
 import SentimentVeryDissatisfied from '@material-ui/icons/SentimentVeryDissatisfied';
+import SentimentVerySatisfied from '@material-ui/icons/SentimentVerySatisfied';
 import React, { useMemo } from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import { Percentage } from './Percentage';
@@ -200,14 +202,26 @@ export const SonarQubeCard = (props: {
                 rightSlot={<Rating rating={value.metrics.reliability_rating} />}
               />
               <RatingCard
-                titleIcon={<LockOpen />}
+                titleIcon={
+                  value.metrics.vulnerabilities === '0' ? (
+                    <Lock />
+                  ) : (
+                    <LockOpen />
+                  )
+                }
                 title="Vulnerabilities"
                 link={value.getIssuesUrl('VULNERABILITY')}
                 leftSlot={<Value value={value.metrics.vulnerabilities} />}
                 rightSlot={<Rating rating={value.metrics.security_rating} />}
               />
               <RatingCard
-                titleIcon={<SentimentVeryDissatisfied />}
+                titleIcon={
+                  value.metrics.code_smells === '0' ? (
+                    <SentimentVerySatisfied />
+                  ) : (
+                    <SentimentVeryDissatisfied />
+                  )
+                }
                 title="Code Smells"
                 link={value.getIssuesUrl('CODE_SMELL')}
                 leftSlot={<Value value={value.metrics.code_smells} />}