MemberJunction / MemberJunction/MJ
Migrate view-config-panel drawer onto the shared mj-slide-panel primitive
- Dominant language
- TSQL
- Stars
- 29
- Forks
- 6
- Avg merge
- 2d 1h
- Merged PRs (30d)
- 323
Description
Summary
The view-config-panel component in @memberjunction/ng-entity-viewer hand-rolls its own slide-in drawer chrome (backdrop, slide animation, resize handle,
Escape-to-close, header/close button) instead of using the shared MjSlidePanelComponent (mj-slide-panel) primitive in @memberjunction/ng-ui-components. The two
implementations are near-duplicates — the resize logic in particular is almost line-for-line identical. We should migrate the panel onto the primitive to delete the
duplicated chrome.
Background
While reviewing PR #2850 (which repositions this drawer below the 60px shell header to fix a header overlap), it became clear the panel reimplements chrome the
framework already provides.
mj-slide-panel already owns everything the bespoke drawer does:
┌──────────────────────────┬──────────────────────────────────────────┬───────────────────────────────────────────────────────┐
│ Chrome concern │ view-config-panel (bespoke) │ mj-slide-panel (primitive) │
├──────────────────────────┼──────────────────────────────────────────┼───────────────────────────────────────────────────────┤
│ Backdrop │ .panel-backdrop + (click)="OnClose()" │ OnBackdropClick │
├──────────────────────────┼──────────────────────────────────────────┼───────────────────────────────────────────────────────┤
│ Slide-in animation │ .config-panel translateX(100%) → .open │ IsVisible + transition │
├──────────────────────────┼──────────────────────────────────────────┼───────────────────────────────────────────────────────┤
│ Resize handle │ OnResizeStart/onResizeMove/onResizeEnd │ Resizable / MinWidthPx / MaxWidthRatio / WidthChanged │
├──────────────────────────┼──────────────────────────────────────────┼───────────────────────────────────────────────────────┤
│ Escape-to-close │ @HostListener('document:keydown.escape') │ OnEscapeKey │
├──────────────────────────┼──────────────────────────────────────────┼───────────────────────────────────────────────────────┤
│ Close button / title bar │ .panel-header + close-btn │ Title + CanClose guard │
└──────────────────────────┴──────────────────────────────────────────┴───────────────────────────────────────────────────────┘
The primitive is already adopted in ~16 places, including recycle-bin in this same entity-viewer package, so there's clear precedent that this drawer should use it
too.
Blocker that must be addressed first
mj-slide-panel is hardcoded to position: fixed; top: 0; height: 100vh (full viewport) with no top-offset input. PR #2850's actual fix is a top: 60px / height:
calc(100% - 60px) offset so the drawer sits below the shell header. A naive migration would therefore reintroduce the header-overlap bug that #2850 fixed.
So this is a two-step effort:
1. Extend mj-slide-panel with a top-offset (header inset) input, e.g. @Input() TopOffsetPx = 0, applied to both the panel and its backdrop. This benefits all
consumers (recycle-bin, etc.), not just this drawer.
2. Migrate view-config-panel onto the primitive — project its header / tab-nav / footer into the primitive's content slot and delete the duplicated backdrop, resize,
and Escape logic.
Scope / acceptance criteria
- [ ] Add a top-offset/inset input to MjSlidePanelComponent (panel + backdrop), defaulting to 0 so existing consumers are unchanged.
- [ ] Migrate view-config-panel to use , preserving the 60px header offset from #2850.
- [ ] Remove the now-dead bespoke chrome CSS/TS from view-config-panel (.panel-backdrop, .config-panel, .resize-handle, resize handlers, Escape listener).
- [ ] Verify no regression in the ~16 existing mj-slide-panel consumers.
- [ ] Re-test the Data Explorer drawer: slide-in below the header, resize, Escape/backdrop close, mobile full-width.
Notes
- This is explicitly out of scope for PR #2850 — that PR is a correctly-scoped CSS fix and should ship as-is.
- Reference implementation for content projection into the primitive: recycle-bin.component.html in the same package.
Contributor guide
Assessment
This issue has not been assessed yet.