Factor out HelmChartIcon for better reusability

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/+helm-charts/helm-chart-details.tsx

@@ -20,12 +20,12 @@ import { Tooltip, withStyles } from "@material-ui/core";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import createInstallChartTabInjectable from "../dock/install-chart/create-install-chart-tab.injectable";
 import type { ShowCheckedErrorNotification } from "../notifications";
-import HelmLogoPlaceholder from "./helm-placeholder.svg";
 import type { SingleValue } from "react-select";
 import AbortController from "abort-controller";
 import showCheckedErrorNotificationInjectable from "../notifications/show-checked-error.injectable";
 import type { GetChartDetails } from "./get-char-details.injectable";
 import getChartDetailsInjectable from "./get-char-details.injectable";
+import { HelmChartIcon } from "./icon";
 
 export interface HelmChartDetailsProps {
   chart: HelmChart;
@@ -46,7 +46,6 @@ interface Dependencies {
 
 @observer
 class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Dependencies> {
-  private readonly imgLoadingFailed = observable.set<string>(); // The IDs of the HelmChart instances
   readonly chartVersions = observable.array<HelmChart>();
   readonly selectedChart = observable.box<HelmChart | undefined>();
   readonly readme = observable.box<string | undefined>(undefined);
@@ -119,32 +118,13 @@ class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Depe
     this.props.hideDetails();
   }
 
-  private renderIcon(chart: HelmChart) {
-    const icon = chart.getIcon();
-
-    if (!icon || this.imgLoadingFailed.has(chart.getId())) {
-      return (
-        <div
-          className="intro-logo"
-          dangerouslySetInnerHTML={{ __html: HelmLogoPlaceholder }}
-        />
-      );
-    }
-
-    return (
-      <img
-        className="intro-logo"
-        src={icon}
-        onLoad={evt => evt.currentTarget.classList.add("visible")}
-        onError={() => this.imgLoadingFailed.add(chart.getId())}
-      />
-    );
-  }
-
   renderIntroduction(selectedChart: HelmChart) {
     return (
       <div className="introduction flex align-flex-start">
-        {this.renderIcon(selectedChart)}
+        <HelmChartIcon
+          chart={selectedChart}
+          className="intro-logo"
+        />
         <div className="intro-contents box grow">
           <div className="description flex align-center justify-space-between" data-testid="selected-chart-description">
             {selectedChart.getDescription()}

src/renderer/components/+helm-charts/helm-charts.tsx

@@ -12,13 +12,12 @@ import type { HelmChart } from "../../../common/k8s-api/endpoints/helm-charts.ap
 import { HelmChartDetails } from "./helm-chart-details";
 import { ItemListLayout } from "../item-object-list/list-layout";
 import type { IComputedValue } from "mobx";
-import { observable } from "mobx";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import helmChartsRouteParametersInjectable from "./helm-charts-route-parameters.injectable";
 import type { NavigateToHelmCharts } from "../../../common/front-end-routing/routes/cluster/helm/charts/navigate-to-helm-charts.injectable";
 import navigateToHelmChartsInjectable from "../../../common/front-end-routing/routes/cluster/helm/charts/navigate-to-helm-charts.injectable";
-import HelmLogoPlaceholder from "./helm-placeholder.svg";
+import { HelmChartIcon } from "./icon";
 
 enum columnId {
   name = "name",
@@ -39,8 +38,6 @@ interface Dependencies {
 
 @observer
 class NonInjectedHelmCharts extends Component<Dependencies> {
-  private readonly imgLoadingFailed = observable.set<string>(); // The IDs of the HelmChart instances
-
   componentDidMount() {
     helmChartStore.loadAll();
   }
@@ -80,22 +77,6 @@ class NonInjectedHelmCharts extends Component<Dependencies> {
     this.showDetails(null);
   };
 
-  private renderIcon(chart: HelmChart) {
-    const icon = chart.getIcon();
-
-    if (!icon || this.imgLoadingFailed.has(chart.getId())) {
-      return <div dangerouslySetInnerHTML={{ __html: HelmLogoPlaceholder }} />;
-    }
-
-    return (
-      <img
-        src={icon}
-        onLoad={evt => evt.currentTarget.classList.add("visible")}
-        onError={() => this.imgLoadingFailed.add(chart.getId())}
-      />
-    );
-  }
-
   render() {
     return (
       <SiblingsInTabLayout>
@@ -134,7 +115,7 @@ class NonInjectedHelmCharts extends Component<Dependencies> {
           ]}
           renderTableContents={chart => [
             <figure key="image">
-              {this.renderIcon(chart)}
+              <HelmChartIcon chart={chart} />
             </figure>,
             chart.getName(),
             chart.getDescription(),

src/renderer/components/+helm-charts/icon.tsx

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React, { useState } from "react";
+import type { HelmChart } from "../../../common/k8s-api/endpoints/helm-charts.api";
+import HelmLogoPlaceholder from "./helm-placeholder.svg";
+
+export interface HelmChartIconProps {
+  className?: string;
+  chart: HelmChart;
+}
+
+export const HelmChartIcon = ({
+  chart,
+  className,
+}: HelmChartIconProps) => {
+  const [failedToLoad, setFailedToLoad] = useState(false);
+  const icon = chart.getIcon();
+
+  if (!icon || failedToLoad) {
+    return (
+      <div
+        className={className}
+        dangerouslySetInnerHTML={{
+          __html: HelmLogoPlaceholder,
+        }}
+      />
+    );
+  }
+
+  return (
+    <img
+      className={className}
+      src={icon}
+      onLoad={evt => evt.currentTarget.classList.add("visible")}
+      onError={() => setFailedToLoad(true)}
+    />
+  );
+};