🐛 Fetch target images in auth envs

client/src/app/components/KeycloakProvider.tsx

@@ -6,7 +6,7 @@ import { deleteCookie, getCookie, setCookie } from "@app/queries/cookies";
 import { AppPlaceholder } from "./AppPlaceholder";
 import { Flex, FlexItem, Spinner } from "@patternfly/react-core";
 import { ReactKeycloakProvider } from "@react-keycloak/web";
-import React, { Suspense, useEffect } from "react";
+import React, { Suspense } from "react";
 
 interface IKeycloakProviderProps {
   children: React.ReactNode;

client/src/app/components/target-card/hooks/useFetchImageDataUrl.ts

@@ -0,0 +1,50 @@
+import { useState, useEffect } from "react";
+import axios from "axios";
+import DefaultImage from "@app/images/Icon-Red_Hat-Virtual_server_stack-A-Black-RGB.svg";
+import { Target } from "@app/api/models";
+import { FILES } from "@app/api/rest";
+
+const useFetchImageDataUrl = (target: Target) => {
+  const [imageDataUrl, setImageDataUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    const imagePath = target?.image?.id
+      ? `${FILES}/${target?.image.id}`
+      : DefaultImage;
+
+    (async () => {
+      try {
+        const response = await axios.get(imagePath, {
+          headers: {
+            Accept: "application/octet-stream",
+          },
+          responseType: "arraybuffer",
+        });
+        const contentType = response.headers["content-type"];
+
+        let imageData;
+
+        if (contentType === "image/svg+xml") {
+          const text = new TextDecoder().decode(response.data);
+          imageData = `data:${contentType},${encodeURIComponent(text)}`;
+        } else {
+          const base64 = btoa(
+            new Uint8Array(response.data).reduce(
+              (data, byte) => data + String.fromCharCode(byte),
+              ""
+            )
+          );
+          imageData = `data:${contentType};base64,${base64}`;
+        }
+
+        setImageDataUrl(imageData);
+      } catch (error) {
+        console.error("There was an issue fetching the image:", error);
+      }
+    })();
+  }, [target]);
+
+  return imageDataUrl;
+};
+
+export default useFetchImageDataUrl;

client/src/app/components/TargetCard.tsx → client/src/app/components/target-card/target-card.tsx

@@ -1,3 +1,4 @@
+import "./target-card.css";
 import * as React from "react";
 import {
   EmptyState,
@@ -24,14 +25,14 @@
   SelectVariant,
   SelectOptionObject,
 } from "@patternfly/react-core/deprecated";
-import { CubesIcon, GripVerticalIcon } from "@patternfly/react-icons";
+import { GripVerticalIcon } from "@patternfly/react-icons";
 import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
 import { useTranslation } from "react-i18next";
 
-import { KebabDropdown } from "./KebabDropdown";
-import DefaultRulesetIcon from "@app/images/Icon-Red_Hat-Virtual_server_stack-A-Black-RGB.svg";
+import { KebabDropdown } from "../KebabDropdown";
+import DefaultImage from "@app/images/Icon-Red_Hat-Virtual_server_stack-A-Black-RGB.svg";
 import { Target, TargetLabel } from "@app/api/models";
-import "./TargetCard.css";
+import useFetchImageDataUrl from "./hooks/useFetchImageDataUrl";
 
 export interface TargetCardProps {
   item: Target;
@@ -67,6 +68,7 @@
 }) => {
   const { t } = useTranslation();
   const [isCardSelected, setCardSelected] = React.useState(cardSelected);
+  const imageDataUrl = useFetchImageDataUrl(target);
 
   const prevSelectedLabel =
     formLabels?.find((formLabel) => {
@@ -105,24 +107,6 @@
     }
   };
 
-  const getImage = (): React.ComponentType => {
-    let result: React.ComponentType<any> = CubesIcon;
-    const imagePath = target?.image?.id
-      ? `/hub/files/${target?.image.id}`
-      : DefaultRulesetIcon;
-    if (target.image) {
-      result = () => (
-        <img
-          src={imagePath}
-          alt="Card logo"
-          style={{ height: 80, pointerEvents: "none" }}
-        />
-      );
-    }
-
-    return result;
-  };
-
   return (
     <Card
       onClick={handleCardClick}
@@ -176,7 +160,18 @@
           variant={EmptyStateVariant.sm}
           className="select-card__component__empty-state"
         >
-          <EmptyStateIcon icon={getImage()} />
+          <EmptyStateIcon
+            icon={() => (
+              <img
+                src={imageDataUrl || DefaultImage}
+                alt="Card logo"
+                style={{ height: 80, pointerEvents: "none" }}
+                onError={(e) => {
+                  e.currentTarget.src = DefaultImage;
+                }}
+              />
+            )}
+          />
           <Title headingLevel="h4" size="md">
             {target.name}
           </Title>

client/src/app/pages/applications/analysis-wizard/set-targets.tsx

@@ -10,7 +10,7 @@ import {
 import { useTranslation } from "react-i18next";
 import { useFormContext } from "react-hook-form";
 
-import { TargetCard } from "@app/components/TargetCard";
+import { TargetCard } from "@app/components/target-card/target-card";
 import { AnalysisWizardFormValues } from "./schema";
 import { useSetting } from "@app/queries/settings";
 import { useFetchTargets } from "@app/queries/targets";

client/src/app/pages/migration-targets/components/dnd/item.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { TargetCard } from "@app/components/TargetCard";
+import { TargetCard } from "@app/components/target-card/target-card";
 import { useFetchTargets } from "@app/queries/targets";
 
 interface ItemProps {