fix(helm): helm charts view bad icon aspect ratio EE-4451 (#7875)

app/react/components/FallbackImage.tsx

@@ -1,18 +1,15 @@
-import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 
-import { Icon, IconMode, IconSize } from './Icon';
+import { BadgeIcon, BadgeSize } from './BadgeIcon/BadgeIcon';
 
 interface Props {
   // props for the image to load
   src: string; // a link to an external image
   fallbackIcon: string;
   alt?: string;
-  size?: IconSize;
+  size?: BadgeSize;
   className?: string;
-  // additional fallback icon props
-  fallbackMode?: IconMode;
-  fallbackClassName?: string;
+  // additional fallback badge props
   feather?: boolean;
 }
 
@@ -22,22 +19,18 @@ export function FallbackImage({
   alt,
   size,
   className,
-  fallbackMode,
-  fallbackClassName,
   feather,
 }: Props) {
   const [error, setError] = useState(false);
 
-  const classes = clsx(className, { [`icon-${size}`]: size });
-
   useEffect(() => {
     setError(false);
   }, [src]);
 
-  if (!error) {
+  if (!error && src) {
     return (
       <img
-        className={classes}
+        className={className}
         src={src}
         alt={alt}
         onError={() => setError(true)}
@@ -46,13 +39,5 @@ export function FallbackImage({
   }
 
   // fallback icon if there is an error loading the image
-  return (
-    <Icon
-      icon={fallbackIcon}
-      feather={feather}
-      className={fallbackClassName}
-      size={size}
-      mode={fallbackMode}
-    />
-  );
+  return <BadgeIcon icon={fallbackIcon} featherIcon={feather} size={size} />;
 }