diff --git a/packages/junior-dashboard/e2e/conversations.spec.ts b/packages/junior-dashboard/e2e/conversations.spec.ts index c8a0fcf129..3d82f8b42c 100644 --- a/packages/junior-dashboard/e2e/conversations.spec.ts +++ b/packages/junior-dashboard/e2e/conversations.spec.ts @@ -428,11 +428,11 @@ test("opens and closes a conversation in the mobile workspace", async ({ const pending = page.getByLabel("Pending messages"); await expect(pending).toBeVisible(); - // Cancel bar owns the total count on mobile; expand uses a distinct label. - await expect(pending.getByText("5 queued messages")).toHaveCount(1); - const expand = pending.getByRole("button", { name: "Show queued messages" }); + // Mobile collapsed control owns the total count (no separate cancel bar). + const expand = pending.getByRole("button", { name: "5 queued messages" }); await expect(expand).toBeVisible(); await expect(expand).toHaveAttribute("aria-expanded", "false"); + await expect(pending.getByText("5 queued messages")).toHaveCount(1); await expect( pending.getByText("Also check the canary traffic from the last deploy."), ).toBeHidden(); diff --git a/packages/junior-dashboard/src/client/conversations/ConversationPage.tsx b/packages/junior-dashboard/src/client/conversations/ConversationPage.tsx index 6b1e25379a..a33c6ee7db 100644 --- a/packages/junior-dashboard/src/client/conversations/ConversationPage.tsx +++ b/packages/junior-dashboard/src/client/conversations/ConversationPage.tsx @@ -288,28 +288,27 @@ function ConversationReplyFooter(props: { onPinRequestRef.current(); }, []); const onSubmitStart = useCallback(() => { - cancelPendingMessagesRef.current.reset(); + // Keep an in-flight remove intact so optimistic cache rollback stays coherent. + if (!cancelPendingMessagesRef.current.isPending) { + cancelPendingMessagesRef.current.reset(); + } onPinRequestRef.current(); }, []); const cancellableMessageIds = props.pendingMessages .filter((message) => message.clientStatus === undefined) .map((message) => message.inboundMessageId); - const cancellableMessageIdsRef = useRef(cancellableMessageIds); - cancellableMessageIdsRef.current = cancellableMessageIds; - const hasSendingOutboxMessage = props.pendingMessages.some( - (message) => message.clientStatus === "sending", - ); const pendingGeneratedAtRef = useRef(props.pendingGeneratedAt); pendingGeneratedAtRef.current = props.pendingGeneratedAt; - const onCancelQueue = useCallback(() => { - const inboundMessageIds = cancellableMessageIdsRef.current; + const onCancelMessage = useCallback((message: ConversationMailboxMessage) => { const receivedBefore = pendingGeneratedAtRef.current; - if (!receivedBefore || inboundMessageIds.length === 0) return; + if (!receivedBefore) return; cancelPendingMessagesRef.current.mutate({ - inboundMessageIds, + inboundMessageIds: [message.inboundMessageId], receivedBefore, }); }, []); + const cancelTargetInboundMessageId = + cancelPendingMessages.variables?.inboundMessageIds[0]; const cancelError = Boolean( cancelPendingMessages.error && cancelPendingMessages.variables?.inboundMessageIds.some((id) => @@ -336,15 +335,15 @@ function ConversationReplyFooter(props: {
void; showSlack: boolean; }) { const delivery = pendingDeliveryMeta(props.message); @@ -78,13 +82,42 @@ function PendingMetaIcons(props: { strokeWidth={2.2} /> + {props.onCancel ? ( + + + + ) : null} ); } function PendingRow(props: { + cancelDisabled: boolean; + cancelError: boolean; + cancelPending: boolean; conversation: ConversationTranscript; message: ConversationMailboxMessage; + onCancel?(message: ConversationMailboxMessage): void; onRetry?(message: ConversationMailboxMessage): void; }) { const text = props.message.text ?? ""; @@ -119,7 +152,16 @@ function PendingRow(props: { } leftClassName="text-sm leading-snug text-dashboard-text" right={ - + props.onCancel?.(props.message) : undefined + } + showSlack={showSlack} + /> } /> {redacted ? ( @@ -145,13 +187,16 @@ function PendingRow(props: {
) : null} + {props.cancelError ? ( +

+ Could not remove. Try again. +

+ ) : null} ); } function ExpandQueuedMessagesButton(props: { - /** When the cancel bar already shows the total count, avoid repeating it on mobile. */ - countShownInCancelBar: boolean; expanded: boolean; hiddenCount: number; onClick(): void; @@ -166,10 +211,7 @@ function ExpandQueuedMessagesButton(props: { ? `${props.hiddenCount} more queued messages` : totalLabel; // Mobile collapses previews and uses the total count as the expand control. - // When cancel already owns that count, keep a distinct expand action label. - const mobileCollapsedLabel = props.countShownInCancelBar - ? "Show queued messages" - : totalLabel; + const mobileCollapsedLabel = totalLabel; const label = props.expanded ? "Show fewer queued messages" : moreLabel; return ( @@ -195,9 +237,10 @@ function ExpandQueuedMessagesButton(props: { export function PendingMailboxStack(props: { cancelError?: boolean; cancelPending?: boolean; + cancelTargetInboundMessageId?: string; conversation: ConversationTranscript; messages: readonly ConversationMailboxMessage[]; - onCancelQueue?: () => void; + onCancelMessage?: (message: ConversationMailboxMessage) => void; onRetry?(message: ConversationMailboxMessage): void; }): ReactNode { const [expanded, setExpanded] = useState(false); @@ -219,50 +262,34 @@ export function PendingMailboxStack(props: { const visibleRows = showCollapsed ? previewRows : rows; const hiddenCount = Math.max(0, rows.length - COLLAPSED_PENDING_ROW_COUNT); const toggleExpanded = () => setExpanded((value) => !value); - const cancellableCount = rows.filter( - (message) => message.clientStatus === undefined, - ).length; - const hasSendingRow = rows.some( - (message) => message.clientStatus === "sending", - ); - const showCancel = - cancellableCount > 0 && !hasSendingRow && Boolean(props.onCancelQueue); - const countLabel = - rows.length === 1 ? "1 queued message" : `${rows.length} queued messages`; return (
- {showCancel ? ( -
-
- {countLabel} -
- -
- ) : null} - {showCancel && props.cancelError ? ( -
- Could not cancel queued messages. Try again. -
- ) : null} {showCollapsed ? ( // Desktop keeps a two-row preview; mobile collapses to the control only.
{previewRows.map((message, index) => ( ))} @@ -270,16 +297,29 @@ export function PendingMailboxStack(props: { ) : ( visibleRows.map((message, index) => ( )) )} {canCollapse ? ( { - it("shows cancel only when an accepted mailbox row exists", () => { +describe("PendingMailboxStack remove control", () => { + it("shows remove only for an accepted mailbox row", () => { const accepted = renderToStaticMarkup( undefined} + onCancelMessage={() => undefined} />, ); const localOnly = renderToStaticMarkup( @@ -59,15 +59,15 @@ describe("PendingMailboxStack cancel control", () => { messageId: "client:1", }), ]} - onCancelQueue={() => undefined} + onCancelMessage={() => undefined} />, ); - expect(accepted).toContain("Cancel queue"); - expect(localOnly).not.toContain("Cancel queue"); + expect(accepted).toContain("Remove queued message"); + expect(localOnly).not.toContain("Remove queued message"); }); - it("hides cancel while a local send can still become accepted", () => { + it("keeps remove available for accepted rows while a local send is pending", () => { const html = renderToStaticMarkup( { messageId: "client:2", }), ]} - onCancelQueue={() => undefined} + onCancelMessage={() => undefined} />, ); - expect(html).not.toContain("Cancel queue"); + expect(html.match(/aria-label="Remove queued message"/g)).toHaveLength(1); }); - it("hides a stale cancel error when only local outbox rows remain", () => { + it("does not show remove for failed local outbox rows", () => { const html = renderToStaticMarkup( { messageId: "client:retry-1", }), ]} - onCancelQueue={() => undefined} + onCancelMessage={() => undefined} />, ); - expect(html).not.toContain("Could not cancel queued messages"); + expect(html).not.toContain("Remove queued message"); + expect(html).not.toContain("Could not remove. Try again."); }); - it("does not repeat the queue count on the mobile expand control when cancel shows it", () => { + it("shows an inline remove error on the target accepted row", () => { + const html = renderToStaticMarkup( + undefined} + />, + ); + + expect(html).toContain("Could not remove. Try again."); + expect(html).toContain('aria-label="Could not remove. Try again."'); + }); + + it("uses the queue count on the mobile expand control", () => { const messages = Array.from({ length: 5 }, (_, index) => message({ inboundMessageId: `accepted-${index + 1}`, @@ -118,12 +134,12 @@ describe("PendingMailboxStack cancel control", () => { undefined} + onCancelMessage={() => undefined} />, ); expect(html).toContain("5 queued messages"); - expect(html).toContain("Show queued messages"); + expect(html).not.toContain("Show queued messages"); expect(html.match(/5 queued messages/g)).toHaveLength(1); }); });