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

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 (Vite Dynamic Imports): Added new SVG icons to the collapsed sidebar, providing quick-access entry points for all data trees. Migrated all hardcoded absolute string paths (e.g., "/img/sidebar-icons/...") to native Vite module imports (import iconEntities from ...) ensuring the bundler correctly hashes and dynamically routes the SVGs relative to any base URL path in production.
• Interactive Tree Popovers (React Portals): Interacting with these icons now opens a contextual popover containing the relevant data tree. To guarantee top-tier performance, we implemented a dynamic React Portal architecture. The component now renders via createPortal consistently, dynamically reparenting the DOM node between the sidebarWrapper and the popoverContainer. This guarantees exactly one React instance of each tree at all times, preserving Redux/effects states seamlessly without duplicate fetching or node remounting.
• Redundant API Call Elimination (SideBarTree & SideBarBody Modules): Fixed an issue where toggling the sidebar, remounting layouts, and opening individual tree popovers triggered redundant data-fetching API calls across the main SideBarBody and all 6 sidebar tree components (Entities, Classifications, Glossary, etc.). Replaced the loosely typed isEmpty() utility with strict === null || === undefined cache checks within the useEffect hooks, completely stopping infinite network polling loops when the backend actively returns an empty payload (e.g., { entityDefs: [] }).
• Infinite Render Loop Patch: Engineered stable refCallbacks factory functions mapped by component ID in SideBarBody.tsx to securely track portal references without triggering React dependency cascades.
• Empty State UI ("No Records Found"): Fixed several bugs where the "No Records Found" fallback text was improperly aligned, dim, and incorrectly interactive. Restored proper indentation by wrapping the placeholder in a native, disabled <CustomTreeItem>, increased text opacity for readability, and added a strict labelProps?.node !== undefined guard to prevent MUI from illegally applying active .Mui-selected highlighting to empty states.
• 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.
• Tree Component Persistence (SideBarBody): Refactored <Paper> wrappers to use SCSS accessibility-friendly structural concealment (visibility: hidden, width: 0, position: absolute, pointer-events: none) rather than display: none or conditional rendering. This strictly keeps layout/measurements alive for React while pulling nodes cleanly off the visual rendering thread.
• Stale-While-Revalidate Session/Version Fetching: Fixed an issue in sessionSlice.ts where the sidebar version footer flashed empty during transient network errors. The slice now explicitly retains state.versionData.data and state.sessionObj.data during .rejected lifecycle events 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.

Entity Detail & Image Loading Fixes:

• Avatar Fallback Image Fix (EntityDisplayImage.tsx & EntityDetailPage.tsx): Fixed a regression where missing entity icons (like StorageDesc.png) failed to show the service-level fallback image (like hive.png) on the detail page.
  • Handled the missing serviceType on the detail page API response by injecting it manually from the global Type Definitions (entityObj).
  • Replaced unstable DOM manipulation (target.src = fallbackUrl) with native React useState hooks. This prevents Material-UI's <Avatar> from aggressively unmounting the underlying <img> tag upon an onError event, ensuring the fallback icon triggers a clean re-render and successfully displays.

Dashboard Layout Spacing Fixes (DashBoard.tsx, DashboardOverview.tsx, dashboard.scss):

• Equal Left/Right Card Padding: Fixed a persistent asymmetry where the dashboard cards had significantly more left padding than right. Resolved by setting overflow: hidden on .dash-board-stack-6 and applying sx={{ width: "100%" }} on the Grid container, which constrains the Grid within the padded parent and produces symmetric 24px visual gaps on both left and right sides.
• Balanced Vertical Search Bar Spacing: Fixed excessive and uneven whitespace around the search bar by assigning spacing={0} on the outer DashBoard Stack and structuring equal 16px white space boundaries through dashboard.scss.
• Outer Stack Padding Reset: Set padding={0} on the outer DashBoard Stack to eliminate any MUI default horizontal padding that was contributing to the left/right asymmetry.

Rendering, Strict Typing & Code Quality Optimizations:

