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

dashboard/src/components/EntityDisplayImage.tsx

@@ -15,86 +15,58 @@
  * 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";
 
+interface DisplayImageProps {
+  entity: Record<string, any>;
+  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 fetch(imagePath);
-        const contentType: any = response.headers.get("Content-Type");
-
-        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 })
-        );
-      }
-    };
+}: DisplayImageProps) => {
+  const entityData = { ...entity, isProcess: isProcess };
+
+  const primaryUrl = getEntityIconPath({ entityData }) || "";
+  const fallbackUrl = getEntityIconPath({ entityData, errorUrl: primaryUrl }) || "";
 
-    fetchImagePath();
-  }, []);
+  const handleError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+    const target = e.currentTarget;
+    if (target.src !== fallbackUrl) {
+      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}
+          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
+						sx={{ height: "32px", boxSizing: "border-box" }}
 						renderValue={(v) => SCOPE_LABELS[v as QuickSearchScope]}
 					>
 						<MenuItem value="default">Select All</MenuItem>
@@ -645,11 +646,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",
@@ -686,7 +689,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"
@@ -701,6 +708,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/src/components/SidebarSearchInput.tsx

@@ -0,0 +1,78 @@
+/*
+ * 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
+    sx={{
+      width: "100%",
+      paddingLeft: "8px",
+      display: "flex",
+      alignItems: "center"
+    }}
+    className="sidebar-searchbar"
+  >
+    <InputBase
+      fullWidth
+      sx={{ color: "rgba(0, 0, 0, 0.7)" }}
+      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
+              size="small"
+              onClick={() => onChange("")}
+              edge="end"
+              sx={{ padding: "4px" }}
+            >
+              <ClearIcon fontSize="small" sx={{ color: "rgba(0, 0, 0, 0.4)" }} />
+            </IconButton>
+          )}
+          <img
+            src="/img/sidebar-icons/icon-search.svg"
+            style={{
+              width: "16px",
+              height: "16px",
+              filter: "brightness(0.4)",
+              opacity: 1,
+              marginLeft: "4px"
+            }}
+            alt="Search"
+          />
+        </Stack>
+      }
+    />
+  </Paper>
+);

dashboard/src/components/TreeNodeIcons.tsx

@@ -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>

dashboard/src/components/TreeSkeletonLoader.tsx

@@ -0,0 +1,46 @@
+/*
+ * 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 { Stack } from "@mui/material";
+import SkeletonLoader from "./SkeletonLoader";
+
+const TreeSkeletonLoader = ({ count = 7 }: { count?: number }) => {
+  const treeItemSkeleton = (indentLevel: number, textWidth: string, key: number) => (
+    <Stack key={key} direction="row" alignItems="center" gap="12px" paddingLeft={`${indentLevel * 24}px`}>
+      <SkeletonLoader animation="pulse" variant="rectangular" width={16} height={16} sx={{ borderRadius: "4px", backgroundColor: "rgba(255,255,255,0.08)" }} count={1} />
+      <SkeletonLoader animation="pulse" variant="rectangular" width={textWidth} height={20} sx={{ borderRadius: "4px", backgroundColor: "rgba(255,255,255,0.08)" }} count={1} />
+    </Stack>
+  );
+
+  const allRows = [
+    treeItemSkeleton(0, "80%", 0),
+    treeItemSkeleton(1, "65%", 1),
+    treeItemSkeleton(1, "75%", 2),
+    treeItemSkeleton(2, "50%", 3),
+    treeItemSkeleton(2, "60%", 4),
+    treeItemSkeleton(0, "85%", 5),
+    treeItemSkeleton(1, "70%", 6)
+  ];
+
+  return (
+    <Stack gap="16px" padding="16px 16px" width="100%">
+      {allRows.slice(0, count)}
+    </Stack>
+  );
+};
+
+export default TreeSkeletonLoader;