ATLAS-5324: Enhance Collapsed Sidebar with Module Icons, Interactive Tree Tooltips, and Active State Markers

[Brijesh619]

What changes were proposed in this pull request?

This PR significantly enhances the user experience of the collapsed navigation sidebar by introducing interactive module icons and sleek popover trees. This allows users to access complex navigation (like Business Metadata, Glossary, etc.) without fully expanding the main sidebar, preserving valuable screen real-estate for the main dashboard.

Additionally, it introduces several critical layout stability, styling, strict-typing, and rendering optimizations to ensure these interactions feel instant, seamless, and production-ready:

Sidebar & Layout Enhancements:

• Collapsed Sidebar Module Icons: Added new SVG icons to the collapsed sidebar, providing quick-access entry points for all data trees.
• Interactive Tree Popovers: Interacting with these icons now opens a contextual popover containing the relevant data tree, allowing seamless navigation without shifting the main layout.
• Active State Markers: Added active state indicators to the collapsed icons to clearly show users which sidebar module is currently engaged based on the active route.
• Main Layout Stability (SideBarBody.tsx): Fixed a major layout bug where collapsing the sidebar caused the main dashboard content to shift left underneath the mini-sidebar, cutting off the left half of the page cards (e.g., the Overview card). Refactored the <Main> styled container to eliminate legacy negative margins (marginLeft: -20%) and padding: theme.spacing(3), converting <Main> into a flex item (flexGrow: 1, minWidth: 0). It now dynamically adapts next to both the 20% expanded drawer and 60px mini-drawer without cutting off content or causing whitespace gaps around the header.
• Default Tree Expansion: Fixed an issue where sidebar trees were fully collapsed by default. The component now intelligently auto-expands top-level parent nodes on load to provide immediate context.
• Tree Component Persistence (SideBarBody): Fixed a performance regression where toggling the sidebar open/closed caused the entire tree component (and data) to unmount and remount. Refactored <Paper> wrappers to use display: none lifecycle hooks, ensuring the data trees remain mounted, instantly available, and completely stable during interactions.
• Stale-While-Revalidate Version Footer: Fixed an issue in sessionSlice.ts where the sidebar version footer flashed empty during refetches. It now retains previous data during pending actions for a seamless UI experience.
• Popover Height Snapping & Edge Cases (TreeSkeletonLoader): Added an isPopover context flag so the popover tree dynamically renders a minimal 2-row loading skeleton instead of the default 7-row skeleton, perfectly matching the popover bounds without visual snapping. Fortified the skeleton loader to safely handle negative bounds and explicit undefined fallbacks.
• Tree Selection Persistence: Fixed an issue where Custom Filter selections were lost when the popover was closed. The selection state is now safely persisted via URL parameters.

Rendering, Strict Typing & Code Quality Optimizations:

• Strict TypeScript & Zero-any Refactoring (AGENTS.md Compliance): Refactored all dashboard charts (ClassificationDistributionCard, EntityStatusDonut, EntityTypeBarChart, MessageConsumptionChart, and EntityStatsChart) to completely eliminate any and unsafe type assertions:
  • Replaced (v: any) => numberFormatWithComma(v as number) with safe runtime type guards (v: unknown) => (typeof v === "number" ? numberFormatWithComma(v) : "").
  • Imported official Recharts interfaces (LegendPayload) for event handlers ((e: LegendPayload) => ...) and typed legend payloads directly.
  • Explicitly typed chartData tuples in EntityStatusDonut as Array<{ name: string; value: number; color: string }> to resolve Recharts PieProps generic overload mismatches.
  • Cast globalSessionData?.relationshipSearch safely as a boolean (Boolean(...)) in SideBarBody.tsx and strictly typed toastId in TreeNodeIcons.tsx as useRef<number | string | null>(null) with proper null guards around toast.dismiss().
