Replace react-sortable-hoc with dnd-kit - #7860

What type of PR is this?

• Other (dependencies)

Description

Part 10 of the frontend dependency upgrade stack tracked in #7848. Stacked on #7859.

react-sortable-hoc hasn't had a release since 2022. It only allows React 16/17 and uses findDOMNode, which React 19 removes. This reimplements viz-lib's components/sortable on dnd-kit (@dnd-kit/core, sortable, modifiers, utilities; all support React 16.8–19).

The API stays the same (SortableContainer, SortableElement, DragHandle, plus a local sortableElement() HOC instead of react-sortable-hoc's). Items are identified by index, and the container reports onSortEnd({ oldIndex, newIndex }). It's used in three places: query/dashboard parameters, the chart editor's series order, and the table/details editors' column order.

What's different

• Dragging: items move in place (CSS transform) instead of react-sortable-hoc's floating clone, and helperClass goes on the dragged item. Parameters' appendSortableToParent prop only chose where that clone was attached, so it's gone. So is the onBeforeSortStart handler, which didn't exist on the component.
• Finding the DOM node: dnd-kit needs each item's DOM node. DragHandle finds it with closest(), which works for components that don't expose a DOM ref, like antd's Collapse.Panel (react-sortable-hoc used findDOMNode).
• Sensors: mouse and touch sensors rather than the pointer sensor, so the Cypress parameter test, which drags by triggering mouse events, keeps working.
• New: keyboard sorting (focus a handle, Space, arrows, Space). The handles get role="button" and screen reader instructions.
• New prop: the container takes an itemCount prop, since dnd-kit needs the list of item ids up front.

How is this tested?

• Unit tests (pytest, jest)

• Manually

• Lint, type-check, jest and the production build pass locally.

• New unit tests for the sortable components: mouse drag (with a mocked layout, since jsdom doesn't lay anything out), the sortableElement HOC, the dragging classes, keyboard sorting and the disabled state.

• In Chromium (Playwright, real mouse), against a local backend, I reordered:

  • query parameters: the new order is saved and survives a reload
  • chart series in the chart editor
  • table columns in the table editor (Collapse panels)

  No console errors.

• The Cypress "rearrange parameters" test runs on the canary ([Do not merge] CI for the frontend dependency upgrade stack (#7848) #7852).

🤖 Generated with Claude Code