Brijesh619 commented on code in PR #728:
URL: https://github.com/apache/atlas/pull/728#discussion_r3820776757
##########
dashboard/src/views/DashboardOverview/LatestEntitiesList.tsx:
##########
@@ -146,54 +148,37 @@ const LatestEntitiesList = memo(({ entities, isLoading,
error }: LatestEntitiesL
if (isLoading) return null;
return (
- <Paper
- elevation={1}
- sx={{
- padding: 2,
- borderRadius: 2,
- minHeight: 340,
- minWidth: 0,
- width: "100%",
- flex: 1,
- boxSizing: "border-box",
- transition: "box-shadow 0.3s ease",
- "&:hover": { boxShadow: 4 }
- }}
- >
- <Box sx={{ pb: 2, borderBottom: "1px solid",
borderColor: "divider" }}>
+ <Paper elevation={1} className="latest-entities-paper">
+ <Box className="latest-entities-header">
<Stack direction="row"
justifyContent="space-between" alignItems="center">
- <Typography sx={{ fontSize: "1rem",
fontWeight: 600, color: "#1a1a1a" }}>
+ <Typography
className="latest-entities-title">
Latest Entities Created
</Typography>
<Link
component="button"
onClick={handleViewAll}
- sx={{
- fontSize: "0.875rem",
- cursor: "pointer",
- textDecoration: "none",
- color: "primary.main"
- }}
+
className="latest-entities-view-all"
aria-label="View all entities"
+ color="primary.main"
Review Comment:
Fixed. Replaced `color="primary.main"` with `color="primary"`.
##########
dashboard/src/components/muiComponents.tsx:
##########
@@ -68,6 +69,69 @@ const LightTooltip = styled(({ className, ...props }: any)
=> (
}
}));
+import { TooltipProps } from '@mui/material/Tooltip';
+import { SxProps, Theme } from '@mui/material/styles';
Review Comment:
Fixed. Moved the late imports to the top of the file to comply with standard
import ordering.
##########
dashboard/src/components/muiComponents.tsx:
##########
@@ -68,6 +69,69 @@ const LightTooltip = styled(({ className, ...props }: any)
=> (
}
}));
+import { TooltipProps } from '@mui/material/Tooltip';
+import { SxProps, Theme } from '@mui/material/styles';
+
+interface OverflowTooltipProps extends Omit<TooltipProps, 'children'> {
+ children: React.ReactElement;
+ wrapperComponent?: React.ElementType;
+ wrapperSx?: SxProps<Theme>;
+}
+
+const OverflowTooltip = ({ title, children, wrapperComponent, wrapperSx,
...props }: OverflowTooltipProps) => {
+ const textElementRef = React.useRef<HTMLElement>(null);
+ const [isOverflowed, setIsOverflowed] = React.useState(false);
+
+ const checkOverflow = () => {
+ if (textElementRef.current) {
+ setIsOverflowed(
+ textElementRef.current.scrollWidth > textElementRef.current.clientWidth
+ );
+ }
+ };
+
+ React.useEffect(() => {
+ checkOverflow();
+ window.addEventListener("resize", checkOverflow);
+ return () => {
+ window.removeEventListener("resize", checkOverflow);
+ };
+ }, [children, title]);
+
+ const child = wrapperComponent || wrapperSx ? (
+ <Box
+ component={wrapperComponent || 'span'}
+ ref={textElementRef}
+ sx={{
+ display: "inline-flex",
+ minWidth: 0,
+ width: "100%",
+ alignItems: "center",
+ overflow: "hidden",
+ textOverflow: "ellipsis",
+ whiteSpace: "nowrap",
+ ...wrapperSx
+ }}
+ >
+ {children}
+ </Box>
+ ) : (
+ React.cloneElement(children, { ref: textElementRef })
Review Comment:
Fixed. Removed `cloneElement` entirely. The component now consistently wraps
the `children` in the truncating `Box` component and attaches the ref there,
ensuring that refs don't collide with elements like `RouterLink` or MUI `Link`.
##########
dashboard/src/components/muiComponents.tsx:
##########
@@ -68,6 +69,69 @@ const LightTooltip = styled(({ className, ...props }: any)
=> (
}
}));
+import { TooltipProps } from '@mui/material/Tooltip';
+import { SxProps, Theme } from '@mui/material/styles';
+
+interface OverflowTooltipProps extends Omit<TooltipProps, 'children'> {
+ children: React.ReactElement;
+ wrapperComponent?: React.ElementType;
+ wrapperSx?: SxProps<Theme>;
+}
+
+const OverflowTooltip = ({ title, children, wrapperComponent, wrapperSx,
...props }: OverflowTooltipProps) => {
+ const textElementRef = React.useRef<HTMLElement>(null);
+ const [isOverflowed, setIsOverflowed] = React.useState(false);
+
+ const checkOverflow = () => {
+ if (textElementRef.current) {
+ setIsOverflowed(
+ textElementRef.current.scrollWidth > textElementRef.current.clientWidth
+ );
+ }
+ };
+
+ React.useEffect(() => {
+ checkOverflow();
+ window.addEventListener("resize", checkOverflow);
+ return () => {
+ window.removeEventListener("resize", checkOverflow);
+ };
+ }, [children, title]);
Review Comment:
Fixed. Switched to `useLayoutEffect` and removed `children` from the
dependency array to prevent unnecessary re-attachments.
--
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]
