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

Author: Brijesh619

dashboard/public/img/sidebar-icons/icon-business-metadata.svg

@@ -15,8 +15,7 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from "react";
-import { Avatar, Skeleton } from "@mui/material";
+import { Avatar } from "@mui/material";
 import { getEntityIconPath } from "../utils/Utils";
 
 const DisplayImage = ({
@@ -26,75 +25,40 @@ const DisplayImage = ({
   avatarDisplay,
   isProcess
 }: any) => {
-  const [imageUrl, setImageUrl] = useState<any>(null);
-  const [checkEntityImage, setCheckEntityImage] = useState<any>({
-    [entity.guid]: false
-  });
+  const entityData = { ...entity, isProcess: isProcess };
+  
+  const primaryUrl = getEntityIconPath({ entityData }) || "";
+  const fallbackUrl = getEntityIconPath({ entityData, errorUrl: primaryUrl }) || "";
 
-  useEffect(() => {
-    const fetchImagePath = async () => {
-      let entityData = { ...entity, ...{ isProcess: isProcess } };
-      let imagePath: any = getEntityIconPath({ entityData: entityData });
-      try {
-        const response = await fetch(imagePath);
-        const contentType: any = response.headers.get("Content-Type");
+  const handleError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+    const target = e.currentTarget;
+    if (target.src !== fallbackUrl) {
+      target.onerror = null;
+      target.src = fallbackUrl;
+    }
+  };
 
-        if (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 })
-        );
-      }
-    };
-
-    fetchImagePath();
-  }, []);
-
-  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}
+          src={primaryUrl}
           alt="Entity Icon"
+          onError={handleError}
         />
       ) : (
         <Avatar
           alt="entityImg"
-          src={imageUrl}
+          src={primaryUrl}
           sx={{ width: width, height: height }}
+          variant="square"
+          imgProps={{ onError: handleError }}
         ></Avatar>
       )}
     </div>
-  ) : (
-    <div>{<Skeleton variant="circular" width={22} height={20} />}</div>
   );
 };
 

dashboard/public/img/sidebar-icons/icon-classifications.svg

@@ -198,24 +198,24 @@ const QuickSearch = () => {
 
 		entities = !isEmpty(searchResults?.entities)
 			? searchResults?.entities?.map((entityDef: any) => {
-					const { name }: { name: string; found: boolean; key: any } =
-						extractKeyValueFromEntity(entityDef);
-					return {
-						title: `${name}`,
-						parent: entityDef.typeName,
-						types: "Entities",
-						entityObj: entityDef
-					};
-				})
+				const { name }: { name: string; found: boolean; key: any } =
+					extractKeyValueFromEntity(entityDef);
+				return {
+					title: `${name}`,
+					parent: entityDef.typeName,
+					types: "Entities",
+					entityObj: entityDef
+				};
+			})
 			: [{ title: "No Entities Found", types: "Entities" }];
 
 		suggestionNames = !isEmpty(suggestions)
 			? suggestions.map((suggestion: any) => {
-					return {
-						title: `${suggestion}`,
-						types: "Suggestions"
-					};
-				})
+				return {
+					title: `${suggestion}`,
+					types: "Suggestions"
+				};
+			})
 			: [{ title: "No Suggestions Found", types: "Suggestions" }];
 
 		setOptions([...entities, ...suggestionNames] as GlobalOptionRow[]);
@@ -400,6 +400,7 @@ const QuickSearch = () => {
 						onChange={handleScopeChange}
 						aria-label="Search scope"
 						displayEmpty
+						sx={{ height: "32px", boxSizing: "border-box" }}
 						renderValue={(v) => SCOPE_LABELS[v as QuickSearchScope]}
 					>
 						<MenuItem value="default">Select All</MenuItem>
@@ -494,14 +495,14 @@ const QuickSearch = () => {
 
 							const { entityObj, types, parent } =
 								typeof option !== "string" &&
-								"entityObj" in option &&
-								"types" in option &&
-								"parent" in option
+									"entityObj" in option &&
+									"types" in option &&
+									"parent" in option
 									? (option as {
-											entityObj: { status?: string; guid?: string };
-											types: string;
-											parent: string;
-										})
+										entityObj: { status?: string; guid?: string };
+										types: string;
+										parent: string;
+									})
 									: { entityObj: null, types: "", parent: "" };
 							const title =
 								typeof option !== "string" && "title" in option
