pawarprasad123 commented on code in PR #688:
URL: https://github.com/apache/atlas/pull/688#discussion_r3586509501
##########
dashboard/src/views/SideBar/SideBarBody.tsx:
##########
@@ -246,38 +386,87 @@ const SideBarBody = (props: {
backgroundColor: "#034858",
}}
>
- {/* Collapsed sidebar logo */}
+ {/* Collapsed sidebar logo and module icons */}
{!open && (
- <div
- style={{
- width: "100%",
- textAlign: "center",
- paddingLeft: "12px",
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- minHeight: "64px",
- cursor: "pointer",
- boxSizing: "border-box",
- }}
- role="button"
- tabIndex={0}
- aria-label="Atlas home — refresh dashboard"
- onClick={handleAtlasLogoClick}
- onKeyDown={handleAtlasLogoKeyDown}
- data-cy="apache-atlas-logo-collapsed"
+ <Stack
+ alignItems="center"
+ sx={{ width: "100%", flex: 1, minHeight: 0, overflowY: "auto",
overflowX: "hidden", boxSizing: "border-box", pb: "60px" }}
>
- <img
- src={apacheAtlasLogo}
- alt="Apache Atlas logo"
+ <div
style={{
- width: "29px",
- height: "auto",
- maxWidth: "100%",
- display: "block",
+ width: "100%",
+ textAlign: "center",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ minHeight: "64px",
+ cursor: "pointer",
+ boxSizing: "border-box",
+ marginBottom: "1rem",
}}
- />
- </div>
+ role="button"
+ tabIndex={0}
+ aria-label="Atlas home — refresh dashboard"
+ onClick={handleAtlasLogoClick}
+ onKeyDown={handleAtlasLogoKeyDown}
+ data-cy="apache-atlas-logo-collapsed"
+ >
+ <img
+ src={apacheAtlasLogo}
+ alt="Apache Atlas logo"
+ style={{
+ width: "29px",
+ height: "auto",
+ maxWidth: "100%",
+ display: "block",
+ }}
+ />
+ </div>
+
+ {/* Module Icons for Mini Drawer */}
+ <Stack alignItems="stretch" gap="1rem" sx={{ width: "100%" }}>
+ {/* Search */}
+ <Box sx={{ display: "flex", justifyContent: "center",
borderLeft: "4px solid transparent", borderRight: "4px solid transparent",
background: "transparent" }}>
+ <Tooltip title="Search" placement="right">
+ <IconButton onClick={() => setOpen(true)} sx={{ '&:hover':
{ background: 'rgba(255, 255, 255, 0.1)' } }}>
+ <img src="/img/sidebar-icons/icon-search.svg" style={{
width: "20px", height: "20px", opacity: 1 }} alt="search" />
+ </IconButton>
Review Comment:
Significant inline styling in hot paths:
Logo container (style={{ width, minHeight, cursor... }})
Module icons (style={{ width: "20px", height: "20px" }})
Popover search wrapper (style={{ padding, borderBottom }})
Header/main layout chrome (style={{ display, padding, height }})
Recommendation: Extract reusable SCSS utilities:
.sidebar-module-icon { width: 20px; height: 20px; }
.sidebar-popover-search { padding: 8px; border-bottom: 1px solid
rgba(255,255,255,0.1); }
.sidebar-icon-active { border-left: 4px solid #2ccebb; background:
rgba(255,255,255,0.08); }
Duplication: renderPopoverSearch() duplicates the expanded drawer search UI
(~lines 165–192 vs 500–530). Extract a shared <SidebarSearchInput /> component.
Dual hover approach: SCSS .action-icon:hover in sidebar.scss vs inline
visibility in TreeNodeIcons.tsx — pick any one mechanism.
##########
dashboard/src/views/SideBar/SideBarBody.tsx:
##########
@@ -39,25 +41,25 @@ import {
import Drawer from "@mui/material/Drawer";
import CssBaseline from "@mui/material/CssBaseline";
import { IconButton } from "@components/muiComponents";
-import { useSelector } from "react-redux";
-import SearchIcon from "@mui/icons-material/Search";
-import { InputBase, Paper, Stack } from "@mui/material";
-import { TypeHeaderState } from "@models/treeStructureType.js";
+
+import ClearIcon from "@mui/icons-material/Clear";
+import { getVersion } from "@api/apiMethods/headerApiMethods";
Review Comment:
TypeScript build failure
Unused import
Version is now loaded via fetchVersionData() / Redux selector (line 119), so
getVersion is never used.
Fix: Remove the unused import. line 46
Impact: npm run typecheck fails with TS6133: 'getVersion' is declared but
its value is never read.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
