feat: show only valid svgs

Signed-off-by: Amit Amrutiya <[email protected]>

Author: amitamrutiya

src/custom/CatalogDetail/RightPanel.tsx

@@ -17,11 +17,11 @@ interface RightPanelProps {
   showCaveats: boolean;
   classes: Class[];
   patternsPerUser: PatternsPerUser;
-  onSuggestedPatternClick: (pattern: Pattern) => void;
   handleCopyUrl: (type: string, name: string, id: string) => void;
-  fontFamily?: string;
+  onSuggestedPatternClick: (pattern: Pattern) => void;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   useGetUserProfileByIdQuery: any;
+  fontFamily?: string;
 }
 
 const RightPanel: React.FC<RightPanelProps> = ({

src/custom/CatalogDetail/TechnologySection.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { ListItemIcon } from '../../base';
 import { useTheme } from '../../theme';
 import CollapsibleSection from './CollapsibleSection';
@@ -16,15 +16,35 @@ const TechnologySection: React.FC<TechnologySectionProps> = ({
   technologies
 }) => {
   const [openTechnologies, setOpenTechnologies] = useState(true);
-
+  const [validTechnologies, setValidTechnologies] = useState<string[]>([]);
   const theme = useTheme();
 
+  useEffect(() => {
+    // Function to check if SVG exists
+    const validateTechnologies = async () => {
+      const validTechs = await Promise.all(
+        technologies.map(async (tech) => {
+          const svg_path = `/${technologySVGPath}/${tech.toLowerCase()}/${technologySVGSubpath}/${tech.toLowerCase()}-color.svg`;
+          try {
+            const response = await fetch(svg_path);
+            return response.ok ? tech : null;
+          } catch {
+            return null;
+          }
+        })
+      );
+      setValidTechnologies(validTechs.filter((tech): tech is string => tech !== null));
+    };
+
+    validateTechnologies();
+  }, [technologies, technologySVGPath, technologySVGSubpath]);
+
   const renderTechnologyItem = (item: string, index: number) => {
     const svg_path = `${technologySVGPath}/${item.toLowerCase()}/${technologySVGSubpath}/${item.toLowerCase()}-color.svg`;
     return (
       <LabelDiv key={index}>
         <ListItemIcon sx={{ minWidth: '1.5rem', marginRight: 1 }}>
-          <img height="24px" width="24px" src={`/${svg_path}`} alt="technology icon" />
+          <img height="24px" width="24px" src={`/${svg_path}`} alt={`${item} icon`} />
         </ListItemIcon>
         {item}
       </LabelDiv>
@@ -46,7 +66,7 @@ const TechnologySection: React.FC<TechnologySectionProps> = ({
         title="TECHNOLOGY"
         isOpen={openTechnologies}
         onToggle={() => setOpenTechnologies((prev) => !prev)}
-        items={technologies}
+        items={validTechnologies}
         renderItem={renderTechnologyItem}
         emptyState={'No technologies assigned to this design'}
         tooltip={'Technologies used in this design'}

src/custom/CatalogDetail/UserInfo.tsx

@@ -21,7 +21,7 @@ const UserInfo: React.FC<UserInfoProps> = ({ details, showVersion = true, userPr
             target="_blank"
             rel="noopener noreferrer"
           >
-            <span style={{ fontWeight: 'normal' }}>
+            <span style={{ fontWeight: 'normal', fontSize: '1.2rem' }}>
               {userProfile?.first_name} {userProfile?.last_name}
             </span>
           </RedirectLink>