Skip to content

Configurable detail-view panels (S/M/L + custom views) for Product & Contract #456

@larsgeorge-db

Description

@larsgeorge-db

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.md in 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)

  • 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.
  • Toolbar transition: 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.
  • 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.

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:

  • 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions