Adds option to toggle between raw and cleaner diffs
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
Commit Page:
Before | ||
After | Raw Selected: | Cleaner Selected: |
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 | ||
After |
How to set up and validate locally
-
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
-
Enable the feature flag
:rendered_diffs_viewer
-
Open the commit
2352a32d5b88ff26ee348798e7cbaef047176ce6
(http://gdk.test:3000/<path-to-mirror>/-/commit/2352a32d5b88ff26ee348798e7cbaef047176ce6
) -
On the right side of each file, a new toggle allows switching between raw and cleaner diffs
-
Clicking on the toggle shows the clear diff
-
Add a comment on the raw diff, refresh the page, it should appear on the cleaner diff
-
Add a comment on the cleaner diff, refresh the page, it should appear on the raw diff
-
Create an MR from
branch_with_change
intomain
-
Navigate to the MR, ensure only the cleaner version is displayed:
- 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.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #346764 (closed)