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

dashboard/src/components/EntityDisplayImage.tsx

@@ -15,89 +15,60 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from "react";
-import { Avatar, Skeleton } from "@mui/material";
+import type { SyntheticEvent } 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
-  });
-
-  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"];
-
-        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 })
-        );
-      }
-    };
+}: DisplayImageProps) => {
+  const entityData = { ...entity, isProcess };
+
+  const primaryUrl = getEntityIconPath({ entityData }) || "";
+  const fallbackUrl = getEntityIconPath({ entityData, errorUrl: primaryUrl }) || "";
 
-    fetchImagePath();
-  }, []);
+  const handleError = (e: SyntheticEvent<HTMLImageElement, Event>) => {
+    const target = e.currentTarget;
+    if (target.dataset.fallbackApplied !== "true") {
+      target.dataset.fallbackApplied = "true";
+      target.onerror = null;
+      target.src = 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={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/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);
 					}}

dashboard/src/components/SidebarSearchInput.tsx

@@ -0,0 +1,73 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { ChangeEvent } from "react";
+import { Paper, InputBase, Stack } from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import { IconButton } from "@components/muiComponents";
+
+interface SidebarSearchInputProps {
+  searchTerm: string;
+  onChange: (value: string) => void;
+  dataCy?: string;
+}
+
+export const SidebarSearchInput: React.FC<SidebarSearchInputProps> = ({
+  searchTerm,
+  onChange,
+  dataCy
+}) => (
+  <Paper
+    className="sidebar-searchbar"
+  >
+    <InputBase
+      fullWidth
+      className="sidebar-searchbar-input"
+      placeholder="Search"
+      inputProps={{ "aria-label": "search" }}
+      value={searchTerm}
+      onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+      data-cy={dataCy}
+      endAdornment={
+        <Stack direction="row" alignItems="center" gap="4px">
+          {searchTerm.length > 0 && (
+            <IconButton
+              aria-label="Clear search"
+              size="small"
+              onClick={() => onChange("")}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onChange("");
+                }
+              }}
+              edge="end"
+              className="sidebar-searchbar-clear-btn"
+            >
+              <ClearIcon fontSize="small" className="sidebar-searchbar-clear-icon" />
+            </IconButton>
+          )}
+          <img
+            src="/img/sidebar-icons/icon-search.svg"
+            className="sidebar-searchbar-icon"
+            alt="Search"
+          />
+        </Stack>
+      }
+    />
+  </Paper>
+);