Code editor / syntax highlighting in secrets editor

[tvtr04]

Feature description

It would be really cool if user would be able to have some small code editor / IDE in the secrets editor in infisical’s website.
For example, when editing JSON secret:

• Adding new keys/lines will have auto-indentation (instead of manually adding spaces now).
• If you don’t close a bracket, the secret editor will highlight in red that you have syntax error.

Why would it be useful?

Some of the secrets are not just plain text, they can be a JSON object, or an XML.
Currently if you want to edit it, you have to copy the secret to an IDE, edit it and than copy back to the infisical’s website.
Having small editing capabilities will allow users to edit secrets more conveniently and it will be a great UX improvement.

Additional context

This change shouldn't be complicated, you just need to replace the editing component in the frontend to a library that supports code editing, for example: react-simple-code-editor (https://www.npmjs.com/package/react-simple-code-editor) or any other package.

[FurquanAnwer]

Can I work on this ?

[user-64bit]

Hey @maidul98

I was looking into this issue and got one question.
is it good idea to add toggle between SecretInput(or InfisicalSecretInput) and something like codemirror for JSON support?

I was thinking something like below image. (clicking on JSON icon toggle between SecretInput and <CodeMirror />)

[MohitGupta14]

Hi @maidul98 / @sheensantoscapadngan 👋, I’d love to take this issue.

I’ve explored integrating the Monaco code editor to improve the secrets editing experience.
Here’s a short demo video of my initial attempt: Loom Recording.

Please let me know what you think .
If this approach looks good, I’d be happy to open a PR to implement it fully.

[MohitGupta14]

Just pushed the PR—happy to hear any thoughts whenever there's a chance

[akhilmhdh]

Moving this to discussion of ui and ux. Given that secret value is a sensitive component, we are looking into various options.

I'll notify our design lead on this and we will try to address this in our upcoming revamps for dashboard. Feel free to share your thought process in this thread.