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

Add TOML syntax highlighting as an option for the Key-Value editor
- The TOML option should be placed at the bottom of the format dropdown (after JSON, HCL, YAML, XML)
- Use the codemirror TOML mode for the syntax highlighting (which is already a dependency of the repo).
  - This mode doesn't require any configuration parameters (unlike XML - which did need additional config params).
In the PR description, paste an image of what the results of your work look like!
TOML mode option must be available in the interface for both:
- Key-Value creation (image below shows how XML syntax highlight support was added to the GUI)
- Key-Value editing

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).

Implementation guidance
Follow the example of the PR which added XML syntax highlighting to KV entries (via the CoreMirror Code Editor component).

Supporting syntax highlighting for TOML-formatted values when viewing KV in the Consul GUI #12668

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions