Added sidebar for viewing automation steps

[troyciesco]

towards NY-1254

• clicking a step opens a sidebar with step details
• for now, trigger just shows free/paid, is not editable or deleteable
• wait and send email show their respective information and buttons, but the buttons and inputs don't do anything

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 3f9f313f-cdd3-41a6-8403-8bb1b5a5cd36

📥 Commits

Reviewing files that changed from the base of the PR and between ed0a165 and b672e16.

📒 Files selected for processing (2)

• apps/posts/src/views/Automations/components/automation-canvas.tsx
• apps/posts/test/unit/views/automations/automation-editor.test.tsx

🚧 Files skipped from review as they are similar to previous changes (2)

• apps/posts/test/unit/views/automations/automation-editor.test.tsx
• apps/posts/src/views/Automations/components/automation-canvas.tsx

---

Walkthrough

The PR implements step selection and a read-only details sidebar for the automation canvas. It introduces StepNodeDisplayData and extended StepNodeData with selection state and callbacks. NodeShell is refactored to render as an accessible button with aria attributes and selected styling. The graph building logic now accepts selection parameters and injects selected state into trigger and action nodes. A new StepSidebar component displays step details (member eligibility, wait duration, action details) derived from selectedStepId. The canvas maintains local selection state, updates it via onNodeClick (excluding tail nodes), clears it via onPaneClick, and renders the sidebar alongside the graph. Tests validate sidebar behavior across different step types and interaction patterns.

Possibly related PRs

• TryGhost/Ghost#27904: Modifies automation canvas node/edge wiring logic in the same file, directly related to graph construction updates.

Suggested labels

ok to merge for me

Suggested reviewers

• EvanHahn

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: adding a sidebar for viewing automation steps, which is the primary functionality added across both modified files.
Description check	✅ Passed	The description is directly related to the changeset, explaining the feature implementation (clicking steps opens sidebar with details) and current limitations, which aligns with the code changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch NY-1254_automations-step-sidebar

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

apps/posts/src/views/Automations/components/automation-canvas.tsx (1)

339-343: ⚠️ Potential issue | 🟠 Major | 🏗️ Heavy lift

The open sidebar is covering the centered step column.

The graph is still centered against the full canvas width, but the sidebar is absolutely overlaid on that same space. With the current constants, common viewport widths leave the selected 256px node partially under the 36rem panel, which hides part of the step and nearby affordances. Reserve layout width for the sidebar or recenter the viewport when it opens.

Also applies to: 552-565, 637-661

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/posts/src/views/Automations/components/automation-canvas.tsx` around
lines 339 - 343, The viewport is centered using the full canvas width so the
right-side sidebar (36rem) overlays the centered node; update getInitialViewport
and the other centering logic (the blocks around NODE_COLUMN_CENTER_X and
INITIAL_VIEWPORT_Y at the other two occurrences) to subtract the sidebar’s
reserved width when the sidebar is open (or compute an effectiveCanvasWidth =
canvasWidth - SIDEBAR_WIDTH and use that for centering), and also trigger a
recentre function when the sidebar toggles so the selected node is shifted left
by half the sidebar width; reference NODE_COLUMN_CENTER_X, INITIAL_VIEWPORT_Y,
getInitialViewport and the matching centering code at the other two occurrences
to apply the same change.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/posts/src/views/Automations/components/automation-canvas.tsx`:
- Around line 552-565: The sidebar opens but has no keyboard-accessible way to
dismiss it; update the StepSidebar component to accept and call a close handler
(e.g., onClose or clearDetail) and render a focusable close control inside (with
an aria-label and data-testid) that invokes that handler; additionally add an
Escape keydown listener within StepSidebar that calls the same
onClose/clearDetail when detail is present (clean up listener on unmount), and
apply the same changes to the other sidebar instance that renders
StepSidebar/StepSidebarContent so both mouse and keyboard users can close the
panel.

---

Outside diff comments:
In `@apps/posts/src/views/Automations/components/automation-canvas.tsx`:
- Around line 339-343: The viewport is centered using the full canvas width so
the right-side sidebar (36rem) overlays the centered node; update
getInitialViewport and the other centering logic (the blocks around
NODE_COLUMN_CENTER_X and INITIAL_VIEWPORT_Y at the other two occurrences) to
subtract the sidebar’s reserved width when the sidebar is open (or compute an
effectiveCanvasWidth = canvasWidth - SIDEBAR_WIDTH and use that for centering),
and also trigger a recentre function when the sidebar toggles so the selected
node is shifted left by half the sidebar width; reference NODE_COLUMN_CENTER_X,
INITIAL_VIEWPORT_Y, getInitialViewport and the matching centering code at the
other two occurrences to apply the same change.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: d545dc7d-151d-4e58-9536-6753ecb36b48

📥 Commits

Reviewing files that changed from the base of the PR and between 5e673e2 and ed0a165.

📒 Files selected for processing (2)

• apps/posts/src/views/Automations/components/automation-canvas.tsx
• apps/posts/test/unit/views/automations/automation-editor.test.tsx

[EvanHahn]

Do we want this to be configurable right now? I think not? (I think that'd mean removing this and TriggerStepSidebarDetail and the horse it rode on.)

[troyciesco]

oh i meant to call this out before i added you as a reviewer. Other than it being in the prototype, i think maybe it makes sense to add and not let it be editable because:

1. it provides a bit more detail than the node can
2. in the near term we can improve something that's been asked for a few times since welcome emails launched, and provide a bit more granularity on who gets the email and when (for example, sending the paid one to comped members)

though tbf, it'd have to be pretty different than just these checkboxes, and checkboxes that do nothing will be kinda confusing

[EvanHahn]

praise: love to see it