• Vite SWC & SCSS Build Stability: Resolved strict build compilation errors by terminating trailing commas in React module imports and sanitizing literal string newline characters (\n) within the SCSS architecture.
• BEM-Style Semantic Refactoring: Fully refactored and eliminated all auto-generated, sequential class names across the dashboard charts and containers (e.g., swapping .classification-distribution-card-box-9 for .classification-distribution-card__tooltip), greatly enhancing long-term code readability and CSS maintainability.
• Strict Styling Compliance: Completely removed object-based styling (MUI sx props) and inline styling (style={{...}}) across all modified components.
  • Hardcoded hexadecimal background colours (#ffffff) and raw RGB shadows were wiped globally and re-linked to scalable tokens in variables.scss ($card-bg, $dashboard-bg, $primary-blue, etc.).
  • Migrated configurations for QuickSearch.tsx, TreeNodeIcons.tsx, SideBarTree.tsx, SideBarBody.tsx, and all DashboardOverview charts entirely into SCSS abstraction schemas (like .no-records-item).
• Strict TypeScript & Zero-any Refactoring (AGENTS.md Compliance): Scoured the workspace to completely eliminate any and unsafe type assertions:
  • Eradicated all any usages across the Redux selector pulls in SideBarTree.tsx and SideBarBody.tsx (e.g., useAppSelector relies strictly on RootState inference rather than explicit state: any casts).
  • Fixed preexisting typos in Redux store selectors (e.g., rootClassificationType vs rootClassification).
  • Typed mutable refs explicitly (e.g., toastId as React.MutableRefObject<number | string | null>) and downstream method guards.
  • Extracted unsafe as string coercions in convertApiToQueryBuilder and substituted structured string casting String(...) bindings mapping explicit fallbacks.

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.

Manual UI Testing:

• Verified that hovering/clicking the new collapsed module icons successfully triggers the appropriate popover containing the correct tree data via createPortal.
• Evaluated dynamic viewport limits for popover mounting locations.
• Verified that the dashboard card area has equal left and right padding, and that the search bar has symmetric whitespace above and below it.
• Visually confirmed that the entity detail page gracefully loads the service-level fallback icon when a type-specific icon is missing.
• Verified that no sx prop or inline style attribute remains on any component touched by this PR, validating complete SCSS segregation.
• Confirmed the "No Records Found" text cleanly displays as a disabled element without selection bugs.

Automated Test Suite Expansion:

• React Portal Validations: Added dedicated assertions to SideBarBody.test.tsx verifying that toggling createPortal components to/from popovers retains exact component counts, ensuring Redux loops are kept completely isolated.
• Data-Fetching Cache Assertions: Extended all Sidebar Tree component test suites and SideBarBody.tsx to strictly enforce the new conditional data-fetching rules. Added mock environments to guarantee dispatch is entirely bypassed when Redux holds an empty target payload instead of null.
• SVG Path Architecture Validation: Asserted SideBarBody.test.tsx accurately maps Vite SVG module imports onto the node endpoints, explicitly confirming no hardcoded static strings remain.
• Placeholder UI Logic (SideBarTree.test.tsx): Engineered regression tests targeting the fallback "No Records Found" component behavior, actively asserting its structural security and preventing interactive .Mui-selected state injections.
• Navigation Assertions: Verified logo interaction tests in SideBarBody.test.tsx accurately fire mockNavigate behaviors, while edge cases enforcing blank param routes load exclusively without triggering phantom active states.
• Skeleton & Render Edge Cases: Tested TreeSkeletonLoader.test.tsx for negative bound limits and invalid element strings in table rendering fallbacks.
• State Retention Testing: Injected regression guards confirming .rejected responses in sessionSlice.test.ts (for both version data and session data) hold onto stale local payloads accurately.

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 network tab remains quiet, and redundant module APIs are no longer firing.
• Automated Build & Typecheck: Ran npm run typecheck, npm run lint, and npm run test locally and verified that the refactored native DOM logic, React Portal lifecycle constraints, layout fixes, test suite updates, and TypeScript strict mode types pass flawlessly with 0 errors.