Improve the JSON editor

[spgandhi]

Currently the JSON editor to add a new variant to a flag is very primitive. I personally have use case where the json can be long. So there should at leash be a capability to expand the editor area. I believe that should be very easy with native HTML textbox.

Other advanced features that I think would be great addition is the ability to prettify and also be able to use tabs.

If there is more interest in these features, happy to create a PR

[ivarconr]

The JSON editor is indeed a bit limited today.
I think it would be fantastic if you have the time and ability to provide a PR. Maybe break it up in two steps?

[spgandhi]

I just created a PR - #4463. This is only a small fix to make the textarea resizeable.

Next, I am thinking that working with JSON should be like how developers with in IDEs - should be able to use tabs, should be able to prettify, etc. Depending on how advanced we want to go, there are multiple options

1. with a lot of features - https://github.com/josdejong/jsoneditor - this library seems to be quite popular with a lot of github stars. We can pick and choose what functionality we want. And then style things to look like Unleash
2. I looked at Firebase and they use CodeMIrror - https://codemirror.net/ - for json data in RemoteConfig. We can build a wrapper around code mirror
3. Although instead of CodeMirror, I like HighlightJS - https://highlightjs.org/. Recently this has become more popular than CodeMirror and is super light weight compared to CodeMirror.

Any thoughts? More ideas?

[ivarconr]

Hi again @spgandhi, thanks for looking in to the matter (and sorry for my somewhat slow response)

The biggest concern I have is the size of these libraries. JSONEditor, which is an actual editor is about 280kB of data (minimized, gzipped) which seems quite a lot, given most users will not do JSON editing. HighlightJS is much leaner (~48kB), but is suspect thats just highlighting and not actual editing?

A solution can be to lazy load a json editor. Would we have a pattern for this already in Unleash @FredrikOseberg?

[FredrikOseberg]

Hi again @spgandhi, thanks for looking in to the matter (and sorry for my somewhat slow response)

The biggest concern I have is the size of these libraries. JSONEditor, which is an actual editor is about 280kB of data (minimized, gzipped) which seems quite a lot, given most users will not do JSON editing. HighlightJS is much leaner (~48kB), but is suspect thats just highlighting and not actual editing?

A solution can be to lazy load a json editor. Would we have a pattern for this already in Unleash @FredrikOseberg?

Indeed. We have multiple large libraries that we only load if needed. Currently this pattern can be observed mainly on the route level where we lazily load some components to alleviate the initial network load. Examples are: LazyProject, LazyPlayground or the Network component. Ideally, I would prefer if this component was only loaded if you selected JSON from the dropdown in the UI. We actually use codemirror in playground, which is why we chose to lazy load it.

[spgandhi]

I think all of this makes sense. I think lazy loading the library when users select "JSON" payload type in the dropdown should be easy. Especially with React.

Looking more into the JSONEditor package, I was able to test it out quickly. Here is a preview - https://recordit.co/huGwGnxV4G. There is still some work to be done - one of them being that errors should not show which the user is typing - so either debounce it by 2-3 seconds or only show errors when the user unfocuses from the input.

This is built using https://www.npmjs.com/package/vanilla-jsoneditor and passing props to be able to hide menu bar and keep it minimal.

Let me know what you guys think

[FredrikOseberg]

Looks nice! Would ideally like to reduce the content jumping if possible (the error message makes the content jump around a lot). If we can lazy load this so it's not included in the main bundle I'm all for it.

[spgandhi]

Here's the draft PR - #4784 and this is the final preview - https://recordit.co/p4Px9DNUIC

Regarding the error block jumping, I tried to customize the behavior following some issue threads on the package github issues, but doesn't look like there is a very straightforward way to do it.

I finally decided to just hide it for 2 reasons -

• There is already inline error markings in the editor itself and when you hover over the marking it shows more info
• For an app like Unleash, I think this level of error is enough and the big error block (that even shows as you are typing) is perhaps not needed

I had to used CSS to hide the block. There is perhaps no prop that you can pass to hide that block - at least I could not find anything from their github readme.

Let me know what you think of the PR. Looking forward to getting this merged soon! I think our team would love this feature :)

[daveleek]

Thank you for your contribution @spgandhi! I'm closing this topic now that this has been merged, but feel free to open another or an issue later should you want/need to discuss further!