Brijesh619 commented on code in PR #688:
URL: https://github.com/apache/atlas/pull/688#discussion_r3782757471
##########
dashboard/src/views/SideBar/SideBarBody.tsx:
##########
@@ -246,38 +323,117 @@ 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"
- style={{
- width: "29px",
- height: "auto",
- maxWidth: "100%",
- display: "block",
+ <div
+ className="collapsed-logo-container"
+ 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"
+ className="collapsed-logo-img"
+ />
+ </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 aria-expanded={open} onClick={() =>
setOpen(true)} sx={{ '&:hover': { background: 'rgba(255, 255, 255, 0.1)' } }}>
+ <img src="/img/sidebar-icons/icon-search.svg"
className="sidebar-module-icon" alt="search" />
+ </IconButton>
+ </Tooltip>
+ </Box>
+
+ {modules.filter(m => m.isVisible).map(m => (
+ <Box
+ key={m.id}
+ className={m.isActive ? "sidebar-icon-active" : ""}
+ sx={{
+ display: "flex",
+ justifyContent: "center",
+ borderLeft: "4px solid transparent",
+ borderRight: "4px solid transparent",
+ background: "transparent"
+ }}
+ >
+ <Tooltip title={m.title} placement="right">
+ <IconButton onClick={(e) => handlePopoverOpen(e, m.id)}
sx={{ color: m.isActive ? "white" : "rgba(255, 255, 255, 0.6)", '&:hover': {
color: 'white', background: 'rgba(255, 255, 255, 0.1)' } }}>
Review Comment:
Resolved. Added aria-label and aria-expanded attributes to the module icon
buttons, fixed the misleading aria-expanded on the search expand button, and
added an aria-label to the clear search button.
##########
dashboard/src/views/SideBar/SideBarBody.tsx:
##########
@@ -101,61 +101,101 @@ const DrawerHeader = styled("div")(({ theme }) => ({
marginBottom: "1rem",
}));
+
const SideBarBody = (props: {
- loading: boolean;
- handleOpenModal: any;
- handleOpenAboutModal: any;
+ handleOpenModal: () => void;
+ handleOpenAboutModal: () => void;
}) => {
const location = useLocation();
const routes = useRoutes(AppRoutes as RouteObject[]);
const history = useHistory();
const dispatch = useAppDispatch();
- const { loading: loader, handleOpenModal, handleOpenAboutModal } = props;
+ const { handleOpenModal, handleOpenAboutModal } = props;
const navigate = useNavigate();
- const { loading } = useSelector((state: TypeHeaderState) =>
state.typeHeader);
const { relationshipSearch = {} } = globalSessionData || {};
const [open, setOpen] = useState(true);
const [searchTerm, setSearchTerm] = useState<string>("");
+ const { data: versionData } = useAppSelector((state) =>
state.session?.versionData || {});
+ const searchParams = new URLSearchParams(location.search);
+
+ const isCustomFilterActive = searchParams.get("isCF") === "true";
Review Comment:
Resolved. Refactored the active state checks into a single helper function
with early returns to enforce mutual exclusion and prioritize the active module
correctly
##########
dashboard/src/views/DashboardOverview/DashboardOverview.tsx:
##########
@@ -97,11 +97,12 @@ const DashboardOverview = () => {
maxWidth: "100%",
boxSizing: "border-box",
backgroundColor: "#f5f7f9",
- padding: 3,
- borderRadius: 2
+ borderRadius: 2,
+ pb: 3,
+ pr: 3
}}
>
- <Grid container spacing={3} sx={{ width: "100%",
alignItems: "stretch" }}>
+ <Grid container spacing={3} sx={{ m: 0, width: "100%",
alignItems: "stretch" }}>
Review Comment:
Yes, intentional. MUI's Grid container with spacing={3} adds negative
margins that cause unwanted horizontal scrollbars when combined with width:
"100%". The m: 0 cleanly prevents that overflow
--
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]
