Skip to content

Jdb/refactor diff html tables to use css grid

Justin Boyson requested to merge jdb/refactor-diff-html-tables-take3 into master

What does this MR do?

For: #236075 (closed)

⚠ Make sure to read these notes!

Due to the size and complexity of this MR, I have split the changes up across multiple commits. Please refer to the commits to get a better understanding of what has changed and (hopefully) why.

This MR is adding a new layout for rendering diff lines that does not use HTML tables. This will allow us to move to a single set of components for both views (inline and side-by-side) as opposed to the multiple duplicated components (inline and parallel) that we currently have.

The first several commits are all refactoring the existing inline and parallel components move the HTML table markup into the "row" components. The idea here is to leave all of the "cell" components' guts intact so that we can extract them into non-table based components with little or no duplication.

Next is creating the new CSS grid components and duplicating the scss that relates to diff line rendering, then modifying the scss to work with the CSS grid as opposed to tables. When we are finished the grid components should appear identical to their table counterparts.

Lastly, we will add a feature flag to allow enabling this new layout per project and comment on all of the components that reference the table based styling to inform future contributors that this is being "deprecated".

Screenshots

n/a

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Edited by Justin Boyson

Merge request reports