add .toml support for kv

[KaymeKaydex]

Many people store configuration files in toml format and it will be useful to add support for this format

[jkirschner-hashicorp]

Hi @KaymeKaydex,

I see this is your first post on Consul - welcome to the community!

Can you clarify what you mean by "support .toml format"? Do you mean supporting syntax highlighting for TOML-formatted values when viewing KV in the Consul GUI? Or something else?

[KaymeKaydex]

yes, that's what I mean

[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

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

[Ghvstcode]

Hi @jkirschner-hashicorp! I created a PR for this. https://github.com/hashicorp/consul/pull/13089

[sriramr98]

Hi @jkirschner-hashicorp . Can I pick this up as I see that the old PR raised for this has been closed?