[Content Manager] Add the new JSONInput from the DS to the CM

[markkaylor]

What does it do?

• Replaces the current json input component with the one migrated to the design system
• Removes the old json input from the monorepo

Why is it needed?

• To completely replace the old input

How to test it?

• Open a content-type with a JSON field
• You should see the new JSONInput
• It should behave the same as the old input
  • The input should be editable
  • When incorrect JSON syntax is detected the errors should be highlighted
  • When submitting the form with incorrect JSON you should get an error message on the input
  • When the input is marked as required in the CTB and the form is submitted without any input there should be an error

[gu-stav]

I can't tell you how happy this makes me :D Thank you. Thank you. Thank you.

Would you mind adding a test to GenericInput to prove it renders the JSONInput for json fields?

[gu-stav]

@maevalienard Should we use that moment to align the JSON Input to our 4point grid? :) Would you have input on how we could improve these values?

[maevalienard]

We can make it:

minHeight={pxToRem(252)}
maxHeight={pxToRem(504)}

[codecov]

Codecov Report

Base: 58.60% // Head: 59.12% // Increases project coverage by +0.51% 🎉

Coverage data is based on head (83a980f) compared to base (a3ff110).
Patch has no changes to coverable lines.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #15606      +/-   ##
==========================================
+ Coverage   58.60%   59.12%   +0.51%     
==========================================
  Files        1507     1502       -5     
  Lines       38696    38273     -423     
  Branches     7462     7357     -105     
==========================================
- Hits        22679    22627      -52     
+ Misses      13696    13378     -318     
+ Partials     2321     2268      -53     

Flag	Coverage Δ
back	47.35% <ø> (+0.02%)	⬆️
front	67.12% <ø> (+1.00%)	⬆️
unit_back	47.35% <ø> (+0.02%)	⬆️
unit_front	67.12% <ø> (+1.00%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...min/src/content-manager/components/Inputs/index.js	15.92% <ø> (-0.74%)	⬇️
packages/core/data-transfer/src/engine/index.ts	90.81% <0.00%> (-0.28%)	⬇️
...e/data-transfer/src/file/providers/source/index.ts	34.61% <0.00%> (-0.04%)	⬇️
packages/core/data-transfer/src/utils/json.ts	100.00% <0.00%> (ø)
...dmin/admin/src/translations/languageNativeNames.js	100.00% <0.00%> (ø)
packages/core/utils/lib/pipe-async.js
packages/core/utils/lib/async.js	92.85% <0.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[joshuaellis]

Thanks Mark!! 🤩

Same as Gustav, but have a tick.

[maevalienard]

Looks great to me! I feel like we just have a small border-radius issue here:

The background doesn't seem to fit the border properly in the corners :)

[markkaylor]

Looks great to me! I feel like we just have a small border-radius issue here:

That's a bummer, I had noticed that a while back and thought I had fixed it. Guess not. I'll open a PR in the DS. Thanks!

[gu-stav]

Could you please remove all dependencies associated with the JSON input from the dependencies?

[markkaylor]

Hey @gu-stav I don't think there are any dependencies I can remove since Editor still uses codemirror, I checked for anything else but let me know if you spotted something I missed

[gu-stav]

You are right - sorry. I didn't know we were using codemirror there too. Looks good to me then! 👍🏼