New UI - imporve JSON format screen real-estate

[giladsh1]

Old UI or New UI
New UI

Describe the problem you're having
When setting the JSON format to ON, the new UI shows a black edit box with rich text (which is great).
The current layout of this edit box is very small, and doesn't use the screen real-estate.
I'm aware of many users which use consul-template to store large JSON files in consul KV (as a single key for simplicity), and the current UI makes it hard to view and edit long JSON files.

Describe the solution you'd like
I would like to see a large edit box for viewing and editing keys in JSON view.

[johncowen]

Hi @giladsh1

I think #4218 is a similar issue to this one, which is specific to the height of the code editing area. An addition for this has been PR'ed and merged here #4242 .

The addition makes the code editor area grow vertically as you type/enter text into it. Short term this should improve matters for you, but the team also chatted about taking this further and providing a 'handle' to manually drag the code editor open so things are as close to a native text area as possible, I can update you here as soon as we have any more news on this.

Partly related to this is #4138 and a PR/merge here #4160 which has changed the single line input field for values when not using the code editor to a larger text area with a native draggable handle, of course ideally we'd like to add a handle to the code editor also.

I'm not sure if its relevant here, but the team is also discussing approaches to a more 'full screen experiences', basically using more of the available browser viewport area (highlighted here #4116 (comment), and in other places). This could potentially also give you more 'width' when editing large values in the KV store.

Thanks,

[johncowen]

Hi @giladsh1

I'm not sure if you've been able to upgrade to the 1.2.0 release we released last week, but the 1.2.0 included a fix (that you can also see on the https://demo.consul.io/ demo site) that automatically grows the Code Editor box as you type/copy text into it.

I'm guessing this solves your specific issue of requiring more space whilst editing using the Code Editor, if so could you let me know and I can close this issue (or feel free to close this issue yourself)

Further down the line, we are also discussing making more use of the screen real-estate horizontally across the entire UI, which we are also tracking in other issues.

Thanks,

[giladsh1]

Hi @johncowen
I've already upgraded to 1.2, and that release solves this issue.
There are, however some other issues with this "code view", such as text selection highlight, a weird text box split and #4256 I've already opened for missing JSON validation.
I'll open an additional issues for those if necessary.

Thanks for the update.

[johncowen]

Hey @giladsh1 ,

Perfect thanks for that. FYI validation is on our radar, but we want to make sure we don't just restrict it to JSON - that we offer other validation also. We have been discussing whether we should try to detect the format automatically, or make it a manual thing via UI element (so choose validation format from a dropdown or radio or something).

Text selection here is a good one to call out, a more contrasting color would be better. I've taken note of this, but feel free to open another issue if you want. Other than that, I'm interested in the 'weird text box split' thing you mention.

Is the above what you are referring to?

Thanks again for your input on this!

[giladsh1]

hey @johncowen
no, I'm referring to this bug -

[johncowen]

Oh wow, that's a bit crazy! Could I get the platform/browser version info you are running on? Is there anything in particular you do to make this happen?

[giladsh1]

This issue is always visible when using the "code view" - in the first blank line...

consul is running on CentOS Linux release 7.4.1708.
I'm using Chrome Version 67.0.3396.99 (Official Build) (64-bit)