Skip to content

Dashboard: Collapsible sections - authoring UX #1897

Description

@alex-fedotyev

Summary

Follow-up to #1896 (core collapsible sections mechanics, merged as #1900). This issue covers the authoring experience and schema evolution for dashboard sections.

What was delivered (PR #1926)

Schema: DashboardSectionDashboardContainer

Introduced a polymorphic DashboardContainer abstraction with a type discriminator field ('section' for now). This future-proofs the data model for tabs and groups without requiring another migration.

  • DashboardSectionSchemaDashboardContainerSchema with type: enum(['section']).default('section')
  • sectionIdcontainerId on tiles
  • sectionscontainers on dashboards
  • Updated across all packages (common-utils, API, app)

Authoring UX

ActionHow
Create sectionDashboard ... overflow menu → "Add Section"
Rename sectionClick the title text directly (inline editing, Kibana pattern)
Delete sectionHover header → ... → Delete Section (tiles ungrouped, not deleted)
Collapse/expandClick section header
Toggle default collapsedHover header → ... → Collapse/Expand by Default
Add tile to sectionHover section header → + button
Move tile to/from sectionHover tile → grid icon → pick section or "(Ungrouped)"

UX decisions (from Grafana/Datadog/Kibana competitor research)

  • Click-to-rename instead of menu → Rename → type (fewer steps)
  • Hover-only edit controls... menu and + hidden in view mode (clean default)
  • "Add Section" in overflow menu — not equal prominence to "Add Tile" (less frequent action)
  • "Move to Section" before delete — more discoverable position in tile toolbar

Follow-up work (not in scope)

These are enabled by the data model but need separate implementation:

  • Drag tiles between sections — needs react-dnd custom drag layer; containerId update is the only data change
  • Reorder sections — needs sortable list (@dnd-kit/sortable or similar); just reorder containers array
  • Tab containers — add 'tab' to type enum, build tab bar UI
  • Group containers — add 'group' to type enum, build bordered container UI

Dependencies

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions