Config UI: evcc.yaml editor

[naltatis]

Integrate in-browse editing of evcc.yaml as a temporary solution until Config UI is done.

Depends on ~#9812 (layout, restart, dirty),~ #11732 (security)

Changes

• ✏️ make evcc.yaml editable through config ui
• 🔐 only possible with authentication
• 🧪 removed experimental flag from "configuration" page. now only some features (vehicles, meters, ...) are hidden but not the complete page any more. yaml editor will be available as non-experimental
• 🔴🟢 edit > restart > test cycle on one page for faster iteration when making changes to yaml
• 🕸️ this feature will be removed once we've ported all configuration over to browser form based entry

Todo

• [ ] secure API for loading/saving yaml (depends on #11732)
• [ ] no editor when evcc has no r/w permissions
• [x] workflow: save -> restart -> error/success
• [x] Decision: how does it relate to startup error page?
• [x] use breadcrumb for back navigaton (home / config / editor)
• [x] textarea fallback (no internet) https://github.com/imguolao/monaco-vue/issues/47
• [ ] add e2e tests

Video

https://github.com/evcc-io/evcc/assets/152287/28fb4817-badb-4e12-b1aa-4ed852b6f1d2

Screenshots

Light

Dark

Dark Error

Dark Success

[StefanSchoof]

Very cool. How does this affect the asset size? Is there a need to do some chunking and lazy loading to load the editor only when needed?

[naltatis]

@StefanSchoof the vue-monaco-editor library must be included as a Vue plugin. I had lazy-install on route change working for the config editor page. But this is quite messy in Vue. Now it's installed globally which is a lot easier. To good thing about this library is, thats its a very thin wrapper around Monaco. It only adds a few kb of js to the binary. The editor itself is quite mighty and heavy but the wrapper loads the acutal source from a CDN. See:

app.use(VueMonacoEditorPlugin, {
  paths: { vs: "https://cdn.jsdelivr.net/npm/[email protected]/min/vs" },
});

I'm usually a big fan of self-contained software and not relying on third-party infrastructure, but in this case, I think the tradeoff is ok, since the user gets VSCode-grade syntax highlighting and folding. One thing I've just added to the todo list: make sure it also works in a no-internet situation: textarea-fallback.

[cschlipf]

Can I disable the editor (e.g. in the config) in case I do not want to expose this to anyone, who has access to EVCC? After all it's also possible to execute binaries throught he script plugin on the server, if someone can modify the evcc.yaml. A possible pretty big security issue.

In general the more editing capabilities the UI gets, the more we might need an authentication for a privileged user.

EDIT: Just saw #11732