ATLAS-5324: Enhance Collapsed Sidebar with Module Icons, Interactive Tree Tooltips, and Active State Markers

dashboard/src/components/EntityDisplayImage.tsx

@@ -15,89 +15,64 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from "react";
-import { Avatar, Skeleton } from "@mui/material";
+import { useState, useEffect } from "react";
+import { Avatar } from "@mui/material";
 import { getEntityIconPath } from "../utils/Utils";
-import axios from "axios";
+
+interface DisplayImageProps {
+  entity: Record<string, unknown>;
+  width?: string | number;
+  height?: string | number;
+  avatarDisplay?: boolean;
+  isProcess?: boolean;
+}
 
 const DisplayImage = ({
   entity,
   width,
   height,
   avatarDisplay,
-  isProcess
-}: any) => {
-  const [imageUrl, setImageUrl] = useState<any>(null);
-  const [checkEntityImage, setCheckEntityImage] = useState<any>({
-    [entity.guid]: false
-  });
+  isProcess,
+}: DisplayImageProps) => {
+  const entityData = { ...entity, isProcess };
 
-  useEffect(() => {
-    const fetchImagePath = async () => {
-      let entityData = { ...entity, ...{ isProcess: isProcess } };
-      let imagePath: any = getEntityIconPath({ entityData: entityData });
-      try {
-        const response = await axios.get(imagePath, {
-                    responseType: "blob"
-        });
-        const contentType: any = response.headers["content-type"];
+  const primaryUrl = getEntityIconPath({ entityData }) || "";
+  const fallbackUrl =
+    getEntityIconPath({ entityData, errorUrl: primaryUrl }) || "";
 
-        if (contentType && contentType.startsWith("image/")) {
-          let cache = { [entityData.guid]: imagePath };
-          setCheckEntityImage(cache);
-          setImageUrl(getEntityIconPath({ entityData: entityData }));
-        } else {
-          setImageUrl(
-            getEntityIconPath({ entityData: entityData, errorUrl: imagePath })
-          );
-        }
-      } catch (_error) {
-        setImageUrl(
-          getEntityIconPath({ entityData: entityData, errorUrl: imagePath })
-        );
-      }
-    };
+  const [imgSrc, setImgSrc] = useState(primaryUrl);
+
+  useEffect(() => {
+    setImgSrc(primaryUrl);
+  }, [primaryUrl]);
 
-    fetchImagePath();
-  }, []);
+  const handleError = () => {
+    if (imgSrc !== fallbackUrl) {
+      setImgSrc(fallbackUrl);
+    }
+  };
 
-  return imageUrl != undefined ? (
+  return (
     <div className="search-result-table-name-col" data-cy="entityIcon">
-      {checkEntityImage[entity.guid] !== false ? (
-        avatarDisplay == undefined ? (
-          <img
-            className="search-result-table-img"
-            id={entity.guid}
-            data-cy={entity.guid}
-            src={checkEntityImage[entity.guid]}
-            alt="Entity Icon"
-          />
-        ) : (
-          <Avatar
-            alt="entityImg"
-            src={checkEntityImage[entity.guid]}
-            sx={{ width: width, height: height }}
-            variant="square"
-          ></Avatar>
-        )
-      ) : avatarDisplay == undefined ? (
+      {avatarDisplay === undefined ? (
         <img
           className="search-result-table-img"
-          id={entity.guid}
-          data-cy={entity.guid}
-          src={imageUrl}
+          id={entity.guid ? String(entity.guid) : undefined}
+          data-cy={entity.guid ? String(entity.guid) : undefined}
+          src={imgSrc}
           alt="Entity Icon"
+          onError={handleError}
         />
       ) : (
         <Avatar
           alt="entityImg"
-          src={imageUrl}
+          src={imgSrc}
           sx={{ width: width, height: height }}
+          variant="square"
+          imgProps={{ onError: handleError }}
         ></Avatar>
       )}
     </div>
-  ) : (
-    <div>{<Skeleton variant="circular" width={22} height={20} />}</div>
   );
 };
 

dashboard/src/components/GlobalSearch/QuickSearch.tsx

@@ -400,6 +400,7 @@ const QuickSearch = () => {
 						onChange={handleScopeChange}
 						aria-label="Search scope"
 						displayEmpty
+						className="quick-search-select"
 						renderValue={(v) => SCOPE_LABELS[v as QuickSearchScope]}
 					>
 						<MenuItem value="default">Select All</MenuItem>
@@ -575,7 +576,7 @@ const QuickSearch = () => {
 											}
 										>
 											{types === "Entities" && !isEmpty(entityObj) && (
-												<DisplayImage entity={entityObj} />
+												<DisplayImage entity={entityObj || {}} />
 											)}
 											{types === "Entities" && !isEmpty(entityObj)
 												? parts.map((part, index) => (
@@ -645,13 +646,8 @@ const QuickSearch = () => {
 								}}
 								className="text-black-default"
 								InputProps={{
-									style: {
-										padding: "1px 10px",
-										borderRadius: "4px",
-										color: "#1a1a1a",
-										backgroundColor: "white"
-									},
 									...params.InputProps,
+									className: `quick-search-input ${params.InputProps.className || ""}`,
 									type: "search",
 									endAdornment: (
 										<InputAdornment position="end">
@@ -682,12 +678,7 @@ const QuickSearch = () => {
 				<CustomButton
 					variant="contained"
 					size="small"
-					sx={{
-						backgroundColor: "#4a90e2 !important",
-						color: "#fff !important",
-						textTransform: "none",
-						fontWeight: 600
-					}}
+					className="quick-search-btn"
 					onClick={handleSubmitSearch}
 					aria-label="Run search"
 				>
@@ -697,15 +688,7 @@ const QuickSearch = () => {
 				<CustomButton
 					variant="outlined"
 					size="small"
-					sx={{
-						backgroundColor: "white !important",
-						color: "#4a90e2 !important",
-						borderColor: "#dddddd !important",
-						"&:hover": {
-							backgroundColor: "rgba(74, 144, 226, 0.08) !important",
-							color: "#4a90e2 !important"
-						}
-					}}
+					className="quick-search-advanced-btn"
 					onClick={() => {
 						setOpenAdvanceSearch(true);
 					}}