patch: signature display redesign

Signed-off-by: Raul-Cristian Kele <[email protected]>
raulkele · Sep 17, 2023 · 84e0cd9 · 84e0cd9
1 parent b787273
commit 84e0cd9
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 40 deletions.
diff --git a/src/components/Explore/Explore.jsx b/src/components/Explore/Explore.jsx
@@ -220,7 +220,6 @@ function Explore({ searchInputValue }) {
             version={item.latestVersion}
             description={item.description}
             downloads={item.downloads}
-            isSigned={item.isSigned}
             signatureInfo={item.signatureInfo}
             isBookmarked={item.isBookmarked}
             vendor={item.vendor}

diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
@@ -214,7 +214,6 @@ function Home() {
             version={item.latestVersion}
             description={item.description}
             downloads={item.downloads}
-            isSigned={item.isSigned}
             signatureInfo={item.signatureInfo}
             isBookmarked={item.isBookmarked}
             vendor={item.vendor}

diff --git a/src/components/Shared/PreviewCard.jsx b/src/components/Shared/PreviewCard.jsx
@@ -10,7 +10,7 @@ import repocube3 from '../../assets/repocube-3.png';
 import repocube4 from '../../assets/repocube-4.png';
 
 import { isEmpty } from 'lodash';
-import { VulnerabilityIconCheck, SignatureIconCheck } from 'utilities/vulnerabilityAndSignatureCheck';
+import { VulnerabilityIconCheck } from 'utilities/vulnerabilityAndSignatureCheck';
 
 // temporary utility to get image
 const randomIntFromInterval = (min, max) => {
@@ -67,7 +67,7 @@ const useStyles = makeStyles(() => ({
 function PreviewCard(props) {
   const classes = useStyles();
   const navigate = useNavigate();
-  const { name, isSigned, vulnerabilityData, logo } = props;
+  const { name, vulnerabilityData, logo } = props;
 
   const goToDetails = () => {
     navigate(`/image/${encodeURIComponent(name)}`);
@@ -108,7 +108,6 @@ function PreviewCard(props) {
                 </Tooltip>
                 <Stack direction="row" spacing={0.5} sx={{ marginLeft: 'auto', marginRight: 0 }}>
                   <VulnerabilityIconCheck {...vulnerabilityData} />
-                  <SignatureIconCheck isSigned={isSigned} />
                 </Stack>
               </Stack>
             </Grid>

diff --git a/src/components/Shared/RepoCard.jsx b/src/components/Shared/RepoCard.jsx
@@ -28,6 +28,9 @@ import {
 import makeStyles from '@mui/styles/makeStyles';
 import BookmarkIcon from '@mui/icons-material/Bookmark';
 import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
+import { VulnerabilityIconCheck, SignatureIconCheck } from 'utilities/vulnerabilityAndSignatureCheck';
+import { Markdown } from 'utilities/MarkdowntojsxWrapper';
+import filterConstants from 'utilities/filterConstants';
 import { useTheme } from '@emotion/react';
 
 // placeholder images
@@ -36,9 +39,6 @@ import repocube2 from '../../assets/repocube-2.png';
 import repocube3 from '../../assets/repocube-3.png';
 import repocube4 from '../../assets/repocube-4.png';
 
-import { VulnerabilityIconCheck, SignatureIconCheck } from 'utilities/vulnerabilityAndSignatureCheck';
-import { Markdown } from 'utilities/MarkdowntojsxWrapper';
-
 // temporary utility to get image
 const randomIntFromInterval = (min, max) => {
   return Math.floor(Math.random() * (max - min + 1) + min);
@@ -183,7 +183,6 @@ function RepoCard(props) {
     platforms,
     description,
     downloads,
-    isSigned,
     signatureInfo,
     lastUpdated,
     version,
@@ -291,7 +290,22 @@ function RepoCard(props) {
                   <VulnerabilityIconCheck {...vulnerabilityData} className="hide-on-mobile" />
                 </div>
                 <div className="hide-on-mobile">
-                  <SignatureIconCheck isSigned={isSigned} signatureInfo={signatureInfo} className="hide-on-mobile" />
+                  {signatureInfo?.map((s) => s.tool).includes(filterConstants.signatureToolConstants.COSIGN) && (
+                    <SignatureIconCheck
+                      signatureInfo={signatureInfo.filter(
+                        (si) => si.tool == filterConstants.signatureToolConstants.COSIGN
+                      )}
+                    />
+                  )}
+                </div>
+                <div className="hide-on-mobile">
+                  {signatureInfo?.map((s) => s.tool).includes(filterConstants.signatureToolConstants.NOTATION) && (
+                    <SignatureIconCheck
+                      signatureInfo={signatureInfo.filter(
+                        (si) => si.tool == filterConstants.signatureToolConstants.NOTATION
+                      )}
+                    />
+                  )}
                 </div>
               </Stack>
               <Tooltip title={description || 'Description not available'} placement="top">

diff --git a/src/components/Shared/SignatureTooltip.jsx b/src/components/Shared/SignatureTooltip.jsx
@@ -1,19 +1,15 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Typography, Stack } from '@mui/material';
-
 import { isEmpty } from 'lodash';
+import { getStrongestSignature } from 'utilities/vulnerabilityAndSignatureCheck';
 
-function SignatureTooltip({ isSigned, signatureInfo }) {
-  const { tool, isTrusted, author } = !isEmpty(signatureInfo)
-    ? signatureInfo[0]
-    : { tool: 'Unknown', isTrusted: 'Unknown', author: 'Unknown' };
+function SignatureTooltip({ signatureInfo }) {
+  const strongestSignature = useMemo(() => getStrongestSignature(signatureInfo));
 
   return (
     <Stack direction="column">
-      <Typography>{isSigned ? 'Verified Signature' : 'Unverified Signature'}</Typography>
-      <Typography>Tool: {tool}</Typography>
-      <Typography>Trusted: {!isEmpty(isTrusted) ? isTrusted : 'Unknown'}</Typography>
-      <Typography>Author: {!isEmpty(author) ? author : 'Unknown'}</Typography>
+      <Typography>Tool: {!isEmpty(strongestSignature) ? strongestSignature.tool : 'Unknown'}</Typography>
+      <Typography>Author: {!isEmpty(strongestSignature) ? strongestSignature.author : 'Unknown'}</Typography>
     </Stack>
   );
 }

diff --git a/src/components/Tag/TagDetails.jsx b/src/components/Tag/TagDetails.jsx
@@ -260,10 +260,7 @@ function TagDetails() {
                           vulnerabilitySeverity={imageDetailData.vulnerabiltySeverity}
                           count={imageDetailData.vulnerabilityCount}
                         />
-                        <SignatureIconCheck
-                          isSigned={imageDetailData.isSigned}
-                          signatureInfo={imageDetailData.signatureInfo}
-                        />
+                        <SignatureIconCheck signatureInfo={imageDetailData.signatureInfo} />
                       </Stack>
                     </Stack>
                     <Stack direction="row" alignItems="center" spacing="1rem">

diff --git a/src/host.js b/src/host.js
@@ -1,5 +1,5 @@
 const hostConfig = {
-  auto: true,
+  auto: false,
   default: 'http://localhost:5000'
 };
 

diff --git a/src/utilities/filterConstants.js b/src/utilities/filterConstants.js
@@ -60,6 +60,11 @@ const archFilters = [
   }
 ];
 
-const filterConstants = { osFilters, imageFilters, archFilters };
+const signatureToolConstants = {
+  COSIGN: 'cosign',
+  NOTATION: 'notation'
+};
+
+const filterConstants = { osFilters, imageFilters, archFilters, signatureToolConstants };
 
 export default filterConstants;
diff --git a/src/utilities/vulnerabilityAndSignatureCheck.jsx b/src/utilities/vulnerabilityAndSignatureCheck.jsx
@@ -1,3 +1,4 @@
+import { isEmpty } from 'lodash';
 import React from 'react';
 import {
   NoneVulnerabilityIcon,
@@ -17,9 +18,18 @@ import {
   UnknownVulnerabilityIcon,
   UnknownVulnerabilityChip,
   FailedScanIcon,
-  FailedScanChip
+  FailedScanChip,
+  NotTrustedSignatureIcon,
+  NotTrustedSignatureChip
 } from './vulnerabilityAndSignatureComponents';
 
+const getStrongestSignature = (signatureInfo) => {
+  if (isEmpty(signatureInfo)) return null;
+  const trusted = signatureInfo.find((si) => si.isTrusted);
+  if (!isEmpty(trusted)) return trusted;
+  return signatureInfo[0];
+};
+
 const VulnerabilityIconCheck = ({ vulnerabilitySeverity }) => {
   let result;
   let vulnerabilityStringTitle = '';
@@ -84,20 +94,24 @@ const VulnerabilityChipCheck = ({ vulnerabilitySeverity }) => {
   return result;
 };
 
-const SignatureIconCheck = ({ isSigned, signatureInfo }) => {
-  if (isSigned) {
-    return <VerifiedSignatureIcon signatureInfo={signatureInfo} />;
-  } else {
-    return <UnverifiedSignatureIcon signatureInfo={signatureInfo} />;
-  }
+const SignatureIconCheck = ({ signatureInfo }) => {
+  const strongestSignature = getStrongestSignature(signatureInfo);
+  if (strongestSignature === null) return <UnverifiedSignatureIcon signatureInfo={signatureInfo} />;
+  if (strongestSignature.isTrusted) return <VerifiedSignatureIcon signatureInfo={signatureInfo} />;
+  return <NotTrustedSignatureIcon signatureInfo={signatureInfo} />;
 };
 
-const SignatureChipCheck = ({ isSigned }) => {
-  if (isSigned) {
-    return <VerifiedSignatureChip />;
-  } else {
-    return <UnverifiedSignatureChip />;
-  }
+const SignatureChipCheck = ({ signatureInfo }) => {
+  const strongestSignature = getStrongestSignature(signatureInfo);
+  if (strongestSignature === null) return <UnverifiedSignatureChip signatureInfo={signatureInfo} />;
+  if (strongestSignature.isTrusted) return <VerifiedSignatureChip signatureInfo={signatureInfo} />;
+  return <NotTrustedSignatureChip signatureInfo={signatureInfo} />;
 };
 
-export { VulnerabilityIconCheck, VulnerabilityChipCheck, SignatureIconCheck, SignatureChipCheck };
+export {
+  VulnerabilityIconCheck,
+  VulnerabilityChipCheck,
+  SignatureIconCheck,
+  SignatureChipCheck,
+  getStrongestSignature
+};
diff --git a/src/utilities/vulnerabilityAndSignatureComponents.jsx b/src/utilities/vulnerabilityAndSignatureComponents.jsx
@@ -258,6 +258,28 @@ const UnverifiedSignatureIcon = ({ signatureInfo }) => {
     </Tooltip>
   );
 };
+
+const NotTrustedSignatureIcon = ({ signatureInfo }) => {
+  return (
+    <Tooltip title={<SignatureTooltip isSigned={true} signatureInfo={signatureInfo} />} placement="top">
+      <VerifiedShieldIcon
+        viewBox="0 0 24 24"
+        sx={{
+          backgroundColor: '#FFF3E0',
+          color: '#FB8C00',
+          alignSelf: 'center',
+          padding: '0.2rem',
+          background: '#E8F5E9',
+          borderRadius: '1rem',
+          height: '1.5rem',
+          width: '1.6rem'
+        }}
+        data-testid="verified-icon"
+      />
+    </Tooltip>
+  );
+};
+
 const VerifiedSignatureIcon = ({ signatureInfo }) => {
   return (
     <Tooltip title={<SignatureTooltip isSigned={true} signatureInfo={signatureInfo} />} placement="top">
@@ -291,6 +313,21 @@ const UnverifiedSignatureChip = () => {
     />
   );
 };
+
+const NotTrustedSignatureChip = () => {
+  return (
+    <Chip
+      label="Signature not trusted"
+      sx={{ backgroundColor: '#FFF3E0', color: '#FB8C00', fontSize: '0.8125rem' }}
+      variant="filled"
+      onDelete={() => {
+        return;
+      }}
+      deleteIcon={<NotTrustedSignatureIcon sx={{ color: '#FB8C00!important' }} />}
+    />
+  );
+};
+
 const VerifiedSignatureChip = () => {
   return (
     <Chip
@@ -319,8 +356,10 @@ export {
   HighVulnerabilityChip,
   CriticalVulnerabilityChip,
   UnverifiedSignatureIcon,
+  NotTrustedSignatureIcon,
   VerifiedSignatureIcon,
   UnverifiedSignatureChip,
+  NotTrustedSignatureChip,
   VerifiedSignatureChip,
   FailedScanIcon,
   FailedScanChip