ATLAS-5376: Atlas UI: Relationship cards layout breaking, overlapping, and tooltip placement issues with long entity names (React & Classic UI)

[Brijesh619]

What changes were proposed in this pull request?

ATLAS-5376: Atlas UI: Relationship cards layout breaking, overlapping, and tooltip placement issues with long entity names (React & Classic UI)

This patch addresses several layout, rendering, and type-safety issues on the Entity Detail "Relationships" tab when dealing with extremely long relationship item names (e.g., massive queries or Kafka topic names without spaces).

React UI Changes:

• Ref Forwarding & Console Warning Fix: Wrapped <MUILink> components inside <span> elements under <LightTooltip> in both CustomLink and getWithButton in RelationshipLineage.tsx. This guarantees proper ref forwarding to MUI Tooltip and prevents React Router console warnings.
• Strict Type Safety: Removed the // @ts-nocheck directive from RelationshipLineage.tsx. Refactored both RelationshipLineage.tsx and RelationshipLineage.test.tsx to eliminate all any types, introducing strict interfaces (GraphNode, GraphLink) and type guards (Record<string, unknown>).
• DOM & Testability Attributes: Utilized guid on CustomLink by attaching data-guid={guid} to list items and data-testid={relationship-link-${guid}} to links.

Classic UI Changes:

• Tooltip Width & Scoping: Restored .tooltip-inner { max-width: none; } globally in theme.scss to prevent global UI regressions across Classic UI. Scoped max-width: 300px; word-break: break-all; word-break: break-word; overflow-wrap: break-word; under .relationship-tooltip and relationship containers in relationship.scss.
• Bootstrap Tooltip Template: Configured Bootstrap tooltips ($.fn.tooltip) in RelationshipLayoutView.js and RelationshipCardsLayoutView.js using template: '<div class="tooltip relationship-tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' to enforce proper wrapping and max-width when tooltips are appended to body.
• Sidebar Truncation & Number Alignment:
  • Moved truncation styles from ul > li.entity-list-item to .entity-list-item .entity-type-name in graph.scss.
  • Updated list selectors to include ol > li alongside ul > li.
  • Applied max-width: calc(100% - 25px); vertical-align: top; line-height: 1.5; to .entity-type-name. This ensures that long names truncate cleanly with ... while keeping the list number 1. and text aligned on the exact same baseline without dropping to a second line.
• Dead Code Cleanup & Clean Diff: Removed unused functions (getdefault, getWithButton, getEntityTypelist, getElement) in RelationshipLayoutView.js and reverted formatting-only whitespace diffs to preserve master's code style.

---

How was this patch tested?

• Manual Testing:

  • Created test entities with exceptionally long relationship names (300+ characters without spaces).
  • Verified in both React and Classic UI that long relationship names truncate cleanly with ... without breaking layout boundaries or dropping text below list numbers (1.).
  • Verified that list numbers and truncated entity names align on the exact same top baseline in the graph sidebar drawer.
  • Hovered over truncated items in both UIs; verified that tooltips wrap within a 300px boundary without spilling off-screen.
  • Inspected browser console to confirm zero React ref/routing warnings when hovering or clicking tooltips and links.
  • Verified that tooltips are properly destroyed on component unmount / view re-renders, preventing orphaned DOM nodes.

• Automated Testing & Type Checks:

  • Ran Jest unit tests (RelationshipLineage.test.tsx - 61 tests passed), covering deleted status class assertions (deleted-relation, text-deleted), missing typeName fallback, and full untruncated tooltip titles.
  • Validated strict TypeScript compilation (npx tsc --noEmit -p tsconfig.build.json).
  • Verified linting (npx eslint) across staged and unstaged files.

---

[Brijesh619]

[Brijesh619]

[Brijesh619]

[Brijesh619]