Store and render images from Browser local storage

Signed-off-by: Charles Thao <[email protected]>

Author: thaorell

workspaces/frontend/src/app/components/WorkspaceTable.tsx

@@ -652,6 +652,7 @@ const WorkspaceTable = React.forwardRef<WorkspaceTableRef, WorkspaceTableProps>(
                                   imageSrc={kindLogoDict[workspace.workspaceKind.name]}
                                 />
                               }
+                              storageKey={`workspace-kind-logo-${workspace.workspaceKind.name}`}
                             >
                               {(validSrc) => (
                                 <Tooltip content={workspace.workspaceKind.name}>

workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx

@@ -493,6 +493,7 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
                             imageSrc={workspaceKind.icon.url}
                             skeletonWidth="20px"
                             fallback={<ImageFallback imageSrc={workspaceKind.icon.url} />}
+                            storageKey={`workspace-kind-icon-${workspaceKind.name}`}
                           >
                             {(validSrc) => (
                               <img

workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsOverview.tsx

@@ -59,6 +59,7 @@ export const WorkspaceKindDetailsOverview: React.FunctionComponent<
               message="Cannot load icon image"
             />
           }
+          storageKey={`workspace-kind-icon-${workspaceKind.name}`}
         >
           {(validSrc) => <img src={validSrc} alt={workspaceKind.name} style={{ width: '40px' }} />}
         </WithValidImage>
@@ -84,6 +85,7 @@ export const WorkspaceKindDetailsOverview: React.FunctionComponent<
               message="Cannot load logo image"
             />
           }
+          storageKey={`workspace-kind-logo-${workspaceKind.name}`}
         >
           {(validSrc) => <img src={validSrc} alt={workspaceKind.name} style={{ width: '40px' }} />}
         </WithValidImage>

workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindList.tsx

@@ -124,6 +124,7 @@ export const WorkspaceFormKindList: React.FunctionComponent<WorkspaceFormKindLis
                           message="Cannot load logo image"
                         />
                       }
+                      storageKey={`workspace-kind-logo-${kind.name}`}
                     >
                       {(validSrc) => (
                         <img

workspaces/frontend/src/shared/components/WithValidImage.tsx

@@ -1,12 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { Skeleton, SkeletonProps } from '@patternfly/react-core/dist/esm/components/Skeleton';
+import { useBrowserStorage } from 'mod-arch-core';
 
 type WithValidImageProps = {
   imageSrc: string | undefined | null;
   fallback: React.ReactNode;
   children: (validImageSrc: string) => React.ReactNode;
   skeletonWidth?: SkeletonProps['width'];
   skeletonShape?: SkeletonProps['shape'];
+  storageKey?: string;
 };
 
 const DEFAULT_SKELETON_WIDTH = '32px';
@@ -20,10 +22,11 @@ const WithValidImage: React.FC<WithValidImageProps> = ({
   children,
   skeletonWidth = DEFAULT_SKELETON_WIDTH,
   skeletonShape = DEFAULT_SKELETON_SHAPE,
+  storageKey = '',
 }) => {
   const [status, setStatus] = useState<LoadState>('loading');
   const [resolvedSrc, setResolvedSrc] = useState<string>('');
-
+  const [image, setImage] = useBrowserStorage(storageKey, '');
   useEffect(() => {
     let cancelled = false;
 
@@ -32,15 +35,46 @@ const WithValidImage: React.FC<WithValidImageProps> = ({
       return;
     }
 
-    const img = new Image();
-    img.onload = () => !cancelled && (setResolvedSrc(imageSrc), setStatus('valid'));
-    img.onerror = () => !cancelled && setStatus('invalid');
-    img.src = imageSrc;
+    const fetchImage = async () => {
+      // Check if we have a cached base64 data URL
+      if (image.length > 0) {
+        setResolvedSrc(image);
+        setStatus('valid');
+        return;
+      }
+      try {
+        const response = await fetch(imageSrc);
+        const blob = await response.blob();
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          if (!cancelled && reader.result) {
+            const dataUrl = reader.result as string;
+            setResolvedSrc(dataUrl);
+            setStatus('valid');
+            setImage(dataUrl);
+          }
+        };
+        reader.onerror = () => {
+          console.error('Failed to convert image to data URL');
+          if (!cancelled) {
+            setStatus('invalid');
+          }
+        };
+        reader.readAsDataURL(blob);
+      } catch (error) {
+        console.error('Failed to fetch image:', error);
+        if (!cancelled) {
+          setStatus('invalid');
+        }
+      }
+    };
+
+    fetchImage();
 
     return () => {
       cancelled = true;
     };
-  }, [imageSrc]);
+  }, [imageSrc, setImage, image]);
 
   if (status === 'loading') {
     return (