feat(inbox): make report detail sections collapsible - #4027
Conversation
Web Inbox lets users collapse the report Summary, Evidence, Runs, and Reviewers sections. Desktop rendered all of them permanently open, and mobile only collapsed Signals. Desktop: `DetailSection` and `RightColumnSection` take `collapsible` (plus `defaultCollapsed`), turning the header into an `aria-expanded` disclosure button that shares a caret with the other. `rightSlot` stays outside the button so the Evidence count and the Reviewers "Add" popover keep their own click targets. Summary, Evidence, Runs, and Reviewers opt in; the data hooks are untouched, so collapsing only hides rendered content. `pr-review`'s `PrSectionHeader` was a near-copy of that chrome, so `PrCommentsSection` now uses the shared primitive and the duplicate is gone. Mobile: new `ReportSection` disclosure carries the accessible expanded state, and Summary and Suggested reviewers join the existing Signals toggle. Signals keeps its expand analytics. Generated-By: PostHog Code Task-Id: 6694c9d5-a520-4499-9af3-b46a15ab27dd
|
✨ Submitted to Merge by @andrewm4894. It will be added to the merge queue once all branch protection rules pass and there are no merge conflicts with the target branch. See more details here. |
|
React Doctor found no issues in the changed files. 🎉 Reviewed by React Doctor for commit |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: faebf8958d
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| {rightSlot && <div className="shrink-0">{rightSlot}</div>} | ||
| </Flex> | ||
| <div>{children}</div> | ||
| {open && <div>{children}</div>} |
There was a problem hiding this comment.
When a user expands a long Evidence card with “Show more”, “Relevant code”, or “Data queried”, collapsing and reopening Evidence removes and remounts the entire SignalsList subtree, resetting those SignalCard disclosure states. Keep the body mounted while hiding it so collapsing the outer section does not discard the user's position within its cards.
Useful? React with 👍 / 👎.
|
/trunk merge |
1 participant
Problem
Web Inbox lets you collapse the report detail sections (Summary, Evidence, Runs, Reviewers) so a long report stays scannable. PostHog Desktop rendered every one of those sections permanently open, and mobile only collapsed Signals — so the same report reads very differently depending on where you open it.
Reported by the
signals-inbox-parityscout, which spotted the upstreamcollapsiblebehaviour landing inPostHog/posthogand the matching downstream gap.Why: parity — a report should be scannable the same way on desktop, web, and mobile.
Changes
Desktop.
DetailSectionandRightColumnSectiontakecollapsible(plusdefaultCollapsed), turning the header into anaria-expandeddisclosure button with a shared caret.rightSlotstays outside that button, so the Evidence count and the Reviewers "Add" popover keep their own click targets. Summary, Evidence, Runs, and Reviewers opt in — the data hooks are untouched, so collapsing only hides rendered content.pr-review'sPrSectionHeaderwas a near-copy of the same collapsible chrome, soPrCommentsSectionnow uses the shared primitive and the duplicate is deleted.Mobile. New
ReportSectiondisclosure carries the accessible expanded state; Summary and Suggested reviewers join the existing Signals toggle. Signals keeps its expand analytics.No screenshots — this is a disclosure toggle on existing chrome, verified through the tests below rather than a live app run.
How did you test this?
DetailSection.test.tsxruns both primitives through one table (8 tests): body renders with no toggle when not collapsible, header click hides/restores the body while reportingaria-expanded,defaultCollapsedstarts closed, and arightSlotbutton fires its own handler without toggling the section.pnpm --filter @posthog/ui test— 2413 passed.apps/mobileVitest suite — 571 passed.turbo typecheck --filter=@posthog/uiclean;tscoverapps/mobilereports no new errors in the touched files (the app has pre-existing failures elsewhere and no typecheck task).Automatic notifications
Created with PostHog Code from an inbox report