ATLAS-5373: Atlas React UI: Extremely long entity names break layout in Latest Entities Created widget - #728
ATLAS-5373: Atlas React UI: Extremely long entity names break layout in Latest Entities Created widget#728Brijesh619 wants to merge 4 commits into
Conversation
…in Latest Entities Created widget
|
…in Latest Entities Created widget
…in Latest Entities Created widget
|
…in Latest Entities Created widget
|
|
| import { TooltipProps } from "@mui/material/Tooltip"; | ||
| import { SxProps, Theme } from "@mui/material/styles"; | ||
|
|
||
| const LightTooltip = styled(({ className, ...props }: any) => ( |
There was a problem hiding this comment.
LightTooltip still typed as any (pre-existing pattern, but PR claims type-safety refactor)
PR description mentions type-safety refactor, but LightTooltip still uses any. Consider typing it as TooltipProps for consistency.
| }) | ||
|
|
||
| describe('OverflowTooltip', () => { | ||
| let triggerResize: any |
There was a problem hiding this comment.
triggerResize: any — prefer typed mock
|
|
||
| .latest-entities-name-wrapper { | ||
| display: block; | ||
| flex: 0 10 auto; |
There was a problem hiding this comment.
flex: 0 10 auto is non-standard (flex-shrink: 10). Works but is magic-number-ish; flex: 1 1 auto; min-width: 0 or a short comment would help
| } | ||
| }, []); | ||
|
|
||
| React.useEffect(() => { |
There was a problem hiding this comment.
One ResizeObserver per list row (up to 7) — acceptable for this widget, but worth noting if reused widely
| expect( | ||
| within(row as HTMLElement).getByText(/^Created /), | ||
| ).toBeInTheDocument() | ||
| expect(within(row).getByText(/ago/)).toBeInTheDocument() |
There was a problem hiding this comment.
Since "Created " prefix was restored in formatCreatedRelativeFromMs, please revert weakened assertions back to /^Created / (lines 190, 331, 537, 603) for stronger regression protection.
| </MemoryRouter>, | ||
| ) | ||
| expect(screen.getByText('(Entity)')).toBeInTheDocument() | ||
| }) |
There was a problem hiding this comment.
Please add a test for extremely long typeName (e.g. 'B'.repeat(300)) asserting:
Row renders without layout break
Type wrapper has truncation styles
Optional: tooltip appears on hover when overflowed
| color: rgba(0, 0, 0, 0.87); | ||
| } | ||
|
|
||
| .latest-entities-type-name { |
There was a problem hiding this comment.
.latest-entities-type-name is missing truncation styles (overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0) that were marked resolved in review. Truncation currently relies only on OverflowTooltip inline sx. Either add SCSS here for consistency, or document/update pr description that truncation is intentionally delegated to the wrapper.
| return formatCreatedRelativeFromMs(ms); | ||
| }; | ||
|
|
||
|
|
There was a problem hiding this comment.
Remove extra blank line(s) between formatRelativeTime and the component definition.
2 participants
What changes were proposed in this pull request?
ATLAS-5373: Atlas React UI: Refactor and stabilize layout in Latest Entities Created widget
This PR fixes styling, layout, and type-safety bugs in the "Latest Entities Created" widget and its underlying shared components. It migrates away from inline
sxobjects to strict, maintainable SCSS classes, and drastically improves the performance and strictness of shared UI components.sxstyles across theLatestEntitiesListcomponent and migrated them toLatestEntitiesList.scss, ensuring strict separation of concerns and eliminating React render overhead for styles.OverflowTooltipcomponent to elegantly handle long entity and type names. The flex layout was hardened so that the entity name shrinks responsively while keeping the type name visible, with tooltips automatically appearing on hover if truncation occurs.OverflowTooltipcomponent inmuiComponents.tsxto useResizeObserver(combined with anonMouseEnterfallback) for accurate, highly-performant DOM boundary detection that successfully handles subpixel truncation quirks.CustomButtonto rigorously enforce native@mui/material/ButtonProps, eliminating legacyanyescape hatches. Proactively cleaned up invalid props and event handlers across 6 downstream consumers (likeModal,AdvancedSearch, andShowMoreDrawer) to guarantee 100% type safety."Created "prefix on relative timestamps to maintain UX expectations.How was this patch tested?
..., the type name remains appropriately visible, and the tooltip appears precisely when fractional overflow occurs.LatestEntitiesList.test.tsxto validate the restored"Created "string prefix and fallback rendering.npm run test.npm run typecheck) across the entire dashboard with zero errors.