• Search Table Image Flickering (EntityDisplayImage): Fixed an underlying bottleneck where layout shifts caused the Search Data Table to remount cells, triggering heavy network fetch requests for entity icons and flashing loading skeletons. Completely refactored EntityDisplayImage to drop React useState tracking in favor of synchronous browser-native <img onError> fallbacks.
  • Crucial Fix: Implemented a secure fallback check to prevent infinite image reloading loops if the fallback image also fails.
  • Type Safety: Hardened id and data-cy assignments with safe string casting to prevent invalid "undefined" DOM attributes.
• Strict Styling Compliance: Completely removed object-based styling (MUI sx props) and inline styling (style={{...}}) across components like QuickSearch.tsx, TreeNodeIcons.tsx, and SideBarBody.tsx. Replaced hardcoded rgba(255,255,255,0.08) styling in TreeSkeletonLoader.tsx with themed SCSS CSS variable fallback var(--skeleton-bg, rgba(255,255,255,0.08)). All layout configurations (Drawer, Popover, module hover states, footers) have been abstracted into shared SCSS classes (globalSearch.scss, sidebar.scss).

---

How was this patch tested?

Note - Sidebar Resize Logic Removal:
The draggerRef and drawer resizing mouse event listeners (handleMouseDown, handleMouseMove, etc.) were intentionally removed in this PR. This resize logic was pre-existing dead code on master that lacked a functional DOM dragger element, did not actually work, and needlessly bound unmounting event listeners. Removing it cleanly aligns with this PR's sidebar cleanup and prevents unused state bloat.

Manual UI Testing:

• Verified that hovering/clicking the new collapsed module icons successfully triggers the appropriate popover containing the correct tree data with proper styling.
• Verified that toggling between expanded (20%) and collapsed (60px) sidebar states smoothly resizes the main dashboard content without hiding content under the sidebar or breaking header alignment.
• Verified that opening a popover or toggling the sidebar does not cause the main dashboard layout to shift, nor does it unmount the underlying tree data.
• Verified that selecting a Custom Filter from within a popover persists its selected state even if the popover is closed and reopened.
• Validated that keyboard accessibility (using the Escape key to close active Popovers) functions natively.

Automated Test Suite Expansion (4,865 Passing Tests):

• Tree Persistence Validation: Refactored Jest test cases in SideBarBody.test.tsx to strictly assert that components do not unmount (via toHaveLength assertions and display: none checks) when toggling drawer states or closing popovers.
• Skeleton Edge Cases: Added explicit testing to TreeSkeletonLoader.test.tsx verifying safe behavior against negative values and undefined.
• State Retention Testing: Added tests verifying previous version data is retained during pending Redux actions in sessionSlice.test.ts.
• Configured TextEncoder and TextDecoder polyfills globally in setupTests.ts and setupTests.simple.ts to seamlessly support react-router-dom module upgrades in the JSDom environment.
• Removed outdated fetch mocks for image rendering in EntityDisplayImage.test.tsx and properly implemented native fireEvent.error DOM fallback simulation.
• Added UI assertions in About.test.tsx to ensure users see explicit "Unknown (failed to fetch version)" text upon a failed API call.
• Added standard Apache license headers and explicitly scoped useNavigate mocks in EntityStatusDonut.test.tsx.
• Refactored mocked relationshipSearch globals so states are cleanly restored without leaking across test boundaries.
• Extensively tested new components (SidebarSearchInput.test.tsx & TreeSkeletonLoader.test.tsx) for accessibility and edge cases.

Performance & Type Verification:

• Executed a search returning a large volume of entities (50+ rows). Rapidly toggled the sidebar to trigger layout resizes and visually confirmed that the entity icons in the table no longer flash or flicker, and the network tab remains quiet.
• Automated Build & Typecheck: Ran npm run typecheck and npm run test locally and verified that the refactored native DOM logic, SCSS migrations, layout fixes, and TypeScript strict mode types pass with 0 errors.

[Brijesh619]

[Brijesh619]

[Brijesh619]

[Brijesh619]

[Brijesh619]

CC. @mneethiraj

[Brijesh619]

[Brijesh619]

[Brijesh619]

[Brijesh619]

[Brijesh619]

[Brijesh619]

[Brijesh619]

[Brijesh619]