Update SonarQube card icons

- If there are no vulnerabilities, show a closed lock.
- If there are no code smells, show a happy face.

Signed-off-by: martincostello <martin@martincostello.com>

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,22 @@ 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} />}