Draft: Issue #3591668: Add text-based comparison of entities UI

Ravi Maniyarrequested to merge
issue/canvas-3591668:3591668-text-based-comparison-of-entities-ui into 1.x

Description

Adds a text-based comparison view to the conflict-resolution UI so users can compare the published and auto-saved versions of a Canvas page as YAML.

This is a stacked MR. The change for #3591668 is in commit b6a8a7fc; earlier commits belong to the conflict-detection and conflict-resolution dependencies.

What changed

  • Added a Text tab alongside the existing Visual and Props views.
  • Fetches the published and auto-saved entity exports in parallel.
  • Displays a side-by-side YAML diff using react-diff-viewer-continued.
  • Highlights added, removed, and changed content.
  • Keeps scrolling synchronized between both versions.
  • Preserves version selection while switching between tabs.
  • Displays loading, error, and empty-content states without blocking the Visual tab.
  • Uses export timestamps when available, with layout timestamps as fallback.
  • Added Storybook YAML examples and unit-test coverage.

Backend dependency

This UI requires the content export endpoint:

  • Auto-saved version: GET /canvas/api/v0/export/content/{entityType}/{entityId}
  • Published version: the same endpoint with ?autoSaved=false

Testing instructions

  1. Enable canvas_dev_mode.
  2. Create or trigger a conflict for a Canvas page.
  3. Open Review changes and select Resolve conflict.
  4. Open the Text tab.
  5. Verify that:
    • Published and new YAML versions are displayed.
    • Added and removed lines are highlighted.
    • Scrolling one side synchronizes the other side.
    • Published or New version can be selected.
    • Selection remains active when switching between Visual, Text, and Props.
    • The Resolve conflict button is enabled after selecting a version.
  6. Verify the Visual tab remains usable if the export request is loading or fails.

Closes #3591668

Merge request reports