pawarprasad123 commented on code in PR #688:
URL: https://github.com/apache/atlas/pull/688#discussion_r3542029759
##########
dashboard/src/views/SideBar/SideBarBody.tsx:
##########
@@ -156,6 +210,17 @@ const SideBarBody = (props: {
dispatch(fetchRootClassification());
dispatch(fetchEnumData());
dispatch(fetchMetricEntity());
+
+ // Fetch version data for footer
+ const fetchVersion = async () => {
+ try {
+ const resp = await getVersion();
Review Comment:
Version is now fetched in SideBarBody on mount and also in About.tsx.
Consider centralizing in Redux/context to avoid duplicate API calls.
##########
dashboard/src/views/SideBar/SideBarBody.tsx:
##########
@@ -482,15 +763,27 @@ const SideBarBody = (props: {
<div
style={{
width: "100%",
- textAlign: "right",
padding: "8px",
position: "sticky",
bottom: "0px",
zIndex: "9",
left: "0",
background: "#034858",
+ display: "flex",
+ flexDirection: open ? "row" : "column",
+ justifyContent: open ? "space-between" : "center",
+ alignItems: "center",
+ gap: open ? "0px" : "4px"
}}
>
+ {open && (
+ <Box display="flex" flexDirection="column" gap="4px"
alignItems="flex-start" pl="4px">
+ <Typography variant="body2" sx={{ color: "rgba(255, 255, 255,
0.6)", pl: '4px' }}>
+ V {versionData?.Version || '3.12.1.0'}
Review Comment:
Hardcoded version will go stale. Prefer an empty/loading state or reuse
version from an existing source.
##########
dashboard/src/styles/sidebar.scss:
##########
@@ -196,6 +212,17 @@
border-bottom: "1px solid rgba(25,255,255,0.1)";
}
+.light-popover {
Review Comment:
.light-popover was added in sidebar.scss but is never referenced in TSX.
##########
dashboard/src/views/SideBar/SideBarBody.tsx:
##########
@@ -246,38 +380,227 @@ 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: 2, '&::-webkit-scrollbar': {
display: 'none' }, msOverflowStyle: 'none', scrollbarWidth: 'none' }}
>
- <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>
+ </Tooltip>
+ </Box>
+
+ {/* Entities */}
+ <Box sx={{ display: "flex", justifyContent: "center",
borderLeft: isEntitiesActive ? "4px solid #2ccebb" : "4px solid transparent",
borderRight: "4px solid transparent", background: isEntitiesActive ? "rgba(255,
255, 255, 0.08)" : "transparent" }}>
+ <Tooltip title="Entities" placement="right">
+ <IconButton onClick={(e) => handlePopoverOpen(e,
"entities")} sx={{ '&:hover': { background: 'rgba(255, 255, 255, 0.1)' } }}>
+ <img src="/img/sidebar-icons/icon-entities.svg" style={{
width: "20px", height: "20px", opacity: 1 }} alt="entities" />
+ </IconButton>
+ </Tooltip>
+ </Box>
+ <Popover
+ marginThreshold={64}
+ open={activePopover === "entities"}
+ anchorEl={popoverAnchor}
+ onClose={handlePopoverClose}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+ PaperProps={{ sx: { ml: 1, width: 320, maxHeight:
'calc(100vh - 250px) !important', display: 'flex', flexDirection: 'column',
backgroundColor: '#034858', borderRadius: 1, boxShadow: 6, pb: 2, overflow:
'visible', '&::before': { content: '""', display: 'block', position:
'absolute', top: 14, left: -8, width: 0, height: 0, borderTop: '8px solid
transparent', borderBottom: '8px solid transparent', borderRight: '8px solid
#034858' } } }}
+ >
+ {renderPopoverSearch()}
+ <div style={{ flex: 1, overflow: 'auto' }}>
+ <Suspense fallback={<TreeSkeletonLoader count={2} />}>
+ <div className="sidebar-treeview-container" style={{
padding: '8px' }}>
+ <EntitiesTree sideBarOpen={true}
searchTerm={searchTerm} isPopover={true} />
Review Comment:
Popover tree (EntitiesTree) renders inside <Popover open={...}> but is still
in the React tree even when closed (MUI may keep children mounted).
Consider:
{activePopover === "entities" && (
<EntitiesTree sideBarOpen={true} searchTerm={searchTerm} isPopover={true}
/>
)}
to avoid unnecessary lazy-load/effects until popover opens.
##########
dashboard/src/views/SideBar/SideBarBody.tsx:
##########
@@ -337,10 +672,12 @@ const SideBarBody = (props: {
className="sidebar-wrapper"
sx={{
flex: 1,
- overflow: "hidden auto",
- paddingBottom: "0px", // Account for bottom toggle button
+ overflowX: "hidden",
+ overflowY: "auto",
+ paddingBottom: "48px", // Added space so it doesn't touch the
bottom toggle button
...(open == false && {
overflow: "hidden",
+ display: "none",
Review Comment:
When the sidebar is collapsed, expanded trees are hidden via display: "none"
(line 680) but still mounted (lines 691–760). Popover trees are re-mounted when
opened (e.g., line 452 with isPopover={true}). This creates duplicate tree
instances (double Redux subscriptions/effects).
Suggested fix: Render expanded-sidebar trees only when open === true, OR
lazy-mount popover tree content only when activePopover === "<id>".
##########
dashboard/src/views/SideBar/SideBarBody.tsx:
##########
@@ -246,38 +380,227 @@ 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: 2, '&::-webkit-scrollbar': {
display: 'none' }, msOverflowStyle: 'none', scrollbarWidth: 'none' }}
>
- <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>
+ </Tooltip>
+ </Box>
+
+ {/* Entities */}
+ <Box sx={{ display: "flex", justifyContent: "center",
borderLeft: isEntitiesActive ? "4px solid #2ccebb" : "4px solid transparent",
borderRight: "4px solid transparent", background: isEntitiesActive ? "rgba(255,
255, 255, 0.08)" : "transparent" }}>
+ <Tooltip title="Entities" placement="right">
+ <IconButton onClick={(e) => handlePopoverOpen(e,
"entities")} sx={{ '&:hover': { background: 'rgba(255, 255, 255, 0.1)' } }}>
+ <img src="/img/sidebar-icons/icon-entities.svg" style={{
width: "20px", height: "20px", opacity: 1 }} alt="entities" />
+ </IconButton>
+ </Tooltip>
+ </Box>
+ <Popover
Review Comment:
The 6 popover blocks (Entities, Classifications, Glossary, BM,
Relationships, Custom Filters) are nearly identical — same PaperProps.sx,
anchor config, search header, and Suspense wrapper (~160 lines × 6).
Suggested refactor: Extract reusable components:
CollapsedModuleIcon (active border + tooltip + button)
SidebarTreePopover (popover shell + search + lazy tree slot)
This will reduce maintenance risk and make future module additions easier.
##########
dashboard/src/views/SideBar/__tests__/SideBarBody.test.tsx:
##########
@@ -15,6 +15,7 @@
* limitations under the License.
*/
Review Comment:
Tests were updated for placeholder text only. Please add coverage for the
new ATLAS-5324 behavior:
-Collapsed module icon opens correct popover
-Active state markers (isEntitiesActive, isGlossaryActive, etc.)
-Popover closes on outside click/navigation
-Search term shared between popover and expanded sidebar
-Also add tests for TreeSkeletonLoader (new file, no test file yet).
##########
dashboard/src/views/SideBar/SideBarBody.tsx:
##########
@@ -246,38 +380,227 @@ 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: 2, '&::-webkit-scrollbar': {
display: 'none' }, msOverflowStyle: 'none', scrollbarWidth: 'none' }}
>
- <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>
+ </Tooltip>
+ </Box>
+
+ {/* Entities */}
+ <Box sx={{ display: "flex", justifyContent: "center",
borderLeft: isEntitiesActive ? "4px solid #2ccebb" : "4px solid transparent",
borderRight: "4px solid transparent", background: isEntitiesActive ? "rgba(255,
255, 255, 0.08)" : "transparent" }}>
+ <Tooltip title="Entities" placement="right">
+ <IconButton onClick={(e) => handlePopoverOpen(e,
"entities")} sx={{ '&:hover': { background: 'rgba(255, 255, 255, 0.1)' } }}>
+ <img src="/img/sidebar-icons/icon-entities.svg" style={{
width: "20px", height: "20px", opacity: 1 }} alt="entities" />
+ </IconButton>
+ </Tooltip>
+ </Box>
+ <Popover
+ marginThreshold={64}
+ open={activePopover === "entities"}
+ anchorEl={popoverAnchor}
+ onClose={handlePopoverClose}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+ PaperProps={{ sx: { ml: 1, width: 320, maxHeight:
'calc(100vh - 250px) !important', display: 'flex', flexDirection: 'column',
backgroundColor: '#034858', borderRadius: 1, boxShadow: 6, pb: 2, overflow:
'visible', '&::before': { content: '""', display: 'block', position:
'absolute', top: 14, left: -8, width: 0, height: 0, borderTop: '8px solid
transparent', borderBottom: '8px solid transparent', borderRight: '8px solid
#034858' } } }}
+ >
+ {renderPopoverSearch()}
+ <div style={{ flex: 1, overflow: 'auto' }}>
+ <Suspense fallback={<TreeSkeletonLoader count={2} />}>
+ <div className="sidebar-treeview-container" style={{
padding: '8px' }}>
+ <EntitiesTree sideBarOpen={true}
searchTerm={searchTerm} isPopover={true} />
+ </div>
+ </Suspense>
+
+ </div>
+ </Popover>
+
+ {/* Classifications */}
+ <Box sx={{ display: "flex", justifyContent: "center",
borderLeft: isClassificationActive ? "4px solid #2ccebb" : "4px solid
transparent", borderRight: "4px solid transparent", background:
isClassificationActive ? "rgba(255, 255, 255, 0.08)" : "transparent" }}>
+ <Tooltip title="Classifications" placement="right">
+ <IconButton onClick={(e) => handlePopoverOpen(e,
"classification")} sx={{ '&:hover': { background: 'rgba(255, 255, 255, 0.1)' }
}}>
+ <img src="/img/sidebar-icons/icon-classifications.svg"
style={{ width: "20px", height: "20px", opacity: 1 }} alt="classifications" />
+ </IconButton>
+ </Tooltip>
+ </Box>
+ <Popover
+ marginThreshold={64}
+ open={activePopover === "classification"}
+ anchorEl={popoverAnchor}
+ onClose={handlePopoverClose}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+ PaperProps={{ sx: { ml: 1, width: 320, maxHeight:
'calc(100vh - 250px) !important', display: 'flex', flexDirection: 'column',
backgroundColor: '#034858', borderRadius: 1, boxShadow: 6, pb: 2, overflow:
'visible', '&::before': { content: '""', display: 'block', position:
'absolute', top: 14, left: -8, width: 0, height: 0, borderTop: '8px solid
transparent', borderBottom: '8px solid transparent', borderRight: '8px solid
#034858' } } }}
+ >
+ {renderPopoverSearch()}
+ <div style={{ flex: 1, overflow: 'auto' }}>
+ <Suspense fallback={<TreeSkeletonLoader count={2} />}>
+ <div className="sidebar-treeview-container" style={{
padding: '8px' }}>
+ <ClassificationTree sideBarOpen={true}
searchTerm={searchTerm} isPopover={true} />
+ </div>
+ </Suspense>
+
+ </div>
+ </Popover>
+
+ {/* Glossary */}
+ <Box sx={{ display: "flex", justifyContent: "center",
borderLeft: isGlossaryActive ? "4px solid #2ccebb" : "4px solid transparent",
borderRight: "4px solid transparent", background: isGlossaryActive ? "rgba(255,
255, 255, 0.08)" : "transparent" }}>
+ <Tooltip title="Glossary" placement="right">
+ <IconButton onClick={(e) => handlePopoverOpen(e,
"glossary")} sx={{ '&:hover': { background: 'rgba(255, 255, 255, 0.1)' } }}>
+ <img src="/img/sidebar-icons/icon-glossary.svg" style={{
width: "20px", height: "20px", opacity: 1 }} alt="glossary" />
+ </IconButton>
+ </Tooltip>
+ </Box>
+ <Popover
+ marginThreshold={64}
+ open={activePopover === "glossary"}
+ anchorEl={popoverAnchor}
+ onClose={handlePopoverClose}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+ PaperProps={{ sx: { ml: 1, width: 320, maxHeight:
'calc(100vh - 250px) !important', display: 'flex', flexDirection: 'column',
backgroundColor: '#034858', borderRadius: 1, boxShadow: 6, pb: 2, overflow:
'visible', '&::before': { content: '""', display: 'block', position:
'absolute', top: 14, left: -8, width: 0, height: 0, borderTop: '8px solid
transparent', borderBottom: '8px solid transparent', borderRight: '8px solid
#034858' } } }}
+ >
+ {renderPopoverSearch()}
+ <div style={{ flex: 1, overflow: 'auto' }}>
+ <Suspense fallback={<TreeSkeletonLoader count={2} />}>
+ <div className="sidebar-treeview-container" style={{
padding: '8px' }}>
+ <GlossaryTree sideBarOpen={true}
searchTerm={searchTerm} isPopover={true} />
+ </div>
+ </Suspense>
+
+ </div>
+ </Popover>
+
+ {/* Business Metadata */}
+ <Box sx={{ display: "flex", justifyContent: "center",
borderLeft: isBusinessMetadataActive ? "4px solid #2ccebb" : "4px solid
transparent", borderRight: "4px solid transparent", background:
isBusinessMetadataActive ? "rgba(255, 255, 255, 0.08)" : "transparent" }}>
+ <Tooltip title="Business Metadata" placement="right">
+ <IconButton onClick={(e) => handlePopoverOpen(e,
"businessMetadata")} sx={{ '&:hover': { background: 'rgba(255, 255, 255, 0.1)'
} }}>
+ <img src="/img/sidebar-icons/icon-business-metadata.svg"
style={{ width: "20px", height: "20px", opacity: 1 }} alt="business metadata" />
+ </IconButton>
+ </Tooltip>
+ </Box>
+ <Popover
+ marginThreshold={64}
+ open={activePopover === "businessMetadata"}
+ anchorEl={popoverAnchor}
+ onClose={handlePopoverClose}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+ PaperProps={{ sx: { ml: 1, width: 320, maxHeight:
'calc(100vh - 250px) !important', display: 'flex', flexDirection: 'column',
backgroundColor: '#034858', borderRadius: 1, boxShadow: 6, pb: 2, overflow:
'visible', '&::before': { content: '""', display: 'block', position:
'absolute', top: 14, left: -8, width: 0, height: 0, borderTop: '8px solid
transparent', borderBottom: '8px solid transparent', borderRight: '8px solid
#034858' } } }}
+ >
+ {renderPopoverSearch()}
+ <div style={{ flex: 1, overflow: 'auto' }}>
+ <Suspense fallback={<TreeSkeletonLoader count={2} />}>
+ <div className="sidebar-treeview-container" style={{
padding: '8px' }}>
+ <BusinessMetadataTree sideBarOpen={true}
searchTerm={searchTerm} isPopover={true} />
+ </div>
+ </Suspense>
+
+ </div>
+ </Popover>
+
+ {/* Relationships */}
+ {relationshipSearch && (
+ <>
+ <Box sx={{ display: "flex", justifyContent: "center",
borderLeft: isRelationshipActive ? "4px solid #2ccebb" : "4px solid
transparent", background: isRelationshipActive ? "rgba(255, 255, 255, 0.08)" :
"transparent" }}>
+ <Tooltip title="Relationships" placement="right">
+ <IconButton onClick={(e) => handlePopoverOpen(e,
"relationships")} sx={{ color: isRelationshipActive ? "white" : "rgba(255, 255,
255, 0.6)", '&:hover': { color: 'white', background: 'rgba(255, 255, 255, 0.1)'
} }}>
Review Comment:
Relationships uses MUI AccountTreeIcon while other collapsed modules use
custom SVGs from /img/sidebar-icons/. For visual consistency, consider adding a
Relationships SVG icon to match the rest of the collapsed rail.
--
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]
