scope queued card drag to its grip handle

Author: charlesvien

packages/ui/src/features/sessions/components/QueuedMessagesDock.test.tsx

@@ -6,14 +6,30 @@ const queuedState = vi.hoisted(() => ({
   messages: [] as Array<{ id: string; content: string; queuedAt: number }>,
 }));
 
+const sessionState = vi.hoisted(() => ({
+  editingQueuedId: undefined as string | undefined,
+}));
+
+const sessionService = vi.hoisted(() => ({
+  steerQueuedMessage: vi.fn().mockResolvedValue(undefined),
+  clearEditingQueuedMessage: vi.fn(),
+}));
+
+const storeSetters = vi.hoisted(() => ({
+  removeQueuedMessage: vi.fn(),
+  moveQueuedMessage: vi.fn(),
+}));
+
+const dndCapture = vi.hoisted(() => ({
+  onDragOver: undefined as ((event: unknown) => void) | undefined,
+}));
+
 vi.mock("@posthog/core/sessions/sessionService", () => ({
   SESSION_SERVICE: Symbol.for("test.session-service"),
 }));
 
 vi.mock("@posthog/di/react", () => ({
-  useService: () => ({
-    steerQueuedMessage: vi.fn().mockResolvedValue(undefined),
-  }),
+  useService: () => sessionService,
 }));
 
 vi.mock("@posthog/ui/features/sessions/useSession", () => ({
@@ -30,35 +46,73 @@ vi.mock("@posthog/ui/features/sessions/hooks/useEditQueuedMessage", () => ({
 }));
 
 vi.mock("@posthog/ui/features/sessions/sessionStore", () => ({
-  sessionStoreSetters: {
-    removeQueuedMessage: vi.fn(),
-    moveQueuedMessage: vi.fn(),
-  },
+  sessionStoreSetters: storeSetters,
   useSessionIsCloud: () => false,
   useSessionSelector: <T,>(
     _taskId: string,
-    select: (session: undefined) => T,
-  ) => select(undefined),
+    select: (session: { editingQueuedId?: string }) => T,
+  ) => select({ editingQueuedId: sessionState.editingQueuedId }),
   useSessionStore: {
-    getState: () => ({ taskIdIndex: {}, sessions: {} }),
+    getState: () => ({
+      taskIdIndex: new Proxy({}, { get: () => "run-1" }) as Record<
+        string,
+        string
+      >,
+      sessions: { "run-1": { messageQueue: queuedState.messages } },
+    }),
   },
 }));
 
 vi.mock("@posthog/ui/primitives/toast", () => ({
   toast: { error: vi.fn() },
 }));
 
+// The dock's reorder handler is driven directly through the captured
+// onDragOver prop; the sortable plumbing itself is @dnd-kit's to test.
+vi.mock("@dnd-kit/react", async () => {
+  const React = await import("react");
+  return {
+    DragDropProvider: ({
+      onDragOver,
+      children,
+    }: {
+      onDragOver: (event: unknown) => void;
+      children: React.ReactNode;
+    }) => {
+      dndCapture.onDragOver = onDragOver;
+      return React.createElement(React.Fragment, null, children);
+    },
+  };
+});
+vi.mock("@dnd-kit/react/sortable", () => ({
+  useSortable: () => ({
+    ref: () => {},
+    handleRef: () => {},
+    isDragging: false,
+  }),
+}));
+vi.mock("@dnd-kit/dom", () => ({ PointerSensor: class {} }));
+
 // Stub the per-message card so the test exercises the dock's collapse/scroll
 // shell, not the markdown/steer internals it already owns.
 vi.mock(
   "@posthog/ui/features/sessions/components/session-update/QueuedMessageView",
   async () => {
     const React = await import("react");
     return {
-      QueuedMessageView: ({ message }: { message: { content: string } }) =>
+      QueuedMessageView: ({
+        message,
+        isEditing,
+      }: {
+        message: { content: string };
+        isEditing?: boolean;
+      }) =>
         React.createElement(
           "div",
-          { "data-testid": "queued-card" },
+          {
+            "data-testid": "queued-card",
+            "data-editing": String(!!isEditing),
+          },
           message.content,
         ),
     };
@@ -84,7 +138,10 @@ function renderDock(taskId: string) {
 
 describe("QueuedMessagesDock", () => {
   beforeEach(() => {
+    vi.clearAllMocks();
     queuedState.messages = [];
+    sessionState.editingQueuedId = undefined;
+    dndCapture.onDragOver = undefined;
   });
 
   it("renders nothing when the queue is empty", () => {
@@ -135,4 +192,66 @@ describe("QueuedMessagesDock", () => {
     fireEvent.click(trigger);
     expect(screen.getAllByTestId("queued-card")).toHaveLength(2);
   });
+
+  it("reorders the queue when a card is dragged over another", () => {
+    queuedState.messages = TWO_MESSAGES;
+    renderDock("task-drag");
+
+    dndCapture.onDragOver?.({
+      operation: { source: { id: "q1" }, target: { id: "q2" } },
+    });
+
+    expect(storeSetters.moveQueuedMessage).toHaveBeenCalledWith(
+      "task-drag",
+      0,
+      1,
+    );
+  });
+
+  it.each([
+    {
+      name: "source and target are the same card",
+      operation: { source: { id: "q1" }, target: { id: "q1" } },
+    },
+    {
+      name: "source is not in the queue",
+      operation: { source: { id: "missing" }, target: { id: "q2" } },
+    },
+    {
+      name: "target is not in the queue",
+      operation: { source: { id: "q1" }, target: { id: "missing" } },
+    },
+    {
+      name: "there is no drop target",
+      operation: { source: { id: "q1" }, target: undefined },
+    },
+  ])("does not reorder when $name", ({ operation }) => {
+    queuedState.messages = TWO_MESSAGES;
+    renderDock("task-drag-noop");
+
+    dndCapture.onDragOver?.({ operation });
+
+    expect(storeSetters.moveQueuedMessage).not.toHaveBeenCalled();
+  });
+
+  it("marks only the edited message's card as editing", () => {
+    queuedState.messages = TWO_MESSAGES;
+    sessionState.editingQueuedId = "q1";
+    renderDock("task-editing");
+
+    const [first, second] = screen.getAllByTestId("queued-card");
+    expect(first).toHaveAttribute("data-editing", "true");
+    expect(second).toHaveAttribute("data-editing", "false");
+    expect(sessionService.clearEditingQueuedMessage).not.toHaveBeenCalled();
+  });
+
+  it("clears a stale edit hold when the edited message leaves the queue", () => {
+    queuedState.messages = TWO_MESSAGES;
+    sessionState.editingQueuedId = "q-gone";
+    renderDock("task-stale-hold");
+
+    expect(sessionService.clearEditingQueuedMessage).toHaveBeenCalledWith(
+      "task-stale-hold",
+    );
+  });
 });

packages/ui/src/features/sessions/components/QueuedMessagesDock.tsx

@@ -27,16 +27,21 @@ import { useQueuedMessagesForTask } from "@posthog/ui/features/sessions/useSessi
 import { toast } from "@posthog/ui/primitives/toast";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { Box, Flex, Text } from "@radix-ui/themes";
-import { type ReactNode, useCallback, useEffect } from "react";
+import {
+  type ReactNode,
+  type RefCallback,
+  useCallback,
+  useEffect,
+} from "react";
 
 interface QueuedMessagesDockProps {
   taskId: string;
 }
 
 /**
- * A single queued card, wrapped so the whole card is a drag handle for
- * reordering the queue. Drag activation waits for a small pointer move (see the
- * provider's sensor) so the card's buttons still take clicks.
+ * A single queued card wrapped as a sortable item. Dragging is scoped to the
+ * card's grip button (the handle ref passed to `children`), so the card's own
+ * buttons never compete with a drag.
  */
 function SortableQueuedMessage({
   id,
@@ -47,24 +52,18 @@ function SortableQueuedMessage({
   id: string;
   index: number;
   taskId: string;
-  children: ReactNode;
+  children: (dragHandleRef: RefCallback<HTMLButtonElement>) => ReactNode;
 }) {
-  const { ref, isDragging } = useSortable({
+  const { ref, handleRef, isDragging } = useSortable({
     id,
     index,
     group: `queue:${taskId}`,
     transition: { duration: 200, easing: "ease" },
   });
 
   return (
-    <div
-      ref={ref}
-      style={{
-        opacity: isDragging ? 0.5 : 1,
-        cursor: isDragging ? "grabbing" : undefined,
-      }}
-    >
-      {children}
+    <div ref={ref} style={{ opacity: isDragging ? 0.5 : 1 }}>
+      {children(handleRef as RefCallback<HTMLButtonElement>)}
     </div>
   );
 }
@@ -178,32 +177,35 @@ export function QueuedMessagesDock({ taskId }: QueuedMessagesDockProps) {
                   index={index}
                   taskId={taskId}
                 >
-                  <QueuedMessageView
-                    message={message}
-                    supportsNativeSteer={supportsNativeSteer}
-                    isEditing={editingId === message.id}
-                    onSteer={
-                      canSteer
-                        ? () => {
-                            void sessionService
-                              .steerQueuedMessage(taskId, message.id)
-                              .catch(() => {
-                                toast.error(
-                                  "Couldn't steer this message. It's still queued.",
-                                );
-                              });
-                          }
-                        : undefined
-                    }
-                    onEdit={() => editMessage(message)}
-                    onCancelEdit={cancelEdit}
-                    onRemove={() =>
-                      sessionStoreSetters.removeQueuedMessage(
-                        taskId,
-                        message.id,
-                      )
-                    }
-                  />
+                  {(dragHandleRef) => (
+                    <QueuedMessageView
+                      message={message}
+                      dragHandleRef={dragHandleRef}
+                      supportsNativeSteer={supportsNativeSteer}
+                      isEditing={editingId === message.id}
+                      onSteer={
+                        canSteer
+                          ? () => {
+                              void sessionService
+                                .steerQueuedMessage(taskId, message.id)
+                                .catch(() => {
+                                  toast.error(
+                                    "Couldn't steer this message. It's still queued.",
+                                  );
+                                });
+                            }
+                          : undefined
+                      }
+                      onEdit={() => editMessage(message)}
+                      onCancelEdit={cancelEdit}
+                      onRemove={() =>
+                        sessionStoreSetters.removeQueuedMessage(
+                          taskId,
+                          message.id,
+                        )
+                      }
+                    />
+                  )}
                 </SortableQueuedMessage>
               ))}
             </Flex>