frontend: Add CNCF and verification badge to charts

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={{

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"