From e075acce2b2467ec2c473358fefee08fb2e0e0fe 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 verified and offical badge to charts

Signed-off-by: Vincent T <vtaylor@microsoft.com>
---
 app-catalog/src/components/charts/List.tsx    | 51 ++++++++++++++++++-
 .../ChartsList.stories.storyshot              | 32 ++++++++++--
 .../src/components/charts/cncf-icon-color.svg | 19 +++++++
 3 files changed, 97 insertions(+), 5 deletions(-)
 create mode 100644 app-catalog/src/components/charts/cncf-icon-color.svg

diff --git a/app-catalog/src/components/charts/List.tsx b/app-catalog/src/components/charts/List.tsx
index 619cc31..c02eb1a 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,
@@ -20,6 +21,7 @@ import { Autocomplete, Pagination } from '@mui/material';
 import { useEffect, useState } from 'react';
 //import { jsonToYAML, yamlToJSON } from '../../helpers';
 import { fetchChartsFromArtifact } from '../../api/charts';
+import CNCFLight from './cncf-icon-color.svg';
 //import { createRelease } from '../../api/releases';
 import { EditorDialog } from './EditorDialog';
 
@@ -168,15 +170,62 @@ export function ChartsList({ fetchCharts = fetchChartsFromArtifact }) {
             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.cncf || chart.repository.cncf) && (
+                        <Tooltip title="CNCF Project">
+                          <Icon
+                            icon="simple-icons:cncf"
+                            style={{
+                              marginLeft: '0.5em',
+                              fontSize: '20px',
+                            }}
+                          />
+                        </Tooltip>
+                      )}
+                      {(chart.official || chart.repository.official) && (
+                        <Tooltip title="Official Chart">
+                          <Icon
+                            icon="mdi:star-circle"
+                            style={{
+                              marginLeft: '0.5em',
+                              fontSize: '22px',
+                            }}
+                          />
+                        </Tooltip>
+                      )}
+                      {chart.repository.verified_publisher && (
+                        <Tooltip title="Verified Publisher">
+                          <Icon
+                            icon="mdi:check-decagram"
+                            style={{
+                              marginLeft: '0.5em',
+                              fontSize: '22px',
+                            }}
+                          />
+                        </Tooltip>
+                      )}
+                    </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
index f833e57..2b3153a 100644
--- 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-color.svg b/app-catalog/src/components/charts/cncf-icon-color.svg
new file mode 100644
index 0000000..3000a4f
--- /dev/null
+++ b/app-catalog/src/components/charts/cncf-icon-color.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="a" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 389 389" style="enable-background:new 0 0 389 389;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0086FF;}
+	.st1{fill:#93EAFF;}
+</style>
+<g>
+	<path class="st0" d="M72.8,250.7h-48v112.6h112.2v-48.4H72.8V250.7z"/>
+	<path class="st0" d="M314.1,251.2v63.7h-64.3v48.4h112.2V250.7h-48.5L314.1,251.2z"/>
+	<path class="st0" d="M24.9,138.6h48.5l-0.5-0.5V74.5h64.3V26H24.9V138.6z"/>
+	<path class="st0" d="M249.9,26v48.4h64.3v64.2h48V26C362.1,26,249.9,26,249.9,26z"/>
+	<path class="st1" d="M243.5,138.6l-64.3-64.2h70.6V26H137.1v48.4l64.3,64.2H243.5z"/>
+	<path class="st1" d="M185.6,250.7h-42.2l53.2,53.2l10.5,11h-70.1v48.4h112.8v-49l-32.1-31.6L185.6,250.7z"/>
+	<path class="st1" d="M314.1,138.6v70l-11.1-11.1l-53.2-53.2V187l31.6,31.6l32.1,32.1h48.5V138.6H314.1L314.1,138.6z"/>
+	<path class="st1" d="M137.1,202.3l-63.8-63.7H24.9v112h48v-70l64.3,64.2V202.3z"/>
+</g>
+</svg>