IDEA: Show me a visual DIFF of schema mismatches

[warrenbuckley]

Describe your idea

Not sure if this is feedback for the cloud team or the deploy product (guessing Deploy)

Problem

Started using Cloud again this week and haven't used it in a long time...
Been doing a first content deploy from my LOCAL to DEV and getting a schema mismatch 😭

Its for something that I don't think I have touched IMO - the in built out of the box data type Upload Video
Regardless I get the schema mismatch error telling me the configuration is different.

Idea

It would be good to get a diff style view of the two environments of this JSON UDA file then I could try and understand what is different and diagnose the problem easier.

Original Error

Crude sketch

Context

Help me self diagnose schema mismatch errors by showing a visual diff of the two environments.
I might be able to understand easily or quickly what went wrong.

[warrenbuckley]

Monaco Editor (VSCode engine) is part of the CMS backoffice these days in certain places AFAIK.
Perhaps use Monaco to display the visual diff?

https://microsoft.github.io/monaco-editor/
https://microsoft.github.io/monaco-editor/playground.html?source=v0.54.0#example-creating-the-diffeditor-multi-line-example

Or consider a new dependency?

https://diff2html.xyz/

https://diff2html.xyz/demo?matching=none&matchWordsThreshold=0.25&maxLineLengthHighlight=10000&diffStyle=word&colorScheme=dark&renderNothingWhenEmpty=0&matchingMaxComparisons=2500&maxLineSizeInBlockForComparison=200&outputFormat=side-by-side&drawFileList=1&synchronisedScroll=1&highlight=1&fileListToggle=1&fileListStartVisible=0&highlightLanguages=[object%20Map]&smartSelection=1&fileContentToggle=1&stickyFileHeaders=1&diff=https://github.com/rtfpessoa/diff2html/pull/106

https://praneshravi.in/react-diff-viewer/

https://github.com/benjamine/jsondiffpatch