Update styling of code editor

[jnwright]

Overview of issue

The code editor currently in the UI (used for key-value entries and ACL policy entries) does not match our design system styling:

• The language selector should be moved to a toolbar that includes a copy button and a title of what is being edited.
• The editor does not resize correctly on wider screens.

Desired styling

Key/Value

ACL Policies

Figma file

[jkirschner-hashicorp]

Hello Consul community members,

We would welcome a PR contributed by the community for this UI enhancement!

If you're interested, please comment here so anyone interested can stay informed.

The task

• Fix the code editor styling for...
  • key-value entries (visible when the Code toggle is set)
  • ACL policies
• Style changes include
  • Fix the resizing behavior (on wider screens)
  • Add the copy to clipboard button
  • Inject a label (e.g., "Value" for key-value and "Rules" for ACL policies) into the toolbar
  • Keep the code toggle above the code editor as shown in the screenshots
  • Key-Value only: Move the language selector from the bottom to the top toolbar (as shown in the screenshot), then remove the bottom toolbar. Dropdown options include JSON, HCL, and YAML.
  • ACL Policies only: Include the "(HCL Format)" text and informational link icon. This link should go to https://learn.hashicorp.com/tutorials/consul/access-control-setup-production#rule-specification.

Getting started with Consul UI development
To launch the UI in development mode, follow the directions in the UI readme.

When running the development app (make start), any changes you save in the website source files will be recompiled and reloaded in your browser pages pointed at the app (e.g., http://localhost:4200/ui/).

Please name your branch according to these guidelines to ensure that the PR you submit triggers CI execution of the frontend test suite.

Accessing the KV code editor
You should be able to access the key-value screen at http://localhost:4200/ui/dc1/kv. The UI should be pre-populated with some key-value entries, but if not, you can create one using the blue button on the top-right of the page. Click on a KV entry to access the edit screen (with the code editor).

Accessing the ACL policy editor
By default, ACL policies cannot be accessed in development mode (notice that the "Policies" entry in the left-side nav menu is disabled).

To change that, click "Eng Docs" in the top-right menu. Open up the console on your browser (e.g., Chrome Developer Tools). On the new page that opens, click "Docs > Debug/EngineeringUtilities" in the left-side nav bar. In the link/bookmarklet list, drag "Enable ACLs" to your bookmarks bar, then click it. Alternatively, you can enter Scenario('CONSUL_ACLS_ENABLE=1') directly in the browser console.

Now, if you reload the UI, you should see a "Login" button in the top-right nav. Click on that and enter something (anything) on the "log in to Consul" modal. Now that you're logged in with a fake token, the "Policies" entry in the left-side menu should be enabled. Click the "Policies" item, then click on any policy in the list to access its edit screen.

Now you have access to an ACL policy code editor in your dev environment and can test changes you make to the code.

[jkirschner-hashicorp]

Note: this task touches the same components as another Hacktoberfest issue (#11223)

[johncowen]

@jkirschner-hashicorp ideally we would keep this one and close the other, otherwise someone might work on the other one (11223) which would only get overwritten by potential work here. Even if someone did 11223 and nobody worked on this one, I would assume internally we would eventually work on this one ourselves - for example, I know there's a feature in the works that we've discussed doing that is related to this smaller task.

[jkirschner-hashicorp]

Merged this task with #11223. Closing #11223.

[deblasis]

Hi there,
I would like to fix this issue, I have never used Ember so it sounds like a great opportunity to check it out 🔍
I had a quick look and I have a few questions:

1. What is the expected behaviour for the "wider screen resizing"? Shall we stretch to fill the page consistently with the other parts of the UI? I don't want to make assumptions, the current width has been capped for routes that are create or edit via UI: Feature: ui css refactor #4430 and then the code editor (CodeMirror component) received similar width capping with ui: Adds multi syntax linting to the code editor #4814 so I wouldn't want to cause regressions. Also, maybe irrelevant, but Vault centres content instead of stretching it.
2. What about smaller resolutions? Can I safely assume that it should behave as it stands?
3. How can I get access to the Figma design? So far I have been fiddling with the code and while being inspired by copying Vault styling for the toolbar I got to this (still WIP!):
   
   Ember sounds quite intuitive, I am pretty happy that the copy button works already even if I have an issue with component styling that I am not raising yet since I don't want to go OT too much, perhaps I'll ask for help later on unless I figure out in the meantime.
4. Is there already a component with the desired styling for the "code mode" (JSON, HCL, YAML) dropdown? I remember seeing that dropdown somewhere but I can't remember where. Perhaps I could get that from the design 🤔

Cheers!

[johncowen]

Hi @deblasis 👋

Thanks for giving this a look! Looks like you are almost there :yay: Could you make a PR with where you are at the moment and we can discuss on that PR?

Thanks,

[deblasis]

Hi @johncowen!
sure, here it is: #11474

Looking forward to your comments and I hope I won't steal too much of your time with my newbienessnessness.
I literally opened the Ember website for the first time this morning.