refactor(ui/fallback-image): use icon

app/kubernetes/components/helm/helm-templates/HelmIcon.tsx

@@ -0,0 +1,5 @@
+import helm from '@/assets/ico/vendor/helm.svg?c';
+
+import { BadgeIcon } from '@@/BadgeIcon';
+
+export const HelmIcon = <BadgeIcon icon={helm} />;

app/kubernetes/components/helm/helm-templates/helm-templates-list/helm-templates-list-item/helm-templates-list-item.html

@@ -3,7 +3,7 @@
   <div class="blocklist-item-box">
     <!-- helmchart-image -->
     <span class="shrink-0">
-      <fallback-image src="$ctrl.model.icon" fallback-icon="'svg-helm'" class-name="'blocklist-item-logo h-16 w-auto'" size="'3xl'"></fallback-image>
+      <fallback-image src="$ctrl.model.icon" fallback-icon="$ctrl.fallbackIcon" class-name="'blocklist-item-logo h-16 w-auto'" size="'3xl'"></fallback-image>
     </span>
     <!-- helmchart-details -->
     <div class="col-sm-12 helm-template-item-details">

app/kubernetes/components/helm/helm-templates/helm-templates-list/helm-templates-list-item/helm-templates-list-item.js

@@ -1,5 +1,6 @@
 import angular from 'angular';
 import './helm-templates-list-item.css';
+import { HelmIcon } from '../../HelmIcon';
 
 angular.module('portainer.kubernetes').component('helmTemplatesListItem', {
   templateUrl: './helm-templates-list-item.html',
@@ -10,4 +11,7 @@ angular.module('portainer.kubernetes').component('helmTemplatesListItem', {
   transclude: {
     actions: '?templateItemActions',
   },
+  controller() {
+    this.fallbackIcon = HelmIcon;
+  },
 });

app/kubernetes/components/helm/helm-templates/helm-templates.controller.js

@@ -1,7 +1,7 @@
 import _ from 'lodash-es';
 import KubernetesNamespaceHelper from 'Kubernetes/helpers/namespaceHelper';
 import { confirmWebEditorDiscard } from '@@/modals/confirm';
-
+import { HelmIcon } from './HelmIcon';
 export default class HelmTemplatesController {
   /* @ngInject */
   constructor($analytics, $async, $state, $window, $anchorScroll, Authentication, HelmService, KubernetesResourcePoolService, Notifications) {
@@ -15,6 +15,8 @@ export default class HelmTemplatesController {
     this.KubernetesResourcePoolService = KubernetesResourcePoolService;
     this.Notifications = Notifications;
 
+    this.fallbackIcon = HelmIcon;
+
     this.editorUpdate = this.editorUpdate.bind(this);
     this.uiCanExit = this.uiCanExit.bind(this);
     this.installHelmchart = this.installHelmchart.bind(this);

app/kubernetes/components/helm/helm-templates/helm-templates.html

@@ -5,7 +5,7 @@
       <div class="flex">
         <div class="basis-3/4 rounded-[8px] m-2 bg-gray-4 th-highcontrast:bg-black th-highcontrast:text-white th-dark:bg-gray-iron-10 th-dark:text-white">
           <div class="vertical-center p-5">
-            <fallback-image src="$ctrl.state.chart.icon" fallback-icon="'svg-helm'" class-name="'h-16 w-16'" size="'lg'"></fallback-image>
+            <fallback-image src="$ctrl.state.chart.icon" fallback-icon="$ctrl.fallbackIcon" class-name="'h-16 w-16'" size="'lg'"></fallback-image>
             <div class="font-medium ml-4">
               <div class="toolBarTitle text-[24px] mb-2">
                 {{ $ctrl.state.chart.name }}

app/portainer/react/components/index.ts

@@ -118,7 +118,7 @@ export const ngModule = angular
   )
   .component(
     'fallbackImage',
-    r2a(FallbackImage, ['src', 'fallbackIcon', 'alt', 'size', 'className'])
+    r2a(FallbackImage, ['src', 'fallbackIcon', 'alt', 'className'])
   )
   .component('prIcon', r2a(Icon, ['className', 'icon', 'mode', 'size', 'spin']))
   .component(

app/react/components/FallbackImage.tsx

@@ -1,23 +1,14 @@
-import { useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
-
-import { BadgeIcon, BadgeSize } from './BadgeIcon/BadgeIcon';
 
 interface Props {
   // props for the image to load
   src?: string; // a link to an external image
-  fallbackIcon: string;
+  fallbackIcon: ReactNode;
   alt?: string;
-  size?: BadgeSize;
   className?: string;
 }
 
-export function FallbackImage({
+export function FallbackImage({ src, fallbackIcon, alt, className }: Props) {
-  src,
-  fallbackIcon,
-  alt,
-  size,
-  className,
-}: Props) {
   const [error, setError] = useState(false);
 
   useEffect(() => {
@@ -36,5 +27,5 @@ export function FallbackImage({
   }
 
   // fallback icon if there is an error loading the image
-  return <BadgeIcon icon={fallbackIcon} size={size} />;
+  return <>{fallbackIcon}</>;
 }

app/react/portainer/templates/components/TemplateItem.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { Rocket } from 'lucide-react';
 
 import LinuxIcon from '@/assets/ico/linux.svg?c';
 import MicrosoftIcon from '@/assets/ico/vendor/microsoft.svg?c';
@@ -7,6 +8,7 @@ import KubernetesIcon from '@/assets/ico/vendor/kubernetes.svg?c';
 import { Icon } from '@@/Icon';
 import { FallbackImage } from '@@/FallbackImage';
 import { BlocklistItem } from '@@/Blocklist/BlocklistItem';
+import { BadgeIcon } from '@@/BadgeIcon';
 
 import { Platform } from '../../custom-templates/types';
 
@@ -38,9 +40,8 @@ export function TemplateItem({
         <div className="vertical-center min-w-[56px] justify-center">
           <FallbackImage
             src={template.Logo}
-            fallbackIcon="rocket"
+            fallbackIcon={<BadgeIcon icon={Rocket} size="3xl" />}
             className="blocklist-item-logo"
-            size="3xl"
           />
         </div>
         <div className="col-sm-12 flex justify-between flex-wrap">