Add Helm charts values schema badge (#3772)

Signed-off-by: Cintia Sanchez Garcia <[email protected]>

web/src/layout/common/PackageCard.tsx

@@ -21,6 +21,7 @@ import CNCF from './badges/CNCF';
 import Deprecated from './badges/Deprecated';
 import Official from './badges/Official';
 import Signed from './badges/Signed';
+import ValuesSchemaBadge from './badges/ValuesSchema';
 import VerifiedPublisher from './badges/VerifiedPublisher';
 import styles from './PackageCard.module.css';
 import PackageCategoryLabel from './PackageCategoryLabel';
@@ -273,6 +274,12 @@ const PackageCard = (props: Props) => {
                 <div className="d-flex flex-row ms-auto">
                   {props.package.deprecated && <Deprecated className="d-inline mt-3 ms-2" />}
                   {(props.package.cncf || props.package.repository.cncf) && <CNCF className="d-inline mt-3 ms-2" />}
+                  {props.package.repository.kind === RepositoryKind.Helm && (
+                    <ValuesSchemaBadge
+                      hasValuesSchema={props.package.hasValuesSchema || false}
+                      className="d-inline mt-3 ms-2"
+                    />
+                  )}
                   <Signed
                     signed={props.package.signed}
                     signatures={props.package.signatures}

web/src/layout/common/badges/ValuesSchema.tsx

@@ -0,0 +1,42 @@
+import { isNull, isUndefined } from 'lodash';
+import { CgListTree } from 'react-icons/cg';
+
+import Badge from './Badge';
+
+interface Props {
+  hasValuesSchema: boolean;
+  className?: string;
+  dropdownAlignment?: 'start' | 'end';
+  noDropdown?: boolean;
+  smallSize?: boolean;
+}
+
+const ValuesSchemaBadge = (props: Props) => {
+  const hasValuesSchema =
+    !isNull(props.hasValuesSchema) && !isUndefined(props.hasValuesSchema) && props.hasValuesSchema;
+
+  return (
+    <Badge
+      title="Values Schema"
+      bgColor="#FCA311"
+      icon={<CgListTree />}
+      active={hasValuesSchema}
+      className={props.className}
+      dropdownAlignment={props.dropdownAlignment}
+      noDropdown={props.noDropdown}
+      smallSize={props.smallSize}
+      popoverContent={
+        <>
+          <div className="fs-6 fw-semibold border-bottom border-1 mb-3 pb-1">Values schema</div>
+
+          <p>
+            This chart {hasValuesSchema ? 'provides' : 'does not provide'} a{' '}
+            <span className="fw-bold">values schema</span>.
+          </p>
+        </>
+      }
+    />
+  );
+};
+
+export default ValuesSchemaBadge;