feat(ui): ui-improvements-helm EE-3476 (#7344)

* feat(ui): helm views ui update EE-3476

app/react/components/FallbackImage.tsx

@@ -0,0 +1,58 @@
+import clsx from 'clsx';
+import { useEffect, useState } from 'react';
+
+import { Icon, IconMode, IconSize } from './Icon';
+
+interface Props {
+  // props for the image to load
+  src: string; // a link to an external image
+  fallbackIcon: string;
+  alt?: string;
+  size?: IconSize;
+  className?: string;
+  // additional fallback icon props
+  fallbackMode?: IconMode;
+  fallbackClassName?: string;
+  feather?: boolean;
+}
+
+export function FallbackImage({
+  src,
+  fallbackIcon,
+  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) {
+    return (
+      <img
+        className={classes}
+        src={src}
+        alt={alt}
+        onError={() => setError(true)}
+      />
+    );
+  }
+
+  // fallback icon if there is an error loading the image
+  return (
+    <Icon
+      icon={fallbackIcon}
+      feather={feather}
+      className={fallbackClassName}
+      size={size}
+      mode={fallbackMode}
+    />
+  );
+}

app/react/components/Icon.tsx

@@ -10,23 +10,27 @@ export interface IconProps {
   featherIcon?: boolean;
 }
 
+export type IconMode =
+  | 'alt'
+  | 'primary'
+  | 'primary-alt'
+  | 'secondary'
+  | 'secondary-alt'
+  | 'warning'
+  | 'warning-alt'
+  | 'danger'
+  | 'danger-alt'
+  | 'success'
+  | 'success-alt';
+
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
 interface Props {
   icon: ReactNode | ComponentType<{ size?: string | number }>;
   feather?: boolean;
   className?: string;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  mode?:
-    | 'alt'
-    | 'primary'
-    | 'primary-alt'
-    | 'secondary'
-    | 'secondary-alt'
-    | 'warning'
-    | 'warning-alt'
-    | 'danger'
-    | 'danger-alt'
-    | 'success'
-    | 'success-alt';
+  size?: IconSize;
+  mode?: IconMode;
 }
 
 export function Icon({ icon, feather, className, mode, size }: Props) {

app/react/components/Svg.tsx

@@ -59,6 +59,7 @@ import gitlab from '@/assets/ico/vendor/gitlab.svg?c';
 import google from '@/assets/ico/vendor/google.svg?c';
 import googlecloud from '@/assets/ico/vendor/googlecloud.svg?c';
 import kubernetes from '@/assets/ico/vendor/kubernetes.svg?c';
+import helm from '@/assets/ico/vendor/helm.svg?c';
 import linode from '@/assets/ico/vendor/linode.svg?c';
 import microsoft from '@/assets/ico/vendor/microsoft.svg?c';
 import nomad from '@/assets/ico/vendor/nomad.svg?c';
@@ -66,6 +67,8 @@ import openldap from '@/assets/ico/vendor/openldap.svg?c';
 import proget from '@/assets/ico/vendor/proget.svg?c';
 import quay from '@/assets/ico/vendor/quay.svg?c';
 
+const placeholder = Placeholder;
+
 export const SvgIcons = {
   automode,
   darkmode,
@@ -96,6 +99,7 @@ export const SvgIcons = {
   memory,
   objectgroup,
   palette,
+  placeholder,
   plug,
   restore,
   restorewindow,
@@ -124,6 +128,7 @@ export const SvgIcons = {
   google,
   googlecloud,
   kubernetes,
+  helm,
   linode,
   microsoft,
   nomad,