Skip to content

Dashboard tile head: collapse the action icons into a ⋯ menu, consistent across every style #544

Description

@BorisTyshkevich

Problem

PR #538 (#535) added duplicate, widen and expand to a Dashboard panel tile's
head. Together with the drag grip and the delete button that were already there,
the head now carries five controls sharing one flex row with the tile title —
and every action is flex-shrink: 0, so the title ellipsizes away first. On a
tile a single grid column wide (≈93px at twelve columns) there is no row left to
compete for.

A second, independent problem: the action set is not consistent between
Dashboard styles.
Delete is gated twice to the grafana-grid engine — a CSS
ancestor scope (.dash-gg-grid .dash-gg-tile:hover .dash-gg-del) and an
activeEngine === 'grafana-grid' check inside its own click handler — so
Report, 2 columns and 3 columns have no delete at all, and a flow KPI band
member has neither delete nor widen under any style.

Behaviour

Mode Head
Edit grip · title · widen · ⋯
View unchanged — the single direct expand icon, no menu

The menu always lists all four actions, in the design's order, with remove
last behind a separator: Duplicate panel, Widen (carrying widenLabel's
dynamic destination text), Open in Workbench and run, Remove tile. A row
that cannot run is listed and disabled with a sentence saying why — a menu whose
vocabulary changed with the layout style would teach the user nothing, and the row
is itself the place to explain. This reverses #535's "nothing to open means no
control, not a disabled one" for the menu only; the inline widen keeps that rule,
because a bare icon has only a tooltip.

Widen keeps an inline button as well: it is the one size adjustment users make
constantly (#535), and it is the one a narrow tile can withdraw. A CSS container
query on the tile head hides it below ~236px of head content box (≈260px of tile),
where the ellipsized title has nothing left to give. Its menu row stays, so widen
is never unreachable.

Remove becomes engine-independent by construction. It also absorbs #537 — see
below — because shipping delete into three more styles while it orphaned a query
would multiply that bug's blast radius.

Scope notes

Acceptance

  • Edit head is grip → title → widen → ; View head unchanged.
  • The menu lists all four actions always, with reasons on unavailable rows,
    and remove separated and last.
  • Remove works under all five styles and on a flow KPI band member, atomically
    with the panel's owned query, behind a confirmation, failing closed.
  • The inline widen withdraws on a narrow tile via a container query, with the
    menu row remaining; proven in a real browser.
  • The stays visible for its own menu's lifetime (aria-expanded), and the
    menu does not overflow the viewport's right edge.
  • npm test green with the per-file coverage floors; e2e on all three engines.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions