PostHog / PostHog/posthog

Workflow editor signals that steps are draggable when they aren't

Open Beginner friendly
#73,676 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
Python
Stars
39.9k
Forks
3.4k
Avg merge
6h 51m
Merged PRs (30d)
232

Description

Bug Description

The workflow editor gives three visual cues that steps can be dragged, but dragging does
nothing and there's no feedback explaining why. On a deep workflow this costs real time:
you try to tidy the layout, nothing happens, and nothing indicates that the move
interaction is a click rather than a drag.

The cues that point the wrong way:

  • Action nodes have a hover:translate-y-[-2px] lift on hover, which reads as grabbable.
  • The move-mode drop target renders IconDrag, a drag-handle icon, for an interaction
    that actually requires a click.
  • The canvas pans and zooms normally, so steps look like they should move too.

Meanwhile nodesDraggable={false} is set on the ReactFlow element in
HogFlowEditor.tsx, so no drag will ever do anything.

Move itself does work (shipped in #46645): select a step, choose move, then click one of
the highlighted insert points. The problem is purely that nothing communicates that, and
several things communicate the opposite.

Image

How to reproduce

  1. Open a workflow with several steps.
  2. Hover a step. It lifts, suggesting it can be picked up.
  3. Try to drag it. Nothing happens, with no feedback.

Additional context

This is the discoverability half of #46623, which asks for real drag handles. Splitting it
out because it's fixable without touching the layout engine or the workflow schema: change
the move-mode icon to something that reads as a target, and drop or rework the hover lift
on nodes that can't be dragged.

The harder half stays on #46623: react_flow_utils/autolayout.ts recomputes every
coordinate through ELK on each graph change and the schema has no position field, so real
dragging can't persist without a schema change.

We hit this on a production workflow seven levels deep, where the auto layout routes a
branch edge across the full width of the canvas and there's no way to tidy it.

I'd like to pick this up. The affordance change looks like a contained frontend fix and I
can have a PR up quickly. If the workflows team would rather keep it in-house that's
completely fine, and the context above stands either way.

Debug info
- [ ] PostHog Cloud, Debug information: [please copy/paste from https://us.posthog.com/settings/project-details#variables or https://eu.posthog.com/settings/project-details#variables]
- [ ] PostHog Hobby self-hosted with `docker compose`, version/commit: [please provide]
- [ ] PostHog self-hosted with Kubernetes (deprecated, see [`Sunsetting Kubernetes support`](https://posthog.com/blog/sunsetting-helm-support-posthog)), version/commit: [please provide]

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in HogFlowEditor.tsx, where ReactFlow has nodesDraggable={false}, and inspect the action-node hover styling and the move-mode IconDrag drop target. Replace the misleading drag cues with visuals that match the click-to-move interaction, then verify the reproduction steps on a deep workflow and confirm that selecting Move still allows clicking highlighted insert points.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
78/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.