This is an automated email from the ASF dual-hosted git repository.
ppawar pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/atlas.git
The following commit(s) were added to refs/heads/master by this push:
new afb661d90 ATLAS-5075 : React UI :Once you scroll down, the Atlas logo
and global search in the sidebar disappears. (#407)
afb661d90 is described below
commit afb661d90aecc01916a8ac6d1caa72d5b10efd73
Author: farhank31 <111185778+farhan...@users.noreply.github.com>
AuthorDate: Thu Jul 24 12:37:13 2025 +0530
ATLAS-5075 : React UI :Once you scroll down, the Atlas logo and global
search in the sidebar disappears. (#407)
Co-authored-by: Farhan Khan <farhan.k...@freestoninfotech.com>
---
dashboard/src/styles/sidebar.scss | 1 -
dashboard/src/views/Layout/Layout.tsx | 2 +-
dashboard/src/views/SideBar/SideBarBody.tsx | 265 ++++++++++++++++------------
3 files changed, 152 insertions(+), 116 deletions(-)
diff --git a/dashboard/src/styles/sidebar.scss
b/dashboard/src/styles/sidebar.scss
index ed7df3a8a..4f6fbb583 100644
--- a/dashboard/src/styles/sidebar.scss
+++ b/dashboard/src/styles/sidebar.scss
@@ -164,7 +164,6 @@
.sidebar-wrapper {
background: #034858 !important;
- position: fixed;
top: 20px;
height: 100%;
overflow-y: auto;
diff --git a/dashboard/src/views/Layout/Layout.tsx
b/dashboard/src/views/Layout/Layout.tsx
index 48e82aaa5..57546794e 100644
--- a/dashboard/src/views/Layout/Layout.tsx
+++ b/dashboard/src/views/Layout/Layout.tsx
@@ -70,7 +70,7 @@ const Layout: React.FC = () => {
crossTab: true,
throttle: 1000,
eventsThrottle: 1000,
- startOnMount: true
+ startOnMount: true,
});
const handleStillHere = () => {
setOpenSessionModal(false);
diff --git a/dashboard/src/views/SideBar/SideBarBody.tsx
b/dashboard/src/views/SideBar/SideBarBody.tsx
index 1ea6f54b8..2ecc98d63 100644
--- a/dashboard/src/views/SideBar/SideBarBody.tsx
+++ b/dashboard/src/views/SideBar/SideBarBody.tsx
@@ -22,7 +22,7 @@ import {
useState,
ChangeEvent,
lazy,
- useRef
+ useRef,
} from "react";
import atlasLogo from "/img/atlas_logo.svg";
import {
@@ -31,7 +31,7 @@ import {
RouteObject,
useLocation,
useNavigate,
- useRoutes
+ useRoutes,
} from "react-router-dom";
import Drawer from "@mui/material/Drawer";
import CssBaseline from "@mui/material/CssBaseline";
@@ -76,16 +76,16 @@ const Main = styled("main", { shouldForwardProp: (prop) =>
prop !== "open" })<{
padding: theme.spacing(3),
transition: theme.transitions.create("margin", {
easing: theme.transitions.easing.sharp,
- duration: theme.transitions.duration.leavingScreen
+ duration: theme.transitions.duration.leavingScreen,
}),
marginLeft: `-${defaultDrawerWidth}`,
...(open && {
transition: theme.transitions.create("margin", {
easing: theme.transitions.easing.easeOut,
- duration: theme.transitions.duration.enteringScreen
+ duration: theme.transitions.duration.enteringScreen,
}),
- marginLeft: 0
- })
+ marginLeft: 0,
+ }),
}));
const DrawerHeader = styled("div")(({ theme }) => ({
@@ -93,7 +93,7 @@ const DrawerHeader = styled("div")(({ theme }) => ({
alignItems: "center",
padding: theme.spacing(0, 1),
...theme.mixins.toolbar,
- marginBottom: "1rem"
+ marginBottom: "1rem",
}));
const SideBarBody = (props: {
@@ -118,6 +118,7 @@ const SideBarBody = (props: {
const [position, setPosition] = useState<string |
number>(defaultDrawerWidth);
const draggerRef = useRef<HTMLDivElement>(null);
+ const headerRef = useRef<HTMLDivElement>(null);
const windowWidth = window.innerWidth;
const minPosition = 300;
const maxPosition = windowWidth * 0.6;
@@ -167,7 +168,7 @@ const SideBarBody = (props: {
path: PathAssociateWithModule[
key as keyof typeof PathAssociateWithModule
][0],
- element: routes
+ element: routes,
};
});
@@ -188,7 +189,7 @@ const SideBarBody = (props: {
minHeight: "calc(100vh - 64px)",
minWidth: "30px",
...(open == false && {
- transform: `translateX(calc(-${position} + 30px)) !important`
+ transform: `translateX(calc(-${position} + 30px)) !important`,
}),
...(open == false && { visibility: "visible !important" }),
@@ -200,38 +201,44 @@ const SideBarBody = (props: {
top: "0",
transition: "none !important",
...(open == false && {
- transform: `translateX(30px) !important`
+ transform: `translateX(30px) !important`,
}),
- ...(open == false && { visibility: "visible !important" })
- }
+ ...(open == false && { visibility: "visible !important" }),
+ },
}}
PaperProps={{
- style: { width: position, minWidth: "30px" }
+ style: { width: position, minWidth: "30px" },
}}
variant="persistent"
anchor="left"
open={open}
>
- <Paper
- className="sidebar-wrapper"
+ <Stack
sx={{
- width: open ? position : "100%",
-
- ...(open == false && {
- overflow: "hidden"
- })
+ height: "100vh",
+ width: "100%",
+ backgroundColor: "#034858",
}}
>
{open && (
- <DrawerHeader>
- <Stack gap="2rem" width="100%">
+ <DrawerHeader
+ ref={headerRef}
+ sx={{
+ position: "sticky",
+ top: 0,
+ zIndex: 10,
+ backgroundColor: "#034858",
+ flexShrink: 0,
+ }}
+ >
+ <Stack gap="1.5rem" width="100%" marginTop="1rem">
<img
src={atlasLogo}
alt="Atlas logo"
onClick={() => {
navigate(
{
- pathname: "/search"
+ pathname: "/search",
},
{ replace: true }
);
@@ -241,7 +248,7 @@ const SideBarBody = (props: {
/>
<Paper
sx={{
- width: "100%"
+ width: "100%",
}}
className="sidebar-searchbar"
>
@@ -264,80 +271,85 @@ const SideBarBody = (props: {
</Stack>
</DrawerHeader>
)}
- <div
- className="sidebar-treeview-container"
- data-cy="r_entityTreeRender"
+ <Paper
+ className="sidebar-wrapper"
+ sx={{
+ flex: 1,
+ overflow: "hidden auto",
+ paddingBottom: "0px", // Account for bottom toggle button
+ ...(open == false && {
+ overflow: "hidden",
+ }),
+ }}
>
- <Suspense
- fallback={
- <Stack className="tree-item-loader-box">
- <CircularProgress size="small" className="tree-item-loader"
/>
- </Stack>
- }
+ <div
+ className="sidebar-treeview-container"
+ data-cy="r_entityTreeRender"
>
- <EntitiesTree
- sideBarOpen={open}
- loading={loading}
- searchTerm={searchTerm}
- />
- </Suspense>
- </div>
+ <Suspense
+ fallback={
+ <Stack className="tree-item-loader-box">
+ <CircularProgress
+ size="small"
+ className="tree-item-loader"
+ />
+ </Stack>
+ }
+ >
+ <EntitiesTree
+ sideBarOpen={open}
+ loading={loading}
+ searchTerm={searchTerm}
+ />
+ </Suspense>
+ </div>
- <div
- className="sidebar-treeview-container"
- data-cy="r_classificationTreeRender"
- >
- <Suspense
- fallback={
- <Stack className="tree-item-loader-box">
- <CircularProgress size="small" className="tree-item-loader"
/>
- </Stack>
- }
+ <div
+ className="sidebar-treeview-container"
+ data-cy="r_classificationTreeRender"
>
- <ClassificationTree
- sideBarOpen={open}
- loading={loader}
- searchTerm={searchTerm}
- />
- </Suspense>
- </div>
+ <Suspense
+ fallback={
+ <Stack className="tree-item-loader-box">
+ <CircularProgress
+ size="small"
+ className="tree-item-loader"
+ />
+ </Stack>
+ }
+ >
+ <ClassificationTree
+ sideBarOpen={open}
+ loading={loader}
+ searchTerm={searchTerm}
+ />
+ </Suspense>
+ </div>
- <div
- className="sidebar-treeview-container"
- data-cy="r_businessMetadataTreeRender"
- >
- <Suspense
- fallback={
- <Stack className="tree-item-loader-box">
- <CircularProgress size="small" className="tree-item-loader"
/>
- </Stack>
- }
+ <div
+ className="sidebar-treeview-container"
+ data-cy="r_businessMetadataTreeRender"
>
- <BusinessMetadataTree
- sideBarOpen={open}
- searchTerm={searchTerm}
- />
- </Suspense>
- </div>
+ <Suspense
+ fallback={
+ <Stack className="tree-item-loader-box">
+ <CircularProgress
+ size="small"
+ className="tree-item-loader"
+ />
+ </Stack>
+ }
+ >
+ <BusinessMetadataTree
+ sideBarOpen={open}
+ searchTerm={searchTerm}
+ />
+ </Suspense>
+ </div>
- <div
- className="sidebar-treeview-container"
- data-cy="r_glossaryTreeRender"
- >
- <Suspense
- fallback={
- <Stack className="tree-item-loader-box">
- <CircularProgress size="small" className="tree-item-loader"
/>
- </Stack>
- }
- >
- <GlossaryTree sideBarOpen={open} searchTerm={searchTerm} />
- </Suspense>
- </div>
- {relationshipSearch && (
<div
className="sidebar-treeview-container"
- data-cy="r_relationshipTreeRender"
+ data-cy="r_glossaryTreeRender"
>
<Suspense
fallback={
@@ -349,35 +361,60 @@ const SideBarBody = (props: {
</Stack>
}
>
- <RelationshipsTree sideBarOpen={open} searchTerm={searchTerm}
/>
+ <GlossaryTree sideBarOpen={open} searchTerm={searchTerm} />
</Suspense>
</div>
- )}
+ {relationshipSearch && (
+ <div
+ className="sidebar-treeview-container"
+ data-cy="r_relationshipTreeRender"
+ >
+ <Suspense
+ fallback={
+ <Stack className="tree-item-loader-box">
+ <CircularProgress
+ size="small"
+ className="tree-item-loader"
+ />
+ </Stack>
+ }
+ >
+ <RelationshipsTree
+ sideBarOpen={open}
+ searchTerm={searchTerm}
+ />
+ </Suspense>
+ </div>
+ )}
- <div
- className="sidebar-treeview-container"
- data-cy="r_customFilterTreeRender"
- >
- <Suspense
- fallback={
- <Stack className="tree-item-loader-box">
- <CircularProgress size="small" className="tree-item-loader"
/>
- </Stack>
- }
+ <div
+ className="sidebar-treeview-container"
+ data-cy="r_customFilterTreeRender"
>
- <CustomFiltersTree sideBarOpen={open} searchTerm={searchTerm} />
- </Suspense>
- </div>
+ <Suspense
+ fallback={
+ <Stack className="tree-item-loader-box">
+ <CircularProgress
+ size="small"
+ className="tree-item-loader"
+ />
+ </Stack>
+ }
+ >
+ <CustomFiltersTree sideBarOpen={open} searchTerm={searchTerm}
/>
+ </Suspense>
+ </div>
+ </Paper>
<div
style={{
- width: "inherit",
+ width: "100%",
textAlign: "right",
padding: "8px",
- position: "fixed",
+ position: "sticky",
bottom: "0px",
zIndex: "9",
left: "0",
- background: "#034858"
+ background: "#034858",
}}
>
<IconButton size="medium" onClick={() => handleDrawerOpen()}>
@@ -394,19 +431,19 @@ const SideBarBody = (props: {
)}
</IconButton>
</div>
- </Paper>
+ </Stack>
</Drawer>
<Main
open={open}
sx={{
...(open == false && {
- marginLeft: `calc(-${position} + 60px) !important`
+ marginLeft: `calc(-${position} + 60px) !important`,
}),
margin: "0",
overflowX: "auto",
background: "#f5f5f5",
- padding: "0"
+ padding: "0",
}}
>
<Stack height="auto" minHeight="100%">
@@ -417,7 +454,7 @@ const SideBarBody = (props: {
backgroundColor: "white",
height: "56px",
alignItems: "center",
- padding: "16px"
+ padding: "16px",
}}
>
<Suspense fallback={null}>
@@ -432,7 +469,7 @@ const SideBarBody = (props: {
padding: "16px",
display: "flex",
flex: "1",
- flexDirection: "column"
+ flexDirection: "column",
}}
>
{matched || location.pathname.includes("!") ? (
@@ -444,7 +481,7 @@ const SideBarBody = (props: {
top: 0,
width: "100%",
height: "calc(100vh - 88px)",
- position: "relative"
+ position: "relative",
}}
>
<CircularProgress
@@ -455,7 +492,7 @@ const SideBarBody = (props: {
position: "absolute",
left: "50%",
top: "50%",
- transform: "translate(-50%, -50%)"
+ transform: "translate(-50%, -50%)",
}}
/>
</div>
