Skip to content

Adds option to toggle between raw and cleaner diffs

Eduardo Bonet requested to merge 346764-option-to-toggle-between-rendered-and-raw-diff into master

What does this MR do and why?

From user feedback, we learned that although the cleaner jupyter diffs are a desired feature, having the classic diffs is still an important part for their use cases. This adds a toggle to the commit page. Adding this functionality to the MR page will come in a follow up ticket.

  • These changes are only visible for diffs on .ipynb files
  • Each file viewer has can be toggled independently
  • Comments are mapped between the source and cleaner version. Comments on the cleaner version can only be added on lines that have a mapping on the source diff. Notes on lines on the source diff that are stripped out on the cleaner diff are not displayed
  • The lines number on the cleaner diff might be out of order, since they point to the line on the source files, which is a json file and order is not guaranteed.

Backend changes

  • The additional viewer is created by generating a new diff file as a property of Diff::File,
  • Diff::File::Rendered::NotebookDiffFile extends Diff::File with Jupyter related code: interfacing with the Diff library, mapping lines, etc).
  • Since we are splitting the MR and don't want to add too many changes to the MR page, we pass a flag to Diff::FileCollection::Base to use the secondary viewer (with the cleaner diff) as the main one.
  • GitLab::Diff::CustomDiff is deprecated and will be removed on a followup MR
  • Flag jupyter_clean_diffs is not used anymore and will be removed on a followup MR

Frontend changes

A lot simpler than the backend changes, only adds the behaviour to a toggle that swaps between the rendered and the cleaner diffs

Screenshots or screen recordings

Recording

Commit Page:
Before image
After Raw Selected: image Cleaner Selected: image

MR Page:

What changes on the MR page is the diff line number, as it now reflects the line on the source file rather than on the transformed file.
Before image
After image

How to set up and validate locally

  1. Create a mirror of https://gitlab.com/gitlab-org/incubation-engineering/mlops/ipynb-test-projects/diff-sample into your GDK instance (include branches main and branch_with_another_change

  2. Enable the feature flag :rendered_diffs_viewer

  3. Open the commit 2352a32d5b88ff26ee348798e7cbaef047176ce6 (http://gdk.test:3000/<path-to-mirror>/-/commit/2352a32d5b88ff26ee348798e7cbaef047176ce6)

  4. On the right side of each file, a new toggle allows switching between raw and cleaner diffs

    image

  5. Clicking on the toggle shows the clear diff

    image

  6. Add a comment on the raw diff, refresh the page, it should appear on the cleaner diff

  7. Add a comment on the cleaner diff, refresh the page, it should appear on the raw diff

  8. Create an MR from branch_with_change into main

  9. Navigate to the MR, ensure only the cleaner version is displayed: image

    • Note that the lines numbers are not in order, they represent now lines on the source files.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #346764 (closed)

Edited by Eduardo Bonet

Merge request reports