Trap sidebar links when page has a dirty editor

[karwosts]

Proposed change

If automation editor is dirty, ask for a confirmation before following through any of the sidebar links.

I'll frequently edit an automation and want to hop over into devtools to test some template or check some state, only to realize a moment later that I've lost all my unsaved changes without warning.

I used a sessionStorage for this, though I'm not sure if that's the correct way to implement this kind of global lock or not.

Only added it to automation editor for the moment, but if we like it as a proof of concept should probably also be added to scripts, scenes, card editors, view editors, etc.

Type of change

• [ ] Dependency upgrade
• [ ] Bugfix (non-breaking change which fixes an issue)
• [x] New feature (thank you!)
• [ ] Breaking change (fix/feature causing existing functionality to break)
• [ ] Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• [x] The code change is tested and works locally.
• [x] There is no commented out code in this PR.
• [ ] Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• [ ] Documentation added/updated for www.home-assistant.io

[silamon]

Very conceptual idea: I would implement this as an abstract class, let's say LitElementWithUnload, then let the HaAutomationEditor implement that. LitElementWithUnload should be responsible for knowing if the page is dirty at the moment you want to leave the page. It should also be responsible for showing the confirm dialog. Then in the HassRouterPage where the routing between urls in handled internally, check the element of instance LitElementWithUnload we're replacing and show the dialog. If the dialog is cancelled, return early and stay on the page. If that would work, we would just have to replace LitElement with LitElementWithUnload to have a page show a confirm dialog on leave.

[karwosts]

Sounds like it might be a neat idea but it's a little technically confusing to me, I'm not so familiar with routers and what they do.

I do notice that if I return early from the update function of the hass-page-router it does appear to stay on the current page as desired, but the browser still acts as if it has moved on to the new page (the URL bar shows the new page we prevented loading, and it populates a new history item). Maybe that can be mitigated, but I'm not sure of the details.

[silamon]

I'll see if I can put that idea into proof of concept code.

[silamon]

I can't seem to let this work in the lit framework. It's quite hard to catch it whenever the page is being destructed since it destructs top down starting with the general config page layout, then as a child the automation picker and editor, but then it's too late to trap it and show a dialog.

[github-actions[bot]]

There hasn't been any activity on this pull request recently. This pull request has been automatically marked as stale because of that and will be closed if no further activity occurs within 7 days. Thank you for your contributions.