Add conflict detection and resolution UI for selective publishing

Closes #3585970

Manual Testing Steps - Conflict Detection & Resolution UI

  1. Enable dev mode:

    ddev drush en canvas_dev_mode -y && ddev drush cr

  2. Open Canvas page 1.

  3. Make a pending change and wait for autosave.

  4. Create a real conflict for page 1:

    ddev drush esav canvas_page 1 -y

  5. Wait for autosave polling and verify /auto-saves/pending returns 409 Conflict.

  6. Verify conflict notification toast is visible.

  7. Open notification center dropdown and verify conflict notification is visible.

  8. Click Review changes and verify Review changes shows 1 conflict to resolve.

  9. Verify page 1 row shows red warning icon/text and disabled checkbox.

  10. Open row dropdown and verify Resolve conflict is shown.

  11. Repeat same steps for another page, for example page 2:

ddev drush esav canvas_page 2 -y

  1. Verify conflicts are visible for both pages.
  2. Compare banner, row styling, icons, dropdown, toast, notification center, and spacing with the Figma design.

Expected Results

  • Conflict UI appears only when dev mode is enabled.
  • Conflict notification toast is visible.
  • Conflict is visible in notification center dropdown.
  • Review changes shows correct conflict count.
  • Multiple conflicted pages are shown correctly.
  • Conflicted rows cannot be selected for publishing.
  • Other pending rows remain normal.
  • Resolve conflict is visible in row dropdown.
  • UI matches the Figma reference.
Edited by Ravi Maniyar

Merge request reports

Loading