@@ -557,7 +558,7 @@ const QuickSearch = () => {
 											to={{ pathname: href }}
 											color={
 												entityObj?.status &&
-												entityStateReadOnly[entityObj.status]
+													entityStateReadOnly[entityObj.status]
 													? "error"
 													: "primary"
 											}
@@ -567,48 +568,48 @@ const QuickSearch = () => {
 											)}
 											{types === "Entities" && !isEmpty(entityObj)
 												? parts.map((part, index) => (
-														<Stack
-															flexDirection="row"
-															key={index}
-															style={{
-																fontWeight: part.highlight ? "bold" : "regular"
-															}}
-														>
-															{entityObj?.guid !== "-1" && !part.highlight ? (
-																<Link
-																	className="entity-name text-blue text-decoration-none"
-																	style={{
-																		color: "black",
-																		textDecoration: "none",
-																		maxWidth: "100%",
-																		width: "100%"
-																	}}
-																	to={{ pathname: href }}
-																	color={
-																		entityObj?.status &&
+													<Stack
+														flexDirection="row"
+														key={index}
+														style={{
+															fontWeight: part.highlight ? "bold" : "regular"
+														}}
+													>
+														{entityObj?.guid !== "-1" && !part.highlight ? (
+															<Link
+																className="entity-name text-blue text-decoration-none"
+																style={{
+																	color: "black",
+																	textDecoration: "none",
+																	maxWidth: "100%",
+																	width: "100%"
+																}}
+																to={{ pathname: href }}
+																color={
+																	entityObj?.status &&
 																		entityStateReadOnly[entityObj.status]
-																			? "error"
-																			: "primary"
-																	}
-																>
-																	{part.text}
-																</Link>
-															) : (
-																part.text
-															)}
-														</Stack>
-													))
+																		? "error"
+																		: "primary"
+																}
+															>
+																{part.text}
+															</Link>
+														) : (
+															part.text
+														)}
+													</Stack>
+												))
 												: parts.map((part, index) => (
-														<Stack
-															flexDirection="row"
-															key={index}
-															style={{
-																fontWeight: part.highlight ? "bold" : "regular"
-															}}
-														>
-															{part.text}
-														</Stack>
-													))}
+													<Stack
+														flexDirection="row"
+														key={index}
+														style={{
+															fontWeight: part.highlight ? "bold" : "regular"
+														}}
+													>
+														{part.text}
+													</Stack>
+												))}
 											{types === "Entities" &&
 												!isEmpty(entityObj) &&
 												` (${parent})`}
@@ -640,11 +641,13 @@ const QuickSearch = () => {
 								}}
 								className="text-black-default"
 								InputProps={{
-									style: {
-										padding: "1px 10px",
+									sx: {
+										height: "32px",
+										padding: "0 10px !important",
 										borderRadius: "4px",
 										color: "#1a1a1a",
-										backgroundColor: "white"
+										backgroundColor: "white",
+										boxSizing: "border-box"
 									},
 									...params.InputProps,
 									type: "search",
@@ -681,7 +684,11 @@ const QuickSearch = () => {
 						backgroundColor: "#4a90e2 !important",
 						color: "#fff !important",
 						textTransform: "none",
-						fontWeight: 600
+						fontWeight: 600,
+						height: "32px !important",
+						minHeight: "32px !important",
+						maxHeight: "32px !important",
+						boxSizing: "border-box"
 					}}
 					onClick={handleSubmitSearch}
 					aria-label="Run search"
@@ -696,6 +703,10 @@ const QuickSearch = () => {
 						backgroundColor: "white !important",
 						color: "#4a90e2 !important",
 						borderColor: "#dddddd !important",
+						height: "32px !important",
+						minHeight: "32px !important",
+						maxHeight: "32px !important",
+						boxSizing: "border-box",
 						"&:hover": {
 							backgroundColor: "rgba(74, 144, 226, 0.08) !important",
 							color: "#4a90e2 !important"

dashboard/public/img/sidebar-icons/icon-custom-filters.svg

@@ -55,8 +55,9 @@ const TreeNodeIcons = (props: {
   treeName: string;
   updatedData: any;
   isEmptyServicetype: boolean | undefined;
+  isHovered?: boolean;
 }) => {
-  const { node, treeName, updatedData, isEmptyServicetype } = props;
+  const { node, treeName, updatedData, isEmptyServicetype, isHovered } = props;
   const navigate = useNavigate();
   const toastId: any = useRef(null);
   const [expandNode, setExpandNode] = useState<null | HTMLElement>(null);
@@ -189,6 +190,7 @@ const TreeNodeIcons = (props: {
             size="small"
             className="tree-item-more-label"
             data-cy="dropdownMenuButton"
+            style={{ visibility: isHovered || openNode ? "visible" : "hidden" }}
           >
             <MoreHorizOutlinedIcon />
           </IconButton>
@@ -209,6 +211,7 @@ const TreeNodeIcons = (props: {
           className="tree-item-more-label"
           size="small"
           data-cy="dropdownMenuButton"
+          style={{ visibility: isHovered || openNode ? "visible" : "hidden" }}
         >
           <MoreHorizOutlinedIcon className="treeitem-dropdown-toggle" />
         </IconButton>