web-monitoring-ui icon indicating copy to clipboard operation
web-monitoring-ui copied to clipboard

Feature/handle non renderable content 1067

Open BeckettFrey opened this issue 3 months ago • 19 comments

Closes #1067

Summary

This PR introduces new FilePreview and SideBySideFilePreview React components to enhance the diff view experience for non-renderable file types (e.g., .xlsx, .docx, .zip). Instead of attempting to render these files inline—which previously caused automatic downloads and blank comparison windows—the UI now displays file metadata and provides a download/view button.

Changes

  • New Diff Type: Added SIDE_BY_SIDE_FILE_PREVIEW constant in diff-types.js
  • FilePreview Component: Displays file name, media type, size, hash and download/view button
  • SideBySideFilePreview Component: Enables side-by-side comparison of non-renderable files
  • Integration: Updated diff-view.jsx to use new component
  • Styling: Added responsive CSS

BeckettFrey avatar Aug 08 '25 19:08 BeckettFrey