fix(ui): show the hook error when reordering fails - #18579

What?

When a collection hook throws an APIError while rows are reordered in the list view (orderable: true), the toast now shows the hook's error message. Before, it always showed the generic "Failed to reorder. This can happen if you reorder several rows too quickly. Please try again."

Why?

The reorder endpoint already passes APIErrors from hooks through to the response, but OrderableTable ignored the response body for every non-OK status. Editors could not see why a reorder was rejected (for example a validation or locking rule in a beforeChange hook).

How?

• New helper getReorderErrorMessage in packages/ui/src/elements/Table/. It returns errors[0].message from the response body.
• It keeps the generic retry message when:
  • the status is 500, because the server masks non-public errors as "Something went wrong.";
  • the body has no errors array (the endpoint's own 400 responses use { error });
  • the body is not JSON.
• OrderableTable throws with that message, so the existing toast.error and rollback are unchanged. The 403 branch is unchanged.

Tests:

• Unit: getReorderErrorMessage.spec.ts (4 cases).
• e2e: new orderable-hook-error collection in test/sort with a beforeChange hook that throws APIError(..., 400) on reorder. The test drags a row and expects the hook message in the error toast and the rows rolled back. It fails on main (toast shows "Failed to reorder…") and passes with this change.
• Ran PAYLOAD_DATABASE=sqlite pnpm test:e2e sort (3 passed), PAYLOAD_DATABASE=sqlite pnpm test:int sort (44 passed), the unit test, eslint and prettier.
• test/sort/payload-types.ts: I added only the types for the new collection. The committed file was already behind the generator in unrelated places, which I left alone.

Accessibility (payload-accessibility skill):

• Affected UI: the error toast after a failed drag-and-drop or keyboard reorder in the list view. Only the toast text changes. Focus, keyboard reordering, the drag handle and the toast mechanism (same toast.error call and live region) are unchanged.
• WCAG 2.2 criteria assessed:
  • 3.3.1 Error Identification (A): the failure is now described with its actual cause instead of a generic text.
  • 3.3.3 Error Suggestion (AA): a hook can provide a correction in its message. The retry suggestion stays for server errors.
  • 4.1.3 Status Messages (AA): not changed. The message is still announced through the existing toast live region.
  • 1.4.10 Reflow (AA): longer hook messages wrap inside the toast. Not checked at 320 px.
• Evidence: the e2e test asserts the rendered toast text. No axe scan or screen-reader check was done.

Also applies to 3.x (same code in OrderableTable.tsx).

Fixes #16308

AI-assisted: prepared with Claude Code and reviewed by me.

🤖 Generated with Claude Code