Block renderering non http(s):// links via <HelmChartIcon> (#7419)

* Adding HelmChartIcon tests

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* HelmChartIcon refactoring

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fine-tune styles in HelmChartDetails

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding styles to separate module

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Clean up

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Linter fixes

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Updating snapshots

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

---------

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

packages/core/src/renderer/components/+helm-charts/__tests__/icon.test.tsx

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { HelmChartIcon } from "../icon";
+
+const mainImageSrc = "https://example.com/main-picture.jpg";
+const mainPngImageSrc = "https://example.com/main-picture.png";
+const invalidImageSrc = "file://invalid-image-url.png";
+const svgImageSrc = "https://example.com/main-picture.svg";
+
+describe("HelmChartIcon", () => {
+  it("renders the placeholder image by default", () => {
+    render(<HelmChartIcon />);
+    const imageContainer = screen.getByTestId("image-container");
+
+    expect(imageContainer.style.backgroundImage).toContain("data:image/svg+xml");
+  });
+
+  it("renders img tag when image url is valid", () => {
+    render(<HelmChartIcon imageUrl={mainImageSrc} />);
+    const mainImage = screen.getByRole<HTMLImageElement>("img");
+
+    expect(mainImage).toBeInTheDocument();
+  });
+
+  it("renders jpg image when its loaded", () => {
+    render(<HelmChartIcon imageUrl={mainImageSrc} />);
+
+    const imageContainer = screen.getByTestId("image-container");
+    const mainImage = screen.getByRole<HTMLImageElement>("img");
+
+    mainImage.dispatchEvent(new Event("load"));
+    expect(imageContainer.style.backgroundImage).toBe("url(https://example.com/main-picture.jpg)");
+  });
+
+  it("renders png image when its loaded", () => {
+    render(<HelmChartIcon imageUrl={mainPngImageSrc} />);
+
+    const imageContainer = screen.getByTestId("image-container");
+    const mainImage = screen.getByRole<HTMLImageElement>("img");
+    
+    mainImage.dispatchEvent(new Event("load"));
+    expect(imageContainer.style.backgroundImage).toBe("url(https://example.com/main-picture.png)");
+  });
+
+  it("does not render invalid image url", () => {
+    render(<HelmChartIcon imageUrl={invalidImageSrc} />);
+
+    const mainImage = screen.queryByRole<HTMLImageElement>("img");
+
+    expect(mainImage).not.toBeInTheDocument();
+  });
+
+  it("does not render svg image", () => {
+    render(<HelmChartIcon imageUrl={svgImageSrc} />);
+
+    const mainImage = screen.queryByRole<HTMLImageElement>("img");
+
+    expect(mainImage).not.toBeInTheDocument();
+  });
+});

packages/core/src/renderer/components/+helm-charts/helm-chart-details.scss

@@ -5,17 +5,14 @@
 
 .HelmChartDetails {
   .intro-logo {
-    margin-right: $margin * 2;
+    margin-right: calc(var(--margin) * 2);
-    background: var(--helmLogoBackground);
+    background: var(--helmLogoBackground) center no-repeat;
-    border-radius: $radius;
+    border-radius: var(--border-radius);
-    max-width: 150px;
+    padding: var(--padding);
-    max-height: 100px;
-    padding: $padding;
-    box-sizing: content-box;
-  }
-
-  div.intro-logo {
     width: 100px;
+    height: 100px;
+    box-sizing: content-box;
+    background-size: contain;
   }
 
   .Select__option {

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

@@ -71,7 +71,7 @@ class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Depe
     return (
       <div className="introduction flex align-flex-start">
         <HelmChartIcon
-          chart={selectedChart}
+          imageUrl={selectedChart.getIcon()}
           className="intro-logo"
         />
         <div className="intro-contents box grow">

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

@@ -121,7 +121,7 @@ class NonInjectedHelmCharts extends Component<Dependencies> {
           ]}
           renderTableContents={chart => [
             <figure key="image">
-              <HelmChartIcon chart={chart} />
+              <HelmChartIcon imageUrl={chart.getIcon()} />
             </figure>,
             chart.getName(),
             chart.getDescription(),

packages/core/src/renderer/components/+helm-charts/icon.module.css

@@ -0,0 +1,13 @@
+.chartIcon {
+  background-size: cover;
+  background-position: center;
+}
+
+.imageNotLoaded {
+  width: 95%;
+  height: 95%;
+}
+
+.img {
+  opacity: 0;
+}