From d6151f1357a24b326c089fe1e6e50a380277f279 Mon Sep 17 00:00:00 2001
From: Vincent T <vtaylor@microsoft.com>
Date: Wed, 15 May 2024 12:47:46 -0400
Subject: [PATCH] frontend: Add CNCF badge to charts

Signed-off-by: Vincent T <vtaylor@microsoft.com>
---
 app-catalog/src/components/charts/List.tsx | 34 +++++++++++++++++++---
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/app-catalog/src/components/charts/List.tsx b/app-catalog/src/components/charts/List.tsx
index 619cc31..60325fa 100644
--- 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,
@@ -158,25 +159,50 @@ 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 => {
+            console.log('chart', 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" >
+                      {chart.repository.cncf && (
+                        <Tooltip title="CNCF Project">
+                          <CardMedia
+                            image={`https://github.com/cncf/artwork/blob/1e04eb8355adcf8ffd7bb40ff1da098ea80452e3/other/cncf/icon/color/cncf-icon-color.png?raw=true`}
+                            style={{
+                              width: '30px',
+                              alignSelf: 'flex-end',
+                            }}
+                            component="img"
+                          />
+                        </Tooltip>
+                      )}
+                      {chart.official && (
+                        <Tooltip title="Official">
+                          <Icon icon="mdi:shield-check" style={{ fontSize: '2em' }} />
+                        </Tooltip>
+                      )}
+                      {chart.repository.verified_publisher && (
+                        <Tooltip title="Verified Publisher">
+                          <Icon icon="mdi:check-decagram" style={{ fontSize: '2em' }} />
+                        </Tooltip>
+                      )}
+                    </Box>
                   </Box>
                   <CardContent
                     style={{