feat: use IDs in arrays for more semantic version diff

[philipp-tailor]

What?

For arrays, where every entry has an id, use the id to track the movement of elements when computing the version diff. This means that e.g. deleting an entry in the middle, or adding an entry in the middle no longer causes all following array elements to be shown as fully changed, making the version diff easier to read for humans (see screenshots below for how diffs would render now).

Arrays where (some) entries lack the id are compared as before, by index.

Version diff in array where elements have id when a new entry is created in 1st place:

status quo

Version diff in array where elements have id when the first entry is deleted:

status quo

Version diff in array where elements have id when a new entry is created in the middle:

status quo

Version diff in array where elements have id when an entry is deleted in the middle:

status quo

Version diff in array where elements have id when an an entry is added at the end:

Version diff in array where elements have id when an entry is deleted at the end:

Why?

Makes version diff easier to parse for humans, because only changed parts are highlighted.

Possible Follow-Ups

This change is an improvement, but the diff could be even more human readable: Right now, when an array element is removed, the version diff only shows properties that were set as removed, not the whole element. Likewise, when an element is moved to a different place in the array, there's no indicator that the element was merely moved, not 1 element removed, and 1 element added. So the "labelling" of rows in the version diff could still be more semantic.

How?

packages/next/src/views/Version/RenderFieldsToDiff/buildVersionFields.tsx checks whether all elements of an array field, both in the comparison and the new version contain an id property. If that's not the case, the current, index-based code path is used. But if it is the case, the new utility packages/next/src/views/Version/RenderFieldsToDiff/utilities/getArrayElementIdsInComparisonOrder.ts is called to get the union of all array element IDs in a reasonable order, which is used to iteratively call buildVersionFields with the comparisonSiblingData of the array element with the matching id property (if existing).