frontend: Add CNCF verified and offical badge to charts

Signed-off-by: Vincent T <vtaylor@microsoft.com>
headlamp-k8s · May 22, 2024 · 25e0e5c · 25e0e5c
1 parent 5adae73
commit 25e0e5c
Show file tree

Hide file tree

Showing 4 changed files with 163 additions and 8 deletions.
diff --git a/app-catalog/src/components/charts/List.tsx b/app-catalog/src/components/charts/List.tsx
@@ -1,3 +1,4 @@
+import { Icon } from '@iconify/react';
 import {
   Link as RouterLink,
   Loader,
@@ -20,6 +21,8 @@ import { Autocomplete, Pagination } from '@mui/material';
 import { useEffect, useState } from 'react';
 //import { jsonToYAML, yamlToJSON } from '../../helpers';
 import { fetchChartsFromArtifact } from '../../api/charts';
+import CNCFDark from './cncf-icon-black.svg';
+import CNCFLight from './cncf-icon-color.svg';
 //import { createRelease } from '../../api/releases';
 import { EditorDialog } from './EditorDialog';
 
@@ -104,6 +107,98 @@ export function ChartsList({ fetchCharts = fetchChartsFromArtifact }) {
     );
   }
 
+  const CNCFIcon = (isCNCF: boolean) => {
+    if (isCNCF) {
+      return (
+        <>
+          <Tooltip title="CNCF Project">
+            <CNCFLight style={{ width: '24px', height: '24px' }} />
+          </Tooltip>
+        </>
+      );
+    } else {
+      return (
+        <>
+          <Tooltip title="Non CNCF Project">
+            <CNCFDark style={{ width: '24px', height: '24px' }} />
+          </Tooltip>
+        </>
+      );
+    }
+  };
+
+  const VerifiedIcon = (isVerified: boolean) => {
+    if (isVerified) {
+      return (
+        <>
+          <Tooltip title="Verified Publisher">
+            <Icon
+              icon="mdi:check-decagram"
+              style={{
+                marginLeft: '0.5em',
+                fontSize: '22px',
+                color: 'white',
+                backgroundColor: 'blue',
+              }}
+            />
+          </Tooltip>
+        </>
+      );
+    } else {
+      return (
+        <>
+          <Tooltip title="Non Verified Publisher">
+            <Icon
+              icon="mdi:check-decagram"
+              style={{
+                marginLeft: '0.5em',
+                fontSize: '22px',
+                color: 'black',
+                backgroundColor: 'gray',
+              }}
+            />
+          </Tooltip>
+        </>
+      );
+    }
+  };
+
+  const OfficialIcon = (isOfficial: boolean) => {
+    if (isOfficial) {
+      return (
+        <>
+          <Tooltip title="Official Chart">
+            <Icon
+              icon="mdi:star-circle"
+              style={{
+                marginLeft: '0.5em',
+                fontSize: '22px',
+                color: 'white',
+                backgroundColor: 'green',
+              }}
+            />
+          </Tooltip>
+        </>
+      );
+    } else {
+      return (
+        <>
+          <Tooltip title="Non Official Chart">
+            <Icon
+              icon="mdi:star-circle"
+              style={{
+                marginLeft: '0.5em',
+                fontSize: '22px',
+                color: 'black',
+                backgroundColor: 'gray',
+              }}
+            />
+          </Tooltip>
+        </>
+      );
+    }
+  };
+
   function CategoryForCharts() {
     return (
       <Autocomplete
@@ -158,25 +253,41 @@ export function ChartsList({ fetchCharts = fetchChartsFromArtifact }) {
         ) : charts.length === 0 ? (
           <Box mt={2} mx={2}>
             <Typography variant="h5" component="h2">
-              {`No charts found for ${
-                search ? `search term: ${search}` : `category: ${chartCategory.title}`
-              }`}
+              {`No charts found for ${search ? `search term: ${search}` : `category: ${chartCategory.title}`
+                }`}
             </Typography>
           </Box>
         ) : (
           charts.map(chart => {
             return (
               <Box maxWidth="30%" width="400px" m={1}>
                 <Card>
-                  <Box height="60px" display="flex" alignItems="center" marginTop="15px">
+                  <Box
+                    height="60px"
+                    display="flex"
+                    alignItems="center"
+                    justifyContent="space-between"
+                    marginTop="15px"
+                  >
                     <CardMedia
                       image={`https://artifacthub.io/image/${chart.logo_image_id}`}
                       style={{
                         width: '60px',
                         margin: '1rem',
+                        alignSelf: 'flex-start',
                       }}
                       component="img"
                     />
+                    <Box
+                      display="flex"
+                      alignItems="center"
+                      justifyContent="space-around"
+                      marginRight="10px"
+                    >
+                      {CNCFIcon(chart.repository.cncf)}
+                      {VerifiedIcon(chart.repository.verified_publisher)}
+                      {OfficialIcon(chart.official)}
+                    </Box>
                   </Box>
                   <CardContent
                     style={{

diff --git a/app-catalog/src/components/charts/__snapshots__/ChartsList.stories.storyshot b/app-catalog/src/components/charts/__snapshots__/ChartsList.stories.storyshot
@@ -329,13 +329,25 @@ exports[`Storyshots components/charts/List Some Charts 1`] = `
         class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-bhp9pd-MuiPaper-root-MuiCard-root"
       >
         <div
-          class="MuiBox-root css-1p40ryp"
+          class="MuiBox-root css-tf8c38"
         >
           <img
             class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-o69gx8-MuiCardMedia-root"
             src="https://artifacthub.io/image/0503add5-3fce-4b63-bbf3-b9f649512a86"
-            style="width: 60px; margin: 1rem;"
+            style="width: 60px; margin: 1rem; align-self: flex-start;"
           />
+          <div
+            class="MuiBox-root css-q5lf8z"
+          >
+            <cncf-icon-black.svg
+              aria-label="Non CNCF Project"
+              classname=""
+              data-mui-internal-clone-element="true"
+              style="width: 24px; height: 24px;"
+            />
+            <span />
+            <span />
+          </div>
         </div>
         <div
           class="MuiCardContent-root css-46bh2p-MuiCardContent-root"
@@ -425,13 +437,25 @@ exports[`Storyshots components/charts/List Some Charts 1`] = `
         class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-bhp9pd-MuiPaper-root-MuiCard-root"
       >
         <div
-          class="MuiBox-root css-1p40ryp"
+          class="MuiBox-root css-tf8c38"
         >
           <img
             class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-o69gx8-MuiCardMedia-root"
             src="https://artifacthub.io/image/c711f9f9-28b3-4ee8-98a2-30e00abf9f02"
-            style="width: 60px; margin: 1rem;"
+            style="width: 60px; margin: 1rem; align-self: flex-start;"
           />
+          <div
+            class="MuiBox-root css-q5lf8z"
+          >
+            <cncf-icon-black.svg
+              aria-label="Non CNCF Project"
+              classname=""
+              data-mui-internal-clone-element="true"
+              style="width: 24px; height: 24px;"
+            />
+            <span />
+            <span />
+          </div>
         </div>
         <div
           class="MuiCardContent-root css-46bh2p-MuiCardContent-root"

diff --git a/app-catalog/src/components/charts/cncf-icon-black.svg b/app-catalog/src/components/charts/cncf-icon-black.svg
diff --git a/app-catalog/src/components/charts/cncf-icon-color.svg b/app-catalog/src/components/charts/cncf-icon-color.svg