[Brijesh619]

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 completely migrates away from inline sx objects to strict, maintainable SCSS classes, and drastically improves the performance, layout resilience, test coverage, and type safety of shared UI components.

• Strict SCSS & Layout Hardening: Completely stripped out inline sx layout styles (including display, width, and truncation rules) from the generic OverflowTooltip and the LatestEntitiesList component. Migrated all layout responsibilities strictly to LatestEntitiesList.scss. Hardened flex layout rules (flex: 1 1 auto; min-width: 0) and added flex: 0 0 auto / max-width: 45% constraints on .latest-entities-type-wrapper to prevent long entity names from squishing the type label.
• Intelligent & Consistent Truncation: Implemented the OverflowTooltip component to elegantly handle long entity and type names. Centralized explicit CSS truncation rules (overflow: hidden, text-overflow: ellipsis, white-space: nowrap) across .latest-entities-entity-name, .latest-entities-name-wrapper, and .latest-entities-type-wrapper in SCSS for guaranteed visual consistency and layout separation of concerns.
• Tooltip & Component Enhancements: Upgraded OverflowTooltip in muiComponents.tsx to use ResizeObserver (combined with an onMouseEnter fallback) for accurate DOM boundary detection. Added inline documentation explaining the subpixel arithmetic (clientWidth vs getBoundingClientRect().width) and observer patterns.
• Global Type-Safety Refactor:
  • Refactored LightTooltip in muiComponents.tsx to strictly use TooltipProps instead of any.
  • Completely refactored CustomButton to enforce native @mui/material/ButtonProps, eliminating legacy any escape hatches. Proactively cleaned up invalid props and event handlers across downstream consumers to guarantee 100% type safety.
• UX & Code Cleanup: Restored the "Created " prefix on relative timestamps to maintain UX expectations and cleaned up formatting/blank line inconsistencies between helpers and component definitions. Standardized SCSS formatting to a strict 4-space indent.

How was this patch tested?

• Manual UI Testing: Verified in the dashboard that extremely long entity names cleanly truncate with an ellipsis ..., long type names remain appropriately visible without collapsing into (, and tooltips appear precisely when fractional overflow occurs.
• Extensive Unit Tests:
  • Reverted assertions in LatestEntitiesList.test.tsx back to strict /^Created / regex matchers (lines 190, 331, 537, 603) for strong regression protection.
  • Added dedicated combination tests verifying both extremely long name and typeName ('B'.repeat(300)) simultaneously rendering without layout breakdown.
  • Added mock logic triggering the MUI tooltip with fireEvent and fake timer advancements (jest.advanceTimersByTime) to verify overflow hover states.
  • Consolidated overlapping test coverage for empty UI fallback states into single cohesive assertions.
  • Replaced unsafe any casts with strictly typed test mocks (as unknown as typeof ResizeObserver) in muiComponents.test.tsx.
  • Expanded OverflowTooltip test suite to verify ResizeObserver.disconnect() on unmount, wrapperClassName application, and re-evaluation upon title prop updates.
  • All unit tests pass cleanly (npm run test).
• TypeScript & ESLint Validation: Passed strict type checking (npm run typecheck) across the entire dashboard with zero errors.

[Brijesh619]

[Brijesh619]

[Brijesh619]

[Brijesh619]

[Brijesh619]

[Brijesh619]