You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Replace the hardcoded S/M/L panel toggle on Data Product and Data Contract detail views with a user-configurable view system. The three built-in views (Small / Medium / Large) remain as defaults, but users can override which panels appear in each, create named custom views ("QBR focus", "Compliance audit"), and switch between them via the existing S/M/L icon buttons (zero custom views) or a unified "Select view" dropdown (≥1 custom view). Browser-local storage for v1.
Scope: Product + Contract wired; mechanism generic so Asset + Domain plug in later.
Customization model: Built-in slots are overridable in-place (with Reset), not deletable. Users can also create named custom views alongside.
Section registry: New TS modules (product-sections.ts, contract-sections.ts) own the canonical ordered section list with i18n keys, optional canShow(permissions) predicates, and the three built-in view definitions. Replaces the current inline shouldShowSectionForViewMode switch.
Storage shape: Symmetric diffs ({ hidden, added }) — built-in overrides diff against the built-in's set, user-created views diff against the full canonical list. New code-side sections automatically appear in both.
Migration: Legacy data-product-view-mode / data-contract-view-mode keys migrate into the new viewconfig:* shape on first load.
Default: Existing role-based first-load default (owner-team → L, write/admin → M, else S) preserved; picks a slot, which may be overridden.
Permissions: Sections gated by canShow(permissions) are filtered out of the chooser; renderer still gates independently. Config is never mutated based on permission changes.
Edges: Empty views rejected; duplicate names allowed; built-in names not renameable; soft cap of 20 custom views.
Section registry modules: built-in section sets are valid registry-known ids; canShow predicates return expected booleans for representative permission inputs; canonical order stable.
View config store: load/save round-trip; legacy migration for each legacy value + missing + garbage; diff apply (hidden/added against base, including unknown ids and duplicates); end-to-end resolution for pristine built-in, overridden built-in, custom view, missing active id, registry-evicted section; mutators (override, reset, create, update, rename, delete) produce expected next-state; empty-view creation rejected at store boundary; new-section propagation into both overridden built-ins and custom views.
Hook + UI components covered by manual / Playwright testing in subsequent verification, not unit-tested in this PRD.
Modules
Deep (tested):
views/sections/product-sections.ts (new)
views/sections/contract-sections.ts (new)
lib/view-config-store (new — pure functional layer over localStorage)
Thin wrappers:
hooks/use-view-config (new)
components/common/view-selector (new)
components/common/view-customize-popover (new)
components/common/manage-views-dialog (new)
Modified:
views/data-product-details.tsx — drop local ViewMode type, parseStoredViewMode, computeDefaultViewMode, shouldShowSectionForViewMode, S/M/L toolbar JSX; replace with useViewConfig + <ViewSelector />.
views/data-contract-details.tsx — same.
views/data-product-details.test.tsx — tests for the removed helpers move to test the new registry / store modules.
Translation files — new i18n keys for section labels.
Summary
Replace the hardcoded S/M/L panel toggle on Data Product and Data Contract detail views with a user-configurable view system. The three built-in views (Small / Medium / Large) remain as defaults, but users can override which panels appear in each, create named custom views ("QBR focus", "Compliance audit"), and switch between them via the existing S/M/L icon buttons (zero custom views) or a unified "Select view" dropdown (≥1 custom view). Browser-local storage for v1.
Full PRD
See
docs/prds/prd-configurable-detail-view-panels.mdin this repo for the full problem statement, user stories, implementation decisions, testing decisions, and out-of-scope items.Key design points (locked via /grill-me)
product-sections.ts,contract-sections.ts) own the canonical ordered section list with i18n keys, optionalcanShow(permissions)predicates, and the three built-in view definitions. Replaces the current inlineshouldShowSectionForViewModeswitch.{ hidden, added }) — built-in overrides diff against the built-in's set, user-created views diff against the full canonical list. New code-side sections automatically appear in both.data-product-view-mode/data-contract-view-modekeys migrate into the newviewconfig:*shape on first load.customViews.length === 0→ S/M/L icon buttons;≥1→ single dropdown listing built-ins + customs +Customize…/Manage views…entries. Overridden built-ins show a dot indicator +(customized)suffix.canShow(permissions)are filtered out of the chooser; renderer still gates independently. Config is never mutated based on permission changes.Out of scope (v1)
Server-side sync, per-instance overrides, sharing/export, Asset/Domain wiring, per-view section reordering, admin-configured org defaults.
Test plan
Unit tests on the two deep modules only:
canShowpredicates return expected booleans for representative permission inputs; canonical order stable.Hook + UI components covered by manual / Playwright testing in subsequent verification, not unit-tested in this PRD.
Modules
Deep (tested):
views/sections/product-sections.ts(new)views/sections/contract-sections.ts(new)lib/view-config-store(new — pure functional layer overlocalStorage)Thin wrappers:
hooks/use-view-config(new)components/common/view-selector(new)components/common/view-customize-popover(new)components/common/manage-views-dialog(new)Modified:
views/data-product-details.tsx— drop localViewModetype,parseStoredViewMode,computeDefaultViewMode,shouldShowSectionForViewMode, S/M/L toolbar JSX; replace withuseViewConfig+<ViewSelector />.views/data-contract-details.tsx— same.views/data-product-details.test.tsx— tests for the removed helpers move to test the new registry / store modules.